html5--2.9新的布局元素(5)-hgroup/address

学习要点

  1. 了解hgroup/address元素的语义和用法
  2. 通过实例理解hgroup/address元素的用法
  3. 对照新元素布局与div布局,理解新元素布局的优点
    1. hgroup元素
      • 通常用来给标题分组,通常放在header中;但是并非强制要求,也不是绝对的。
    1. address元素
      • 通常用用来说明作者的联系信息,例如名字,E-mail,电话,地址等
      • address元素中的内容会以斜体显示。
  1. 新布局的优点
    1. 更注重于内容而不是形式
    2. 对人的友好:更加的语义化,高度的描述性,更加的直观,增加了代码的可读性。
    3. 对计算机的友好:浏览器更容易解析,搜索引擎更容易抓取文档的内容
    4. 代码更加的简洁

详述

HTML5 增加了很多语义化的标签,hgroup 就是其中一个,它用来表明标题的集合。如果有主标题、副标题,可以使用这个来包裹一下,一般比较常见的就是网站的标题和网站描述:

但是这样做并不是太必要,而且还有一些麻烦。一般来说,很难有单纯的 hn 标题标签集合在一起,通常还包含一些其他内容,但是使用 hgroup 包裹的内容,必须是 hn 标题标签,否则不会通过 HTML5 验证。又有谁会为了这么一个增强语义性用处不大的标签专门去生成一堆 hn 标签?

然后好消息是,这个标签在最新的 HTML5.1 版中被废除了,以后可以不再用了。但是又面临了一些问题,如果我有类似这种 声明主标题和对应副标题说明 的需求,我应该怎样增强语义性?

W3 给了一些结构建议,查看原文请点击这里。下面引用原文然后用我自己的博客标题做一个例子来介绍用其他方法模拟 hgroup 的语义性

使用标点符号分割

最简单的方法就是使用标点符号分割主标题和副标题:

<h1 ><a name="toc-2"></a>潜行者m: 关注前端开发热爱简约设计。</h1>

这种类型比较适合于文章标题,很显然不适合网站标题。

使用 span 标签标注副标题说明

<h1>潜行者m
<span>关注前端开发热爱简约设计。</span>
</h1>

这种方式比上面好一点,但是感觉还是怪怪的,但是结构比较简单,如果不怕麻烦,推荐下面一种方法。

使用 header 标签包裹标题和描述

header 也是 HTML5 新增的语义性标签,用来表示头部信息,一般不会被废弃。我们可以这样做:

<header>
<h1 ><a name="toc-5"></a>潜行者m</h1>
<p>关注前端开发热爱简约设计。</p>
</header>

强烈推荐这种写法,这样保证了语义性的同时,也保证了代码的整洁。


实例

用hgroup是因为不只你的头部会出现标题,你的文章里面也会,所以这样弄下来要设置样式不好设置;第二个作用是方便搜索引擎。

hgroup

给头部标题设置特殊的样式

address

hgroup所在框架的位置

html5--2.9新的布局元素(5)-hgroup/address的更多相关文章

  1. html5--2.9新的布局元素(6)-figure/figcaption

    html5--2.9新的布局元素(6)-figure/figcaption 学习要点 了解figure/figcaption元素的语义和用法 通过实例理解figure/figcaption元素的用法 ...

  2. html5--2.7新的布局元素(4)-time

    html5--2.7新的布局元素(4)-time 学习要点 了解微格式的概念 掌握time元素的用法 微格式的概念 HTML5中的微格式,是一种利用HTML5中的新标签对网页添加附加信息的方法,附加信 ...

  3. html5--2.1新的布局元素概述

    html5--2.1新的布局元素概述 学习要点 了解HTML5新标签(元素)的优点 了解本章要学习的新的布局元素 了解本章课程的安排 HTML5新标签的优点: 更注重于内容而不是形式 对人的友好:更加 ...

  4. html5--2.6新的布局元素(5)-nav

    html5--2.6新的布局元素(4)-aside/nav 学习要点 了解aside/nav元素的语义和用法 通过实例理解aside/nav元素的用法 aside元素 aside元素通常用来设置侧边栏 ...

  5. html5--2.5新的布局元素(4)-aside/nav

    html5--2.5新的布局元素(4)-aside/nav 学习要点 了解aside/nav元素的语义和用法 通过实例理解aside/nav元素的用法 aside元素(附属信息) aside元素通常用 ...

  6. html5--2.4新的布局元素(3)-section

    html5--2.4新的布局元素(3)-section 学习要点 了解section元素的语义和用法 通过实例理解section元素的用法 article元素和section元素的区别和共同点 art ...

  7. html5--2.3新的布局元素(2)-article

    html5--2.3新的布局元素(2)-article 学习要点 了解article元素的语义和用法 完成一个简单的实例 article元素(标签) 用于定义一个独立的内容区块,比如一篇文章,一篇博客 ...

  8. html5--2.1新的布局元素(1)-header/footer

    html5--2.1新的布局元素(1)-header/footer 学习要点 了解header/footer的语义和用法 使用header/footer进行一个简单的布局 header元素(标签) 用 ...

  9. HTML5中支持新的媒体元素有这些

    HTML5对媒体的支持性很强,支持以下媒体元素: · audio  定义音频 · video  定义视频 · embed  作为外部应用的容器 · source  多种媒体源的支持 · track   ...

随机推荐

  1. es6 - 导入导出

    今天用node纠结了半天,明明是正确的语法,一直报错,原来node和chrome并不支持es6语法.... 1. npm install package.json { "name" ...

  2. shell脚本实现定时重启进程

    ##############################Deploy crontab for yechang ad*******eta restart ###################### ...

  3. DevOps必备的20款顶级工具

    原文地址:http://os.51cto.com/art/201606/512423.htm 开发运维工具与软件开发领域的最佳实践密切相关,也与必要的规范密切相关.在整个开发生命周期涉及到一大批新旧工 ...

  4. LeetCode HashTable 30 Substring with Concatenation of All Words

    You are given a string, s, and a list of words, words, that are all of the same length. Find all sta ...

  5. LM339组成的双限比较器

    通常是上限电压值与电源电压Vcc接近,下限电压值靠近0V.

  6. BigDecimal的String类型

    java本身对浮点型的计算会丢失精度,这个一定要注意,必须要用BigDecimal的String类型才能解决精度的问题. BigDecimal一共有四个构造方法: 我们在计算商品价格的时候,一定要用B ...

  7. PHP RSA加解密示例(转)

    1.生成密钥和公钥 开始前需要准备openssl环境 linux 需要安装openssl工具包,传送门http://www.openssl.org/source/ window 下需要安装openss ...

  8. cmake学习之- cmake_parse_arguments

    最后更新: 2019-06-08 一.指令介绍 cmake_parse_arguments 为解析函数(function)或 宏(macros) 参数的命令: cmake_parse_argument ...

  9. Android中读取图片EXIF元数据之metadata-extractor的使用

    一.引言及介绍 近期在开发中用到了metadata-extractor-xxx.jar 和 xmpcore-xxx.jar这个玩意, 索性查阅大量文章了解学习,来分享分享. 本身工作也是常常和处理大图 ...

  10. ES 30 - Elasticsearch生产集群的配置建议

    目录 1 服务器的内存 2 服务器的CPU 3 服务器的磁盘 4 集群的网络 5 集群的节点个数 6 JVM的参数设置 7 集群的数据量 8 总结 在生产环境中, 要保证服务在各种极限情况下的稳定和高 ...