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 ...
随机推荐
- HTML5文件系统API和资料整理
来着火狐开发网络的官方文档:点我打开 : W3C的官方文档: 点我打开 : 园友的博客: 点我打开: 浏览器兼容性, 好了就chrome支持, 我刚刚更新的火狐37也不支持, nice, 太nice ...
- PyQt之布局&无边框&信号
这个例子相对综合一些,包括qt的布局,实现无边框效果,无边框也就是没有了窗口的title栏,没有title栏就不能拖动了, 所以我们进一步讲如何实现拖动.通过这边文章你可以掌握qt的布局,窗口定制,重 ...
- js-回车事件控制
1.文本框回车时间 < script type = "text/javascript" language = "javascript" > fun ...
- 【HDU 5833】Zhu and 772002(异或方程组高斯消元)
300个最大质因数小于2000的数,选若干个它们的乘积为完全平方数有多少种方案. 合法方案的每个数的质因数的个数的奇偶值异或起来为0. 比如12=2^2*3,对应的奇偶值为01(2的个数是偶数为0,3 ...
- 寻找数组中的第K大的元素,多种解法以及分析
遇到了一个很简单而有意思的问题,可以看出不同的算法策略对这个问题求解的优化过程.问题:寻找数组中的第K大的元素. 最简单的想法是直接进行排序,算法复杂度是O(N*logN).这么做很明显比较低效率,因 ...
- Quality trimming using Trimmomatic
java -jar /home/liuhui/bin/trinityrnaseq_r20140413p1/trinity-plugins/Trimmomatic/trimmomatic.jar PE ...
- 【C++实现python字符串函数库】二:字符串匹配函数startswith与endswith
[C++实现python字符串函数库]字符串匹配函数startswith与endswith 这两个函数用于匹配字符串的开头或末尾,判断是否包含另一个字符串,它们返回bool值.startswith() ...
- Subversion详解
Subversion特性 1.版本化目录 可以跟踪目录树的变更.文件和目录都是版本化的,SVS只能跟踪单个文件: 2.精确的文件跟踪 可以对文件和目录进行 增加.复制.改名,解决了同名 而 无关的文件 ...
- Pycharm设置
File->settings->Editor->File and Code Templates->Python Script #!/usr/bin/env python # e ...
- OPENGL若干重要基础概念
投影:3D数据“压平”到2D的计算机屏幕上,即将真正的三维物体显示到二维屏幕上,这种3D压平到2D的过程称为投影. 投影类型:正投影,透视投影 正投影:垂直于投影平面的平行投影(不垂直的投影平面的平行 ...