前端学习第13天：初识H5

第13天

1.H5新的文档声明

1.1 H4的文档声明

1.2 H5的文档声明

​ 怪异盒模型：

DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式）。 当不对doctype进行定义时，会触发怪异

模式。

• 在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

• 在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

2.H5的特点

- 更简洁，但是在实际开发中要注意书写规范，利于后期维护
- 标签的语义化

2.1语义化的重要性

- 当页面加载失败时，还能够呈现出清晰的结构
- 有利于`SEO`优化，利于被搜索引擎收录（即便于网络爬虫的识别）
- 在项目开发及维护时，语义化的也很大程度上降低开发难度，节约成本

• 语法更宽松
• 多设备平台
• 自适应网页设计

3.H5新增的语义化标签

​ header头标签 nav导航标签 article文章标签 aside侧边栏导航 footer页脚 section章节、页眉、栏目

3.1section

​ 表示内容区块，一般为章节、页眉、页脚、或者页面中的其他部分。可以与h1-h6等元素结合起来使用，标示文档的结构

3.2article

​ 表示页面中的一块与上下文不相关的内容，譬如客中的一篇文章或者报纸中的一篇文章

3.3aside

​ Aside表示article元素内容之外的，与article元素的内容相关的辅助信息。例如：广告、侧边栏。

3.4header

​ 表示页面中一个内容区块或者整个页面的标题

3.5 footer

​ 表示整个页面或者页面中的一个内容区块的脚注。一般包括作者名字、创建日期以及作者联系信息。

3.6nav

​ 表示页面中导航链接的部分、① 传统的导航条 ② 腾讯新闻 ③侧边栏导航 ④内业导航 ：百度百科

3.7figure

​ 用作文档中插图的图像，一般表示文档主体内容中的一个独立单元。使用figcaption元素为figure元素添加标题。 figcaption 表示 figure的标题。从属于figure ， 并且， figure中只能放置一个 igcaption。类似自定义列表dl

3.8video

​ 定义视频：只支持 Ogg、MPEFG4、WebM.三种格式=====IE8以及更早版本不支持<video>标签

​

<video src="路径地址" controls>您的浏览器不支持video</video>

video允许有多个source元素，source元素可以连接不同的视频文件，浏览器将使用第一个可识别的格式进行播放

<source src="video.ogg" type="video/ogg"/><source src="video.webm" type="video/webm"/>
<!-- 提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。-->

3.9 embed

​ embed标签用于定义嵌套的内容，包括各种媒体，格式可以是midi、wav、AIFF、AU、MP3、Flash等

3.10 audio定义音频，比如音乐或其他音频流

<!-- 定义音频，比如音乐或其他音频流 -->

<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>

<!-- 提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。-->

[外链图片转存失败(img-qde7H7J1-1565871766722)(images\e.png)]

3.11 mark

​ 高亮显示文字，一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。

3.12canvas

​ 表示图形，比如图标和其他图像。这个元素本身没有行为，仅提供一块画布，但它把一个绘图API展现给客户端js，以使脚本能够把想绘制的东西绘制到这块画布上

<canvas id="myCanvas" width="200" height="200”></canvas>

3.13 datalist

​ datalist提供一个事先定义好的列表，通过id与inpu关联，当在input内输入时就会有自动完成（autocomplete）的功能，用户将会看见一个下拉列表供其选择。

​

4.H5新增的表单元素

4.1email

​ 专门用来输入email地址的文本框,如果该文本框中内容不是email地址格式的，则不允许提交。但它不检查email地址是否存在。 具有multiple属性，它允许在该文本框中输入一串以逗号分隔的email地址。

​ multipe：多选

4.2url

​ url：专门用来输入URL地址的文本框。如果该文本框中内容不是URL地址格式的，则不允许提交。和required属性配合使用。

4.3number

​ Number：专门用来输入数字的文本框。在提交时会检查其中的内容是否为数字，具有min、max、step的属性。

<input name=“number1” type=“number” value=“25” min=“10” max=“100” step=“5” />

<!--
数字最小min：10
数字最大max:100
每次变化step:5
规定默认值value:25
-->

4.4range

​ 是用来只允话输入一段范围内数值的文本框，它具有min属性与max属性，及step属性，可以指定每次拖动的步幅。

<input name=“range1” type=“range” value=“25” min=“0” max=“100” step=“5” /> 

<!--
min 最小值 max 最大值 step 数字间隔
-->

4.5 data pickers

​ 拥有多个可供选取日期和时间的新输入类型。

• date - 选取日、月、年

• month - 选取月、年 Internet Explorer 或 Firefox 不支持 “month” 元素

• week - 选取周和年

• time - 选取时间（小时和分钟）

• datetime - 选取时间、日、月、年（UTC 时间）Internet Explorer、Firefox 或者 Chrome 不支持 "datetime元素，Safari 中部分支持。Opera 12 以及更早的版本中完全支持。

• datetime-local -选取时间、日、月、年（本地时间）

5.H5新增的表单验证

5.1placeholder

​ placeholder属性：文本框处于未输入状态时文本框中显示的输入提示。

5.2autofocus

​ autofocus属性：给文本框、选择框、或者按钮控件加上该属性，当打开页面时，该控件自动获得国标焦点，一个页面只能有一个。

5.3required

​ required属性：验证输入不能为空

5.4 list

​ list属性：结合datalist元素使用

5.5自动验证

​ min、max、step：为包含数字或日期的input类型规定限定（约束）max: 最大值 min: 最小值step: 数字间隔

5.6不自动验证

ired`

​ required属性：验证输入不能为空

5.4 list

​ list属性：结合datalist元素使用

5.5自动验证

​ min、max、step：为包含数字或日期的input类型规定限定（约束）max: 最大值 min: 最小值step: 数字间隔

5.6不自动验证

​ novalidate属性规定当提交表单时不对其进行验证。给form添加。