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 ...
随机推荐
- 【HDU 5733】tetrahedron
输入4个点三维坐标,如果是六面体,则输出内切球的球心坐标和半径. 点pi对面的面积为si,点a,b,c组成的面积=|ab叉乘ac|/2. 内心为a,公式: s0=s1+s2+s3+s4 a.x=∑si ...
- 有一种算法叫做“Union-Find”?
前言: 不少搞IT的朋友听到“算法”时总是觉得它太难,太高大上了.今天,跟大伙儿分享一个比较俗气,但是却非常高效实用的算法,如标题所示Union-Find,是研究关于动态连通性的问题.不保证我能清晰的 ...
- matlab之meshgrid()函数
以最常见的一个用法为例: [X,Y]=meshgrid(xgv, ygv) xgv是一个(一维的,行)向量,ygv也是. 产生的X和Y,规格相同,都是二维向量,高度为size(ygv,2),宽度为si ...
- 树上倍增求LCA(最近公共祖先)
前几天做faebdc学长出的模拟题,第三题最后要倍增来优化,在学长的讲解下,尝试的学习和编了一下倍增求LCA(我能说我其他方法也大会吗?..) 倍增求LCA: father[i][j]表示节点i往上跳 ...
- 【poj1041】 John's trip
http://poj.org/problem?id=1041 (题目链接) 题意 给出一张无向图,求字典序最小欧拉回路. Solution 这鬼畜的输入是什么心态啊mdzz,这里用vector储存边, ...
- 使用Chrome或Fiddler抓取WebSocket包
首先,HTTP是建立在TCP协议基础上的,而WebSocket通常也是建立在TCP上,所以说为什么有些网页游戏抓不到包而有些又可以,这仅是因为你使用的抓包工具是针对了HTTP的通信协议. 我先从抽象的 ...
- DataTable是否存在某个列的判断
使用 DataTable.Columns.Contains方法可以判断某个列名是否存在于某个DataTable中 //添加模拟数据 DataTable t = new DataTable(); Dat ...
- Android成长日记-ViewPager的使用
ViewPager在安卓应用中主要用于作为程序的引导页面,欢迎页面,以及其他的动画效果,下面将给你讲述ViewPager的使用 在Android3.0以上的Api中,提供了ViewPager的接口,所 ...
- POJ 2976 Dropping tests(最大化平均值 or 01整数规划)
题目链接 忽略运算符逻辑导致奇怪的错误(代码中指明位置了) 输出没加0.5,WA. 还有,注意特殊情况k=0,所以scanf("%d%d", &n, &k)& ...
- 几个容易被忽略的mysql知识
为什么标题要起这个名字呢?commen sence指的是那些大家都应该知道的事情,但往往大家又会会略这些东西,或者对这些东西一知半解,今天我总结下自己在mysql中遇到的一些commen sense类 ...