一、语义化结构化标签

结构化标签优点:

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 常用的结构化标签整理的更多相关文章

  1. HTML5常用的语义化标签

    快速查询 article | aside | nav | section | header | footer 架构预览 nav 定义导航链接的部分 在页脚显示一个站点的导航链接,如首页.服务信息页面. ...

  2. HTML5结构化标签

    一 结构化标签 在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介 ...

  3. HTML5学习之语义化标签(一)

    一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...

  4. HTML5学习之语义化标签

    一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...

  5. 从零开始学 Web 之 HTML5(一)HTML5概述,语义化标签

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. html5新增的语义化标签极其作用

    在html5中,新增了几个语义化标签:<article>.<section>.<aside>.<hgroup>. <header>,< ...

  7. Html5新增的语义化标签(部分)

    2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,html5的标准规范终于制定完成.这是互联网的一次重大变革,这也许是一个时代的来临! 总结一些h5新增的语义化标签,记录下来方便自己学习 ...

  8. My SQL随记 001 常用名词/结构化语言

    DBMS (Database Management System) 字段/域(列名或者列头 如:姓名身高性别为字段) 姓名 身高 性别 小周周 157 女 记录(一行数据 如:小周周 157 女 ) ...

  9. HTML5 部分新增语义化标签元素

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. userAgent收集

    UserAgent AppleWebKit,Gecko,Trident,Presto http://www.httpuseragent.org/list/ 谷歌:360? Mozilla/5.0 (W ...

  2. css3-新属性-用户界面

    多列:(对文本进行布局,像报纸那样) column-count: 规定元素应该被分隔得列数: column-gap:规定列之间的间距: column-rule: 列与列之间的间隔线: column-w ...

  3. 管道命令和xargs的区别(经典解释)

    一直弄不懂,管道不就是把前一个命令的结果作为参数给下一个命令吗,那在 | 后面加不加xargs有什么区别 NewUserFF 写道: 懒蜗牛Gentoo 写道: 管道是实现"将前面的标准输出 ...

  4. Vim快速移动光标至行首和行尾

    1. 需要按行快速移动光标时,可以使用键盘上的编辑键Home,快速将光标移动至当前行的行首.除此之外,也可以在命令模式中使用快捷键"^"(即Shift+6)或0(数字0). 2. ...

  5. Web前端性能优化教程08:配置ETag

    本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:配置ETag.完整教程可查看:Web前端性能优化 什么是ETag? 实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串, ...

  6. Java反序列化测试

    前言:有没有想过,如何将对象进行“加密”后写入磁盘?序列化帮你实现! 1.概念 序列化 (Serialization)将对象的状态信息转换为可以存储或传输的形式的过程.在序列化期间,对象将其当前状态写 ...

  7. bzoj4401: 块的计数

    首先,块的大小确定的话,可以发现方案最多只有1种 然后就可以O(nsqrt(n))搞,不过会TLE 接着我们又发现,一个节点可以作一个块的根,当且仅当该节点的size能被块的大小整除 然后就可以O(n ...

  8. WinRAR命令行

    用法: rar <命令> -<开关 1> -<开关 N> <压缩文件> <文件...> <@列表文件...> <解压路径\ ...

  9. 洛谷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 ...

  10. Arrya数组添加过滤条件

    var arr = new Array(); arr.push(); arr.push(); arr.push(); var rs = arr.filter(function (value,index ...