【回顾HTML】HTML的一些知识

H5复习遗忘点

1.语义化标签

包括section article aside header hgroup footer nav figure这几类

其中figure表示一段独立的流内容，一般表示文档主体内容中的一个独立单元。

2. audio （音频）与 vedio（视频）

   属性 autoplay controls loop(循环播放) preload(预载)

3.source标签

source标签为**媒介元素，**标签允许您规定可替换的音频或者视频根据它对媒体类型或者解码器的支持进行

一般audio 或者video标签都使用source来指定src路径避免用户浏览器版本不支持的情况

	<audio controls>
		<source src=""></source>
	</audio>

// 新增 众多 type属性
<input type="" />

<!-- 限制用户输入必须为 email 类型 -->
<input type="email">

<!-- 限制用户输入必须为 URL 类型 -->
<input type="url">

<!-- 限制用户输入必须为 日期 类型 -->
<input type="date">

<!-- 限制用户输入必须为 时间 类型 -->
<input type="time">

<!-- 限制用户输入必须为 月 类型 -->
<input type="month">

<!-- 限制用户输入必须为 周 类型 -->
<input type="week">

<!-- 限制用户输入必须为 数字 类型 -->
<input type="number">

<!-- 限制用户输入必须为 手机号码 类型 -->
<input type="number">

<!-- 搜索框 -->
<input type="search">

<!-- 生成一个颜色选择表单 -->
<input type="color">

placeholder 提示信息 autofocus 自动获取焦点

multiple可以选择多个文件或者邮箱

表单事件：oninput 每当input里的输入框内容发生变化都会触发此事件

 oninvalid：当验证不通过时候触发这个事件

4.进度条/度量器：

progress 标签 meter属性：用来表示显示剩余容量和剩余库存

5.dom查询操作

querySelector 和 querySelectorAll

6.Web存储：

H5提供了两种在客户端存储数据的新方法：

1. localStorage

   特点：1.永久存储 2.多窗口共享、3、容量大约20MB

2. sessionStorage

   特点：生命周期为关闭当前浏览器窗口，关闭当前窗口存储的结构就会消失

   ​ 可以在同一窗口下访问，不会多窗口共享

   ​ 数据大约5MB

7.history API：go、forward、back、pushstate

这里可以扩展说一说VueRouter这种的实现原理，VueRouter的基本需求就是满足SPA的不发生页面刷新而动态的刷新HTML网页的一种手段，那么要做到这种操作，在从前，通过哈希的方式来操作，在哈希模式的时候，#号后面的网址发生变化时候，是能够刷新界面并且不会发送请求，并且每次hash值变化的时候，都会触发hashchange事件，通过这个事件我们可就能够知道hash值出现了什么变化，在对其进行一个监听来实现对应变化更新页面内容的操作。
而推出history API之后就可以通过pushstate和replaceState来进行修改url并且不会发送请求。同时还有Popstate事件让我们来监听

常用BOM对象

window对象，是js的最顶层对象，其他BOM对象都是window对象的属性；
location对象,浏览当前url信息；
navigator对象，用于查询浏览器本身信息；
screen对象，客户端屏幕信息
history对象，用于看浏览器访问历史信息相关的

• 渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
• 优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

Doctype的作用：

doctype 是document type的缩写，<!doctype>声明位于文档的最前面，处于标签之前，它不是html标签，主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。

在W3C标准出来之前，不同的浏览器对页面渲染有不同的标准，产生了一定的差异，这种渲染方式叫做混杂模式，在W3C标准出来之后，浏览器对页面渲染有了统一的标准，这种渲染昂视叫做标准模式。<!DOCTYPE>不存在的话就会导致HTML或者XHTML文档一混杂模式出现，就是把如何渲染html页面的权利交给了浏览器。

标准模式和怪异模式区别：

盒模型：W3C标准（content-box）中如果设置了一个元素的宽度和高度，指的是元素内容的宽度和高度，而在怪异模型（border-box）情况下盒子的宽高还包括了padding和border

设置百分比高度：标准模式下，一个元素的高度是由其包括内容来决定，**如果父元素没有设置百分比高度，子元素设置一个百分比高度是无效的，**用margin : 0 auto 来设置水平居中；使用margin： 0 auto 在standards模式下可以使元素水平居中，但在怪异盒子下会失效。

常见meta标签：

meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。

charset 用来写编码类型 keywords 关键词 description 页面描述

refresh 页面重定向和刷新 viewport视口

SEO 搜索引擎效果

超链接target属性作用和取值：

target属性指定所链接的页面在浏览器窗口中的打开方式。

主要params:
_blank: 在新浏览器窗口中打开链接文件
_parent:将链接的文件载入含有该连接框架的父框架或者父窗口中，如果含有该连接的框架不是嵌套的则在浏览器全屏窗口中载入链接的文件，就想_self参数一样。
_self: 在同一框架或者窗口中打开所链接的文档，参数为默认值，通常不用指定。
_top: 在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有的框架。

iframe优缺点：

优点： iframe能够原封不动把嵌入的网页展示出来

​ 如果有多个页面引用iframe那么只需要修改iframe内容就可以实现调用每一个页面的更改

​ 网页为了统一风格，头部和版本是一样的就可以写成一个页面，用Iframe嵌套增加可重用性

​ 如果遇到加载缓慢的第三方内容，如图标或广告，这些问题可以由iframe来解决

缺点：

​ iframe会阻塞主页面的Onload事件

​ 搜索引擎检测程序无法解读这种界面，不利于SEO（搜索引擎优化）

​ iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载

​ iframe使用之前需要考虑最好是通过js动态给Iframe添加src可以表面以上俩问题

label标签作用：用来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

<label for="Name"> Number :</label>
<input type ='text' name="Name" id="Name"/>

，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

<label for="Name"> Number :</label>
<input type ='text' name="Name" id="Name"/>