HTML5-语义化标签
article
-- 解释
article标签装载显示一个独立的文章内容。例如一篇完整的论坛帖子,一则网站新闻,一篇博客文章等等,一个用户评论等等 artilce可以嵌套,则内层的artilce对外层的article标签有隶属的关系。例如,一个博客文章,可以用article显示,然后一 些评论可以以article的形式嵌入其中。
-- 示列
<article>
<h1>文章标题</h1>
这是一篇文章
<article>评论1...</article>
<article>评论2...</article>
</article>
section
-- 解释
section 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
-- 示列
<body>
<section>
<h1>章节一</h1>
<p>详细内容...</p>
</section>
<section>
<h1>章节二</h1>
<p>详细内容...</p>
</section>
</body>
aside
-- 解释
aside 用来装载非正文类的内容。例如广告,成组的链接,侧边栏等等。
-- 示列
<body>
<aside>
热门文章
</aside>
<aside>
广告
</aside>
<article>
<h1>文章标题</h1>
这是一篇文章
<article>评论1...</article>
<article>评论2...</article>
</article>
</body>
hgroup
-- 解释
hgroup 标签用于对网页或区段的标题元素(h1-h6)进行组合。例如,在一个区段中你有连续的h系列的标签元素,则可以用hgroup将他们括起来。
-- 示列
<hgroup>
<h1>The reality dysfunction</h1>
<h2>Space is not the only void</h2>
</hgroup> <hgroup>
<h1>Dr. Strangelove</h1>
<h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2>
</hgroup>
header
-- 解释
header 标签定义文档的页面组合,通常是一些引导和导航信息。
-- 示列
<header>
<p>this is the page Logo</p>
<nav>this is page navigation</nav>
</header>
footer
-- 解释
footer 标签定义 section 或 document 的页脚。在典型情况下,该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。
-- 示列
<footer> © 2012 Baidu 使用百度前必读 京ICP证030173号 </footer>
nav
-- 解释
nav 标签定义显示导航链接不是所有的成组的超级链接都需要放在nav标签里。nav标签里应该放入一些当前页面的主要导航链接。 例如在页脚显示一个站点的导航链接(如首页,服务信息页面,版权信息页面等等),就可以使用nav标签,当然,这不是必须的。
-- 示列
<nav>
<ul>
<li><a href=”articles.html”>Index of all articles</a></li>
<li><a href=”today.html”>Things sheeple need to wake up for today</a></li>
<li><a href=”successes.html”>Sheeple we have managed to wake</a></li>
</ul>
</nav>
time
-- 解释
time 标签定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码,这样, 举例说,用户代理能够把生日提醒或排定的事件添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果。
-- 示列
<p>我们在每天早上 <time>9:00</time>
开始营业。</p>
<p>我在 <time datetime="2008-02-14">情人节</time>
有个约会。</p>
mark
-- 解释
mark 标签定义带有记号的文本。请在需要突出显示文本时使用 <mark> 标签。
-- 示列
<p>Do not forget to buy <mark>milk</mark>
today.</p>
figure
-- 解释
figure标签规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
-- 示列
<p>黄浦江上的的卢浦大桥</p> <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>
figcaption
-- 解释
figcaption 标签定义 figure 元素的标题(caption)。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
-- 示列
<figure> <figcaption>黄浦江上的的卢浦大桥</figcaption> <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>
contextmenu+menu
-- 解释
contextmenu 添加到系统右键菜单 [貌似这个功能只有firefox支持,很悲催的]
-- 示列
<div>添加到系统右键菜单< contextmenu=mymenu /div> <menu type="context" id="mymenu" />
<!--进度条progress 直接的 每个浏览器样式不一样-->
<progress></progress>
<!--0.1指的是进度到百分之10 这样其余是空白的 算是进度指示条-->
<!--100指的是进度数值为100 那么0.1指100分之0.1 默认为1-->
<!--进度条想动用JS啊-->
<progress class="myStyle" value="0.1" max="100"></progress>
<!--我想体现一个数据(固定的)比如华东地区的房子购买比例那么用进度条显示-->
<!--这个时候我们用mate标签-->
<!--这个没有什么浏览器支持-->
<!-- Value:表示当前标量的实际值;如果不做指定,那么meter标签中的第一个数字就会被认为是其当前实际值,如果标签内没有数字,那么标量的实际值就是0。
Min:当前标量的最小值;如不做指定则为0。
Max:当前标量的最大值;如不做指定则为1;如果指定的最大值小于最小值,那么最小值会被认为是最大值。
Low:当前标量的低值区;必须小于或等于标量的高值区数字;如果低值区数字小于标量最小值,那么它会被认为是最小值。
High:当前标量的高值区。
Optimum:最佳值;其范围在最小值与最大值区间当中,并且可以处于高值区 -->
<meter min="0" max="100" low="40" high="90" optimun="100" value="91">A+</meter>
</body>
</html>
HTML5-语义化标签的更多相关文章
- html5语义化标签使用规范
Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...
- Html5语义化标签详解及其兼容性处理
<header></header> 页眉 主要用于页面的头部的信息介绍,也可用于板块头部 <hgroup></hgroup> 页面上的一个标题组合 一个 ...
- html5语义化标签——回顾
html5 头部结构 <!doctype html> <meta charset=“utf-8”/> <header></header> 页眉 ...
- 第二季第十一天 html5语义化标签 css透明度
span不能设置宽高背景 HTML5语义化标签 <section>标签所包裹的是有一组相似的主题的内容,可以用这个标签来实现文章的章节.标签式对话框中的各种标签页等类似的功能. <s ...
- HTML5语义化标签
在HTML5中最基础也是比较好理解的也就是语义化标签了,,顾名思义语义化也就是可以直接读懂的标签~,这样我们在项目开发过程中不但自己不会因为5花8门的标签命名而伤脑筋,跟同事对接项目也会节约很多时间~ ...
- 让HTML5语义化标签兼容IE浏览器
解决方案:IE9以下旧版本浏览器不支持新的语义化标签.其中一种解决方案就是用js将HTML5增加的标签创建出来,就像下面这样.(放在header部位) <script> var html5 ...
- html5语义化标签总结二
HTML 5的革新之一:语义化标签二文本元素标签.分组元素标签. HTML 5的革新——语义化标签(一)中介绍了一些HTML5新加的一些节元素,一张页面中结构元素构成网页大体,但是也需要其他内容来填充 ...
- 转html5语义化标签总结一
HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...
- HTML5语义化标签重构页面
在HTML5未出现之前我们都用div+css来构建页面,比如<div id=”header”>,div的滥用,使得代码的可读性和可维护性很差,现在用本文来介绍一下用HTML5′干净的’语义 ...
- HTML5语义化标签总结
1.语义化标签总结 基础布局标签 <header></header> <nav></nav> <main></main> < ...
随机推荐
- CODEFORCES掉RATING记 #5
比赛:Codeforces Round #429 (Div. 2) 时间:2017.8.1晚 这次感觉状态不好,就去打div2了 A:有\(26\)种颜色的气球,每种的数量不一样,你要把这 ...
- django.core.exceptions.AppRegistryNotReady: Apps aren't loaded yet.
报错现象 django 启动的时候报错 django.core.exceptions.AppRegistryNotReady: Apps aren't loaded yet. 报错解决 记不清是我有毛 ...
- 【题解】 bzoj3916: [Baltic2014]friends (字符串Hash)
题面戳我 Solution 首先长度为偶数可以直接判掉 然后我们可以枚举删的位置,通过预处理的\(hash\),判断剩余部分是否划分成两个一样的 判重要注意,我们把字符串分为三个部分\(L_l+1+L ...
- Android LinearLayout 渐变背景
更多 参考 Drawable Resources | Android Developers main_header.xml: <?xml version="1.0" enc ...
- 【BZOJ3730】震波(动态点分治)[复习]
题面 BZOJ 题解 动态点分治什么的完全不记得了.这回重新写一写. 首先我们把点分树给建出来. 操作只有两种,修改和询问距离某个点的距离不超过\(k\)的点的和. 两点之间的距离可以树链剖分之类的算 ...
- Who Gets the Most Candies? POJ - 2886 (线段树)
按顺时针给出n个小孩,n个小孩每个人都有一个纸,然后每个人都有一个val,这个val等于自己的因子数,如果这个val是正的,那就顺时针的第val个孩子出去,如果是负的话,就逆时针的第val个孩子出去, ...
- Django 跨域请求
跨域:通过js或python在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(Django)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- Vue+Django2.0 restframework打造前后端分离的生鲜电商项目(2)
1.restful api介绍 1.前后端分离的优缺点 1.为什么要用前后端分离 1.pc.app.pad多端适应 2.SPA(单页面应用)开发模式开始流行 3.前后端分离职责不清 4.开发效率问题, ...
- Day033--Python--进程
什么是进程? 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础.在早期面向进程设计的计算机结构中,进程是程序的基本执行实体 ...
- spring的设计模式
spring中用到哪些设计模式 1.工厂模式,这个很明显,在各种BeanFactory以及ApplicationContext创建中都用到了: 2.模版模式,这个也很明显,在各种BeanFacto ...