新增的标签
结构标签
<article>
标记定义一篇文章<header>
标记定义一个页面或者一个区域的头部<nav>
标记定义导航链接<section>
标记定义一个区域<aside>
标记定义页面内容部分的侧边栏<hgroup>
标记定义文件中的一个区块的相关信息(已废弃)<figure>
标记定义一组媒体内容以及他们的标题<figcaption>
标记定义figure元素的标题<footer>
标记定义一个页面或者一个区域的底部<dialog>
标记定义一个对话框(会话框)类似微信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构标签</title>
<style type="text/css">
footer {
height: 50px;
background: #abcdef;
line-height: 50px;
text-align: center;
font-size: 24px;
font-weight: bold;
color: #00B7FF;
}
</style>
</head>
<body>
<header>
<div>Logo</div>
<nav>
<a href="index.html">首页</a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</nav>
</header>
<section>
<hgroup>
<h1>树下的猫</h1>
<h3>文/艾米</h3>
</hgroup>
<aside>
<a href="#se1">Session one</a>
<a href="#se2">Session two</a>
<a href="#se3">Section three</a>
</aside>
<article>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
</article>
</section>
<section>
<figure>
<figcaption>树下的猫咪怎么生活</figcaption>
<div class="video">...</div>
</figure>
</section>
<section>
<dialog>
<dt>张三:嗯,内容还不错</dt>
<dd>李四:还好吧,就是主题不突出</dd>
</dialog>
</section>
<footer>
@CopyRight All Reserved.
</footer>
</body>
</html>
级别:header/section/footer > aside/article/figure/nav > div/ifgcaption
多媒体标签
<video>
标记定义一个视频<audio>
标记定义音频内容<source>
标记定义媒体资源<canvas>
标记定义图片<embed>
标记定义外部的可交互的内容或者插件,比如flash
audio标签:
<!--方法一-->
<!--<audio src="./Eminem%20-%20Walk%20On%20Water%20(Clean).mp3" autoplay="autoplay" loop="1" controls="controls">您的浏览器该退休了,换Chrome吧!</audio>-->
<!--方法二-->
<audio autoplay="autoplay">
<source src="./Eminem%20-%20Walk%20On%20Water%20(Clean).mp3" type="audio/mpeg"></source>
</audio>
video标签:
<!--<video src="./1-1.mp4" autoplay="autoplay" controls="controls"></video>-->
<video src="./1-1.mp4" controls="controls">
<source src="1-1.mp4" type="video/mp4">
</video>
web应用标签
状态标签
<meter>
状态标签(实时状态显示:气压,气温)<progress>
状态标签(任务过程:安装、加载)
<meter value="220" min="20" max="380" low="200" high="240" optimum="220"></meter>
<meter value="180" min="20" max="380" low="200" high="240" optimum="220"></meter>
<meter value="0.75"></meter>
optimum正常值为220,低于200会出现黄色警告。
<progress value="30" max="100"></progress>
列表标签
由于<select>
下拉框的界面太丑了,所以我们要用新的:),而且还支持模糊匹配。
现在我们用:
1. <datalist>
为input标签定义一个下拉列表,配合option
2. <details>
标记定义一个元素的详细内容,配合summary
<input type="text" placeholder="请选择您喜欢的手机品牌" list="phoneList">
<datalist id="phoneList">
<option value="iPhone"></option>
<option value="Samsung"></option>
<option value="Huawei"></option>
<option value="htc"></option>
<option value="meizu"></option>
</datalist>
详细信息支持展开:
<details>
<p>
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
</p>
</details>
通过open=”open”属性设置默认是否打开详情。
其他标签
<ruby>
标记定义注释或者音标<rt>
标记定义对ruby的注释内容文本
<p>我们来<ruby>夼<rp>(</rp><rt>Kuang</rt><rp>)</rp></ruby>一个话题。</p>
<mark>
标记定义有标记的文本(黄色选中状态)<output>
标记定义一些输出类型,计算表单结果配合oninput事件
<p>妈妈叫我回家买<mark>牛奶</mark></p>
直接实时计算两个input标签的结果,并显示:
<form oninput="totalPrice.value=parseInt(price.value)*parseInt(number.value)">
<input type="text" id="price" value="5000">*
<input type="number" id="number" value="1">=
<output name="totalPrice" for="price number"></output>
</form>
<keygen>
标记定义表单里一个生成的键值(加密信息传送)<time>
标记定义一个日期/时间,目前所有主流浏览器都不支持。
删除的标签
纯表现的标签
Basefont、big、center、font、s、strike、tt、u
因为结构与表现分离,表现我们要用css完成。
对可用性产生负面影响的元素
frame、frameset、noframes
产生混淆的元素
acronym、applet、isindex、dir
新增的属性
input
date:<input type="date" name="date">
month:<input type="month" name="month">
还有color属性等一大堆东西。
form
autocomplete
<form action="index.html" autocomplete="on">
<input type="text" name="text">
<input type="text" name="email" autocomplete="off">
<input type="submit" name="submit">
</form>
autofocus
<input type="text" name="text" autofocus="autofocus">
输入框默认获得焦点。
multiple
规定输入域中可选择多个值
html
<input type="file" name="file" multiple="multiple">
placeholder
提供一种提示,描述输入域所期待的值
适用于input的type属性为:
text、search、url、telephone、email、password
required
表单校验
<input type="email" required="required">
适用于:
text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file.
link
ol
<ol start="5">
<li></li>
<li></li>
<li></li>
</ol>
其他属性
定义页面离线应用文件:
<html manifest="cache.manifest">