day6HTML5新特性

一.HTML５介绍

1.1 什么是HTML5？

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

1.2 HTML5是如何起步的

HTML5 是 W3C 与 WHATWG 合作的结果。

WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创

建一个新版本的 HTML（HTML5）。

2014正式发布，HTML5

1.3HTML5新特性（面试）

1）增加了audio，vido音频视频播放，抛弃了flash

2）新增了canvas画布（绘画，制作动画（如小游戏开发））

3）地理定位

4）增加了离线缓存

5）硬件加速

6）Web Socket（全双工通信）

7)本地存储（非cookie）

8)新增了一些语义化标签

1.4 HTML5的优势&不足

​ 1.4.1HTML5的优势

​ 提高可用性和改进用户的友好体验。

​ 新标签这将有助于开发人员定义重要的内容。

​ 可以给站点带来更多的多媒体元素(视频和音频)。

​ 可以很好的替代FLASH和Silverlight。

​ 当涉及到网站的抓取和索引的时候，对于SEO很友好。

​ 大量应用于移动应用程序和游戏。

​ 1.4.2HTML5的劣势

​ HTML5本身还在发展中，它不是用户应用的最迫切需求，更多是厂商试图改变软件生态格局的战略需求。

​ HTML5的兼容性受限于各大浏览器表现，例如微软的IE和fifireforx之间存在很多差别。

​ HTML5需要一个成熟完整的开发环境，目前还缺少。

​ HTML5功能的暴增，浏览器必须有一个高效的图形引擎和脚本引擎。

​ HTML5需要杀手级应用来吸引和引导用户升级浏览器，最终完成HTML5终端的部署。

二.HTML５网页标准结构

2.1 HTML5网页标准结构

在HTML 5出来之前，我们用div来表示页面章节，但是这些div都没有实际意义。（即使我们用css样式

的id和class形容这块内容的意义）。这些标签只是我们提供给浏览器的指令，只是定义一个网页的某些部

分。但现在，那些之前没“意义”的标签因为因为HTML5的出现消失了，这就是我们平时说的“语义”。

HTML5网页布局标签

​ header:网页页首

<header>头部</header>

​ nav：导航栏

<nav>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</nav>

​ aside：侧边栏

<article>
	<p>内容</p>
	<aside>
 		<h1>作者简介</h1>
		<p>这里是一段作者的简介内容。</p>
 	</aside>
</article>

​ main：主体

<main>
 <h1>Web Browsers</h1>
<p>Google Chrome、Firefox 以及 Internet Explorer 是目前最流行的浏览器。</p>
 <article>
 <h1>Google Chrome</h1>
<p>Google Chrome 是由 Google 开发的一款免费的开源 web 浏览器，于 2008 年发布。</p>
 </article>
 <article>
 <h1>Internet Explorer</h1>
<p>Internet Explorer 由微软开发的一款免费的 web 浏览器，发布于 1995 年。</p>
 </article>
 <article>
 <h1>Mozilla Firefox</h1>
<p>Firefox 是一款来自 Mozilla 的免费开源 web 浏览器，发布于 2004 年。</p>
 </article>
</main>

​ section：区块

​ article：文章

<artical>
    <h1>文章标题</h1>
    <p>文章内容</p>
</artical>

​ footer：页尾

<footer>
<p>页脚</p>
</footer>

2.2语义化标签

1.mark：定义高亮元素

2.details(描述)与summary(摘要):一般用于名词解释或用于封装一个区块

<details>
<summary>大前端开发</summary>
    <ul>
        <li>组块化开发</li>
        <li>模块化开发</li>
        <li>自动化开发</li>
        <li>后台开发</li>
    </ul>
</details>

2.meter:定义度量衡

meter: 显示一个计数仪表。

属性

value：当前值。

min {number}：最小值。

max {number}：最大值。

low {number}`： 指定范围的最小值。

high {number}：指定范围的最大值。

<meter value="110" min="80" max="120"></meter>公里/小时

3.progress进度条

属性：

value：当前值。

min {number}：最小值。

max {number}：最大值。

<p>任务已完成：</p><progress value="70" min="0" max="100"></progress> 70%

4.dialog：定义对话框或窗口（自动居中）

<dialog open>
    <span>&times;</span>
    <h2>
        大前端开发包括：
    </h2>
    <ul>
        <li>组块化开发</li>
        <li>模块化开发</li>
        <li>自动化开发</li>
        <li>后台开发</li>
    </ul>
</dialog>

5.figure:用来对元素进行组合（一般用来组合一张图的标题，图片和图片描述等）

<figure>
    <h4>夏日风情</h4>
    <img src="img/timg.jpg" alt="夏日风情"/>
</figure>

三.多媒体标签

3.1.audio：支持播放音乐或音频。IE9以下的版本不支持

支持的格式：.mp3/.ogg/.WAV

属性：

​ src:加载文件路径

​ autoplay:视频播放

​ loop:循环

​ controls:控制条

​ muted:静音

​ preload:预加载（当使用autoplay时，preload自动失效）

3.2 video：加载视频。

支持格式：.mp4/.ogg/.webm,IE9以下的版本不支持

属性：

​ src:加载文件路径

​ autoplay:视频播放

​ loop:循环

​ controls:控制条

​ muted:静音

​ preload:预加载（当使用autoplay时，preload自动失效）

​ width:宽度

height:高度

​ poster:海报

3.3 embed：嵌入内容或加载插件

属性：

​ src:文件路径

​ width:宽度

​ height:高度

​ type:类型

3.4 canvas画布：是一个容器元素

注意：

​ a.单独使用canvas没有什么意义，它必须结合Javascript使用。他的具体功能实现是通过javascript体现出来的。

​ b.convas的宽高最好不要通过css实现，而是直接使用标签属性width和height实现

四.新增常用属性

4.1contentEditable：

属性只能是true或false,几乎可以为任何元素指定。用于将元素设为可编辑模式。

4.2hidden

对元素进行隐藏，一般用来传值或当某个条件成立时执行内容显示。默认值为hidden

<p hidden="hidden">这是一段隐藏的段落。</p>
<p>这是一段可见的段落。</p>

4.3 .data-*

属性用于存储页面或应用程序的私有自定义数据。一般用于传值

4.4 multiple：

属性规定输入域中可选择多个内容。用于表单组件中，如file/select。

4.5 required

属性约束表单元元素在提交前必须输入值。用于表单组件中，需要结合提交按钮使用。

<input type="text" placeholder="请输入用户名" required><br>
    <input type="email" placeholder="请输入邮箱" ><br>
    <input type="submit" ><br>

4.6 pattern

属性规定用于验证输入字段的模式

五.新表单操作

1.新表单组件

5.1color:颜色

5.2email：邮箱

5.3tel：电话号码

5.4url：网址

5.5number：数字

5.6range：范围

5.7search：搜索

5.8date：日期

5.9datetime：日期时间

5.10datetime-local：本地-日期时间

5.11year年份

5.12month月份

5.13time时间

2.表单属性（除了form加在组件上，其他加在提交按钮上）

1. formaction:修改action数据提交的地方

2. formenctype:修改表单请求的类型

3. formmethod:修改数据提交的方法

   常用的提交方式：get和post两种，他们的区别：
   	1.get是以字节为单位提交，只接受ASCII，码，post是以字符为单位提交
   	2.get是明文方式，提交的数据会显示在地址栏中，一般不用来传输敏感数据，因为传输的数据暴露在外面了；而post是以暗文的方式提交
   	3.get在浏览器中回退是无害的，而post会再次提交请求
   	4.get会被浏览器主动缓存，而Post不会，除非手动设置
   	5.get和post在传输字节上一般没有限制，个别浏览器会有，可以 理解为get一般不超过2k,而post一般不超过2M。
   	6.get只能用在表单里面，而post可以用在其他地方
   

4. form：设置表单元素属于哪一个表单

5. novalidate:不验证

   3.input属性

   1）autocomplete:自动完成，用来帮助用户输入，每一次输入的内容，浏览器是否 保存输入的值，以备将来使用,值有：on/off，默认on

   ​ 为了让保护敏感苏剧（如账号，密码等），避免本地浏览器对他们不安全存储，一般要关闭。

   2)autofocus:自动获焦，

   3）step：步长

   4)multiple：多选

   5)pattern：正则匹配

   6)placehoulder：输入提示

   7)required：必须输入

六.代码规范

在2000年至2010年，许多Web开发人员从 HTML 转换到 XHTML。使用 XHTML 开发人员逐渐养成了比较好的 HTML 编写规范。

而针对于 HTML5 ，我们应该形成比较好的代码规范。

HTML5 在代码验证时会更宽松一点。

通过 HTML5，您必须创建属于自己的最佳实践、样式指南和代码约定。

1.请使用正确的文档类型

请始终在文档的首行声明文档类型： 如果您一贯坚持小写标签，那么可以使用：

<!doctype html> 

2. 使用小写元素名

HTML5 元素名可以使用大写和小写字母，推荐使用小写字母

混合了大小写的风格是非常糟糕的。

开发人员通常使用小写。

小写风格看起来更加清爽。

小写字母容易编写。

3. 使用小写属性名

HTML5 属性名可以使用大写和小写字母，推荐使用小写字母

混合了大小写的风格是非常糟糕的

开发人员通常使用小写

小写风格看起来更加清爽

小写字母容易编写

4. 关闭所有 HTML 元素

在 HTML5 中, 你不一定要关闭所有元素 (例如

元素)，但我们建议每个元素都要添加关闭标签。

5. 关闭空的 HTML 元素

在 HTML5 中, 空的 HTML 元素也一定要关闭 :

6. 属性值引号

HTML5 属性值可以不用引号。属性值我们推荐使用引号。

如果属性值含有空格需要使用引号。

混合风格不推荐的，建议统一风格。

属性值使用引号易于阅读。

7. 空格和等号

等号前后可以使用空格，但我们推荐 ：

少用空格：

8. 图片属性图片通常使用 alt 属性。

在图片不能显示时，它能替代图片显示 定义好图片的尺寸，在加载时可以预留指定空 间，减少闪烁。

9.避免长代码行

当使用 HTML 编辑器时，通过左右滚动来阅读 HTML 代码很不方便。请尽量避免代码行超过 80 个字符。

10. HTML 注释

短注释应该在单行中书写，并在 <!-- 之后增加一个空格，在 <!-- 之前增加一个空格。

长注释，跨越多行， 应该通过 在独立的行中书写。

长注释更易观察，如果它们被缩进两个空格的话。

11. 样式表

开括号与选择器位于同一行。

在开括号之前用一个空格。

使用两个字符的缩进。

在每个属性与其值之间使用冒号加一个空格。

在每个逗号或分号之后使用空格。

在每个属性值对（包括最后一个）之后使用分号。

只在值包含空格时使用引号来包围值。

把闭括号放在新的一行，之前不用空格。

避免每行超过 80 个字符。

七.小结