这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战
话不多说，直接进入主题
1.H5新特性
- 语义化标签：
header、nav、footer、article、section、aside - 媒体标签：
video、audio、source - 表单类型（
type）：email、url、number、search、range、color、time、date、datetime、datetime-local、week、month - 表单属性：
placeholder、autofocus、autocomplete、required、pattern、multiple、form
2.对标签语义化的了解
- 简而言之，就是用正确的标签来做正确的事。标签的语义化让标签更加简单易懂，让人一眼就能知道这个标签是用来做什么的。
允许使用拖动：draggable=true
为什么使用语义化标签：
- 可读性更高
- 更易于SEO
3.H5 Drag API
针对被拖拽元素的事件：
ondrag：正在拖动元素时的事件(持续触发)ondragstart：开始拖动元素时的事件ondragend：结束拖动元素时的事件ondragleave：鼠标离开拖动元素时的事件
针对拖拽元素到达目标的事件（针对目标的事件）：
ondragenter：被拖拽元素进入目标元素时的事件ondragover：被拖拽元素停留在目标元素上时的事件（持续触发）ondrop：被拖拽元素在目标元素上松开鼠标时的事件ondragleave：鼠标离开拖动元素时的事件
4.mouse类相关事件
mouseover：鼠标移动到目标元素内（包括子元素）时触发（有冒泡）mouseenter：鼠标移动到元素上时触发（无冒泡）mouseout：鼠标移出目标元素或关闭了子元素时触发（有冒泡）mouseleave：鼠标移出元素时触发（无冒泡）
5.href与src的区别
原理：
src是表示对资源的引用，src指向的内容会被下载并嵌入到当前标签所在位置href是表示超文本引用，href通常指向网络资源，并建立起指向资源与当前文档之间的链接关系处理方式：src会在浏览器解析到该元素时暂停其他资源的下载与处理，直到该元素资源下载、编译、执行结束后才继续其他任务（如Js脚本的src，因此Js脚本的引用一般放在底部）href在浏览器解析到该元素时会与其他任务并行下载，不会停止对当前文档的处理
6.img中alt与title的区别
alt：当网速缓慢或出现其他错误，导致图片无法正常显示时，则会显示出alt中设置的文字title：当鼠标移动至图片上方时，会显示出title中设置的文字
7.行内元素、块级元素、空元素
- 行内元素：
a、b、span、img、input、textarea、lable、button、select、small、strong等 - 块级元素：
dl、dt、dd、ul、li、ol、p、div、h1-h6、section、aside、article、video、audio等 - 空元素：
br、hr、img、input、link、meta、area等
主要记忆：
- 行内元素：
a、b、span、img、input、textarea、select - 块级元素：
dl、dt、dd、ul、li、ol、p、div、h1-h6 - 空元素：
br、hr、img、input、link、meta、area
8.meta标签
meta标签用于提供页面的元信息，如针对搜索引擎的关键词、描述、版权信息等
meta标签的两个属性：
http-equivname
而meta标签的两个属性又分别有不同的参数
name属性：- 使用方法：
<meta name="参数" content="具体的描述">- 关键字：
keywords（告诉搜索引擎你的网页关键字）
<meta name="keywords" content="小说，日志">- 描述：
description（网站内容的描述）
<meta name="description" content="这是一个发布小说和个人日志的网站">- 视口：
viewport（重要），常用于设计移动端的网页
<meta name="viewport" content="width=device-width, initial-scale=1">- 索引方式：
robots（用于告诉搜索引擎爬虫哪些页面需要被索引，常用content有all、none、index、noindex、follow、nofollow）
<meta name="robots" content="none">
个人认为，在name属性中，常问到的参数有：viewport、keywords、description、robots（此外name属性中还有author、generator、copyright、revisit-after、renderer参数，感兴趣的可以自己去看，推荐一篇文章：《HTML meta标签总结与属性使用介绍》——b0）
http-equiv属性：- 使用方法：
<meta name="参数" content="具体的描述">- 字符集设定：
content-Type
<!-- 以下两种写法等价 --> <meta charset="utf-8"> <!-- H5写法 --> <meta http-equiv="content-Type" content="text/html;charset=utf-8"> <!-- HTML写法 -->- 浏览器渲染版本：
X-UA-Compatible
<!-- 指定IE和Chrome使用最新版本渲染当前页面 --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
此外，还有refresh（自动刷新）、Cache-Control（缓存）、expires（网页到期）、Set-Cookie（Cookie设置）等参数
9.meta标签中的viewport
meta标签中的viewport可用来解决移动端的适配问题
- 不设置
viewport时，默认视口宽度为960 - 设置了
viewport，只配置了width而不配置initail-scale时，视口宽度默认为width - 设置了
viewport，只配置了initail-scale而不配置width时，可根据initail-scale值获取视口宽度（initial-scale = 屏幕宽度/视口宽度） - 设置了
viewport，并同时配置了initail-scale与width时，视口宽度为width值，页面按照initail-scale进行比例缩放 - 常用的配置如下代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
下面放一个表格，是viewport的content内的值及附加值,来源MDN：
10.什么标签可以在head标签内
<title>、<meta>、<style>、<script>、<noscript>、<link>、<base>
11.iframe的优缺点
- 优点
- 能够完整展示嵌入的网页
- 增加代码的可重用
- 可用来加载第三方资源
- 页面更改方便
- 缺点
- 产生多个页面，不便管理
- 页面过多可能会出现滚动条，降低用户体验
- 不利于SEO
- 兼容性不够好，移动端可能无法正常显示
- 导致http请求增加，加重服务器负担
12.DOCTYPE有什么作⽤？严格模式与混杂模式是什么？怎么区分？
-
<!DOCTYPE>声明称为文件类型定义，也叫DTD，目的是为了告诉浏览器这个文件的类型，让浏览器知道该以什么规范来解析这个文件。并且，<!DOCTYPE>声明必须写在HTML文档的第一行。 -
严格模式（也称标准模式）：将文件按照
W3C标准进行解析 -
混杂模式（也称怪异模式、兼容模式）：用浏览器自己的方式（向后兼容）进行文档解析，通常模拟老式浏览器的行为，保证老式站点的正常工作
区分（根据DTD判断）：
- 严格模式
- 严格
DTD - 有
URI的过渡DTD
- 严格
- 混杂模式
- 无
URI的过渡DTD - 不存在
DTD或DTD格式不正确
- 无
注意：H5中没有严格模式与混杂模式之分
13.渐进增强和优雅降级
渐进增强：一开始针对低版本浏览器进行设计，保证基本功能的正常使用，之后再针对高级浏览器进行效果、交互等方面进行改进和功能追加优雅降级：一开始直接构建完整的功能，再针对低版本浏览器进行兼容区别：渐进增强是由简到繁，而优雅降级是从高到低
14.浏览器乱码的原因以及解决方案
浏览器乱码原因：
网页源代码编码与网页内容编码有冲突（如：一个为gbk、一个为utf-8）网页编码与从数据库中调出的数据编码有冲突- 浏览器无法
自动检测网页编码
解决方案：
- 开发时确定
编码是否有冲突 - 若有冲突，则需要
转码 - 在浏览器中做调整进行编码转换
15.Web Worker
Web Worker可以通过API在主线程之外的另外一个线程中运行Javascript程序，实现真正的并行，在主线程运行的同时，Web Worker线程也在后台同时执行任务，互不干扰。
用途：Web Worker的woker线程可用来进行高延迟、耗时长的任务，最后再将结果返回至主线程，大大地节省时间与资源。
推荐一篇文章：《前端er来学习一下webWorker吧》——OBKoro1
