语义化HTML:i、b、em和strong标签
一、前言
在HTML4.1中i和b作为表象标签分别表示斜体和粗体样式,而强调样式与内容分离的XHTML中则出现样式效果相同的em和strong表义标签,此时我们会建议避免使用i和b标签,应该改用em和strong标签。
但在HTML5对i和b赋予新的语义,本文将再一次认识它们!
二、元素语义
1. i标签
W3C草案:
The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose (content whose typical typographic presentation is italicized).W3C specification
语义化的 <i>元素 可以用来表示:外文单词、生物分类、科技术语、船名、剧本舞台方位、乐谱、三个代表思想或手写文字。建议通过class特性标识具体语义,若为表示外文单词则采用lang特性标识具体的语言种类。示例:
滑板介绍
滑板的基本动作名为豚跳(ollie)
<h3>滑板介绍</h3>
<p>
滑板的基本动作名为<i class="skateboard">豚跳</i>(<i lang="en_us">ollie</i>)
</p>
2. b标签
W3C草案:
The<b>
element represents a span of text offset from its surrounding content without conveying any extra importance; for example, keywords in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is bold text.
语义化的 <b>元素 用于表示:局部范围内不重要但需要突出的内容,如概要中的关键字、评论中的名词等。建议通过class特性标识具体语义。示例:
滑板构造概要
滑板由轮子、板面、磨砂纸和支架(truck)组成。
<h3>滑板构造概要</h3>
<p>
滑板由<b class="compent">轮子</b>、<b class="component">板面</b>、<b class="component">磨砂纸</b>和<b class="component">支架</b>(<i lang="en_us>"truck</i>)组成。
</p>
3. em标签
W3C草案:
The em element represents a span of text with emphatic stress.
语义化的 <em>元素 表示:局部范围内强调的内容,用于改变句子或段落的侧重点。注意其作用范围为局部,也就是阅读到某段落或句子时才会注意到。示例:
ollie教学
后脚踏板的同时前脚提起,并向斜前方跳起。
后脚踏板的同时前脚提起,并向斜前方跳起。
第一句强调 前脚提起,第二句强调 向斜前方跳起。
4. strong标签
W3C草案:
The strong element represents a span of text with strong importance.
语义化的<strong>元素表示:全部范围内强调的内容,随意无序扫描全文时能突出的关键内容。
三、总结
理解语义化HTML确实不易啊,继续努力吧!
尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/4172771.html ^_^肥仔John
四、参考
http://www.zhangxinxu.com/wordpress/2011/11/i-b-em-strong-html5-%E8%AF%AD%E4%B9%89/
http://www.blueidea.com/tech/web/2008/6342.asp
http://www.lixuepeng.com/post/1906.html
语义化HTML:i、b、em和strong标签的更多相关文章
- Html标签的语义化
为了使我们的网站更好的被搜索引擎抓取收录,更自然的获得更高的流量,网站标签的语义化就显得尤为重要.所谓标签语义化,就是指标签的含义. 为了更好的理解标签的语义化,先看下面这个例子: 1 <tab ...
- Web语义化
在昨天和做SEO的同学聊了一会儿,当然我没有学会搜索引擎优化的技巧和知识,但在此之前一直对HTML5中header.footer.sidebar.article等标签嗤之以鼻,觉得这个和div没有什么 ...
- HTML5语义化
转载自:https://www.cnblogs.com/fliu/articles/5244866.html 1.什么是HTML语义化? 用合理.正确的标签来展示内容,比如h1~h6定义标题,便于开发 ...
- HTML语义化(2016/3/16更新)
目录 什么是HTML语义化? 为什么要语义化 常用标签的语义 HTML5新元素 一.什么是HTML语义化? 简单来讲就是:每个标签做自己的事,使得能够被机器直接读懂. 二.为什么要语义化? 1.更容易 ...
- 浏览器中常见的html语义化标签
html标签默认在浏览器中展示的样式,html标签的用途:语义化(明白每个标签的用途,在什么情况下使用此标签合理);标签语义化好处:1.更容易被搜索引擎收录2.更容易让屏幕阅读器读出网页内容. 网页上 ...
- 对Web语义化的思考。
很有意思的HTML语义化 在昨天和做SEO的同学聊了一会儿,当然我没有学会搜索引擎优化的技巧和知识,但在此之前一直对HTML5中header.footer.sidebar.article等标签嗤之以鼻 ...
- <i>和<em>、<b>和<strong>标签的区别
在HTML4.01中:< b > < i > 是视觉要素(presentationl elements),分别表示无意义的加粗,无意义的斜体,仅仅表示样式上是粗体或斜体,而没有 ...
- 关于HTML语义化的一些理解
语义化这个词我想大家都看到了无数次,特别是在一些招聘广告上. 其实我自己也是,不过每次看到都觉得是那些招聘公司复制的,其实他们根本说不清语义化是什么,而且也根本不看重. 所以我一直也没把这东西当回事过 ...
- table是可语义化
为了使我们的网站更好的被搜索引擎抓取收录,更自然的获得更高的流量,网站标签的语义化就显得尤为重要.所谓标签语义化,就是指标签的含义. 为了更好的理解标签的语义化,先看下面这个例子: <table ...
随机推荐
- [Xamarin] 從Xamarin中呼叫 *.jar 的 library - 呼叫篇 (转帖)
上篇文章我們建立一個很簡單的Library : com.example.blackfactory.UtilFunc 現在我們要在Xamarin 中呼叫囉! 首先我們要先成立一個橋接的專案 JARBri ...
- Unable to locate secure storage module异常的解决方案
org.eclipse.equinox.security.storage.StorageException: Unable to locate secure storage module 该异常同样是 ...
- 图解集合2:LinkedList
初识LinkedList 上一篇中讲解了ArrayList,本篇文章讲解一下LinkedList的实现. LinkedList是基于链表实现的,所以先讲解一下什么是链表.链表原先是C/C++的概念,是 ...
- [.net 面向对象编程基础] (7) 基础中的基础——流程控制语句
[.net 面向对象编程基础] (7) 基础中的基础——流程控制语句 本来没有这一节的内容,后来考虑到既然是一个系列文章,那么就尽可能写的详细一些,本节参考了网上朋友所写的例子,为的是让更多小伙伴学习 ...
- Web语义化
在昨天和做SEO的同学聊了一会儿,当然我没有学会搜索引擎优化的技巧和知识,但在此之前一直对HTML5中header.footer.sidebar.article等标签嗤之以鼻,觉得这个和div没有什么 ...
- IBatisNet:让insert操作返回新增记录的主键值
项目引用ibatis包: IBatisNet.Common.dll --文件版本1.6.2.0 IBatisNet.DataAccess.dll IBatisNet.DataMapper.dll 项目 ...
- redis中使用java脚本实现分布式锁
转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/115.html?1455860390 edis被大量用在分布式的环境中,自 ...
- 将不确定变为确定~transactionscope何时提升为分布式事务~SQL2005与SQL2008不同
回到目录 Transactionscope何时被提升为分布式事务,即时要触发msdtc服务,这个问题与数据库版本有关,在前面的文章中,我的MSTDC系列出现了多个版本,有一点没有说清楚,测试的环境不同 ...
- Java程序员的日常 —— 响应式导航Demo
这两天想要做响应式的页面,于是本着重复造轮子的想法,模仿Bootstrap官网,精简了一个响应式导航的Demo. 效果 代码 <!DOCTYPE html> <html> &l ...
- Atitit 代理与分销系统(1) 子代理 充值总额功能设计概览 sum() groubpy subagt
Atitit 代理与分销系统(1) 子代理 充值总额功能设计概览 sum() groubpy subagt Keyword 分组与聚合操作. 一个for做分组...里面的做聚合... 数据g操作查 ...