过去学习的部分知识记录
前端入门-HTML+八股文
- 一. Web骨架
- 二.块级元素、行内元素以及行内块元素
- 三.文本格式化标签
- 四. 练习案例
- 五 . HTML5
- 六、HTML八股文
- 1.` src` 与 `href` 的区别？
- 2. 对HTML语义化的理解
- 3. `script` 标签中 `defer` 和 `async`的区别
- 4. HTML5有哪些更新？
- 5. 行内元素、块元素、空元素有哪些？
- 6. `DOCTYPE` 的作用？
- 7. 常见的 `meta` 标签有哪些？
- 8. 说一下 `web worker`
- 9 .`head` 标签有什么用？其中什么标签必不可少？
- 10.`canvas` 和 `svg` 的区别？
- 11. `title` 和 `h1` 、`b` 和`strong` 、`i` 和 `em` 的区别？
- 12. `img`的`srcset` 属性的作用
- 13. HTML5的离线存储怎么使用，它的工作原理是什么？
- 14. 渐进渐强和优雅降级的区别
- 15. 文档声明`<DOCTYPE>` 和`<!DOCTYPE html>` 有何通？严格模式和混杂模式如何区分？他们有什么意义？
- 16. `label` 标签的作用是什么？如何使用？
- 17.浏览器是如何对HTML5的离线存储资源进行管理和加载？
- 18.说一下HTML5 `drag API`
- 19. 浏览器乱码的原因？如何解决？
- 20. `iframe` 有哪些优点和缺点？
一. Web骨架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>告诉浏览器文档类型和版本，比如这个就是告诉浏览器咱是H5<html lang="en">指定页面语言，告诉浏览器咱用的英语meta元信息- 配置
HTML文档的基本信息，如描述、关键字、作者等。 <meta charset="UTF-8">使用UTF-8字符编码，它包括了世界上几乎所有的字符和符号<meta http-equiv="X-UA-Compatible" content="IE=edge">用于处理IE浏览器的兼容性问题，告诉浏览器用最高版本的IE浏览器来渲染页面<meta name="viewport" content="width=device-width, initial-scale=1.0">主要用来适配，不同机器视图容器宽高不一样，这里配置页面的初始视图宽高为设备的视图宽高，也就是content="width=device-width;并且初始化的缩放是1，也就是保持原型
- 配置
二.块级元素、行内元素以及行内块元素
-
块级元素
<address>：定义文档或文章的联系信息。<article>：定义独立的自包含文章，一般与section一起用。<aside>：定义与页面内容相关的侧边栏内容。<blockquote>：定义长的引用。<canvas>：用于绘制图形、图像、动画等。<dd>：定义列表中项目的描述。<div>：定义文档中的一个区域或节（division/section）。<dl>：定义一个描述列表（description list）。<dt>：定义一个描述列表中项目的术语名称（term）。<fieldset>：将表单内相关元素分组，使其成为逻辑单元。<figcaption>：为<figure>元素添加标题。<figure>：用于组合一些媒体内容并对其进行标记，如图像、图表、照片、代码等等。<footer>：定义文档或节的页脚部分或结束部分。<form>：用于创建 HTML 表单供用户输入数据。<h1>~<h6>：定义标题。<h1>为最高级别，<h6>为最低级别。<header>：定义文档或节的页眉部分或开头部分。<hr>：用于在 HTML 页面中创建水平线。<li> (仅限于在列表中使用)：定义无序列表或有序列表中的项目。<main>：表示文档主要内容,hensh。<nav>：表示导航链接部分。<noscript>：在浏览器不支持脚本时显示替代内容。<ol> (有序列表)：定义有序列表。<p> (段落)：定义段落。<pre> (预格式化文本)：保留空格和换行符，以保持文本文件中原有的格式样式。<section>：表示文档中一个区域或节（division/section）。<table> (表格)：用于创建表格，包括表头、表格行和单元格等组件。textarea: 多行输入
-
行内元素：
<a>: 定义超链接<abbr>: 定义缩写<acronym>: 定义首字母缩写<b>: 定义粗体文本<bdo>: 定义文字方向<big>: 定义大号字体<br>: 定义换行符<button>: 定义按钮<cite>: 定义引用(citation)<code>: 定义计算机代码样式<dfn>: 定义术语(definition)<em>: 定义强调文本(emphasis)<i>: 定义斜体字(text in italic)<img>: 插入图片<input>- button: 按钮
- radio:单选框
- checkbox: 复选框
- color: 颜色选择器
- date: 日期选择器
- datetime-local: 日期时间选择器（无时区）
- email: 邮箱输入框
- file: 文件上传控件
- hidden: 隐藏域
- image: 图片上传控件
- month: 月份选择器
- number: 数字输入框
- password: 密码输入
-
行内块元素：
<img>：用于插入图像。<audio>：用于定义声音内容，比如音乐或其他音频流。<video>：用于定义视频，比如电影片段或其他视频流。<canvas>：用于绘制图形、图像、动画等。<meter>：定义已知范围内的标量测量。<progress>：表示任务的完成进度。<iframe>：定义一个内联框架，用于显示另一个 HTML 页面。<embed>：嵌入外部应用程序或互动内容（插件）。<object>：嵌入外部资源，比如图片、视频、音频、Java applets、ActiveX 控件等。
三.文本格式化标签
- 标题标签
<h1> </h1>(h1~h6都有) 相当于markdom的# - 段落标签
<p></p> - 水平线标签
<hr /> - 换行标签
<br />由break演化而来 - 字体加粗
<b></b>或<strong></strong>- 它们的区别是
strong更注重强调，使用阅读软件阅读文本时，遇到strong会重读
- 它们的区别是
- 字体变斜
<i></i>或<em></em>- 它们的区别是
em有强调语义的意思
- 它们的区别是
- 加删除线
<s></s>或<del></del> - 加下划线
<u></u>或<ins></ins>
四. 练习案例
案例一
源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>
<b>
<i>圆的面积公式是：s = π*r<sup>2</sup></i>
</b>
</p>
<p>
<b>
水和二氧化碳的化学方程式：
</b>
C0<sub>2</sub>+H<sub>2</sub>O = H<sub>2</sub>CO<sub>3</sub>
</p>
<p>
千峰教育的价值观是：<a href="#">初心至善 匠心育人</a>
</p>
<p>
前端培训机构有：
<u>
<b>千峰教育</b>
</u>
和
<del>其它</del>
</p>
</body>
</html>
知识记录
1.i、b和sup
<b>
<i>圆的面积公式是：s = π*r<sup>2</sup></i>
</b>
<!--
b标签加粗作用，双标签
i标签倾斜作用，双标签
sup标签，将内容在上方角落显示
-->
2.sub和p
<p>
<b>
水和二氧化碳的化学方程式：
</b>
C0<sub>2</sub>+H<sub>2</sub>O = H<sub>2</sub>CO<sub>3</sub>
</p>
<!--
P标签是段落标签，他可以自动换行
sub是将内容在下方角落显示
-->
3.u和del
<u>
<b>千峰教育</b>
</u>
和
<del>其它</del>
<!--
u是下划线标签
del是删除线标签
他们都是双标签
-->
案例二
效果图
源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签综合案例</title>
</head>
<body>
<h2 align="center">
<b>综合案例</b>
</h2>
<p>  第一段aaa</p>
<p>  第二段bbb</p>
<p align="center"><img src="伟大1.jpg" width="300px" height="300px"></p>
<h3>费曼斯学习法</h3>
<ol>
<li><a href="">将所学的内容迅速记录到一张纸上</a></li>
<li><a href="">练习教授别人</a></li>
<li><a href="">查漏补缺，找到不足之处</a></li>
<li><a href="">优化及完善</a></li>
</ol>
<h3>小段子</h3>
<ul type="square">
<li>北冥有鱼，其名为鲲</li>
<li>鲲之大，一锅炖不下</li>
<li>化而为鸟，其名为鹏</li>
<li>鹏之大，需要两个烧烤架</li>
<li>一个秘制，一个麻辣</li>
<li>来瓶雪花，帮你勇闯天涯</li>
</ul>
<h3>图文混排</h3>
<img src="伟大1.jpg" width="200px" height="200px">
<dl>
<dt>电影名称：《我和我的祖国》</dt>
<dd>领携主演：xx</dd>
<dd>导演:xx</dd>
<dd>类型：剧情</dd>
</dl>
</body>
</html>
知识记录
1.列表
<!-- 有序列表 -->
<h3>费曼斯学习法</h3>
<ol>
<li><a href="">将所学的内容迅速记录到一张纸上</a></li>
<li><a href="">练习教授别人</a></li>
<li><a href="">查漏补缺，找到不足之处</a></li>
<li><a href="">优化及完善</a></li>
</ol>
<!--
ol 和 li组成有序列表，都是双标签
这里的a标签是跳转的标签，即点击就跳转到href的地址
-->
<!-- 无序列表 -->
<ul type="square">
<li>北冥有鱼，其名为鲲</li>
<li>鲲之大，一锅炖不下</li>
<li>化而为鸟，其名为鹏</li>
<li>鹏之大，需要两个烧烤架</li>
<li>一个秘制，一个麻辣</li>
<li>来瓶雪花，帮你勇闯天涯</li>
</ul>
<!--
ul和li组成了无序列表
其中type是定义无序列表前面的符号，有disc,circle,square和none四个值，
分别对应实心圆，空心圆，实心方块，空
-->
2.自定义列表
<dl>
<dt>电影名称：《我和我的祖国》</dt>
<dd>领携主演：xx</dd>
<dd>导演:xx</dd>
<dd>类型：剧情</dd>
</dl>
<!--
他由dl、dt、dd组成。都是双标签
-->
案例三
效果图
源码
<!DOCTYPE html>
<html>
<head>
<title>表格案例</title>
</head>
<body>
<table width="600" height="400" border="1" align="center" cellspacing="0" cellpadding="15" bgcolor="#cde7ed">
<caption>阿里职位薪资</caption>
<colgroup span="1" bgcolor="#91c5d4"></colgroup>
<tr>
<th rowspan="2">序号</th>
<th colspan="6">技术岗与管理岗的职级薪资</th>
</tr>
<tr>
<th>P序列</th>
<th>P级名称</th>
<th>M序列</th>
<th>M级名称</th>
<th>薪资</th>
<th>股票</th>
</tr>
<tr>
<th>1</th>
<td>P6</td>
<td>资深工程师</td>
<td>M1</td>
<td>主管</td>
<td>20W-35W</td>
<td>几乎不授予</td>
</tr>
<tr>
<th>2</th>
<td>P7</td>
<td>技术专家</td>
<td>M2</td>
<td>经理</td>
<td>30W-50W</td>
<td>2400股</td>
</tr>
<tr>
<th>3</th>
<td>P8</td>
<td>高级专家</td>
<td>M3</td>
<td>高级经理</td>
<td>45W-80W</td>
<td>6400股</td>
</tr>
<tr>
<th>4</th>
<td>P9</td>
<td>资深专家</td>
<td>M4</td>
<td>总监</td>
<td>80W-100W</td>
<td>16000股</td>
</tr>
<tr>
<th>5</th>
<td>P10</td>
<td>研究员</td>
<td>M5</td>
<td>高级总监</td>
<td>150W+</td>
<td>20000股</td>
</tr>
<tr>
<th>说明</th>
<td colspan="6">P-Profession M-Manage,马云在阿里的级别是M10</td>
</tr>
</table>
</body>
</html>
知识记录
1.table 标签
<table width="600" height="400" border="1" align="center" cellspacing="0" cellpadding="15" bgcolor="#cde7ed">
</table>
<!-- 表格标签，可以设置整个表格的宽高，而后他回根据表格数量平均分配
border是指表格线框，数值的大小决定了线的粗细程度。
align是水平方向的对齐方式，有left、right和center三个值
cellspacing是指单元格与单元格之间的间距
cellpadding是指单元格中的内容与单元格左边边框的间距
bgcolor 背景颜色
-->
2.caption
<caption>阿里职位薪资</caption>
<!-- 它是整个表格的标题 -->
3.colgroup
<colgroup span="1" bgcolor="#91c5d4"></colgroup>
<!-- 把列分组，span的值表示分组的列的数量
在这里它是把整个第一列分成了一组，并且他们的背景色是深蓝色
-->
4.tr、td、th
<tr>
<th>1</th>
<td>P6</td>
</tr>
<!-- tr是表示一行，td是这一行的一个单元格，相当于这一行有几个td就有几列 ，但是一个表格他的列数应该是相同的。除此之外，th就是把单元格的内容加粗表示了。-->
5.合并单元格
<tr>
<th rowspan="2">序号</th>
<th colspan="6">技术岗与管理岗的职级薪资</th>
</tr>
<tr>
<th>P序列</th>
<th>P级名称</th>
<th>M序列</th>
<th>M级名称</th>
<th>薪资</th>
<th>股票</th>
</tr>
<!-- 合并单元格可以区分为横向合并和纵向合并
首先这整个表格是8行7列的。而这一段只是最上面的2行7列的代码。
横向合并：给单元格弄一个colspan,也就是把这一行的不同单元格合并，colspan的值表示当前单元格列的数量，而后我们只需要把这一行多余的数量删除就可以了。
比如这里，本来是1行7列，现在代码变成了1行2列，因为第二个单元格赋值了colspan=6，也就是说实际上第二列是将同一行的6个单元格合并了。
纵向合并：rowspan，和上面是同样的道理，rowspan表示的是这个单元格有多少行，比如上面是2，那就是两行，同样它是第一列的单元格，所以我们只需要把下一行的第一列的单元格删除，就可以了。
-->
案例四
效果图
源码
<!DOCTYPE html>
<html>
<head>
<title>表单综合案例</title>
</head>
<body>
<h1 align="center">社区疫情流调信息表</h1>
<p>  请大家做好个人防护，如去过风险地区，请及时向社区和公司报备；如果您的身体状况出现异常（如出现新冠典型症状，如发热、咳嗽等），请及时上报异常情况，并按照通知前往指定医院进行核酸检测，在去的路上要戴好口罩，做好个人防护，等待检测结果期间请勿前往人多汇集的地方。</p>
<form action="https://baidu.com/" target="_blank">
<fieldset>
<legend>基本信息</legend>
<h4>1.您的姓名</h4>
<input type="text" name="">
<br>
<h4>2.您的手机号</h4>
<input type="text" name="" value="176****9962" readonly>
<br>
<h4>3.您的性别</h4>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender" disabled>保密
<br>
<h4>4.家庭地址</h4>
<select>
<option>==省/直辖市==</option>
</select>
<select>
<option>==市/区==</option>
</select>
<select>
<option>==县==</option>
</select>
<select>
<option>==乡==</option>
</select>
<br>
<textarea cols="65" rows="4">详细地址</textarea>
<br>
<h4>5.您现在的身体状况</h4>
<input type="checkbox" name="">健康<br>
<input type="checkbox" name="">发热<br>
<input type="checkbox" name="">干咳<br>
<input type="checkbox" name="">乏力<br>
<input type="checkbox" name="">呼吸困难<br>
<h4>6.您的健康码颜色目前是</h4>
<input type="radio" name="hcolor">绿色
<input type="radio" name="hcolor">黄色
<input type="radio" name="hcolor">红色
<br>
<h4>7.您是否在14天内有过中高风险地区旅居史，或与确诊人员有过较为密切的接触？</h4>
<input type="radio" name="hcolor">是
<input type="radio" name="hcolor">否
<br>
<h4>8.疫苗接种情况</h4>
<input type="radio" name="vac">已接种第一针
<input type="radio" name="vac">已接种第二针
<input type="radio" name="vac">已接种第三针
</fieldset>
<fieldset>
<legend>保密信息</legend>
<h4>1.身份证信息</h4>
正面：<input type="file" name="">
<br>
反面：<input type="file" name="">
<br>
<h4>2.学历信息（最高）</h4>
<select>
<option>小学</option>
<option>初中</option>
<option>高中</option>
<option>大专</option>
<option>本科</option>
<option>硕士</option>
<option>博士</option>
<option>博士后</option>
</select>
<br>
<h4>3.是否服兵役</h4>
<input type="radio" name="soldier" id="yes"><label for="yes">是</label>
<input type="radio" name="soldier" id="no"><label for="no">否</label>
<br>
<h4>4.个人意见</h4>
<textarea cols="60" rows="4"></textarea>
</fieldset>
<input type="submit" name="" value="上传信息">
<input type="reset" name="" value="清空信息">
<input type="image" src="../HTML基础标签/伟大1.jpg" width="50px" height="70px">
</form>
</body>
</html>
知识记录
1.form标签
表单标签，一般放在最外层,可以有action，target两个属性
其中action是整个表单提交的地址；target有两个值，分别是_self和
_blank,区别是在不保存本页面和保存本页面的信息
<form action="https://baidu.com/" target="_blank">
2.表单分组
就是实现一个框框和一个标题吧
<fieldset>一个分组
<legend>
组名
</legend>
</fieldaset>
3.单行输入框
<h4>1.您的姓名</h4>
<input type="text" name=""> <!--可以任意输入的-->
<br>
<h4>2.您的手机号</h4>
<input type="text" name="" value="176****9962" readonly>
<!--value属性给了输入框一个默认值，readonly属性让这个输入框只有读的权限，用户不能修改-->
4.多行输入框
<textarea cols="65" rows="4">详细地址</textarea>
<!--其中cols是指最多显示多少列，rows就是最多显示多少行-->
5.单选框
<h4>3.您的性别</h4>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender" disabled>保密
<br>
<!-- 单选框是radio，同时还需要把所有的单选分成同一个name，这样他在所有的name中只会有一个有效选择 -->
6.多选框
<h4>5.您现在的身体状况</h4>
<input type="checkbox" name="">健康<br>
<input type="checkbox" name="">发热<br>
<input type="checkbox" name="">干咳<br>
<input type="checkbox" name="">乏力<br>
<input type="checkbox" name="">呼吸困难<br>
<!-- checkbox属性，注意他不会换行-->
7.下拉菜单
<h4>2.学历信息（最高）</h4>
<select>
<option>小学</option>
<option>初中</option>
<option>高中</option>
<option>大专</option>
<option>本科</option>
<option>硕士</option>
<option>博士</option>
<option>博士后</option>
</select>
<!-- 显而易见，就是select和option的组合，并且他们都是双标签 -->
8.label标签
<h4>3.是否服兵役</h4>
<input type="radio" name="soldier" id="yes">
<label for="yes">是</label>
<input type="radio" name="soldier" id="no">
<label for="no">否</label>
<br>
<!-- 他的作用是让用户点击文字也有选中效果，但是需要绑定，每一个单选框的id值要对应label中for的值 -->
9.提交按钮
<input type="submit" name="" value="上传信息">
<!-- submit，提交信息的能力，对应form标签里的action的地址
其中button标签默认的值就是submit。
这个按钮显示的名字可以在value里赋值-->
10.重置
<input type="reset" name="" value="清空信息">
<!-- 显而易见，我们只需要改成reset就好了 -->
11.图像按钮
<input type="image" src="../HTML基础标签/伟大1.jpg" width="50px" height="70px">
<!-- 那就是image了，同时告诉他图片的地址，以及可以设置图片的宽高 -->
五 . HTML5
-
1. HTML5新增语义化标签
header整个页面或部分区域的头部footer整个页面或部分区域的底部nav导航栏article文章、帖子、博客、评论等section页面中某段文字，或文章中某段文字aside侧边栏main文档主要内容（IE不支持，WHATWG没有语义） 不用hgroup包裹连续的标题，如果文章主标题、副标题的组合 （W3C将其删除）
关于
article和sectionarticle里面可以有多个sectionsection强调的是分段或分块(里面的文章通常有标题) 比较少用article比section更强调独立性，一块内容如果比较独立、比较完整，应该用article标签
2. H5新增状态标签
-
meter主要用于类似于电量这种，可设置阈值，警告、危险颜色提醒。譬如下面这行代码可以实现手机电量的显示功能，当在20–100时候是绿色，10–19时候是黄色，0–9是红色
<meter max="100" min="0" value="90" low="10" high="20" optimum="90"></meter>max属性，该进度条的最大值min属性，该进度条的最小值value属性，该进度条的当前值low属性，该进度条进入警告区间的阈值high属性，该进度条进入警告区间的阈值optimum属性，最佳值
当上面那行代码没有设置
optimum时候，那么只有10-20是绿色的，其它都是黄色的，没有红色。当设置了最佳值那么就会有绿、黄、红三种状态。并且在包含optimum的区间为绿色；在low到high之间为黄色，在远离optimum的区间为红色 -
progress进度条标签主要有
max和value两个属性，当value是动态变化的就可以实现进度条的效果了<progress max="100" value="20"></progress>
3. H5新增列表标签
-
datalist用于搜索框输入关键字后的提示将
input标签的list属性与datalist的id绑定即可<form action="#"> <input type="text" list="hoTopic"> <button>搜索</button> </form> <datalist id="hoTopic"> <option value="好开心">好开心</option> <option value="我是谁">我是谁</option> <option value="好好学习">好好学习</option> <option value="天天向上">天天向上</option> <option value="向阳而生">向阳而生</option> </datalist> -
details用于展示问题和答案，或对专有名词进行解释 -
summary写在details里面，用于显示问题，答案通过点击显示<details> <summary>如何进大厂</summary> <p>基础学扎实，多学多练，做项目以学习为目的，不以拿奖or完成为目的</p> </details>
4.H5新增文本标签
-
ruby用于展示汉字与汉字拼音 -
rt用于展示拼音，是ruby的子标签<ruby> <span>耄耋饕餮</span> <rt>mào dié tāo tiè</rt> </ruby> -
mark标记，即嵌套在文本里的，在mark里的文本会显示不同颜色<p>你好啊，要天天<mark>开心</mark>哇，加油</p>
5. H5表单相关新增
- 表单控件属性
-
placeholder输入框提示 用在可输入的标签的中,即input和textarea -
required必须输入，否则会给提示- 用在可输入标签中是必须输入并给出提示
- 用在单选框
radio中是必须在单选框中选择一个 - 用在复选框
checkbox中是必须选择复选框中的某一个
-
autofocus自动获取焦点 -
autocomplete自动完成即点击输入框时会获取用户以前输入过的历史记录，可设置为on或off来打开或关闭，密码输入框和多行输入框不可用 -
pattern填写正则表达式 ，即对输入框内的内容进行正则校验，必须与required一起用，因为当不输入内容时它是无效的。
-
<form action="#"> 账号: <input type="text" name="account" placeholder="请输入账号" required autofocus pattern="\w{8}" autocomplete="on"> <br> 密码: <input type="password" name="pwd" placeholder="请输入密码" required pattern="\w{6}"> <br> 性别: <input type="radio" name="gender" value="male" required> 男 <input type="radio" name="gender" value="female"> 女 <br> 爱好: <input type="checkbox" value="sport" name="hobby" required> 运动 <input type="checkbox" value="play_game" name="hobby"> 游戏 <input type="checkbox" value="music" name="hobby"> 音乐 <br> 其它: <textarea name="other" placeholder="请输入建议" required></textarea> <br> <button>提交</button> </form> -
input新增type值email校验输入的是否为邮箱url校验输入的是否为网址number校验输入的是否为数值step输入数值必须为step的整数倍search搜索，右侧会增加一个×可以直接删除输入的tel移动端，自动弹出拨号的键盘range范围选择器color颜色选择器date日期选择器month月份选择器week周选择器time时间选择器datetime-local选择本地日期、时间
所有相关
input的一些格式校验，若是没有加required限制不能为空的话，那都是没有用的。除此之外，可以在
form标签上增加novalidate属性让格式校验失效<form action="#"> 邮箱:<input type="email" required> <br> 网址:<input type="url" required> <br> 数值: <input type="number" required> <br> step: <input type="number" step="2" required> <br> 搜索: <input type="search" required> <br> 适用于移动端的tel: <input type="tel" required> <br> range: <input type="range" required> <br> color: <input type="color" required> <br> <button>提交</button> </form>
6.H5新增媒体标签
-
video视频标签-
src视频地址 -
controls控制，设置了此标签视频会有一个控制栏 -
muted默认静音 -
autoplay默认自动播放（开启这个必须也要开启默认静音） -
loop循环播放 -
poster值为图片的url地址视频封面 -
preload视频预加载，有auto/metadata/none三个值，auto由浏览器决定；none不进行预加载，包括视频有多长；metadata加载视频的基本信息，比如视频有多长
-
-
audio音频标签src音频地址controls音频控制栏muted默认静音autoplay默认自动播放 （与默认静音一起用的话会无效）loop循环播放preload预加载设置
<video src="" controls muted autoplay loop poster="" preload="metadata"></video> <audio src="" controls loop preload="metadata"></audio>
7. 处理HTML5的兼容性问题
世界“最好的”浏览器 IE浏览器，它的部分版本对H5并不兼容，也就是它不认识这些新标签，譬如IE8
我们可以做以下处置
-
<!-- 在head的源信息部分增加这样一行 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 即告诉浏览器采用最新的IE版本来渲染页面 --> -
我们还可以导入谷歌的html5shiv.js
<!-- 并且在导入的时候可以加一个判断，比如低于IE8才导入 --> <!--[if lt IE 8]> <script src="bower_components/html5shiv/dist/html5shiv.js"></script> <![endif]--> -
还可以用
CSS hack但是它会让代码可读性降低，维护成本增加，不推荐
六、HTML八股文
1. src 与 href 的区别？
src用于替换当前元素，href用于在文档和引用资源之间确定联系
-
srcsrc是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。<script src =”test.js”></script>当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js 脚本放在底部而不是头部。
当然我们也可以用
defer和async来实现加载js时与html文档并行加载 -
hrefhref 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果在文档中添加
<link href=”common.css” rel=”stylesheet”/>那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。 这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式。
2. 对HTML语义化的理解
语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。
- 语义化的优点
- 对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；
- 对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。
- 常见的语义化标签
<header></header>头部<nav></nav>导航栏<section></section>区块（有语义化的div）<main></main>主要区域<article></article>主要内容<aside></aside>侧边栏<footer></footer>底部
3. script 标签中 defer 和 async的区别
如果没有
defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。
如果是
<script defer>标签，那么就会js脚本与html文档并行加载，并在html文档加载完后再执行js脚本。
如果是
<script async>标签，那么js脚本与html文档并行加载，但是与前者不同的是，async在js脚本加载完后会立刻执行。（执行时不能加载html文档）
4. HTML5有哪些更新？
-
语义化标签
header：定义文档的页眉（头部）；nav：定义导航链接的部分；footer：定义文档或节的页脚（底部）；article：定义文章内容；section：定义文档中的节（section、区段）；aside：定义其所处内容之外的内容（侧边栏）；
-
媒体标签
-
audio音频<audio src="" controls autoplay loop="true"></audio> <!-- 其中 controls 控制面板 autoplay 自动播放 loop="true" 循环播放 --> -
video视频<video src="" poster="img/a.jpg" controls></video> <!-- 其中 poster：指定视频还没有完全下载完毕，或者用户还没有点击播放前显示的封面。默认显示当前视频文件的第一帧画面，当然通过poster也可以自己指定。 controls 控制面板 width height --> -
source标签因为浏览器对视频格式支持程度不一样，为了能够兼容不同的浏览器，可以通过source来指定视频源。
<video> <source src="a.flv" type="video/flv"></source> <source src="b.mp4" type="video/mp4"></source> </video>
-
-
表单
- 表单类型
email：能够验证当前输入的邮箱地址是否合法url： 验证URLnumber： 只能输入数字，其他输入不了，而且自带上下增大减小箭头，max属性可以设置为最大值，min可以设置为最小值，value为默认值。search： 输入框后面会给提供一个小叉，可以删除输入的内容，更加人性化。range： 可以提供给一个范围，其中可以设置max和min以及value，其中value属性可以设置为默认值color： 提供了一个颜色拾取器time： 时分秒date： 日期选择年月日datatime： 时间和日期(目前只有Safari支持)datatime-local：日期时间控件week: 周控件month: 月控件
- 表单属性
placeholder：提示信息autofocus：自动获取焦点autocomplete=“on” 或者 autocomplete=“off”使用这个属性需要有两个前提：1.表单必须提交过;2.必须有name属性。required：要求输入框不能为空，必须有值才能够提交。pattern=" "里面写入想要的正则模式，例如手机号patte=“^(+86)?\d{10}$”multiple：可以选择多个文件或者多个邮箱form=" form表单的ID"
- 表单事件
oninput每当input里的输入框内容发生变化都会触发此事件。oninvalid当验证不通过时触发此事件。
- 表单类型
-
进度条、度量器
-
progress标签：用来表示任务的进度（IE、Safari不支持），max用来表示任务的进度的最大值，value表示已完成多少 -
meter属性：用来显示剩余容量或剩余库存（IE、Safari不支持）-
可以用来模拟手机电量
-
high/low：规定被视作高/低的范围 -
max/min：规定最大/小值 -
value：规定当前度量值 -
设置规则：min < low < high < max
-
-
5. 行内元素、块元素、空元素有哪些？
- 行内元素：
a b span img input select strong - 块级元素：
div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p - 空元素
- 即没有内容的
html元素。空元素没有闭合标签 - 常见的：
br hr img input link meta - 少见的：
area base col colgroup command embed keygen param source track wbr
- 即没有内容的
6. DOCTYPE 的作用？
DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档，不同的渲染模式会影响浏览器对CSS代码甚至JavaScript脚本的解析。它必须声明在HTML文档的第一行。
浏览器常见的两种渲染模式
- CSS1Compat：标准模式（Strick mode），默认模式，浏览器使用
W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。 - BackCompat：怪异模式(混杂模式)(Quick mode)，浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。
7. 常见的 meta 标签有哪些？
-
meta标签由name和content属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。-
常见
meta标签-
charset用来描述HTML文档的编码类型<meta charset="UTF-8" /> -
keywords页面关键字<meta name="keywords" content="关键词" /> -
description页面描述<meta name="description" content="页面描述内容" /> -
refresh页面重定向和刷新<meta name="refresh" content="0;url=重定向地址"/> -
viewport适配移动端，可以控制视口大小和比例<meta name="viewport" content="width=device-width,inital-scale=1,maximum-scale=1" /> <!-- 其中content参数有以下几种 width viewport ：宽度(数值/device-width) height viewport ：高度(数值/device-height) initial-scale ：初始缩放比例 maximum-scale ：最大缩放比例 minimum-scale ：最小缩放比例 user-scalable ：是否允许用户缩放(yes/no） --> -
搜索引擎索引方式
<meta name="robots" content="index,follow"/> <!-- 其中，content 参数有以下几种： all：文件将被检索，且页面上的链接可以被查询； none：文件将不被检索，且页面上的链接不可以被查询； index：文件将被检索； follow：页面上的链接可以被查询； noindex：文件将不被检索； nofollow：页面上的链接不可以被查询。 -->
-
-
8. 说一下 web worker
在
HTML页面中，如果在执行脚本时，页面的状态是不可响应的，直到脚本执行完成后，页面才变成可响应。web worker是运行在后台的js，独立于其他脚本，不会影响页面的性能.并且通过postMessage将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。
9 .head 标签有什么用？其中什么标签必不可少？
<head>标签用于定义文档的头部，它是所有头部元素的容器。<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在
head部分：<base>, <link>, <meta>, <script>, <style>, <title>。其中
<title>定义文档的标题，它是head部分中唯一必需的元素。
10.canvas 和 svg 的区别？
-
SVGSVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
特点
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序（比如谷歌地图）
- 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
- 不适合游戏应用
-
CanvasCanvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。
特点
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
注：矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。
11. title 和 h1 、b 和strong 、i 和 em 的区别？
strong标签有语义，是起到加重语气的效果，而b标签是没有的，b标签只是一个简单加粗标签。b标签之间的字符都设为粗体，strong标签加强字符的语气都是通过粗体来实现的，而搜索引擎更侧重strong标签。title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取有很大的影响i内容展示为斜体，em虽然也是斜体但是也表示强调的文本
12. img的srcset 属性的作用
用于对不同的宽度、像素密度来呈现不同的图片格式是图片地址、宽度描述、像素密度描述
<img src="small.jpg" srcset="big.jpg 1440w, middle.jpg 800w, small.jpg 1x" />
13. HTML5的离线存储怎么使用，它的工作原理是什么？
它是基于新建一个
.appcache文件的缓存机制来解析manifest清单的资源
创建一个
manifest文件；而后在html标签中加入manifest属性，值为manifest文件名；manifest是一个存储清单，里面有CACHE、NETWORK和FALLBACK；CACHE中存放要离线存储的文件路径；NETWORK中才告诉浏览器哪些是联网了才能用的文件;FALLBACK表示如果一个资源访问失败了，重定向到一个指定资源。
14. 渐进渐强和优雅降级的区别
渐近渐强是一开始只加载出功能和内容，不会要求特别高的渲染度，然后再根据浏览器的兼容度，慢慢往上渲染。即保证内容和功能的前提下渲染最好的页面。
优雅降级是从一开始就渲染出一个最高等级渲染页面，然后再根据浏览器版本慢慢降低，但是有时候会忽略一些浏览器的小bug
渐近渐强思想更受欢迎
15. 文档声明<DOCTYPE> 和<!DOCTYPE html> 有何通？严格模式和混杂模式如何区分？他们有什么意义？
文档声明
DOCTYPE的作用是是告诉浏览器用什么版本的HTML来解析渲染页面
<!DOCTYPE html>它则是告诉浏览器用严格模式来，并使用最新的HTML5来加载页面，如果不写它会进入使用混杂模式来渲染页面。
严格模式就是标准模式；指W3C万维网联盟颁布的标准；混杂模式也称为怪异模式，指浏览器按照自己的方式来渲染页面，并且浏览器通常因为兼容性，往往会以老浏览器的方式来渲染页面。
区分：网页中的
DTD,一般进行了文档声明的都是标准模式
16. label 标签的作用是什么？如何使用？
它可以让表单与文字关联，比如点击文字也可以达到勾选单选框的效果；一般在input标签上加上一个ID属性，而后通过label的for属性来关联
17.浏览器是如何对HTML5的离线存储资源进行管理和加载？
如果第一次进入网页，则会解析
manifest清单里的文件并下载存储至缓存.appcache中；而后如果不是第一次，则会先看有没有缓存有的话就会先用缓存，并且还会对比缓存中的内容是否与清单中的内容一致，不一致则更新缓存。
18.说一下HTML5 drag API
这是用来处理拖放元素事件
ondragstart拖放前触发ondrag拖放时触发ondragend拖放完成后出发ondragenter拖放进目标元素时候触发ondragover在目标元素内移动时触发ondragleave在移除目标元素时触发ondrop目标元素完全接收拖放元素时触发
19. 浏览器乱码的原因？如何解决？
一般是因为编码方式不同，比如我们编辑器用的GBK编码的话，浏览器渲染就会乱码，因为浏览器一般用的UTF-8；
解决：我们可以检查编码方式是否正确,比如网页设置编码是
UTF-8,但是数据库存储数据编码格式是GBK,此时就需要在查询数据库数据显示数据前进行程序转码。
20. iframe 有哪些优点和缺点？
优点：
可以直接将另一个文本框架显示出来；
可以并行处理多个网页；
便于管理，如果想要修改什么公共的部分，我们可以只修改iframe就达到效果
缺点：
阻塞主页面的onload事件;
无法被SEO搜索;
容易被攻击，著名的XFS攻击就是利用的iframe漏洞;
与主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
1–3月份的一些学习记录，整理出来复习一下，喜欢的还请一键三连呀😁
7455
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
