html5新增元素

一、HTML5新增结构元素

之前，我们只能用万能的div标签，并为其设置不同的id如header, footer, sidebar等来分别表达头部，底部或者侧栏等。而现在代码编写者不再需要为id的命名费尽心思，对于手机、阅读器等设备更有语义的好处。

HTML 5增加了新的结构元素来表达这些最常用的结构：

  1. section: 这可以表达书本的一部分或一章，或者一章内的一节
  2. header: 页面主体上的头部。并非head元素
  3. footer: 页面的底部（页脚），可以是一封邮件签名的所在
  4. nav: 到其他页面的链接集合
  5. article: 诸如blog, 杂志，纲要等之中的一条独立记录

举个例子，一个blog的首页，用HTML 5写的话，可以是这样：

<!DOCTYPE html>
<html>
<head>
<title>HTML5 新增结构元素</title>
</head>
<body>
<header>
        <hgroup>
                <h1>Page title</h1>
                <h2>Page subtitle</h2>
        </hgroup>
        </header>
<nav>
        <ul>
                Navigation...
        </ul>
</nav>
<section>
        <article>
                <header>
                        <h1>Title</h1>
                </header>
                <section>
                        Content...
                </section>
        </article>
        <article>
                <header>
                        <h1>Title</h1>
                </header>
                <section>
                        Content...
                </section>
        </article>
</section>
<aside>
        Top links...
</aside>
<figure>
        <img src="..."/>
        <figcaption>Chart 1.1</figcaption>
</figure>
<footer>
        Copyright ©
        <time datetime="2010-11-08">2010</time>.
</footer>
</body>
</html>

二、HTML5新增块级元素

  1. aside: 定义页面内容之外的内容，比如侧边栏
  2. figure: 定义媒介内容的分组，以及它们的标题
  3. figcaption: 媒介内容的标题说明
  4. dialog: 定义对话（会话）

aside可以用以表达注记、贴士、侧栏、摘要、插入的引用等诸如作为补充主体的内容。比如这样表达blog的侧栏：

<aside>
        <h3>最新文章</h3>
        <ul>
                <li><a href="#" mce_href="#">文章标题</a></li>
        </ul>
</aside><>/pre
figure元素表示一个有说明的块级图片。比如：
<figure>
        <figcaption>PRC</figcaption>
        <legend>Figure 1. JavaScript Alert Box.</legend>
        <img alt="图片可替换文本" src="img.png" mce_src="img.png" />
</figure>

 

dialog元素用于表达人们之间的对话。在HTML 5中，dt用于表示说话者，而dd则用来表示说话者的内容。如：

<dialog>
        <dt>悟空</dt>
        <dd>什么是幸福</dd>
        <dt>佛</dt>
        <dd>我请你穿越这片田野，去摘一朵最美丽的花，但是有个规则：你不能走回头路，而且你只能摘一次。</dd>
</dialog>

三、HTML5新增行内语义标签元素

  1. mark: 定义有记号的文本
  2. time: 定义日期/时间
  3. meter: 定义预定义范围内的度量
  4. progress: 定义运行中的进度（进程）

mark元素用来标记一些不是那么需要着重强调的文本。

<p>今天别忘记了买 <mark>牛奶</mark>。</p>

time元素如其名，用来表达时间。它需要一个datetime的特性来标明机器能够认识的时间，如：

<p>On Saturdays, we open at <time>09:00</time>.</p>
<p>The concert is <time datetime="2009-02-18">next Wednesday</time>.</p>
<p>We finally hit the road at <time datetime="2009-02-17T05:00-07:00">5am last Tuesday</time>.</p>

meter元素表达特定范围内的数值。可用于薪水、百分比、分数等。比如：

<p>您的分数是：
<meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>.
</p>
<ul>
        <li><meter>25%</meter></li>
        <li><meter>1/4</meter></li>
        <li><meter>200 out of 800</meter></li>
        <li><meter>max: 100; current: 25</meter></li>
        <li><meter min="0" max="100" value="25"></meter></li>
</ul>
<dl>
        <dt>Width:</dt>
        <dd><meter min="0" max="200" value="12" title="millimeters">173mm</meter></dd>
        <dt>Height:</dt>
        <dd><meter min="0" max="100" value="2" title="millimeters">104mm</meter></dd>
</dl>

可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进度。

对象的下载进度：
<progress>
<span id="objprogress">85</span>%
</progress>

四、HTML5新增行交互性标签元素

  1. details: 定义元素的细节
  2. datagrid: 定义树列表 (tree-list) 中的数据
  3. datalist: 定义选项列表
  4. menu: 定义菜单列表
  5. command: 定义命令按钮

details用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如点击）与legend交互才显示出来。这跟现在各种通过JavaScript隐藏一段内容，在点击后才显示出来的做法有些类似。比如：

1
<details open="open">This document was written in 2010.</details>

datagriddatagrid用来控制数据，可以由用户或者脚本来更新，比如：

1
2
3
4
5
6
7
8
9
10
11
12
<datagrid>
<ol>
        <li>(datagrid row 0)</li>
        <li>(datagrid row 1)
                <ol style="list-style-type:lower-alpha;">
                        <li>(datagrid row 1,0)</li>
                        <li>(datagrid row 1,1)</li>
                </ol>
        </li>
        <li>(datagrid row 2)</li>
</ol>
</datagrid>

datalist 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被想显示出来，它仅仅是合法的输入值列表。请使用 input 元素的 list 属性来绑定 datalist。

1
2
3
4
5
6
7
8
9
10
11
12
13
<h4>Example 1 (for HTML 5 browsers)</h4>
<p>
        <label>
        Enter your favorite cartoon character:<br />
        <input type="text" name="favCharacter" list="characters">
        <datalist id="characters">
                <option value="Homer Simpson">
                <option value="Bart">
                <option value="Fred Flinstone">
        </datalist>
        </label><br />
</p>
<h4>Example 2 (for both legacy and HTML 5 browsers)</h4>

menu 在HTML 2就存在了，不过HTML 4把它废弃了。HTML 5废物利用，并在期内加上command元素。autosubmit为true时，表单控件改变时自动提交。label为菜单定义一个可见的标注，type是表现的方式，默认为list，还有context和toolbar。

1
2
3
4
5
6
7
<menu label="菜单" type="toolbar" autosubmit="true">
        <li><input type="checkbox" />Red</li>
        <li><input type="checkbox" />blue</li>
</menu>
<menu>
        <command type="command">Click Me!</command>
</menu>

 

五、HTML5新增行多媒体标签元素

  1. video: 定义视频
  2. audio: 定义音频
  3. source: 媒介元素（比如 <video> 和 <audio>）定义媒介资源

video标签定义视频，比如电影片段或其他视频流：

1
2
3
<video src="/video/pass-countdown.ogg" width="300" height="150" controls>
        <p>If you are reading this, it is because your browser does not support the HTML5 video element.</p>
</video>

audio标签定义声音，比如音乐或其他音频流：

1
2
3
<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>
1
2
3
4
5
<audio>
        <source src="/music/good_enough.wma" type="audio/x-ms-wma">
        <source src="/music/good_enough.mp3" type="audio/mpeg">
        <p>If you are reading this, it is because your browser does not support the HTML 'audio' element.</p>
</audio>

 

转：http://project.qqworld.org/archives/650

转载于:https://www.cnblogs.com/liubingna/archive/2013/03/19/2969744.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/409045.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

前端学习（3036）：vue+element今日头条管理-复习

前端学习（3036）：vue+element今日头条管理-复习

阅读更多...
python 代码转程序_精悍的Python代码段-转

python 代码转程序_精悍的Python代码段-转

1 文件处理readlines() 和 writelines()方法可以讲列表元素依次写到文件中&#xff1b;file类本身没有提供复制方法&#xff0c;可以使用read()和write()方法模拟实现文件的拷贝&#xff0c;也可以使用shutil模块&#xff1a;shutil.copyfile(hello.txt,hello2.txt)shutil.move…
阅读更多...
[机器学习笔记]Note14--推荐系统

[机器学习笔记]Note14--推荐系统

继续是机器学习课程的笔记&#xff0c;本节课将介绍推荐系统的内容。 问题形式化 推荐系统是机器学习的一个非常重要的应用&#xff0c;在很多音乐、购物等网站都有推荐系统&#xff0c;如豆瓣&#xff0c;淘宝&#xff0c;网易云音乐等都是有使用到推荐系统的&#xff0c;因…
阅读更多...
手机应用开发的方式不能完全套用到iPad上

手机应用开发的方式不能完全套用到iPad上

对于一些复杂的游戏&#xff0c;许多人已经不能满足于手机小巧的屏幕&#xff0c;大屏的画面感就成为许多人选择平板电脑的重要因素。当越来越多的80后开始为人父母&#xff0c;孩子们从大人手中得到的礼物&#xff0c;也不再局限于零食、玩具和游乐场入场券。随着智能手机的普…
阅读更多...
前端学习（3037）：vue+element今日头条管理-把数据放到本地存储

前端学习（3037）：vue+element今日头条管理-把数据放到本地存储

阅读更多...
java面向对象编程思想_Java面向对象编程思想

java面向对象编程思想_Java面向对象编程思想

面向对象三个特征&#xff1a;封装、继承、多态封装&#xff1a;语法&#xff1a;属性私有化(private)、提供相对应的get/set 的方法进行访问(public)、在set/get的方法中对属性的数据 做相对应的业务逻辑的判断思想&#xff1a;封装外面的程序不能直接访问本类的属性&#xff…
阅读更多...
[机器学习笔记]Note15--大规模机器学习

[机器学习笔记]Note15--大规模机器学习

继续是机器学习课程的笔记&#xff0c;本节内容主要是介绍大规模机器学习的内容。 大型数据集的学习 对于一个过拟合的模型&#xff0c;增加数据集的规模可以帮助避免过拟合&#xff0c;并获得一个更好的结果。 但是对于一个大规模的数据&#xff0c;比如有100万个数据量的训…
阅读更多...
前端学习（3038）：vue+element今日头条管理-使用请求拦截器

前端学习（3038）：vue+element今日头条管理-使用请求拦截器

阅读更多...
Linux管道和重定向 ---多命令协作

Linux管道和重定向 ---多命令协作

管道及重定向就是Linux多命令协作的基础机制Linux的Shell对数据流进行以下分类定义&#xff1a; 　　stdin 标准输入 编号为&#xff1a;0 默认&#xff1a;键盘　　stdout 标准输出 编号为&#xff1a;1 默认&#xff1a;终端　　stderr 标准错误 编号为&…
阅读更多...
java 骰子_基本随机滚动骰子Java

java 骰子_基本随机滚动骰子Java

5 个答案:答案 0 :(得分&#xff1a;12)Random.nextInt()具有不可预测的行为 - 它可以为整数生成所有可能的值&#xff0c;包括负数。改为使用Random.nextInt(numSides) - 它将从[0&#xff0c;numSides]返回一个整数&#xff0c;即包括0并排除numSides。要获得所需的功能[1&am…
阅读更多...
[机器学习笔记]Note16--应用示例：图像文字识别

[机器学习笔记]Note16--应用示例：图像文字识别

继续是机器学习课程的笔记&#xff0c;本节课是最后一节内容了&#xff0c;主要是介绍一个应该–图中文字的识别。 问题描述和流程图 图像文字识别应用就是从给定的图片中识别文字。这比从一份扫描文档中识别文字要复杂得多。一个例子图片如下所示&#xff1a; 为了完成这样的…
阅读更多...
java中文处理_Java的中文乱码处理

java中文处理_Java的中文乱码处理

1&#xff0c;设置编译器的编码(Eclipse)、Window >preferences>Workspace> Text file encoding下的Other设置为UTF-8设置jsp页面的编码(Eclipse)Window >preferences>Web> JSPFile>Encoding设置为UTF-82.从前端获取的数据乱码(1)request.setCharacterEnc…
阅读更多...
前端学习（3039）：vue+element今日头条管理-侧边菜单栏的展示和收缩

前端学习（3039）：vue+element今日头条管理-侧边菜单栏的展示和收缩

阅读更多...
[线性代数]Note2--矩阵消元

[线性代数]Note2--矩阵消元

第二节介绍矩阵消元的知识. 消元法 首先是给出一个例子来说明消元法的使用&#xff0c;例子如下所示&#xff1a; ⎧⎩⎨x2yz23x8yz124yz2\begin{cases} x+2y+z=2 \\ 3x+8y+z=12 \\4y+z=2 \end{cases}用矩阵表示就是 A⎡⎣⎢130284111⎤⎦⎥b⎡⎣⎢2122⎤⎦⎥A = \left[ \be…
阅读更多...
error LNK2019: unresolved external symbol _WinMain@16 referenced in function ___tmainCRTStartup

error LNK2019: unresolved external symbol _WinMain@16 referenced in function ___tmainCRTStartup

一、问题描述&#xff1a; error LNK2019: unresolved external symbol _WinMain16 referenced in function ___tmainCRTStartup 二、产生原因&#xff1a; 1. 你用vc建了一个控制台程序&#xff0c;它的入口函数应该是main, 而你使用了WinMain.2. 你用vc打开了一个.c/.cpp 文…
阅读更多...
python小老鼠编程_邯郸pythonnot学习费用多少

python小老鼠编程_邯郸pythonnot学习费用多少

邯郸pythonnot学习费用多少更新时间&#xff1a;2020-08-02 12:49:04注意&#xff1a;如果出现错误&#xff0c;可能是因为安装时未勾选AddPython3.5toPATH选项&#xff0c;此时卸载Python后重新安装时勾选AddPython3.5toPATH选项即可。1.2Mac中安装Python3Mac系统中自带了Pyth…
阅读更多...
前端学习（3040）：vue+element今日头条管理-上午回顾

前端学习（3040）：vue+element今日头条管理-上午回顾

阅读更多...
[线性代数]Note3--乘法和逆矩阵

[线性代数]Note3--乘法和逆矩阵

继续是线性代数的学习笔记&#xff0c;第三节课乘法和逆矩阵 矩阵乘法 首先是对于矩阵相乘&#xff0c;如矩阵A和B相乘得到C&#xff0c;即A*BC;那么如果要得到矩阵C的一个元素&#xff0c;如c34,其求解如下所示&#xff1a; c34a31∗b14a32∗b24…∑k1na3kbk4c_{34} = a_{3…
阅读更多...
数学/sgu 130 Circle

数学/sgu 130 Circle

题意 一个圆上有2k点&#xff0c;请输出点于点之间连线使得所分区域块数最小的方案总数以及区域数 分析 2k个点最少能把平面分成k1的区域&#xff0c;易证&#xff1b; 至于方案数&#xff0c;利用递推和乘法原理 令f[i]表示2i个点时的方案数&#xff0c;f[0]f[1]1,则f[i]sigma…
阅读更多...
java多线程调用nsq消费_spark-streaming连接消费nsq

java多线程调用nsq消费_spark-streaming连接消费nsq

spark-streaming连接消费nsq目的使用 NSQ作为消息流使用 spark-streaming 进行消费对数据进行清洗后&#xff0c;保存到hive仓库中连接方案1、编写Spark Streaming Custom Receivers(spark-streaming 自定义接收器)&#xff0c;详细见文档2、使用 nsq 官方提供的Java程序连接包…
阅读更多...
最新文章

Copyright @ 2022~2023