1.前言

HTML(Hypertext Markup Language 超文本标记语言)
网页大致可以分为结构（HTML）表现（CSS）行为 (JS) (web标准的三个组成)；
元素和标签是一样的，元素就是标签，标签就是元素。一般来说，一个HTML元素都有开始标签和结束标签。这样的标签就叫做双标签。注意：某些HTML元素没有结束标签，只有开始标签(自封闭标签，也叫单标签)。
html中的标签不区分大小写。

2.基础元素

<!DOCTYPE html>
#根标签
<html lang="en">    #这个lang表示语言，zh-CN是中文的意思，就是说，你整个文档的内容以中文为主，如果以英文为主，就写成lang='en'
    #head标签标识文档的头部
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    #body标签标识文档的主体
    <body>
    
    </body>
</html>

对上述内容的解释：

  1. DOCTYPE元素：h5文档声明，声明该网页是按照h5标准写的。独一无二的，都以他为开头。可以注释掉，不影响网页，但是在源代码中还是会显示
  2. 根元素html：lang=en代表语言是英文的
  3. 头元素head
    1. meta元素：可提供有关页面的元信息（meta-information）,针对搜索引擎和更新频度的描述和关键词。
    2. charset属性：编码的，保证不会出现乱码
    3. title元素：标题
  4. body元素：内容都在body元素中输入，面向对象的，网页中输出的标签可以嵌套，但是不可以交叉嵌套
1.head标签内的常用标签：
  1. <title></title> 定义网页标题
  2. 定义内部样式表
  3. 定义JS代码或引入外部JS文件
  4. 引入外部样式表文件 
// 例如：
<link rel="stylesheet" type="text/css" href="https://www.w3cschool.cn/html5/theme.css">
  1. 定义网页原信息
2.meta标签

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

  1. http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性为content，content中的内容其实就是各个参数的变量值。
<!--将页面重定向到另一个网站-->
<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com"> #如果把URL和后面的内容去掉，就是2秒钟刷新一次，这些内容了解一下就行
<!--指定文档的编码类型--> 
<meta http-equiv="content-Type" charset=UTF-8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge"> #edge是微软的一个全新的浏览器,其实就是告诉IE浏览器，你按照最高标准来渲染我的页面，了解一下就可以啦
  1. name属性: 主要用于描述网页，与之对应的属性为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<!--keywords 表示网站的关键字-->
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> #关键字，也就是别人是可以通过这些关键字搜索到我的这个文章的，搜索引擎就是能够这个content内容来帮别人搜索到你的这个文档的
#SEO就是做这个的，就是怎么让你们公司的网站在别人搜索的时候能够靠前显示，不算那个花钱的，百度是充值的，你冲个20w，别人可能一天就给你点击完了，特别的贵
<!--description 用于指定网站的描述-->
<meta name="description" content="xxxxxpythonxxx学习">  #是对这个文档的描述，在百度一些内容的页面上，f12打开看看

image.png
3. charset属性：指定网页的字符集

标签中几个重要的属性：

  1. id:用于区分页面上相同的标签
  2. class:为html元素定义一个或多个类名（classname）(CSS样式类名)
  3. style:规定元素的行内样式（CSS样式）<h1 style="color:red;">举个例子</h1>结果是举个例子这四个字被渲染成红色。

标签中的分类(两类)：

  1. 内敛标签(行内标签，inline element)：不独占一行。如b标签/span/i/u/s/button/img/a/
  2. 块级标签(行外标签，block element)：独占一行。如h1标签~h6标签/hr标签/div/br/p
    注意：内联标签只能嵌套内联标签，而块级标签可以切套某些块级标签和内联标签。p标签不能嵌套p标签，也不能嵌套其他块级标签。

3.body中的元素

  1. h1标签：一级标题，将文字以较大的形式输出（还有h2—h6，字体逐渐变小）
  2. p标签：表示一个段落，一个标签独占一行，自动换行
  3. b标签：粗体
  4. em元素和i元素：斜体 （前者强调语气，后者不强调）
  5. strong元素：粗体（强调内容）对于H5中规定，对于不需要着重的内容而是单纯的加粗或者是斜体就可以用b和i标签
  6. small标签：H5中使用small标签来表示一些细则一类的内容，比如：合同中的小字，网站的版权声明
    small标签的内容会比他的父元素中的文字要小一些
  7. cite标签（网页中所有的加书名号的内容都可以用cite标签，表示参考的内容）
  8. q标签（表示一个短的引用 即行内引用，q标签引用的内容，浏览器默认会加上引号）
  9. blockquote标签（表示一个长引用即块级引用 ）
  10. sup标签（表示上标）
  11. sub标签（表示下标）
  12. del标签（表示一个删除的内容，del标签中的内容，会自己添加删除线）
  13. ins标签（ins内容会自动添加下划线）
    需要页面中直接编写一些代码，pre是一个预格式标签，会将代码的格式保存，不会忽略多个空格，code专门用来表示代码，我们一般结合使用pre和code来表示一段代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Title</title>
</head>
<body>
    <p>2<sup>2</sup></p>
    <p>H<sub>2</sub>o</p>
    <p><del>19.99</del></p>
</body>
</html>

image.png

  1. u元素：下划线(但是HTML5不推荐使用)
  2. s元素：文字中间有一道线
  3. hr标签（自结束标签，生成一条水平线）
<!DOCTYPE html>
<html lang = 'en'>
<head>
    <meta charset="utf-8">
    <title>Title</title>
</head>
<body>
    <p><s>a</s></p>
    <hr/>
</body>
</html>

image.png

  1. 实体（一些特殊元素不能直接使用，例如大于号之类的，因为与标签冲突，所以一般用一些特殊符号表示，这些特殊符号称为实体，又叫转义字符串）
    1. < &lt；
    2. 大于号： &gt；
    3. 空格 &nbsp；在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格
    4. 版权符号：&copy；
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
</head>
<body>
    a &lt; b
    <br/>
    &copy;微软公司
</body>
</html>

image.png

  1. a标签：构成超链接,后面href属性代表所链接的url，可以访问本地项目中的资源（如html等），也可以访问外部资源；
    1. target属性用于指定超链接打开的位置，其值有_blank和_self等；_blank:构成的url点击后以新的窗口打开。_self即默认属性，就是在当前网页中进行打开url。（超链接可以用#做占位符，可以跳转到顶部。href属性使用#目标元素的id属性值跳转到页面的指定位置，在开发中可以将#作为超链接的路径的占位符使用 ）
<!DOCTYPE html>
<html lan = 'en'>
<head>
    <meta charset = 'utf-8'>
    <title>Title</title>
</head>
<body>
    
    <a href="#bottom">去底部</a>
    <a href = 'http://www.baidu.com' target="_self">百度一下</a>
    <!--给图像加超链接-->
    <a href = "https://www.baidu.com/"><img src = timg.gif /></a>
    <!--跳转到顶部-->
    <a id="bottom" href="#">回到顶部</a>
    <!--javascript:;作为href的属性，此时点击这个超链接什么也不会发生-->
    <a href="javascript:;">这是一个新的超链接</a>
</body>
</html>
  1. table 元素 （表格元素）：展示数据
    1. tr元素:代表着表格中的一行（表格行）；可以嵌套着td元素，代表着一个单元格（表格单元）
    2. th元素：标题，字体加粗，且居中（表头的单元格）
    3. border属性：边框属性，但是不推荐使用，后面可以跟1px，代表着1像素。
    4. colspan：拆分单元格，用来合并列;
    5. rowspan：拆分单元格，用来合并行;
    6. width属性：宽度
    7. bgcolor:背景色
    8. align:对齐方式
    9. thead元素：定义表格的表头
    10. tbody元素：定义表格中的主体内容
    11. tfoot元素：定义表格中的表注内容（脚注即表格的底部）
<!DOCTYPE html>
<html lan = 'en'>
<head>
    <meta charset="utf-8">
    <title>Title</title>
</head>
<body>
    <table border="1px">
        <!--表格中有两行，每行有三个单元格-->
        <tr>
            <td>AAA</td>
            <td>BBB</td>
            <td>CCC</td>
        </tr>
        <tr>
            <td>aaa</td>
            <td>bbb</td>
            <td>ccc</td>
        </tr>
    <!--表格中的第三行，合并列-->
        <tr>
            <td>aaa</td>
            <td colspan="2">ccc</td>
        </tr>
    <!--合并行-->
        <tr>
            <td rowspan="2">AAA</td>
            <td>BBB</td>
            <td>CCC</td>
        </tr>
        <tr>
            <td>bbb</td>
            <td>ccc</td>
        </tr>
    </table>
</body>
</html>

image.png

<!DOCTYPE html>
<html lang = 'en'>
<head>
    <meta charset = 'utf-8'>
    <title>Title</title>
</head>
<body>
    <table border = '1px'>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>爱好</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Jack</td>
                <td>23</td>
                <td>打乒乓</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

image.png

继续：capture元素定义表格标题，例如<capture>学生信息表</capture>
20. 列表元素（li：表示列表中的项）（有序列表和无序列表可以互相嵌套）
1. 有序列表ol（默认升序，可以进行嵌套的，在一个有序列表中可以嵌套多个有序列表，从而实现标题的整齐）。ol的reversed属性：可以实现列表降序排列.type属性：可以改变排序的前标，是123还是ABC都可以选择
2. 无序列表（ul）顺序用黑点排列（由于每个浏览器的符号大小不一样，所以我们一般都不用默认的符号，用css中ul的list-type的none去掉）ul和ol都是块元素

<!DOCTYPE html>
<html lang = 'en'>
<head>
    <meta charset="utf-8">
    <title>Title</title>
</head>
<body>
<!--默认按照数字升序的有序列表-->
    <ol>人按照性别可以分为几种人？
        <li>男人</li>
        <li>女人</li>
        <li>人妖</li>
    </ol>
<!--降序的有序列表-->
    <ol reversed>人按照性别可以分为几种人？
        <li>男人</li>
        <li>女人</li>
        <li>人妖</li>
    </ol>
<!--改变排序的前标-->
    <ol type = 'A'>关于本道题说法正确的是():
        <li>xxx</li>
        <li>ccc</li>
        <li>vvv</li>
        <li>bbb</li>

    </ol>
<!--无序列表-->
    <ul>人按照性别可以分为几种人？
        <li>男人</li>
        <li>女人</li>
        <li>人妖</li>
    </ul>
</body>
</html>

image.png

  1. 标题列表（dl dd dt来创建一个定义列表）：就像大纲一样，有层级效果。
    dl有两个子标签，dt为被定义的内容，dd是对定义内容的描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <!--dl:definition list-->
        <dl>
            <dt>中国</dt>
            <!--dd可以有多个-->
            <dd>最强大的国家</dd>
            <dt>俄罗斯</dt>
            <dd>面积最大的国家</dd>
        </dl>
</body>
</html>

image.png
22. 表单元素即form元素（用户可以自己输入东西进去，就相当于填写账号密码的那种），用于定义范围，范围代表采集用户数据的范围。其主要属性有：
1. method属性:指定提交方式
一共有七种提交方式： 1.get(常用)：请求参数会在地址栏中显示；请求参数长度有限制；不太安全 2.post(常用)：请求参数不会再地址栏中显示，会封装在请求体中。请求参数的长度没限制；较为安全
2. action属性:指定提交数据的URL.当提交表单时，填写的内容将会提交到action指定的地址
<!-- form的action属性指定表单项的数据提交到执行的URL--> <form action = "www.baidu.com"> <!-- 表单项中的数据要想被提交，需要name属性--> 账号：<input type = "text" name="user"/><br/> 密码：<input type = "text" name="passward"/><br/> <input type = "submit" value="登录" /> </form> <!-- 定义在表单元素form外的元素不会被提交--> 男<input type = "radio">
3. textarea元素(文本域)，其属性有cols,rows
4. datalist属性

  1. input元素（单行文本框，有29种属性）其主要的属性有：
    1. type属性（默认值就是text）
    text:表示常规文本输入，就是一个文本框用于用户输入
radio:定义单选按钮输入，选择多个选择之一。
    注意事项：1.要想让多个单选框实现单选的效果，则多个单选框的name属性需要一样
    2. 一般会给每一个单选框提供一个value属性，指定当前单选框被选中后提交的值。
    3. checked属性可以提供默认选项（复选框类似的道理）
submit：一个提交按钮（提交表单），其value属性设置提交按钮上的文本
passward:密码输入框
checkbox:复选框
file：文件选择框
hidden：隐藏域，用于提交信息
button：一个普通按钮。使用button创建的按钮和input创建的按钮功能一致。
    只不过button标签更加的灵活。
    <button type="submit">提交按钮</button>
	<button type="reset">重置</button>
	<button type="button">单纯的按钮</button>
image：图片提交按钮，src属性指定图片的路径
reset：重置按钮，可以将表单恢复到默认值
    1. value属性（占位符，自动填充上所写的字）：可以为文本框提供一个默认值。
    2. placeholder属性（不占文本框位置的，就相当于那个密码账号的提示，没点进去之前是暗的，点进去会没）
    3. maxlength属性（最大字符数，超过就输不进去）
    4. size属性（拓宽单行文本框，文本框显示所规定的字符数）
    5. readonly属性（只读）
    6. 属性type中password为值 （placeholder）实现以黑点形式出现
    7. 属性type中button为值（按钮属性）
    8. type中range属性（数字滑动块 ）
    9. max:滑块最大值
    10. min:滑块最小值
    11. step:每次滑动的距离
    12. value：起始的位置，默认为0，在滑表的中间
    13. type中number属性(可以手动输入的，可以调节大小的值)
    14. type中checkbox属性（相当于打对勾的功能，只有选择才能传输到服务器中去，传送到服务器上是布尔型）
    15. type中radio属性（和checkbox功能一样，但是这个选择后就不能取消了，生成一组固定选项）
    16. name属性，当多个选项出现时，由name选项可以实现三选一的效果
    17. checked属性，默认一个选项
    18. input的hidden属性隐藏某些东西，但是在提交表单中还是会显示，value输入值
    19. input的image属性实现图片按钮功能，导入图片，src属性代表地址的选择，width代表图片的宽度
    20. multiple属性：可以上传多个文件
    21. required属性：必须上传一个文件
    22. label属性
      image.png
  2. select元素（可以进行选择，但是不可以自己输入）:option是select的子元素，用于指定列表项
  3. option元素：下拉列表中的可供选择的项。
    1. selected属性：属性值为selected表示设置默认选中
省份：<select name = "province">
  <option value="">请选择</option>
  <option value="1">北京</option>
  <option value="2">广东</option>
  <option value="3">上海</option>
</select>

image.png

<!-- 创建一个表单 -->
<form action="target.html" method="get">
	<!-- 文本输入框 -->
	用户名<input type="text" placeholder="请输入用户名"/><br/>
	
	<!-- 密码框 -->
	密码<input type="password" placeholder="请输入密码"><br/>
	
	<!-- 单选按钮 -->
	性别<input type="radio" name="gender" value="男"/>
	<input type="radio" name="gender" value="女" checked="checked"/><br/>
	
	<!-- 复选框 -->
	爱好<input type="checkbox" name="hobby" value="唱歌"/>
	<input type="checkbox" name="hobby" value="跳舞" checked="checked"/>
	<input type="checkbox" name="hobby" value="学习" checked="checked"/><br/>
	
	<!-- 下拉列表 -->
	你最喜欢的明星<select name="star">
		<option value="lisi">李斯</option>
		<option value="wbq">王宝强</option>
		<option value="zzd" selected="selected">甄子丹</option>
	</select><br/>
	
	<!-- 注册按钮 -->
	<input type="submit" value="注册按钮"/><br/>
	
	<!-- 提交按钮 -->
	<input type="reset" value="重置按钮">
</form>

image.png

  1. datalist元素(实现选择，类似是select，但是这个可以自己输入，不过要用id引导)用id引导后，用input元素中的list属性来进行引导
<!DOCTYPE html>
<html lang = 'en'>
<head>
    <meta charset="utf-8">
    <title>Title</title>
</head>
<body>
<!--input标签使用text属性/value属性，input即单行文本框
    type属性（默认值就是text）
    value属性（占位符，自动填充上所写的字）-->
    <form>
        <input type="text" value="搜索网页">
    </form>
<!--placeholder属性（不占文本框位置的，就相当于那个密码账号的提示，没点进去之前是暗的，点进去会没）-->
    <form>
        <input type = 'text' placeholder="密码">
    </form>
<!--maxlength属性（最大字符数，超过就输不进去）-->
    <form>
        <input type = 'text' maxlength="8">
    </form>
<!--属性type中值为password-->
    <form>
        <input type = 'password' placeholder="密码" maxlength="16">
    </form>
<!--type中值为button-->
    <form>
        <input type = 'button'>
    </form>
<!--type中值为submit(即提交按钮)-->
    <form>
        <input type = 'submit'>
    </form>
<!--type中值为range（数字滑动块）-->
    <form>
        <input type = 'range' step="1" max="100" min="0" value="0">
    </form>
<!--type中number属性(可以手动输入的，可以调节大小的值)-->
    <form>
        <input type="number" min="0" max="100" value="0">
    </form>
<!--type中checkbox属性（相当于打对勾的功能，只有选择才能传输到服务器中去，传送到服务器上是布尔型）-->
    <form>
        <input  type="checkbox" >
    </form>
<!--type中radio属性（和checkbox功能一样，但是这个选择后就不能取消了，生成一组固定选项）
name属性，当多个选项出现时，由name选项可以实现三选一的效果-->
    <form>你最喜欢的水果
        <br/>
        <input type="radio" name="a">苹果
        <input type="radio" name="a">葡萄
        <input type="radio" name="a">芒果
    </form>
<!--checked属性，默认一个选项-->
    <form>你最喜欢的水果
        <br/>
        <input type="radio" name="a" checked>苹果
        <input type="radio" name="a">葡萄
        <input type="radio" name="a">芒果
    </form>
<!--select元素（可以进行选择，但是不可以自己输入）
option元素：可供选择的项-->
    <select>
       <option>香蕉</option>
       <option>橙子</option>
       <option>西瓜</option>
   </select>
<!--datalist元素(实现选择，类似是select，但是这个可以自己输入，不过要用id引导)
用id引导后，用input元素中的list属性来进行引导-->
    <form>你最喜欢的水果
    <input type="text" list="1">
        <datalist id="1">
            <option>香蕉</option>
            <option>西瓜</option>
            <option>橙子</option>
        </datalist>
    </form>
<!--type中的data值-->
    <form>
        <input type="date">
    </form>
<!--type中的color值-->
    <form>
        <input type="color">
    </form>
<!--type的image值-->
    <form>
        <input type="image" src="E:\pythonProject\屏幕截图(1).png"  width="180px">
    </form>
<!--type中的file按钮上传文件
multiple属性：可以上传多个文件
required属性：必须上传一个文件-->
    <form>
        <input type="file" multiple>
    </form>

</body>
</html>

image.png

  1. img标签
    img标签即图片标签，引入外部图片，src属性可以指定图片的地址，也就是指定图片路径。width属性是宽度，height属性是高度（一般开发不设置这两个，设置了图片可能会失真），alt属性是一个必需的属性，它规定在图像无法显示时的替代文本（当图片找不到时候，会出现alt备用的内容，搜索引擎会通过alt属性来识别不同的图片，如果没有alt属性，搜索引擎不会对img图片进行收录）

img标签的title属性：鼠标放在图片上显示的文字

#img标签和a标签相结合构成图片，可以点击图片进入url
<!DOCTYPE html>
<heml lang = 'en'>
<head>
    <meta charset="utf-8">
    <title>Title</title>
</head>
<body>
    <a href = 'http://www.baidu.com' target="_blank">
        <img src="./屏幕截图(1).png" alt="这是一张截图">
    </a>
</body>
</heml>
  1. video元素中基本属性
    1. src：视频地址
    2. height：视频高度
    3. width：宽度大小
    4. autoplay：自动播放
    5. contros：播放控制键
    6. preload：预先载入视频
    7. none：不会载入视频。
    8. metadata：只载入第一帧。
    9. auto：请求下载整个视频，默认行为。
    10. loop：循环播放。
    11. poster：视频载入时显示图片，视频的封面。
<video controls >
	<source src="./source/flower.mp4">
</video>

  1. source元素：设置视频格式的元素，包括src(设置地址和type(设置格式)属性

  2. audio元素(插入音频，音视频文件引入时，默认情况下不允许用户自己控制播放停止)

    1. src：音频地址
    2. autoplay：音频文件是否自动播放
    3. controls：是否允许用户控制播放,音量，是否播放还有播放进度条。
    4. loop：音乐是否循环播放
    5. source作为audio的子标签来指定音频文件的路径
<audio src="./source/audio.mp3" controls autoplay loop></audio>

<audio controls>
    <!--不支持audio标签的低版本浏览器则显示下面文字-->
    对不起，您的浏览器不支持播放音频，请升级浏览器！
    <source src="./source/audio.mp3">
</audio>
  1. br（break）标签：换行
  2. div标签：用来布局的，一行只能一个div。每队div标签中的内容都可以占据一行（块级标签中可以使用块级标签和行内标签，包括span标签）
  3. span标签：用来布局的，一行可以多个span。span标签会和其他标签元素会在一行显示，块级标签除外（行内标签）div和span标签很常用。
span标签的宽度、高度都无法通过css样式设置，它的宽高受其本身内容（文字、图片）控制，随着内容的宽高改变而改变；span标签无法控制外边距和内边距，虽然可以设置左右的外边距和内边距，但上下的外边距和内边距无法设置。
且，span标签里只能容纳文本或者是其他的行内元素，不能容纳块级元素。
  1. 注释标签：
  2. 铆接链接：
创建铆接链接分为两步：
1.使用相应的id名标注跳转的目标位置
<h1 id = "two">跳转的目标位置</h1>
2.使用<a href = "#id名">链接文本</a>
<a href = "#two"></a>
  1. pre标签：预格式化文本，按照预先写好的格式显示文本，保留空格和换行等。
  2. center标签：文字居中显示
  3. 一些结构化语义标签(布局标签)
header 表示网页的头部
main 表示网页的主体部分(一个页面中只会有一个main)
footer 表示网页的底部
nav 表示网页中的导航
aside 和主体相关的其他内容（侧边栏）
article 表示一个独立的文章
section 表示一个独立的区块，上边的标签都不能表示时使用section
  1. iframe标签：表示内联框架，用于在当前页面引入一个其他页面。
    1. src属性：指定要引入的网页的路径
    2. frameborder：指定内联框架的边框
<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

目前学到的自结束标签：

1. <br/>:换行标签
2. <hr/>
3. <img/>