html5标签

来源：互联网发布：随身wifi网络链接异常编辑：程序博客网时间：2024/05/17 08:43

新增的标签
- 结构标签
- 多媒体标签
- web应用标签
  - 状态标签
  - 列表标签
- 其他标签
删除的标签
- 纯表现的标签
- 对可用性产生负面影响的元素
- 产生混淆的元素
新增的属性
- input
- form
  - autocomplete
  - autofocus
  - multiple
  - placeholder
  - required
link
ol
其他属性

新增的标签

结构标签

<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">

阅读全文

0 0