html5中的一些新语义标签
<header>
<nav>
<ul>
<li><a href="">栏目1</a></li>
<li><a href="">栏目2</a></li>
<li><a href="">栏目3</a></li>
</ul>
</nav>
</header> <main>
<article>
<header>
<hgroup>
<h1>这是h1标题</h1>
<h2>这是文章的副标题</h2>
</hgroup>
<p>这是头部的文字,文章发布于<time>2016-02-24</time></p>
</header>
<div class="content">
<p>这里是文章的正文。</p>
<figure>
<img src="xxx.jpg" alt="xxx">
<figcaption>这里是图片的图片标题</figcaption>
</figure>
</div>
</article>
</main> <aside>
<h2>相关文章推荐</h2>
<ul>
<li>文章1</li>
<li>文章2</li>
</ul>
</aside>
<footer>
<p>这是页脚的文字</p>
</footer>
html5最重要的特性之一,是引入了一些具有语义的标签,使得页面的代码更可读和结构化。
基本上来说,IE8以下的版本对html5的新标签支持非常差,需要一些方法来使这些浏览器支持这些新标签。
<time>标签:
用于标记时间和日期。
<nav>标签:
用来标注导航链接。一个页面可以包含多个nav区块。
<main>标签:
标记文档的主要内容。
<article>标签:
表示一个完整的、自成一体的内容块,如博客文章、新闻报道或者用户评论等。<article>标签应该包含所有相关的内容,包括标题、作者署名以及正文等。
<header>标签:
用来描述或导航包含它的父级区块,通常需要包含h标签。在一个网页中可以有多个header标签。如同时有网页的header和正文的header。
<hgroup>标签:
如果除了主标题,还有一个副标题,则应该把h1和h2放到hgroup中,此时h2不表示下面文字的子标题,而是整篇文章的副标题。
<figure>标签:
用来标记插图区域。插图是文章中的附图,在文章中会提到它。
<figcaption>标签:
用来标记题图。
<aside>标签:
用来标记与周围内容关系不太密切的内容,如广告、侧边栏等。
<section>标签:
是一个带标题的独立性内容块。
<footer>标签:
用来标记网页的页脚,放置一些网站版权信息等不太重要的信息。
html5中的一些新语义标签的更多相关文章
- Html5 中的新语义标签
1.1 语义标签对于我们并不陌生,如<p>表示一个段落.<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等,在此基础上HTML5增加了大量更 ...
- [翻译]HTML中不知名的语义标签
原文:http://docs.webplatform.org/wiki/tutorials/Lesser_-_known_semantic_elements HTML5中比较常用的语义元素有heade ...
- HTML5 中的一些新特性
HTML5是HTML最新的修订版本,包含了新的标签元素,属性和行为,同时包含了一系列可以被用来让 Web 站点和应用更加多样化,功能更强大的技术.HTML5实现了不依赖flash插件播放视频,而且引入 ...
- 【HTML5】---【HTML5提供的一些新的标签用法以及和HTML 4的区别】
HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务(p ...
- 让低版本IE支持Html5的新语义标签
HTML5能为我们做的事儿很多,最为可口的就是语义化标签的应用,如果你已经在Chrome或者其他支持HTML5的浏览器上用过它的牛x,那这篇文章对你一定有用,因为现在你也可以在IE上用到HTML5. ...
- HTML5中的文本级语义
<p>这篇文章的发布时间是<time datetime="2016-02-26T16:30+08:00" pubdate>今天</time>&l ...
- html5中contenteditable属性如果过滤标签,过滤富文本样式
在div中使用contenteditable=”true”可以达到模拟输入框的效果,但是当我们复制其他网页内容进去的时候,会发现连带的样式也一起复制进去了.很明显我们不需要复制富文本样式,那么如何 ...
- HTML5中的DOM新特性
元素下的classList属性 classList属性下面有四个方法: add(value): 添加,已存在的属性不添加 remove(value):删除属性 contain(value):检测属性是 ...
- html5中常被忘记的标签,属性
placeholder placeholder是input中的属性,就是默认输入的text,当用户输入时,text会被清空. 用法 <input type ="text" p ...
随机推荐
- ZooKeeper报错
运行python 出现exception=java.io.IOException: Can't get master address from ZooKeeper; znode data == nul ...
- C#开发COM组件
1.每个COM组件所有对外公布的方法都必须通过接口形式实现: 2.由于.Net下编译的COM组件并等同于C编译的COM组件,所以存在必须在运行目标机器注册的情况,对此.Net下编译的COM组件必须为程 ...
- KEIL MDK 5.12帮你快速建工程模板的技巧
KEIL 5帮你快速建工程模板的技巧 本人使用keil mdk 5.12有一段时间了,发现keil mdk 5.12里面驱动库比较方便.这个新功能可以节省我们的时间,也可以让初学者能尽快上手和掌握这个 ...
- ios获取摄像头与相册图片
iOS的一些设备上都安装了摄像头.现在绝大多数都有了. 在编程中,我们是用相应的东西来进行照相,录像等功能. 一.UIImagePickerController类 UIImagePickerCon ...
- Oracle VM VirtualBox 虚拟机与主机共享文件
安装增强功能(参考文档) VirtualBox自带了一个增强工具Sun VirtualBox Guest Additions,这是实现虚拟机与真实主机共享的关键.启动虚拟机后,点击控制菜单“设备”→“ ...
- [转] Java内部类详解
作者:海子 出处:http://www.cnblogs.com/dolphin0520/ 本博客中未标明转载的文章归作者海子和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置 ...
- Android ActionBar以及menu的代码设置样式
menu部分xml代码 <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android= ...
- 项目问题总结:Block内存泄露 以及NSTimer使用问题
BLock的内存泄露 在我们代码中关于block的使用可以说随处可见,第一次接触block的时候是关于UIView的块动画,那时觉得block的使用好神奇,再后来分析总结为block其实就是一个c语言 ...
- 学习笔记day6:position index结合
z-index属性适用于定位元素(position 属性值为 relative 或 absolute 或 fixed的对象),用来确定定位元素在垂直于显示屏方向(称为Z轴)上的层叠顺序(stack o ...
- Monkey学习(1)环境搭建
环境搭建: Monkey程序由Android系统自带,需要配置J2SE平台的JDK,还需要配置Android平台的SDK. 1)下载和配置JDK 下载与安装JDK过程省略... 配置JDK环境变量,我 ...