《Web前端开发精品课 HTML与CSS进阶教程》——2.6 其他语义化

  1. 云栖社区>
  2. 博客>
  3. 正文

《Web前端开发精品课 HTML与CSS进阶教程》——2.6 其他语义化

异步社区 2017-05-02 14:26:00 浏览1767
展开阅读全文

本节书摘来自异步社区《Web前端开发精品课 HTML与CSS进阶教程》一书中的第2章,第2.6节,作者: 莫振杰 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.6 其他语义化

2.6.1 换行符< br />
很多新手会使用< br />标签来换行,或者使用多个< br />标签来实现元素之间的上下间距。

举例1:

<div>
  <span>标题</span><br/><br/>
  <span>第1部分内容</span><br/>
  <span>第2部分内容</span><br/>
  <span>第3部分内容</span>
</div>

举例2:

<form action="index.aspx" method="post">
  <fieldset>
    <legend>登录绿叶学习网</legend>
    <label for="name">账号:</label><input type="text" id="name" name="name"/><br />
    <label for="pwd">密码:</label><input type="password" id="pwd" name="pwd"/><br />
    <input type="checkbox" id="remember-me" name="remember-me"/><label for="remember-me">记住我</label>
    <input type="submit" value="登录" />
  </fieldset>
</form>

上面两个例子使用
标签的方式是错误的,这也是
标签很常见的错误用法。事实上,
标签有自己特定的语义,不能随便用来实现换行效果。W3C标准规定,
标签仅仅用于段落中的换行,不能用于其他情况。也就是说,
标签只适合用于p标签内部的换行,不能用于其他标签。

举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
</head>
<body>
  <p>广东省<br />广州市<br />黄埔大道西601号</p>
</body>
</html>

在浏览器预览效果如图2-11所示。


9e35f63752b583ec4420319dddfbaa19d16cbd00

2.6.2 无序列表ul
在实际开发中,对于列表型的数据,为了实现良好的语义,我们还是建议使用无序列表或者有序列表,不建议使用div等来实现。


d4e937e8d4389e2da2f2945a23e0e3af3d24e313

对于如图2-12所示效果,不少新手很可能会写出如下代码来实现。

<div>
  <div><span>1</span>HTML教程</div>
  <div><span>2</span>CSS教程</div>
  <div><span>3</span>JavaScript教程</div>
</div>

这种实现方式缺乏语义化,并且也不利于维护。正确的做法是:

<ul>
  <li><span>1</span>HTML教程</li>
  <li><span>2</span>CSS教程</li>
  <li><span>3</span>JavaScript教程</li>
</ul>

有人问,每一个列表项前都有数字,不应该使用有序列表来实现吗?为什么这里使用无序列表来实现呢?假如使用有序列表,我们是做不到这种外观效果的。因为有序列表前的数字外观是固定的。在实际开发中,大多数情况下都是使用无序列表,极少情况下会使用有序列表。


03655a6593224796dca847c77b4926b6e5842a55

2.6.3 strong标签和em标签


fb868730c5c91ec0dcedb1b5d4816832d93e1928

strong用于实现加粗文本,em用于实现斜体文本。基于结构和样式分离的原则,标签仅仅是为了实现简单的加粗或者斜体效果,我们一般不会用这两个。实际上,W3C对这两个标签赋予“强调”的语义,在strong或者em标签内部的文本被强调为重要文本。并且搜索引擎对这两个标签也赋予一定的权重。如果在一个页面中,为了SEO而想要突出某些关键字,可以使用strong和em这两个标签。一般情况下,我们都是去掉strong和em的默认样式,然后使用CSS重新定义新的样式,但这并不影响这两个标签的语义。也就是说,样式只会改变标签的外观,但不会改变标签的语义。对于去除标签的默认样式,我们在后面“4.5 CSS reset”一节会详细介绍。

2.6.4 del标签和ins标签
在HTML中,del和ins这两个标签是配合使用的。del表示“delete”,用于定义被删除的文本。ins表示“insert”,用于定义被更新的文本。一般情况下,我们会使用CSS来重新定义del和ins标签的样式。

举例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
</head>
<body>
  <p>新鲜的新西兰奇异果</p>
  <p><del>原价:¥6.50/kg</del></p>
  <p><ins>现在仅售:¥4.00/kg</ins></p>
</body>
</html>

在浏览器预览效果如图2-16所示。


<a href=https://yqfile.alicdn.com/a34d0c1e42c41075c77529ffdedaa6cebcce2d2c.png" >

2.6.5 img标签
想要在页面显示一张图片,我们有两种方式:一是使用img标签;二是使用背景图片。这两种实现方式最明显的区别在于:使用img标签添加图片,是通过HTML来实现;使用背景图片,是通过CSS来实现。

在实际开发中,很多人添加图片的方式很随意。对于什么时候使用img标签,什么时候使用背景图片,并不是很清楚。我们应该根据HTML的语义来判断。如果图片作为HTML的一部分,并且想要被搜索引擎识别,则应该使用img标签,例如常见的各种图片列表。如果图片仅仅是起到修饰作用,并且不想被搜索引擎识别,则应该使用背景图片。

举个例子,图2-17这个页面中的图标图片就应该使用背景图片实现,因为这些图标并不需要被搜索引擎识别,也不作为HTML的一部分。而图2-18页面中应该使用img标签来实现,因为这是页面HTML结构的一部分,并且希望被搜索引擎识别。


0e4708664eb11a61cde147ac23cdca09a37d9dba

【总结】
以上只是列举了在实际开发中比较常见的语义标签,其实HTML5新增了很多结构语义标签,例如header、nav、aside、footer、article、section等。如果想要实现语义更为良好的页面,我们也应该去关注这些新增的标签。不过结构语义标签是HTML5的内容,因此本书不展开介绍。

网友评论

登录后评论
0/500
评论
异步社区
+ 关注