一、语义化结构化标签

结构化标签优点:

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. jquery-遍历each

    使用案例一 $.ajax({ url : webPath + "/clickCount", type : "POST", dataType : "js ...

  2. Css-控制div斜转

    必须放在css声明中 div { transform: rotate(45deg); -o-transform: rotate(45deg); float: right; -webkit-transf ...

  3. 原 JQuery监听页面滚动总结

    1.当前滚动的地方的窗口顶端到整个页面顶端的距离: var winPos = $(window).scrollTop(); 2.获取指定元素的页面位置: $(val).offset().top; 3. ...

  4. Paths(转载)

    Paths中的几个重要元素 Points void CGContextMoveToPoint ( CGContextRef c, CGFloat x, CGFloat y ); 指定一个点成为curr ...

  5. choop.php一句话脚本

    <?php$_="";$_[+$_]++;$_=$_.""; $___=$_[+""];//A$____=$___;$____++;/ ...

  6. Arrya数组添加过滤条件

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

  7. 帝国CMS文章随机调用等一些常用标签

    1.帝国CMS文章随机调用等一些常用标签 [e:loop={'news',10,18,0,'newstime>UNIX_TIMESTAMP()-86400*7','onclick desc'}] ...

  8. 系统安装之:虚拟机VMware V12.0.1 专业版 + 永久密钥

    撰写日期:2016-6-30 10:30:26 转自:http://blog.sina.com.cn/s/blog_4549d6770102vxue.html    VMware V12.0.1 专业 ...

  9. 常见Android Native崩溃及错误原因

    http://www.droidsec.cn/%E5%B8%B8%E8%A7%81android-native%E5%B4%A9%E6%BA%83%E5%8F%8A%E9%94%99%E8%AF%AF ...

  10. CentOS设置默认启动命令行(不启动图形界面)

    Linux 启动的时候可以选择纯文本或者是窗口环境,这就牵涉了运行等级这个问题.Linux 默认提供了 7 个 Run level 给我们使用,其中我们最常用的就是 run level3 和run l ...