博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
对HTML语义化的理解
阅读量:6292 次
发布时间:2019-06-22

本文共 2872 字,大约阅读时间需要 9 分钟。

hot3.png

HTML语义化是什么?

根据需要放在标签中的内容,选择合适的标签进行结构化。

 

为什么要语义化?

1️⃣有利于SEO

(有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重)

2️⃣语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构

(万一CSS文件挂了,语义化的HTML也能呈现较好的内容结构与代码结构)

3️⃣便于设备的解析(屏幕阅读器、盲人阅读器、移动设备)

4️⃣便于团队开发和维护

 

举几个栗子说明下语义化的意义

 

1)ul/ol(列表标签)

 

ul和ol虽然都是列表项,但是具体使用时,差别还是很大的。

 

A. ul(无序列表)

说明: ul的英文全称为unordered list,翻译成中文就是无序列表。表示列表中的项目。是没有先后顺序的。网页中大部分列表均为无序列表。

<ul> <li>Lxxyx的博客</li> <li>Lxxyx的评论</li> <li>联系Lxxyx</li> </ul> <!-- 列表中的三个项目,均没有前后顺序的分别。 -->

 

B. ol(有序列表)

说明: ol的英文全称为ordered list,表示列表中的项目。是有先后顺序的。这一点是ol和ul的本质区别。

<ol> <li>1. Lxxyx的第一篇文章</li> <li>2. Lxxyx的第二篇文章</li> <li>3. Lxxyx的第三篇文章</li> </ol> <!-- 列表中的三个项目,有前后顺序的分别。 -->

 

2. dl,dt,dd(定义列表)

说明: dl,dt,dd是自定义列表,但是使用上又与前面的ul/ol有所不同。自定义列表不仅仅是一列项目,而是项目及其描述的组合。

dl: 英文意思为definition list,作用是定义列表。

dt: 英文意思为defines terms,作用是定义列表中的项目。

dd: 英文意思为defines description,作用是定义列表中项目的描述。

举例:

<section style="width: 500px;">

标签定义了定义列表(definition list)

<dl style="border: 1px solid #ddd">

<dt style="border: 1px solid #ddd"> dt定义列表中的项目0</dt>

<dd style="border: 1px solid #ddd"> dd描述列表中的项目1</dd>

<dd style="border: 1px solid #ddd"> dd描述列表中的项目2</dd>

<dd style="border: 1px solid #ddd"> dd描述列表中的项目3</dd>

<dd style="border: 1px solid #ddd"> dd描述列表中的项目4</dd>

<dd style="border: 1px solid #ddd"> dd描述列表中的项目5</dd>

</dl>

</section>

效果图:

 

C. b/strong , i/em(强调标签)

说明: 在HTML中,b和strong都是加粗,i和em都是斜体。但是从HTML4到HTML5中,又发生了转变。

1. b/strong(加粗)

说明:虽然b和strong的展示效果一样,都是将字体加粗表示。但是b在HTML5中又发生了变化。

 

b标签(bold):

 

HTML4的定义:

The <b> tag is for "offset text conventionally styled in bold,without conveying any extra emphasis or importance.

// 意思为b标签仅仅表示加粗,不带有任何强调的意味。(只是为了排版或者好看)

<hr/>

HTML5的定义:

The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood.

// 意思为表示“文体突出”文字,通俗讲就是突出不安分的文字。像概要中的关键字,产品名。或者代表强调的排版方式

 

strong标签(全称是stronger emphasis):

 

<strong> represents a span of text with strong importance.a <strong> tag within another <strong> tag has even more importance.

// 意思为strong 标签是语气加重,更为重要的强调,如果两个strong标签嵌套还表示极度重要。strong的重要程度是要大于em标签的

 

总结:b仅仅只是加粗,并没有任何语义。但是strong标签则有语气加重的强调的意思。

 

2. i/em(斜体)

说明:就像b和strong的关系一样。i和em的对应关系也很容易理解。

 

i标签(全称是italic):

HTML4的定义:

The <i> tag is for "text conventionally styled in italic". There is no semantic meaning.

// HTML4意思为i标签仅仅只是将字体显示为斜体,无任何语义化意思

<hr/>

HTML5的定义:

The i element now represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose.

// 意思为i元素现在表现为在文章中突出不同意见或语气或的一段文本,例如外语,科技术语、或者是排版用的斜体文字

 

em(全称是emphasis):

The <em> represents a span of text with emphatic stress.

// 意思是说em有强调的意思

 

总结:i仅仅只是斜体显示,并没有任何语义。但是em标签则有加强的语义在内。

 

3.em/strong(强调标签)

说明:在上面的介绍中,已经介绍了em和strong,个中差别,看英文既能分辨。

 

em的全称是:emphasis,意思为强调。

strong的全称是:stronger emphasis,意思就是语气更强的强调。

 

总结:em和strong标签均带有强调的语义,但是strong标签所表现的强调语气要大于em的。

 

 

 

 

 

转载于:https://my.oschina.net/wangch5453/blog/2996548

你可能感兴趣的文章
人人出售56不亏:三方得利
查看>>
美柚引流宝妈女粉,淘宝客微商不用引流脚本也能日吸500+
查看>>
如何用手机维护Mysql数据库
查看>>
Office 365启用多重身份验证
查看>>
网络视频会议整体解决方案
查看>>
免费获取田志刚《新知识管理》文字和PPT下载
查看>>
Office 365发送超大附件
查看>>
OSPF的route-id选举
查看>>
IT绩效管理消除IT与业务之间的隔阂
查看>>
解决 MSChart控件 X轴坐标显示不全的问题
查看>>
在C#中选择“.NET研究”正确的集合进行编码
查看>>
再次分享一个多选文件上传方案“.NET研究”
查看>>
PySide教程:一个简单的点击“.NET研究”按钮示例
查看>>
find命令
查看>>
网络通讯程序整理(一)
查看>>
[转载]一站式WPF--Window
查看>>
poj-1159 Palindrome **
查看>>
VS2010/VS 2013 删除空行
查看>>
解决linux ssh登陆缓慢问题
查看>>
将二叉查找树转化为链表的代码实现
查看>>