一、语义化结构化标签

结构化标签优点:

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. Web的结构组件

    HTTP代理服务器的作用 Web安全,应用集成,性能优化 1. 代理 In computer networks, a proxy server is a server (a computer syst ...

  2. 用cmd重命名.htaccess

    本人上天修改PHP下伪静态文件htaccess.txt,需要改为.htaccess要是在Linux倒是很随意的事情,可惜window不给改,真的不可改吗,其实方法还是很多的,比如复制在记事本另存也可以 ...

  3. lucene-查询query->FuzzyQuery相近词语的搜索

    FuzzyQuery是一种模糊查询,它可以简单地识别两个相近的词语.下面以11.10为例进行详细介绍. package ch11; import org.apache.lucene.analysis. ...

  4. 系统间通信(5)——IO通信模型和JAVA实践 下篇

    7.异步IO 上面两篇文章中,我们分别讲解了阻塞式同步IO.非阻塞式同步IO.多路复用IO 这三种IO模型,以及JAVA对于这三种IO模型的支持.重点说明了IO模型是由操作系统提供支持,且这三种IO模 ...

  5. 【POJ 1789】Truck History(最小生成树)

    题意:距离定义为两个字符串的不同字符的位置个数.然后求出最小生成树. #include <algorithm> #include <cstdio> #include <c ...

  6. iOS推送处理

    iOS收到推送后,跳转到某一页面 字数1348 阅读1001 评论4 喜欢26 以前做过推送, 但只是那种最基本的广播推送(向所有安装appde设备通知), 列播组播这种对指定用户推送消息还没做过, ...

  7. 解决bind错误 bind: Address already in use

    关于bind错误的处理: bind: Address already in use 原因: 操作系统没有立即释放端口 解决一: 等待一段时间运行网络程序即可 解决二:通过setsockopt进行设置, ...

  8. Spark 与 MapReduce的区别

    学习参考自 http://spark-internals.books.yourtion.com/markdown/4-shuffleDetails.html 1.  Shuffle read 边 fe ...

  9. dede的安装和配置

    dede的cms通常是,dede作为后台,前台可以自己换一套模版(后台貌似也跟着换掉,或者不换) 安装时候会检查目录读写权限,以及数据库配置 安装后,还需要登录到后台: 配置网站根网址 清除缓存 数据 ...

  10. [Poi2000]公共串

    #include <iostream> #include <cstdio> #include <cmath> #include <algorithm> ...