html5--2.9新的布局元素(5)-hgroup/address
html5--2.9新的布局元素(5)-hgroup/address
学习要点
- 了解hgroup/address元素的语义和用法
- 通过实例理解hgroup/address元素的用法
- 对照新元素布局与div布局,理解新元素布局的优点
- hgroup元素
- 通常用来给标题分组,通常放在header中;但是并非强制要求,也不是绝对的。
- address元素
- 通常用用来说明作者的联系信息,例如名字,E-mail,电话,地址等
- address元素中的内容会以斜体显示。
- 新布局的优点
- 更注重于内容而不是形式
- 对人的友好:更加的语义化,高度的描述性,更加的直观,增加了代码的可读性。
- 对计算机的友好:浏览器更容易解析,搜索引擎更容易抓取文档的内容
- 代码更加的简洁
详述
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的更多相关文章
- html5--2.9新的布局元素(6)-figure/figcaption
html5--2.9新的布局元素(6)-figure/figcaption 学习要点 了解figure/figcaption元素的语义和用法 通过实例理解figure/figcaption元素的用法 ...
- html5--2.7新的布局元素(4)-time
html5--2.7新的布局元素(4)-time 学习要点 了解微格式的概念 掌握time元素的用法 微格式的概念 HTML5中的微格式,是一种利用HTML5中的新标签对网页添加附加信息的方法,附加信 ...
- html5--2.1新的布局元素概述
html5--2.1新的布局元素概述 学习要点 了解HTML5新标签(元素)的优点 了解本章要学习的新的布局元素 了解本章课程的安排 HTML5新标签的优点: 更注重于内容而不是形式 对人的友好:更加 ...
- html5--2.6新的布局元素(5)-nav
html5--2.6新的布局元素(4)-aside/nav 学习要点 了解aside/nav元素的语义和用法 通过实例理解aside/nav元素的用法 aside元素 aside元素通常用来设置侧边栏 ...
- html5--2.5新的布局元素(4)-aside/nav
html5--2.5新的布局元素(4)-aside/nav 学习要点 了解aside/nav元素的语义和用法 通过实例理解aside/nav元素的用法 aside元素(附属信息) aside元素通常用 ...
- html5--2.4新的布局元素(3)-section
html5--2.4新的布局元素(3)-section 学习要点 了解section元素的语义和用法 通过实例理解section元素的用法 article元素和section元素的区别和共同点 art ...
- html5--2.3新的布局元素(2)-article
html5--2.3新的布局元素(2)-article 学习要点 了解article元素的语义和用法 完成一个简单的实例 article元素(标签) 用于定义一个独立的内容区块,比如一篇文章,一篇博客 ...
- html5--2.1新的布局元素(1)-header/footer
html5--2.1新的布局元素(1)-header/footer 学习要点 了解header/footer的语义和用法 使用header/footer进行一个简单的布局 header元素(标签) 用 ...
- HTML5中支持新的媒体元素有这些
HTML5对媒体的支持性很强,支持以下媒体元素: · audio 定义音频 · video 定义视频 · embed 作为外部应用的容器 · source 多种媒体源的支持 · track ...
随机推荐
- [转载]UDP丢包率提升
UDP丢包及无序问题 转载自:http://hi.baidu.com/gamedot/item/96cb9bf1a717eb14d6ff8cd5 最近在做一个项目,在这之前,做了个验证程序. 发现客户 ...
- HBase中Region, store, storefile和列簇的关系
转自:http://zhb-mccoy.iteye.com/blog/1543492 The HRegionServer opens the region and creates a correspo ...
- .net 网站登录
如何实现,按回车键,自动登录,在相应控件上添加onkeypress事件 function CheckCodePress(e){ var e = e||window.event if (e.keyCod ...
- jq:正则表达式
var checkNum = /^[A-Za-z0-9]+$/; 注意没有引号 checkNum.test(这里添加待匹配的字符串); var textNull=/^\s*$/; if(textN ...
- Allegro中解决鼠标放在走线上网络名、走线长度显示不出来的问题
一些PCB设计者在使用allegro时,由于一些误操作 导致当鼠标放在走线(cline)和网络(net)上面时,软件没有显示该走线的所属网络,或者相关的长度信息.本人经过help文档发现,以下方法可以 ...
- Multicast注册中心
1 2 3 4 提供方启动时广播自己的地址. 消费方启动时广播订阅请求. 提供方收到订阅请求时,单播自己的地址给订阅者,如果设置了unicast=false,则广播给订阅者. 消费方收到提供方地址时, ...
- Ubuntu Server 安装 NodeJS
准备命令: $ sudo apt-get install python $ sudo apt-get install build-essential $ sudo apt-get install gc ...
- com.opensymphony.xwork2.ognl.OgnlValueStack - Error setting expression 'customer.applyRate' with value '[Ljava.lang.String;@7d3fae2c'
出错的3个最可能的原因:我是第二种错误 1.action配置错误 <action name="doCreateMeetingInfo" class="meeting ...
- 【Java】 Spring依赖注入小试牛刀:编写第一个Spring ApplicationContext Demo
0 Spring的依赖注入大致是这样工作的: 将对象如何构造(ID是什么?是什么类型?给属性设置什么值?给构造函数传入什么值?)写入外部XML文件里.在调用者需要调用某个类时,不自行构造该类的对象, ...
- Spark源码分析之三:Stage划分
继上篇<Spark源码分析之Job的调度模型与运行反馈>之后,我们继续来看第二阶段--Stage划分. Stage划分的大体流程如下图所示: 前面提到,对于JobSubmitted事件,我 ...