HTML5 常用的结构化标签整理
一、语义化结构化标签
结构化标签优点:
1、方便浏览器处理和识别,提升了网页的质量和语义。
2、减少了大量无意义的div标签,增强代码的可读性。
结构化标签:(header,nav,body,article,section,aside,hgroup,figure,figcaption,footer)
<header>定义文档的页眉
<nav>定义导航链接的部分
<article>定义外部的内容,可以是一篇新的文章
<section>定义文档的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
<aside>定义article以外的内容,aside的内容可用作文章的侧边栏
<figure>用于对元素进行组合,使用figcaption元素为元素组添加标题
<figcaption>定义figure元素的标题
<hgroup>用于对section或网页的标题进行组合,使用figcaption元素为元素添加标题
<time>定义日期或时间,或者两者。
<footer>定义section或文档的页脚
HTML5的文档结构
<header>...</header>
<nav>...</nav>
<article>
<section> ... </section>
</article>
<aside>...</aside>
<footer>...</footer>
HTML5的图片结构
<figure id="fig2">
<legend>Figure 2. Install Mozilla XForms dialog</legend>
<img alt="A Web site is requesting permission to install the ollowing item: Mozilla XForms 0.7 Unsigned" src="installdialog.jpg" />
</figure>
虽然这些标签都有固定的用意,但具体情况还要具体分析。标签的使用可以根据自己的需求做适当的调整!
二、格式化文本标签

三、常用表格标签

四、常用列表标签

HTML5 常用的结构化标签整理的更多相关文章
- HTML5常用的语义化标签
快速查询 article | aside | nav | section | header | footer 架构预览 nav 定义导航链接的部分 在页脚显示一个站点的导航链接,如首页.服务信息页面. ...
- HTML5结构化标签
一 结构化标签 在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介 ...
- HTML5学习之语义化标签(一)
一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...
- HTML5学习之语义化标签
一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...
- 从零开始学 Web 之 HTML5(一)HTML5概述,语义化标签
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- html5新增的语义化标签极其作用
在html5中,新增了几个语义化标签:<article>.<section>.<aside>.<hgroup>. <header>,< ...
- Html5新增的语义化标签(部分)
2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,html5的标准规范终于制定完成.这是互联网的一次重大变革,这也许是一个时代的来临! 总结一些h5新增的语义化标签,记录下来方便自己学习 ...
- My SQL随记 001 常用名词/结构化语言
DBMS (Database Management System) 字段/域(列名或者列头 如:姓名身高性别为字段) 姓名 身高 性别 小周周 157 女 记录(一行数据 如:小周周 157 女 ) ...
- HTML5 部分新增语义化标签元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- userAgent收集
UserAgent AppleWebKit,Gecko,Trident,Presto http://www.httpuseragent.org/list/ 谷歌:360? Mozilla/5.0 (W ...
- css3-新属性-用户界面
多列:(对文本进行布局,像报纸那样) column-count: 规定元素应该被分隔得列数: column-gap:规定列之间的间距: column-rule: 列与列之间的间隔线: column-w ...
- 管道命令和xargs的区别(经典解释)
一直弄不懂,管道不就是把前一个命令的结果作为参数给下一个命令吗,那在 | 后面加不加xargs有什么区别 NewUserFF 写道: 懒蜗牛Gentoo 写道: 管道是实现"将前面的标准输出 ...
- Vim快速移动光标至行首和行尾
1. 需要按行快速移动光标时,可以使用键盘上的编辑键Home,快速将光标移动至当前行的行首.除此之外,也可以在命令模式中使用快捷键"^"(即Shift+6)或0(数字0). 2. ...
- Web前端性能优化教程08:配置ETag
本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:配置ETag.完整教程可查看:Web前端性能优化 什么是ETag? 实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串, ...
- Java反序列化测试
前言:有没有想过,如何将对象进行“加密”后写入磁盘?序列化帮你实现! 1.概念 序列化 (Serialization)将对象的状态信息转换为可以存储或传输的形式的过程.在序列化期间,对象将其当前状态写 ...
- bzoj4401: 块的计数
首先,块的大小确定的话,可以发现方案最多只有1种 然后就可以O(nsqrt(n))搞,不过会TLE 接着我们又发现,一个节点可以作一个块的根,当且仅当该节点的size能被块的大小整除 然后就可以O(n ...
- WinRAR命令行
用法: rar <命令> -<开关 1> -<开关 N> <压缩文件> <文件...> <@列表文件...> <解压路径\ ...
- 洛谷P2853 [USACO06DEC]牛的野餐Cow Picnic
题目描述 The cows are having a picnic! Each of Farmer John's K (1 ≤ K ≤ 100) cows is grazing in one of N ...
- Arrya数组添加过滤条件
var arr = new Array(); arr.push(); arr.push(); arr.push(); var rs = arr.filter(function (value,index ...