HTML
- 前言
- 1 新增标签
- 2.删除的标签（html向下兼容，虽然删除还是能使用）
- 2.删除的标签（html向下兼容，虽然删除还是能使用）
- 3新增属性
- 3.1 input 新增类型
- 3.1.1 email ，tel（邮件类，手机号 只针对手机端）
- 3.1.2 erl（网址类 只针对苹果手机端）
- 3.1.3 number（输入运算值与运算符 全端）
- 3.1.4 range (功能：滑动选值 pc端)
- 3.1.5 search（功能：用于搜索 pc端）
- 3.1.6 color （功能：颜色选择功能 pc端）
- 3.1.5 Date Pickers Input类
- 3.2 form新属性
- 3.2.1 autocomplete （自动完成的功能）
- 3.2.2 autofocus （自动聚焦）
- 3.2.3 multiple (多个值)
- 3.2.4 placeholder（描述输入域所期待的值）
- 3.2.5 required （输入不能为空）
- 3.3其他新属性
- 总结
前言
本篇讲述HTML5新标签的内容。
简述一些HTML5里常用的标签与属性。html是一个语义化编程语言，初学者需要更好的理解标签的语义。
记住标签使用方法的同时请记住标签的语义。
1 新增标签
1.1结构标签（有语义化div）
| 标签 | 语义 |
|---|---|
| article | 定义一篇文章 |
| header | 定义一个页面或者一个区域的头部 |
| nav | 定义导航链接 |
| section | 定义一个区域 |
| aside | 定义页面内容部分的侧边栏 |
| hgroup | 定义文件中一个区块的相关信息 |
| figure | 定义一组媒体内容以及他们的标题 |
| figcaption | 定义figure元素的标题 |
| footer | 定义以页面或一个区域的底部 |
| dialog | 定义一个对话框 |
用法：
<html>
<head>
<meta charset="utf-8"/>
<tltle>例子</title>
</head>
<body>
<header>
<h1>我是头部</h1>
<nav>
<ul>
<li>我是</li>
<li>导航</li>
</ul>
</nav>
</header>
<section> <!--内容-->
<figure> <!--定义媒体块-->
<figcaption>系统建设指南</figcaption> <!--定义媒体块标题-->
</figure>
</section>
<section> <!--内容-->
<hgroup><!--定义文件中一个区块的相关信息()-->
<h1>系统建设指南</h1>
<h3>著:王一黑</h3>
<h4>标签<em>位体</em><em>系统流</em></h4>
</hgroup>
<aside> <!--经常和article配合使用-->
<a href="/">简述</a>
<a href="/">第一章</a>
</aside>
<article> <!--一篇文章-->
<>简述</>
<p>
王绍惨遭现实蹂躏，大醉后穿越到平行世界，成为系统之主。
事情却没有这么简单，系统简陋不堪功能残缺，众多的功能等着他添加，每天系统运行所需要能量，一切都需要大量的能量。
这个世界也不是那么的平静，幻想位面正在缓慢的融入世界。
导致世界大变，充斥着各种幻想人物，灵气也在缓慢复苏。
道士，武者，巫师，魔法师，各种神秘的组织，或善或恶，慢慢的出现在人们的视线中。
世界中暗涌流动，既然都这么乱了，再乱一点想必也是可以承受。
肆意的改变幻想人物的命运，穿越到幻想位面加快融合速度，得以掠夺更多的能量！
科学且合理的搭建系统，健康的成长为一名合格的系统。</p>
</article>
</section>
<section> <!--内容-->
<dialog> <!--对话-->
<p>王五：推荐票给你，加油哦哦哦！ </p>
<p>张三： 进门不拜是为无理，更何况如此肥沃的土地。插个旗证明自己来过，我看见，我征服！插了旗你就是我。</p>
</dialog>
<dialog>
<p>赵四：作者快更新！！ </p>
<p>李七： .....作者精力有限勿催</p>
</dialog>
</section>
<footer>
我是底部的信息 <!--我是底部的信息 -->
</footer>
</body>
</html>
注意：header , section , aside ,article , footer 不要嵌套，header ，section ，footer 只用于最外层
1.2多媒体标签
标签：
| 标签 | 语义 |
|---|---|
| audio | 定义一个音频 |
| video | 定义一个视频 |
| source | 定义媒体资源 |
| canvas | 画布 |
| embed | 外部可交互的内容或插件 |
属性：
| 属性 | 语义 | 值 |
|---|---|---|
| autoplay | 自动播放 | autoplay（为了提升用户体验 新版本的浏览器不支持） |
| loop | 循坏 | loop |
| controls | 浏览器控件 | controls |
| preload | 页面加载时进行加载，并预备播放（如果设置autoplay 直接忽略本值） | auto - 面加载后载入整个音频 meta - 面加载后只载入元数据 none - 面加载后不载入音频 |
| width | 宽度属性(只对视频有效) | 数值 |
| height | 高度属性（只对视频有效） | 数值 |
| muted | 静音播放(只对视频有效) | muted |
| poster | 未播放是显示的图片(只对视频有效) | poster |
1.2.1 audio(音频)
<audio src="音频地址" autoplay="autoplay" loop="loop" controls="controls"> </audio>
大家发现没有？ 并没有自动播放~~ 我也去查询了一下这个问题。
不能用的原因很简单，为了提升用户的体验。 因为默认自动播放时时，声音默认最大。
我看了网上也有一些很畸类的解决方法。需要自己动手修改浏览器的值。。。。。 对于用户来说，不会因为你一个网站去查询然后设置自己的浏览器不太现实。
在此处留个坑后续解决~
1.2.2 video(视频)
<video src="视频地址" autoplay="autoplay" loop="loop" controls="controls"> </video>
同音频一样无法自动播放
1.2.3 source(媒体资源)
<audio autoplay="autoplay" loop="loop" controls="controls">
<source src="ogg格式的音频" type="audio/ogg">
<source src="mp3格式的音频" type="audio/mpeg">
</audil>
1.2.4 canvas（画布）
需要js 技术 ，先不解说。
1.2.5 embed(外部可交互的内容或插件)
测试
<embed src="//music.163.com/style/swf/widget.swf?sid=1323352627&type=2&auto=0&width=320&height=66" width="340" height="86" allowNetworking="all"></embed>
效果
1.3状态标签
| 标签 | 语义 |
|---|---|
| meter | 状态标签（实时状态显示） |
| progress | 进度标签 |
1.3.1 meter（实时状态）
此表借用于 w3school
属性
| 属性 | 值 | 描述 |
|---|---|---|
| form | form_id | 规定 <meter> 元素所属的一个或多个表单。 |
| high | number | 规定被视作高的值的范围。 |
| low | number | 规定被视作低的值的范围。 |
| max | number | 规定范围的最大值。 |
| min | number | 规定范围的最小值。 |
| optimum | number | 规定度量的优化值。 |
| value | number | 必需。规定度量的当前值。 |
测试
最小值20，最大值80， 最小警惕范围30 ，最大警惕范围70， 最佳状态50 vlaue 则是当前值我们看一效果
<meter value="50" min="20" max="80" low="30" high="70" optimum="50" ></meter>
<meter value="20" min="20" max="80" low="30" high="70" optimum="50" ></meter>
<meter value="80" min="20" max="80" low="30" high="70" optimum="50" ></meter>
<meter value="50" min="20" max="80" low="30" high="70" optimum="50" ></meter>
<meter value="30" min="20" max="80" low="30" high="70" optimum="50" ></meter>
<meter value="70" min="20" max="80" low="30" high="70" optimum="50" ></meter>
<meter value="45" min="20" max="80" low="30" high="70" optimum="50" ></meter>
<meter value="55" min="20" max="80" low="30" high="70" optimum="50" ></meter>
效果如下
1.3.2 progress（进度标签）
只有两个属性
测试
<progress value="22" max="100"></progress>
效果：
1.4 列表标签
| 标签 | 语义 |
|---|---|
| datalist | 为input标记定义一个下拉了表，配合option标签 |
| details | 定义一个元素的详细内容，配合summary |
1.4.1 datalist（数据列表标签）
注意：input中的list值和datalist中的id值一样
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
效果：
1.4.2 details（详细标签）
| 属性 | 意 |
|---|---|
| open | 规定在 HTML 页面上 details 应该是可见的。 |
配合summary标签使用 可以更改名称
<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>
未点击
已点击（如果设置 open属性则默认就是展开状态）
1.5 新的文本标签
1.5.1注释标签
| 标签 | 意 |
|---|---|
| ruby | 定义注释或拼音 |
| rt | 定义ruby的注释内容 |
| rp | 告诉那些不支持ruby元素的浏览器如何显示 |
<p>有<ruby>冇<rp>(</rp><rt>māo mō mù</rt><rp>)</rp></ruby>有 </p>
有冇有
1.5.2 其他标签
| 标签 | 意 |
|---|---|
| mark | 有标记的文本（黄色选中状态） |
| output | 定义一些输出类型，计算表单结果配合oninput时间 |
1.5.2.1 mark（标记的文本）
测试：
<mark>哈哈哈</mark>
效果：
哈哈哈
1.5.2.2 output(计算表单结果)
测试
<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>
效果：
2.删除的标签（html向下兼容，虽然删除还是能使用）
2.1 纯表现的元素
basefont，big，center，font，s，strike，tt，u等
2.2对可用性产生负面影响的元素
frame，frameset，noframes
2.3产生混淆的元素
acronym，applet，isindex，dir
2.删除的标签（html向下兼容，虽然删除还是能使用）
3新增属性
3.1 input 新增类型
3.1.1 email ，tel（邮件类，手机号 只针对手机端）
<input type="email" />
<input type="tel" />
3.1.2 erl（网址类 只针对苹果手机端）
<input type="erl" />
3.1.3 number（输入运算值与运算符 全端）
<input type="number" />
3.1.4 range (功能：滑动选值 pc端)
min默认值0;
max默认值100；
<input type="range" min="0" max="100" />
3.1.5 search（功能：用于搜索 pc端）
<input type="search" />
3.1.6 color （功能：颜色选择功能 pc端）
<input type="color" />
3.1.5 Date Pickers Input类
| 类 | 意 | 端 |
|---|---|---|
| date | 选取日，月，年 | 全 |
| month | 选取月，年 | 全 |
| week | 选取 周和年 | 苹果已放弃支持 |
| time | 选取时间（时和分） | 全 |
| datetime | 选取时间，日，月，年（UTC时间） | 已放弃 |
| datetime-local | 选取时间，日，月，年（本地时间） | 全 |
3.2 form新属性
3.2.1 autocomplete （自动完成的功能）
本属性 可以用在 form 标签，也可以用在 input标签。
| 值 | 意 |
|---|---|
| no | 打开 |
| off | 关闭 |
<form autocomplete="no">
<input type="text" />
<input type="text" autocomplete="off" />
</form>
3.2.2 autofocus （自动聚焦）
本属性 用在 所有input。
<input type="text" autofocus="autofocus " />
3.2.3 multiple (多个值)
本属性 用在 input 文件上传（file）和邮箱（email）。
<input type="file" multiple="multiple" /> 可以上传对个文件
<input type="email" multiple="multiple" /> 邮箱号与邮箱号之间用","隔开
3.2.4 placeholder（描述输入域所期待的值）
本属性 用在 input （text）（search）（url）（telephone）（email）（password）
<input type="text" placeholder="请输入"/>
3.2.5 required （输入不能为空）
<input type="text" required="required"/>
3.3其他新属性
3.3.1链接属性（sizes(尺寸),target（目标全页面的链接打开方式））
sizes
<lint rel="icon" href="icon.gif" type="image/gif" sizes="16*16"/>
target
<base href="http://localhost/" target="_blank" />
3.3.2 超链接属性（media（对设备进行优化），hrefiang（设置语言），rel（设置超链接的引用））
media ：设备转换之间的一个优化
hrefiang：网站语言转换之间的一个优化
rel：网站超链接的一个语义化（非本站链接添加 rel=“external”）
3.3.3 script (defer(后加载), async(同步加载))
defer 只支持IE
async 主流都支持
3.3.4 ol有序列表 (start(起始至), reversed(倒斜排列))
<ol start="5" reversed="reversed">
<li>a</li>
<li>ss</li>
<li>dd</li>
<li>ff</li>
<li>gg</li>
<li>hh</li>
</ol>
3.3.5 html(manifest)和style（scoped）
总结
到这里我们就结束了HTML入门篇。详细的还请看参考文献。如：w3c,菜鸟,mozilla 后续会有 js篇
==如本文章描述有误请尽快联系博主！感谢您的阅读与帮助！==