一、语义化结构化标签

结构化标签优点:

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. uva10870 矩阵

    f(n) = a1f(n − 1) + a2f(n − 2) + a3f(n − 3) + . . . + adf(n − d), for n > d, 可以用矩阵进行优化,直接构造矩阵,然后快 ...

  2. java-二维码编写zxing

    zxing 这个是google的 下载地址 http://code.google.com/p/zxing/downloads/list 二维码源码案例 package com.utils; impor ...

  3. Mysql-报错:1130-host ... is not allowed to connect to this MySql server 开放mysql远程连接 不使用localhost

    报错:1130-host ... is not allowed to connect to this MySql server   解决方法: 1. 改表法. 可能是你的帐号不允许从远程登陆,只能在l ...

  4. python 列表与元组的操作简介

    上一篇:Python 序列通用操作介绍 列表 列表是可变的(mutable)--可以改变列表的内容,这不同于字符串和元组,字符串和元组都是不可变的.接下来讨论一下列表所提供的方法. list函数 可以 ...

  5. BZOJ 1115: [POI2009]石子游戏Kam

    1115: [POI2009]石子游戏Kam Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 883  Solved: 545[Submit][Stat ...

  6. 【BZOJ-4059】Non-boring sequences 线段树 + 扫描线 (正解暴力)

    4059: [Cerc2012]Non-boring sequences Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 440  Solved: 16 ...

  7. 【BZOJ-1076】奖励关 概率与期望 + 状态压缩DP

    1076: [SCOI2008]奖励关 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1602  Solved: 891[Submit][Status ...

  8. 百度地图学习(II)-Android端的定位

    哎,经历了小编的最近时间的研究,我的百度定位终于成功啦,刹那间觉得自己萌萌哒啦(- ̄▽ ̄)- 话不多说,直接进入正题: 首先,我们来看一下效果: [分析定位原理] [编码分析] 1)处理程序的清单文件 ...

  9. rfc2616 HTTP Protocl Analysis

    catalog . Introduction . Protocol Parameters . HTTP Message . Request . Response . HTTP Method.Conte ...

  10. iptables log

    iptables 日志 LOG target 这个功能是通过内核的日志工具完成的(rsyslogd) LOG现有5个选项 --log-level debug,info,notice,warning,w ...