H5的介绍
HTML5的介绍：
1、指的是HTML超文本标记语言的第五个版本
2、随着技术的发展，HTML5里面新增很多的东西，其实现在HTML5不仅仅指的是HTML的第五个版本，而是一个行业的标准
3、现阶段学习HTML5技术，其实学习的整个前端相关的所有技术，基础：html html5 css css3 js这几个只会新增一些东西，但是技术方向不会改变
4、html5新增的标记，只是它的一部分内容而已，html5新增的标记语义化更强了，例如 header nav main footer 这些标记
5、canvas， 存储方式---cookie 通信相关 地理位置相关 拖拽 SVG 视频 音频一些方法 都需要js配合使用才能完成
6、HTML标准的最终的确定，其实新增的一些标记，方法都可以帮助砸门实现开发便捷性
7、新出现的技术，一般移动端使用的比较多，因为没有兼容问题
DTD Document Type Definition 文档类型定义
DTD：规定了标记语言的规则，这样浏览器才能正确的呈现内容
SGML：标准通用标记语言（以下简称“通用标言”），是一种定义电子文档结构和描述其内容的国际标准语言
盒模型
1：标准盒模型：宽度=margin+border+padding+width（高度类似）
2：怪异盒模型：宽=margin+width（border+padding+width）
3：怪异盒模型：会自动计算：padding盒border
触发：怪异盒模型
1：在IE低版本中，当不定义！DOCTYPE可以触发
2、在标准浏览器中，可以使用css3新增的属性，box-sizing：border-box（怪异）|content-box（标准）
如果不想计算，就转换盒子模型
H5相关书写规范和新特性
头部使用 Header标签
导航 nav标签
主要内容 main标签
页尾 footer
注意：没有content标签
figure 用作文档中插图的图像：
<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。
<figure> 元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。
<figcaption> 元素被用来为 <figure> 元素定义标题。
类似与dl，相对于语义来说，figure更符合语义
address:地址标签 是个内联标记
<address> 标签定义文档作者/所有者的联系信息。
如果 <address> 元素位于 <body> 元素内部，则它表示该文档作者/所有者的联系信息。
如果 <address> 元素位于 <article> 元素内部，则它表示该文章作者/所有者的联系信息。
<address> 元素的文本通常呈现为斜体。大多数浏览器会在该元素的前后添加换行。
提示：不应该使用 <address> 标签来描述邮政地址，除非这些信息是联系信息的组成部分。
提示：<address> 元素通常被包含在 <footer> 元素的其他信息中。
time标记
<time> 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。
该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果
canvas 标签 是个内联标签
<canvas> 标签定义图形，比如图表和其他图像。
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
表单的自动提示：
DataList的作用是在你往input输入框里输入信息时，根据你敲进去的字母，自动显示一个提示下列列表，很像百度或谷歌的搜索框的自动提示，在飞机票火车票的搜索页面上也有这样的效果。它是HTML5里新增的一个非常有用的元素。
DataList的表现很像是一个Select下拉列表，但它只是提示作用，并不限制用户在input输入框里输入什么。 HTML5 Datalist的语法其实跟select下拉列表的语法几乎完全一样，非常的简单！
<label for="country_name">国家 : </label><input id="country_name" name="country_name" type="text" list="country" />
<datalist id="country">
<option value="Afghanistan 阿富汗">
<option value="Albania 阿尔巴尼亚">
<option value="Algeria 阿尔及利亚">
<option value="Andorra 安道尔共和国">
<option value="Angola 安哥拉">
</datalist>
需要注意的是，input输入框的list属性值是datalist的id，这样datalist才能和input输入框关联起来，在之前介绍range类型时曾见到提到过它。 datalist自身并不显示，只在需要配合input输入时才会自动显示出来。
多媒体标签
<video> 标签定义视频，比如电影片段或其他视频流。
注意：autoplay：自动播放 在谷歌里面禁用了
poster：封面
audio 音频
和视频标签属性差不多
智能表单：H5新增属性
我们在网站登录，注册的时候，会用到表单，表单的内容会进行验证（如重复的名字，名字的格式，电话号码的位数等等）
都是用的JavaScript里面的正则表达式去做的
HTML5新增的智能表单，多了一个表单验证功能
（语义化更明确）
电子邮箱
<input type="e-mile"/> 会有@等提示
手机号：
<input type="tel"/>
搜索框：
<input type="search"/>
图像按钮:
<input type="img"/>
上传文件:
<input type="file"/>
网站地址:
<input type="url"/> 有http://提示 requiet 不能为空提示
数字：
<input type="number"/> min 最小 step 间隔 max最大
进度条：
<input type="range"/>
取色器:
<input type="color"/>
日历：
<input type="data"/> 下来看看
文本框，当用户获取焦点时，提示信息会自动消失
<input type="text" placeholder="请输入信息"/>
自动获取焦点：只能给一个使用
<input type="text" placeholder="请输入信息" autofocus="autofocus"/>
跳过验证：可以不用填写信息就提交和require相反
属性:noovalidate
隐藏域：
不会给用户进行展示，当用户提交数据时它会把收集到的数据一起提交给服务器，后端数据进行判断
<input type="type"/>
autocomplete：off on 表单设置了name属性后，自动提示关闭或者打开
2412
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
