一、语义化结构化标签

结构化标签优点:

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. HTML5文件系统API和资料整理

    来着火狐开发网络的官方文档:点我打开 : W3C的官方文档: 点我打开 : 园友的博客:  点我打开: 浏览器兼容性, 好了就chrome支持, 我刚刚更新的火狐37也不支持, nice, 太nice ...

  2. PyQt之布局&无边框&信号

    这个例子相对综合一些,包括qt的布局,实现无边框效果,无边框也就是没有了窗口的title栏,没有title栏就不能拖动了, 所以我们进一步讲如何实现拖动.通过这边文章你可以掌握qt的布局,窗口定制,重 ...

  3. js-回车事件控制

     1.文本框回车时间 < script type = "text/javascript" language = "javascript" > fun ...

  4. 【HDU 5833】Zhu and 772002(异或方程组高斯消元)

    300个最大质因数小于2000的数,选若干个它们的乘积为完全平方数有多少种方案. 合法方案的每个数的质因数的个数的奇偶值异或起来为0. 比如12=2^2*3,对应的奇偶值为01(2的个数是偶数为0,3 ...

  5. 寻找数组中的第K大的元素,多种解法以及分析

    遇到了一个很简单而有意思的问题,可以看出不同的算法策略对这个问题求解的优化过程.问题:寻找数组中的第K大的元素. 最简单的想法是直接进行排序,算法复杂度是O(N*logN).这么做很明显比较低效率,因 ...

  6. Quality trimming using Trimmomatic

    java -jar /home/liuhui/bin/trinityrnaseq_r20140413p1/trinity-plugins/Trimmomatic/trimmomatic.jar PE ...

  7. 【C++实现python字符串函数库】二:字符串匹配函数startswith与endswith

    [C++实现python字符串函数库]字符串匹配函数startswith与endswith 这两个函数用于匹配字符串的开头或末尾,判断是否包含另一个字符串,它们返回bool值.startswith() ...

  8. Subversion详解

    Subversion特性 1.版本化目录 可以跟踪目录树的变更.文件和目录都是版本化的,SVS只能跟踪单个文件: 2.精确的文件跟踪 可以对文件和目录进行 增加.复制.改名,解决了同名 而 无关的文件 ...

  9. Pycharm设置

    File->settings->Editor->File and Code Templates->Python Script #!/usr/bin/env python # e ...

  10. OPENGL若干重要基础概念

    投影:3D数据“压平”到2D的计算机屏幕上,即将真正的三维物体显示到二维屏幕上,这种3D压平到2D的过程称为投影. 投影类型:正投影,透视投影 正投影:垂直于投影平面的平行投影(不垂直的投影平面的平行 ...