HTML5语义标签的实践
<article> 定义一篇文章
- 论坛发帖
- 博客文章
- 一篇文章
<article>
<h1>标题</h1>
<p>内容</p>
</article>
<aside> 侧边栏
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
<details> 附加详细信息
<summary> 摘要
<details>
<summary>Copyright 1999-2014.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
除了summary其他内容默认隐藏,当details元素添加了open属性的时候p标签的内容才会显示。
<figcaption> 图片标题
<figure> 定义图片分组
<figure>
<img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
</figure>
<footer> 页脚
<footer>
<p>底部</p>
</footer>
<header> 定义头部
<header>
<h1>标题</h1>
<p>内容</p>
</header>
通常我们会用到文章的简介里面
<article>
<header>
<h1>标题</h1>
<p>简介</p>
</header>
<p>内容</p>
</article>
<main> 定义主体内容
<main>
<h1>Web Browsers</h1>
<p>Google Chrome, Firefox, and Internet Explorer are the most used browsers today.</p><article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser developed by Google,
released in 2008.</p>
</article><article>
<h1>Mozilla Firefox</h1>
<p>Firefox is a free, open-source web browser from Mozilla, released in 2004.</p>
</article>
</main>
<mark> 定义标记,高亮,需要突出的文字
<p>Do not forget to buy <mark>milk</mark> today.</p>
<nav> 定义一组链接
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
<section> 定义块,通常包含一个标题和一段内容
<section>
<h1>标题</h1>
<p>内容</p>
</section>
<time> 定义时间
<p>We open at <time>10:00</time> every morning.</p>
<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>
<hgroup> 定义标题组
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
HTML5语义标签的实践的更多相关文章
- html5-7 html5语义标签和视频
html5-7 html5语义标签和视频 一.总结 一句话总结:设计网站的时候要兼顾早期浏览器的话,最新技术要缓着用,自己可以先尝试. 1.html5所有标签共有属性有哪四种? 1.id2.clas ...
- html5——语义标签
传统布局 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...
- Html5 -- 语义标签兼容性处理
方法一:通过js处理 方法二:完美的处理方式 no.1 !--[if lte IE 8]> <script type="text/javascript" src=&qu ...
- 使用HTML5语义标签时要注意的问题
header,nav,section,article,aside,figue,figcaption,footer以上这些标签(除figcaption标签外)都是块级标签,为了让这些标签及元素在所有的浏 ...
- html5语义标签
- html5语义化标签总结二
HTML 5的革新之一:语义化标签二文本元素标签.分组元素标签. HTML 5的革新——语义化标签(一)中介绍了一些HTML5新加的一些节元素,一张页面中结构元素构成网页大体,但是也需要其他内容来填充 ...
- 转html5语义化标签总结一
HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...
- IE8兼容H5语义标签
//IE浏览器定义的特殊属性,通过hack方式判断IE版本来执行不同的代码,IE8以下浏览器自动创建html5语义标签,从而实现兼容<!--[if lte IE 8] <script sr ...
- 【HTML5】如何处理HTML5新标签的浏览器兼容版问题
HTML5规范毕竟是刚刚才定义完成的规范,还有一些浏览器并不能支持其中的新标签和新属性,尤其是IE8及以下版本浏览器.以下介绍一些在页面中使用HTML5新标签的实践方法,目的是让HTML5中的新标签在 ...
随机推荐
- ios xcode 下 报出 ”xx“is missing from working copy 的问题
在项目中提交过svn后,再在本机上删除不用的图片资源后,build后会有 ”xx“is missing from working copy 的警告.在网上找了些资料后,总结下. 直接在终端下用s ...
- mac os 体验
苹果电脑和苹果手机不同,不需要苹果ID就可以使用. 之后依次安装xcode, visual studio code, flash player. eclipse 还没有安装成功.
- 未注册wang域名批量查询工具
一.支持规则查询 可自定义生成域名进行查询,可生成任意位数的字母数字域名,根据[声母].[韵母]生成单拼,双拼,三拼等域名,还可根据字典生成,支持全拼.首拼识别,全国城市区号.城市全拼.城市首拼.热门 ...
- 逐帧动画(Frame-by-frame Animations)
1.这一类动画可以创建一个Drawable序列,这些Drawable可以按照指定的时间间歇一个一个的显示. xml定义方法 <animation-list xmlns:android=" ...
- postfix下dovecot查收邮件连接错误
[root@localhost ~]# telnet mail.izyno.com 110 Trying 192.168.199.133... Connected to mail.izyno.com. ...
- 添加Labels的两种方法
private void AddLabel(IFeatureLayer pLayer,string fieldname,ITextSymbol Symbol) { container.DeleteAl ...
- linux-15基础命令之-用户与用户组(useradd,userdel,usermod,passwd,groupadd)
1.useradd 命令用于创建新的用户,格式为:useradd[选项] 用户名 useradd参数 参数 作用 -d 指定用户的家目录(默认/home/username) -D 展示默认值 -e 帐 ...
- Metrics-Java版的指标度量工具之一
Metrics是一个给JAVA服务的各项指标提供度量工具的包,在JAVA代码中嵌入Metrics代码,可以方便的对业务代码的各个指标进行监控,同时,Metrics能够很好的跟Ganlia.Graphi ...
- Java实现敏感词过滤
敏感词.文字过滤是一个网站必不可少的功能,如何设计一个好的.高效的过滤算法是非常有必要的.前段时间我一个朋友(马上毕业,接触编程不久)要我帮他看一个文字过滤的东西,它说检索效率非常慢.我把它程序拿过来 ...
- 项目开发之使用 maven
本文将详述 maven 在软件项目中的使用.首先讲述 maven 的基本工作原理及环境的搭建.然后讲述开发及配置管理人员如何使用 maven,最后将介绍 maven 与 eclipse 集成使用. m ...