HTML 详解
课程目标
1、HTML 介绍与规范
2、HTML 的使用
3、HTML5新特性
1.HTML介绍 & 规范
1.1 介绍
HTML 指的是超文本标记/标签语言 (Hyper Text Markup Language)
专门制作网页的计算机语言
普通的文本就是英文单词，英文字母一样的存在。
超文本的意思是有一些单词或字母，在网页浏览器的世界中被赋予了特殊的权利。
比如：我们都是普通人，但是有些人经过国家的选拔，穿上警服之后，他就被赋予了执法的特殊权利，
普通人是没有执法权的。
字母img只是普通的字母，没什么特殊的含义。而![任务一：HTML 详解 - 图1]()
被加上尖括号后，在网页的世界中，就具备了
显示图片的作用。
1.2 使用记事本开发第一个网页
在计算机任意的位置，创建一个空白的记事本
重点：文件的后缀名必须是 “htm” 或 “html”
鼠标右键文件，选择打开方式为”记事本”，输入下面代码
<html>
<head>
<title>``拉钩有我``</title>
</head>
<body>
必须火！
</body>
</html>
保存文件，双击文件会以计算机默认的浏览器运行，你的第一个网页就制作完成了！
注意：
1.标签它代表当前页面是一个HTML
2.标签中可以声明HTML页面的相关信息
3.标签中它主要是用于显示页面信息
4.标签要有开始，有结束，成双成对
4.开始标签与结束标签中的内容是标签的内容，如果没有标签内容，可以让标签自关闭
5.大多数标签它具有属性,属性值要使用引号引起来。
6.HTML它本身是不区分大小写的。
1.3 下载和安装 VSCode
记事本编写网页太难了，我们推荐一款编写网页的神器！
1.3.1 下载地址
https://code.visualstudio.com/
1.3.2 初始中文设置
安装vscode之后，在界面的左侧，选择安装中文插件。
点击安装后，右下角会弹出重启的窗口
重启之后，界面就是伟大的中文了。
1.3.3 创建项目
vscode本身没有新建项目的选项，所以要先创建一个空的文件夹，如: vscode目录
然后打开vscode软件，在vscode软件中选择 File -> Open Folder 打开刚才创建的文件夹
右键目录，创建子目录lagou-html，在lagou-html目录下创建文件，输入Test1.html
在代码编辑区，最上面输入！回车，就是见证奇迹的时刻
1.3.4 运行页面
需要安装插件 “open in browser ”
安装完插件，右键想要运行的页面文件，或者 使用快捷键 alt+b
先安装好chrome浏览器
修改默认的浏览器：首页的设置
添加代码
"open-in-browser.default"``:``"chrome"
保存成功后，使用默认浏览器打开页面就是chrome了，当然你也可以修改成自己喜欢的浏览器，比如火狐等
1.3.5 修改软件主题颜色
文件 -> 首选项 -> 颜色主题
字体大小：文件 -> 首选项 -> 设置 -> 文本编辑器 -> 字体
2.HTML的使用
2.1 文件标签
标签： 代表当前书写的是一个HTML文档
标签：存储的本页面的一些重要的信息，它不会显示
标签：有一个子标签
它是用于定义页面的标题的<br /><body>标签：书写的内容会显示出来<br /><body>标签的属性<br />1. text 用于设置文字颜色<br />2. bgcolor 用于设置页面的背景色<br />3. background 用于设置页面的背景图片<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/12458395/1615802043611-d5670d23-54e7-44a6-9cdd-ba65d9fa3281.png#align=left&display=inline&height=138&margin=%5Bobject%20Object%5D&name=image.png&originHeight=276&originWidth=969&size=88355&status=done&style=none&width=484.5" alt="image.png">
<a name="qeev9"></a></p>
<h3 id="c9y3q8"><a name="c9y3q8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.2 排版标签</h3><p><a name="cTNzj"></a></p>
<h4 id="fnn5aq"><a name="fnn5aq" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.2.1 HTML注释</h4><p><img src="https://cdn.nlark.com/yuque/0/2021/png/12458395/1615802186621-e880b55c-67bc-4e90-bfea-e6e5d71fc320.png#align=left&display=inline&height=177&margin=%5Bobject%20Object%5D&name=image.png&originHeight=353&originWidth=1012&size=104450&status=done&style=none&width=506" alt="image.png">
<a name="QieHs"></a></p>
<h4 id="772p2k"><a name="772p2k" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.2.2 换行标签</h4><p><br/> 标签就是一个换行（回车）功能标签，标签中的 / 可有可无的。<br />有/是html语言的标准化，但是html语言是一门不那么严谨的语言
<a name="pWkBf"></a></p>
<h4 id="62hmvo"><a name="62hmvo" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.2.3 段落标签</h4><p>在<p>标签中的内容,会在开始与结束之间产生一个空白行，并且它会自动换行.<br />常用属性 align 它的作用是设置段落中的内容对齐方式 可取值有 left right center<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/12458395/1615802204327-bbb2da62-09af-4e82-931d-c851c650c23a.png#align=left&display=inline&height=156&margin=%5Bobject%20Object%5D&name=image.png&originHeight=311&originWidth=993&size=102782&status=done&style=none&width=496.5" alt="image.png">
<a name="xZ9hb"></a></p>
<h4 id="2kk6eh"><a name="2kk6eh" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.2.4 水平线标签</h4><p><hr>标签会在页面上产生一个水平线<br />对于hr标签它有常用属性:<br />align：可取值有left right center 代表水平线位置<br />size：代表水平线厚度（粗细）<br />width：代表水平线宽度<br />color：水平线的颜色<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/12458395/1615802235249-696246f7-c1f2-4447-8494-74a31c95f1ac.png#align=left&display=inline&height=169&margin=%5Bobject%20Object%5D&name=image.png&originHeight=337&originWidth=1008&size=90674&status=done&style=none&width=504" alt="image.png"><br />单位：size=”5”，5是默认的单位，为”像素”/“像素点”，像素就是构成计算机图片的最小单位！也可以使用百分比，size=”50%”
<a name="FKDdY"></a></p>
<h4 id="az6ofq"><a name="az6ofq" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.2.5 分区标签</h4><p>div是一个<strong>块</strong>标签，用来进行布局的<br />普通的div并没有什么效果，肉眼也看不见，但div与CSS结合，就会更好对页面进行排版<br />div与span都是“容器”的作用，具体区别:<br />div会自动换行，我们也叫这样的标签为块级元素<br />span标签它不会自动换行，我们也叫它为行内元素<br />div：整体划分区块<br />span：局部划分<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/12458395/1615802263567-875cbc94-fd4b-45f6-9662-725630e3165f.png#align=left&display=inline&height=156&margin=%5Bobject%20Object%5D&name=image.png&originHeight=311&originWidth=1014&size=82350&status=done&style=none&width=507" alt="image.png"><br />上图，两个div的区别是显而易见的，后面我们再具体学习css语法
<a name="IIIsQ"></a></p>
<h3 id="5xwl04"><a name="5xwl04" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.3 字体标签</h3><p><a name="WIcWJ"></a></p>
<h4 id="chiyrg"><a name="chiyrg" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.3.1 字体标签</h4><p><font>标签可以设置字体，字的大小及颜色，常用属性：<br />face:用于设置字体，例如 宋体 隶书 楷体<br />size:用于设置字的大小（大小默认设置1-7，7最大，想更大，往后学css即可）<br />color:用于设置字的颜色<br />注：<br />我们所看到的屏幕上所有的颜色都是由红、绿、蓝这三种基色调混合而成的。<br />每一种颜色的饱和度和透明度都是可以变化的，用0～255的数值来表示。如纯红色表示为（255，0， <br />0），十六进制表示为#FF0000。<br />按这种表达方式，理论上我们可以得到256 <em> 256 </em> 256 = 16777216种颜色。<br />1. 使用十六进制方式，取值范围 #000000 ~ #FFFFFF （黑色到白色）。当颜色值为#cc3300 时，可<br />简化成 #c30 这种方式<br /><code><body ``bgcolor``=``"#666"``></code><br />2. RGB颜色表示法：RGB（x,y,z）。x、y、z是0 ～ 255之间的整数。rgb字母大小写无所谓<br /><code><body ``bgcolor``=``"rgb(11,11,11)"``></code><br />（在线颜色选择器： <a rel="nofollow" href="http://www.86y.org/code/colorpicker/color.html">http://www.86y.org/code/colorpicker/color.html</a> ）<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/12458395/1615802347665-d21ccce5-a00a-4a58-a16c-345b0239ea23.png#align=left&display=inline&height=106&margin=%5Bobject%20Object%5D&name=image.png&originHeight=211&originWidth=1010&size=84527&status=done&style=none&width=505" alt="image.png"><br />百度搜索：字魂网，下载一个免费的字体，并安装到计算机中。在我们的网页中显示出来！
<a name="nq4Po"></a></p>
<h4 id="bk1wlp"><a name="bk1wlp" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.3.2 标题标记</h4><p>给一段文字起一个标题<br /><h1> ——- <h6><br />h1最大 h6最小，它们代表的是标题，<br />自动换行，字体加粗，标题与标题之间产生一定的距离<br />注意:在HTML中允许标签进行嵌套的，但是一般都包裹嵌套，而不可以进行交叉嵌套<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/12458395/1615802387016-ccd165ef-ca0a-4637-b7d3-f279090f3681.png#align=left&display=inline&height=290&margin=%5Bobject%20Object%5D&name=image.png&originHeight=580&originWidth=1078&size=179819&status=done&style=none&width=539" alt="image.png">
<a name="FBru2"></a></p>
<h4 id="4s1nc7"><a name="4s1nc7" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.3.3 格式化标签</h4><p><b>：字体加粗<br /><i>：字体倾斜<br /><del>：删除线<br /><u>：下划线<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/12458395/1615802413462-dfe7320b-78ed-4734-8f56-749abf4c811b.png#align=left&display=inline&height=149&margin=%5Bobject%20Object%5D&name=image.png&originHeight=297&originWidth=996&size=97641&status=done&style=none&width=498" alt="image.png">
<a name="3qUNo"></a></p>
<h3 id="6gj3e3"><a name="6gj3e3" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.4 列表标记</h3><p><a name="ICGTB"></a></p>
<h4 id="ce54zb"><a name="ce54zb" class="reference-link"></a><span class="header-link octicon octicon-link"></span>ol：有序列表</h4><p>type=’A’：字母排序<br />type=’I’：罗马排序<br />start=“3” 序列从几开始
<a name="6MpbK"></a></p>
<h4 id="c959ri"><a name="c959ri" class="reference-link"></a><span class="header-link octicon octicon-link"></span>ul：无序列表</h4><p>type=”disc”：默认，实心圆<br />type=”square”：方块<br />type=”circle”：空心圆<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/12458395/1615802581680-9f522056-db26-45be-89f2-b0a63d325aee.png#align=left&display=inline&height=317&margin=%5Bobject%20Object%5D&name=image.png&originHeight=634&originWidth=997&size=169177&status=done&style=none&width=498.5" alt="image.png">
<a name="lnpw4"></a></p>
<h3 id="aejxkn"><a name="aejxkn" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.5 图像标签</h3><p><img>它可以让我们在网页引入一张图片，常用属性：<br />1. src 代表的图片的路径<br />2. width 图片的宽度<br />3. height 图片的高度<br />4. border 用于设置图片的边框<br />5. alt 如果图片不可以显示时，默认显示的文本信息<br />6. title鼠标悬停图片上，默认显示的文本信息<br />7. align 图片附件文字的对齐方式，可取值有<br />left：把图像对齐到左边<br />right：把图像对齐到右边<br />middle：把图像与中央对齐<br />top：把图像与顶部对齐<br />bottom：把图像与底部对齐（默认）<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/12458395/1615802603480-3dc521d2-36df-4d00-9f50-7ef9defcd81a.png#align=left&display=inline&height=248&margin=%5Bobject%20Object%5D&name=image.png&originHeight=495&originWidth=969&size=376900&status=done&style=none&width=484.5" alt="image.png">
<a name="U20vh"></a></p>
<h3 id="mtlzg"><a name="mtlzg" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.6 超连接标签</h3><p><a>标签,可以实现跳转到其它页面操作.<br />超链接内容不仅可以是文本，也可以是图片等信息<br />常用属性: <br />1. href 代表的我们要跳转的路径<br />2. target 这个属性规定在何处打开这个链接文档，可取值：<br /><em> blank 在<strong>新窗口</strong>中打开页面<br /></em> self 默认。在<strong>本窗口</strong>打开页面<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/12458395/1615802624750-5ff7fa09-d26e-4ab8-8905-dd63f1f045ad.png#align=left&display=inline&height=138&margin=%5Bobject%20Object%5D&name=image.png&originHeight=275&originWidth=1014&size=77150&status=done&style=none&width=507" alt="image.png"><br />功能性连接：<br />1.发邮件<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/12458395/1615812423420-162eb9a4-78d7-41ef-aee7-ace61be1fb4f.png#align=left&display=inline&height=43&margin=%5Bobject%20Object%5D&name=image.png&originHeight=85&originWidth=989&size=11800&status=done&style=none&width=494.5" alt="image.png"><br />2.QQ聊天窗口<br /><code><a ``href``=``"tencent://message/?uin=19998539&Menu=yes"``></code><br /><code><img ``border``=``"0" ``src``=``"http://wpa.qq.com/pa?p=1:615050000:7"``/></code><br /><code></a></code></p>
<p><a name="4G1CB"></a></p>
<h3 id="2jijjl"><a name="2jijjl" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.7 表格</h3><p><table>：定义一个表格<br />border：边框，取值是像素为单位<br />width 代表的表格的宽度<br />align 代表表格的对齐方式；取值<br />left 左对齐表格<br />right 右对齐表格<br />center 居中对齐表格<br />cellspacing：单元格间距（通常设置0表示单线表格）<br /><tr>：表格中的行 （Table Row）<br />align 代表表格的对齐方式；取值<br />left 左对齐内容（默认值）<br />right 右对齐内容<br />center 居中对齐内容（th 元素的默认值）<br /><td>：表格中的数据单元格 （Table DataCell）<br />colspan 指示列的合并<br />rowspan 指示行的合并<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/12458395/1615812497032-db0c251a-a2e7-4485-b165-ecf12b6532fb.png#align=left&display=inline&height=116&margin=%5Bobject%20Object%5D&name=image.png&originHeight=231&originWidth=708&size=29314&status=done&style=none&width=354" alt="image.png"><br /><code><table ``border``=``"1" ``width``=``"400px" ``align``=``"center" ``cellspacing``=``"0"``></code><br /><code><tr ``align``=``"center"``></code><br /><code><td ``colspan``=``"3"``>``计划统计表``</td></code><br /><code></tr></code><br /><code><tr></code><br /><code><td ``rowspan``=``"3"``>``收入金额``</td></code><br /><code><td>``5``</td></code><br /><code><td>``6``</td></code><br /><code></tr></code><br /><code><tr></code><br /><code><td>``8``</td></code><br /><code><td>``9``</td></code><br /><code></tr></code><br /><code><tr></code><br /><code><td>``11``</td></code><br /><code><td>``12``</td></code><br /><code></tr></code><br /><code></table></code>
<a name="P3bIW"></a></p>
<h3 id="3rd443"><a name="3rd443" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.8 表单标签</h3><p>表单可以让我们将录入信息携带到服务器端。<br />简单说，通过表单可以将要提交的数据提交到指定的位置。<br />但一个一个的提交，不方便。表单正好解决了这个问题，将所有的数据形成一个整体，一起提交给服务<br />器。<br />常见的 登录页面、注册页面 都离不开表单的应用<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/12458395/1615812567733-dfe5b98f-974c-4a25-8c16-70f9e354db1c.png#align=left&display=inline&height=223&margin=%5Bobject%20Object%5D&name=image.png&originHeight=446&originWidth=466&size=64939&status=done&style=none&width=233" alt="image.png">
<a name="2QJP2"></a></p>
<h4 id="8117jg"><a name="8117jg" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.8.1 form属性</h4><p>action：整个表单提交的目的地<br />method：表单提交的方式<br />get：提交时，传输数据量少（传递普通文字信息，传递照片会失败），明文提交（在浏览器的url后面会显示提交的数据，不适合用于登录）<br />post：提交时，传输数据量大（传递文字和图片都行），密文提交（浏览器的url后面看不到提交的数据）
<a name="iI1OK"></a></p>
<h4 id="fssvhy"><a name="fssvhy" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.8.2 表单中的元素(控件)</h4><p><input>元素的type属性<br />text：默认值，普通的文本输入框<br />placeholder属性：提示文本<br />maxlength属性：最多能输入字符数量<br />password：密码输入框<br />checkbox：多选框/复选框<br />checked：被选中<br />radio：单选按钮<br />file：上传文件<br />reset：重置按钮<br />submit：提交按钮<br />button：普通按钮<br /><select>：下拉列表/下拉框<br /><option>：列表中的项<br />selected：被选中<br /><textarea>：文本域（多行文本框）<br />可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的height<br />和 width 属性。<br /><button>：按钮<br />在form表单中，作用和submit一样<br />不在form表单中，就是普通按钮（配合后期的javascript，可扩展性更高）<br /><code><form ``action``=``"baidu" ``method``=``"GET"``></code><br /><code><p>``帐号：``<input ``name``=``"a" ``type``=``"text" ``placeholder``=``"``请输入帐号``..."</code><br /><code>maxlength``=``"5" ``></p></code><br /><code><p>``密码：``<input ``name``=``"b" ``type``=``"password"``></p></code><br /><code><p>``爱好：</code><br /><code><input ``name``=``"hobby" ``type``=``"checkbox"``> ``抽烟</code><br /><code><input ``name``=``"hobby" ``type``=``"checkbox" ``checked``=``"checked"``> ``喝酒</code><br /><code><input ``name``=``"hobby" ``type``=``"checkbox"``> ``烫头</code><br /><code><input ``name``=``"hobby" ``type``=``"checkbox"``> ``泡澡</code><br /><code></p></code><br /><code><p>``性别：</code><br /><code><input ``type``=``"radio" ``name``=``"sex"``> ``男</code><br /><code><input ``type``=``"radio" ``name``=``"sex" ``checked``=``"checked"``> ``女</code><br /><code></p></code><br /><code><p>``身份：</code><br /><code><input ``type``=``"radio" ``name``=``"role"``> ``ceo</code><br /><code><input ``type``=``"radio" ``name``=``"role"``> ``cto</code><br /><code><input ``type``=``"radio" ``name``=``"role"``> ``coo</code><br /><code><input ``type``=``"radio" ``name``=``"role" ``checked``=``"checked"``> ``ufo</code><br /><code></p></code><br /><code><p>``头像：</code><br /><code><input ``type``=``"file"``></code><br /><code></p></code><br /><code><p>``血型：</code><br /><code><select></code><br /><code><option>``A``型``</option></code><br /><code><option>``B``型``</option></code><br /><code><option>``C``型``</option></code><br /><code><option ``selected``=``"selected"``>``O``型``</option></code><br /><code></select></code><br /><code></p></code><br /><code><p>``个人简介：</code><br /><code><textarea ``cols``=``"10" ``rows``=``"5"``></textarea></code><br /><code></p></code><br /><code><p></code><br /><code><input ``type``=``"reset" ``value``=``"``清空``"``></code><br /><code><input ``type``=``"submit" ``value``=``"``提交``"``></code><br /><code><input ``type``=``"button" ``value``=``"``取消``"``></code><br /><code><button>``保存``</button></code><br /><code></p></code><br /><code></form></code><br /><code><button>``测试``</button></code></p>
<p>注意事项：<br />1. 所有表单中的元素都要具有名称（否则提交到服务器之后，服务器无法区识别多个元素之间的不同）<br />2. 单选框要想可以一次只选择一个，要具有相同的name值 <br />3. 所有的复选框以组为单位，组内的每个复选框都应该具有相同的name值
<a name="AeVfF"></a></p>
<h3 id="8bjpp8"><a name="8bjpp8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.9 框架标签</h3><p>通过<frameset>和<frame>框架标签可以定制HTML页面布局。可以理解为：用多个页面拼装成一个页面。<br />注意，框架标签和body标签不共存。“有你没我，有我没你<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/12458395/1615812921337-668c0576-9578-47dc-8152-46a5df981377.png#align=left&display=inline&height=321&margin=%5Bobject%20Object%5D&name=image.png&originHeight=642&originWidth=990&size=66825&status=done&style=none&width=495" alt="image.png"><br /><code><!DOCTYPE html></code><br /><code><html ``lang``=``"en"``></code><br /><code><head></code><br /><code><meta ``charset``=``"UTF-8"``></code><br /><code><meta ``name``=``"viewport" ``content``=``"width=device-width, initial-scale=1.0"``></code><br /><code><meta ``http-equiv``=``"X-UA-Compatible" ``content``=``"ie=edge"``></code><br /><code><title>``Document``</title></code><br /><code></head></code><br /><code><frameset ``rows``=``"10%,*,13%"``></code><br /><code><frame ``src``=``"top.html"``></frame></code><br /><code><frameset ``cols``=``"15%,*"``></code><br /><code><frame ``src``=``"left.html"``></frame></code><br /><code><frame ``src``=``"right.html"``></frame></code><br /><code></frameset></code><br /><code><frame ``src``=``"foot.html"``></frame></code><br /><code></frameset></code><br /><code></html></code><br />top.html、left.html、right.html、foot.html 四个页面内容一样，稍微改下文字而已，以top.html为例<br /><code><!DOCTYPE html></code><br /><code><html ``lang``=``"en"``></code><br /><code><head></code><br /><code><meta ``charset``=``"UTF-8"``></code><br /><code><meta ``name``=``"viewport" ``content``=``"width=device-width, initial-scale=1.0"``></code><br /><code><meta ``http-equiv``=``"X-UA-Compatible" ``content``=``"ie=edge"``></code><br /><code><title></title></code><br /><code></head></code><br /><code><body></code><br /><code><h1>``顶部导航区域``</h1></code><br /><code></body></code><br /><code></html></code>
<a name="ELlCn"></a></p>
<h3 id="f4h47z"><a name="f4h47z" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.10 其它标签与特殊字符</h3><p><a name="KQghy"></a></p>
<h4 id="avm3os"><a name="avm3os" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.10.1<meta>标签</h4><p><meta>标签必须写在<head>标签之间. <br /><code><meta ``charset``=``"UTF-8"``></code><br /><code><meta ``name``=``"viewport" ``content``=``"width=device-width, initial-scale=1.0"``></code><br /><code><meta ``http-equiv``=``"X-UA-Compatible" ``content``=``"ie=edge"``></code></p>
<ol>
<li>当前页面的字符编码 gbk：中文简体<br />2. 这里 的 名字 是 viewport （显示窗口）<br />数据 是 文本 内容 content=”width=device-width, initial-scale=1.0”<br />也就是 显示窗口 宽度 是 客户端的 屏幕 宽度 （就是 满屏 ！），显示的文字和图形的初始比例 是1.0<br />3. 每个电脑内置的IE版本是不一样的，为了兼容所有的版本以最高级模式渲染文档，也就是任何IE版本都以当前版本所支持的最高级标准模式渲染通过meta标签来设置页面加载后在指定的时间后跳转到指定的页面<br /><code><meta ``http-equiv``=``"refresh" ``content``=``"5; url=http://www.lagou.com"``></code><br />注意：在html中如果跳转的互联网上的网站资源，那么我们在书写路径时，一定要带协议的路径。
<a name="Y9I9f"></a><h4 id="b2h682"><a name="b2h682" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.10.2 <link>标签</h4>后面我们会使用link标签来导入css<br />注意:link标签也必须写在<head>标签中。
<a name="dKAzZ"></a><h4 id="6irw4v"><a name="6irw4v" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.10.3 特殊字符</h4><img src="https://cdn.nlark.com/yuque/0/2021/png/12458395/1615813121935-0c58596a-146d-49b2-b659-0aab76b123de.png#align=left&display=inline&height=441&margin=%5Bobject%20Object%5D&name=image.png&originHeight=591&originWidth=975&size=455417&status=done&style=none&width=728" alt="image.png"><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/12458395/1615813154128-e99ccdad-4813-447a-887b-a4f65ac74406.png#align=left&display=inline&height=545&margin=%5Bobject%20Object%5D&name=image.png&originHeight=545&originWidth=983&size=472980&status=done&style=none&width=983" alt="image.png">
<a name="o9KP3"></a><h2 id="566eqp"><a name="566eqp" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3. HTML5新特性</h2><a name="Dt8DT"></a><h4 id="4m86mw"><a name="4m86mw" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.1 HTML4与HTML5的区别</h4>H5包含h4<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/12458395/1615813199111-3116d83f-7e77-4f9d-8da0-e7a1b5ce8a29.png#align=left&display=inline&height=265&margin=%5Bobject%20Object%5D&name=image.png&originHeight=274&originWidth=468&size=21841&status=done&style=none&width=453" alt="image.png"><br />1. 大小写不敏感(1) 标签<br />(2) 属性<br />(3) 属性的值<br /><code><inPUT ``tYPe``=``"pasSWord"``/></code><br />2. 引号可省略<br /><code><input ``type``=``"password"``></code><br /><code><input ``type``=``password``></code><br />3. 省略了结尾标签<br /><code><p>``哈哈哈哈哈哈哈</code><br /><code><p>``哈哈哈哈哈哈哈</code><br />说是省略，其实运行起来，查看源代码，html是自动帮我们补全了
<a name="Ny5tK"></a><h4 id="7ywfu7"><a name="7ywfu7" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.2 新增语义化标签</h4>html4中，所有的容器标签95%都会使用div，div过多的话，很难区分彼此<br />新增许多语义化标签，让div“见名知意”<br />section标签：表示页面中的内容区域，部分，页面的主体部分<br />article标签：文章<br />aside标签：文章内容之外的，标题<br />header标签：头部，页眉，页面的顶部<br />hgroup标签：内容与标题的组合<br />nav标签：导航<br />figure标签：图文并茂<br />foot：页脚，页面的底部<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/12458395/1615813393966-e4e967e1-77cd-48e6-af45-17b6c5091a59.png#align=left&display=inline&height=308&margin=%5Bobject%20Object%5D&name=image.png&originHeight=400&originWidth=908&size=29623&status=done&style=none&width=700" alt="image.png">
<a name="nflTC"></a><h4 id="1i1cx"><a name="1i1cx" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.3 媒体标签</h4>想在网页上播放视频，就要使用<video>，属性有：<br /><code>src``：媒体资源文件的位置</code><br /><code>controls``：控制面板</code><br /><code><inPUT ``tYPe``=``"pasSWord"``/></code><br /><code><input ``type``=``"password"``></code><br /><code><input ``type``=``password``></code><br /><code><p>``哈哈哈哈哈哈哈</code><br /><code><p>``哈哈哈哈哈哈哈``autoplay``：自动播放（谷歌失效，``360``浏览器可以）</code><br /><code>loop``：循环播放</code><br /><code><video ``src``=``"img/html-css-js``之间的关系``.mp4" ``controls loop autoplay``></video></code></li></ol>
<p><a name="KKhXB"></a></p>
<h4 id="bsje35"><a name="bsje35" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.4 新增表单控件</h4><p>表单的控件更加丰富了<br /><input>，修改type属性：<br />color：调色板<br />date：日历<br />month：月历<br />week：周历<br />number：数值域<br />min：最小值（默认值是1）<br />max：最大值（默认值无上限）<br />step：递增量<br />range：滑块<br />search：搜索框（带×号，可一键删除框中内容）<br />进度条<progress></progress><br />高亮<mark><br />联想输入框<datalist> （模糊查询）<br />选项<option></p>
