html5
h5简介
h5是下一代的HTML
HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
h5的优缺点
优点：①更新及时②网络标准统一(规则有w3c制定)③多设备、跨平台④可以提高可用性，改进用户体验⑤更多多媒体元素(音频视频)⑥很好地替代flash和silverlight⑦对SEO友好⑧被大量应用于移动应用程序和游戏
缺点：①安全性低(web storage和web socket容易被黑客利用盗取用户信息)②完善性(各浏览器支持程度不一样)③性能(某些平台下引擎问题导致H5性能低下)④兼容性低(IE9以下几乎全军覆没)
DOCTYPE标签
声明必须是html文档的第一行，位于html标签前。
不是html标签
指示web浏览器关于页面使用哪个html版本进行编写
需要注意的地方
li不利于搜索引擎搜索到
HTML Manifest=""(定义页面离线应用文件)
< html manifest="">//放到本地，在没网的情况下，依然能访问，他做到了离线访问
*style
scoped：内嵌css,可以写在任意地方，里面写css代码(只能在当前页面访问这个css)
网页兼容性
H5标签，如果要在ie7等不兼容的浏览器中使用，会出现兼容性问题，我们可以告诉浏览器，如果不兼容，就他他当成块级元素处理
例子：Section,Nva{display:block;}
h5新增那些东西
1.新增标签分为4种,1)结构标签,2)多媒体标签,3)web标签,4)其他标签(article、footer、header、nav、section, video 和 audio 等)
2.新增input类型(calendar、date、time、email、url、search)
3.新表单控件
4.本地存储
h5新增标签
1.结构标签
结构标签可以理解为----有意义的div标签
article标记定义一篇文章
<article>
<h1>写Mrakdown费事？Typora让你像写Word一样行云流水，所见即所得。</h1>
<p>Typora是一款轻便简洁的Markdown编辑器，支持即时渲染技术，这也是与其他Markdown编辑器最显著的区别。即时渲染使得你写Markdown就想是写Word文档 一样流畅自如，不像其他编辑器的有编辑栏和显示栏。Typora删除了预览窗口，以及所有其他不必要的干扰。取而代之的是实时预览。
Markdown的语法因不同的解析器或编辑器而异，Typora使用的是GitHub Flavored Markdown。</p>
</article>运行效果
header 一个区域的头部
nav 导航链接
<nav>
<a href="">html</a>
<a href="">css</a>
<a href="">java</a>
<a href="">jquery</a>
</nav>运行效果
section 文档的某个区域
<section>
<h1>WWF</h1>
<p>我怎么这么好看</p>
</section>运行效果
aside 内容部分的侧边栏
<section class="main">
<!--定义内容部门的侧边栏-->
<aside>
<h1>Recent <samp>Course</samp></h1>
<dl>
<dt class="dt_regin"><a href="">Hyper Text Markup Language</a></dt>
<dd class="sum">1</dd>
</dl>
</aside>
<!--标记定义一篇文章-->
<article>
<h1>Welcome <samp>to Massive Open Online Course!</samp></h1></p>
</article>
</section>运行效果
hgroup 对标题进行组合
<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>运行效果
figure 文档中的一个图像
figcaption为figure定义元素的标题
<figure>
<img src="img_pulpit.jpg" tppabs="http://w3schools.com/tags/img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaptionp>
The Pulpit Rock is a massive
</figcaptionp>
</figure>
<figure>
<p>
The Pulpit Rock is a massive
</p>
<img src="img_pulpit.jpg" tppabs="http://w3schools.com/tags/img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure>运行效果
footer 页面区域的底部
dialog 对话框类似微信
<p><b>注意：</b>目前只有 Chrome 和 Safari 6 支持 dialog 标签。</p>
<table border="1">
<tr>
<th>January <dialog open>This is an open dialog window</dialog></th>
<th>February</th>
<th>March</th>
</tr>
<tr>
<td>31</td>
<td>28</td>
<td>31</td>
</tr>
</table>运行效果
结尾补充
**第一点补充：**header/section/aside/article/footer
第二点补充： Header/section/footer级别最高
2.多媒体标签
3类多媒体标签
video 标签定义视频
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>运行效果
可选属性
属性 | 值 | 描述 |
autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放 |
controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
height | pixels | 设置视频播放器的高度。 |
loop | loop | 如果出现该属性，则视频在就绪后马上播放 |
muted | muted | 如果出现该属性，视频的音频输出为静音。 |
poster | URL | 规定视频正在下载时显示的图像，直到用户点击播放按钮。 |
preload | auto metadata none | 如果出现该属性，则视频在页面加载时进行加载，预备播放。如果使用 “autoplay”，则忽略该属性。 |
src | url | 要播放的视频的 URL。 |
width | pixels | 设置视频播放器的宽度。 |
source 标签定义媒体资源
可以定义几个source ，浏览器需要选择他所支持的源文件，如果都支持则任选一个
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>运行效果
可选属性
属性 | 值 | 描述 |
media | media_query | 规定媒体资源的类型，供浏览器决定是否下载。 |
src | URL | 规定媒体文件的 URL。 |
type | MIME_type | 规定媒体资源的 MIME 类型。 |
embed 标签定义了一个容器
embed 用来嵌入外部应用或者互动程序,比如flash
<embed src="/i/helloworld.swf" />注意：现在已经不建议使用 < embed> 标签了，可以使用 < img>、< iframe>、< video>、< audio> 等标签代替。
3.web标签
meter 状态标签 (实时显示:气压，气温)
< meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。
例子：磁盘用量、查询结果的相关性，等等。
注释：< meter> 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 < progress> 标签。
<p>显示度量值：</p>
<meter value="3" min="0" max="10">3/10</meter><br>
<meter value="0.6">60%</meter>运行效果
属性
progress标签定义运行中的进度（进程）
可以使用 < progress> 标签来显示 JavaScript 中耗费时间的函数的进度，或来显示下载的进度。
下载进度：
<progress value="22" max="100">
</progress>运行效果
属性
datalist列表标签
datalist为input标签定义一个下拉列表
<details open=“open”>定义一个元素的一详细内容，配合summary注释标签
<input list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>ruby注释音标
< ruby>标记定义注释或音标
< rt>定义对ruby的注释内容文件不
< rp>不兼容的浏览器，浏览器如何显示
<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>4.其他标签
mark 标记文本(黄色选中状态)
output 定义一些输入类型
计算表单结果配合oninput事件
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
删除的标签
纯表现的元素
Basefont、big、center、font、s、strike、tt、u
对可用性产生负面影响的元素
frame、frameset、noframes
产生混淆的元素
acronym、applet、inindex、dir
重定义标签
显示不变，只是表达含义进行了重新定义的标签
- < b>代表内联文本，通常是粗体没有传递表示重要的意思
- < i>代表内联文本，通常是协体
- < dd>可以同derails与figure一同使用，定义包含文本，dialog可以
- < dt>可以同derails与figure一同使用，汇总2细节，dialog可以
- < hr>标签 不仅表示水平线。还表示主题结束，显示效果相同
- < menu>重新定义用户界面的菜单，配合command或者menuitem使用
- < small>表示小字体，例如打印注释或者法律条款
- < strong>表示重要性而不是强调符合
Input新增属性
type=“email”邮箱类型(@)
type=“URl”（针对ios端，键盘会出现/）
Type="tel"手机号码
Type="number"增加减少数字，只能输入整数
Dete Pickers input类型
Date—选取日月年
Month—选取月年
Week–选取周和年
Time选取时间(小时和分钟)
Datetime—选取时间日月年(UTC时间)
Datetime-local—选取时间、日月年(本地时间)
type=“range”滑动条
type=“search”搜索
Type="color"颜色
表单属性
1.autocomplete属性
From或者input域应该有自动完成功能,如果提交失败，这个标签有记忆功能
<from autocomplete="on/off"></from>Ps:autocomplete适用于from标签，以及下面的input标签
Text,search,url,telephone,email,password,datepiclers,range,color
2.autofocus属性
规定在页面加载时，域自动的获取焦点
autofocus适用于所有的< inpiut>标签的类型
<input autofocus="autofocus"/>3.multiple属性
规定输入域中可以选择多个值
Ps:multiple属性适用于类型的input标签：email和file
<input type="file" multiple="multiple">4.placeholder属性
提示框的意思
required属性
规定必须在提交之前填写输入域不能为空
<input type="text" required="required"/>链接属性
Sizes图标大小的控制，根据不同的分辨率
<link rel="icon" href="icon.gif" type="image/gif" sizes="16x16">用于网址上的小图标显示
Target弹出新窗口
<base href="网址" target="_blank">超链接
A:media“”(表示对设备进行优化，手持tv设备进行支持)
A:hreflang=“zh”设置语言
A:rel="ecternal"设置超链接的引用，这里超链接为外部链接，说明文档
script标签
defer加载完脚本并不执行，而是等整个页面加载完之后再执行
<script dafer src="URL"></script>Async:加载完脚本后立刻执行，不用等整个页面都加载完，属于异步执行
<script Async src="URL"></script>ol属性
Start起始值\Reversed倒叙排列
<ol start="10" reversed></ol>
