常见面试题(2):HTML语义化 内容与样式分离的原则

字数 1807阅读 534

1、 前言

在学习html基础的时候,往往需要建立原则性的认识。其中就不乏常被提起或面试常见题目:html语义化的理解以及何为内容与样式分离的原则。在查阅资料的过程中,我发现对这两个问题的理解,对于培养良好的编码习惯和编码思维是非常重要的。于是记录于博客,以作记忆。

2、 问题

1)、怎样理解 HTML 语义化
2)、怎样理解内容与样式分离的原则

3、怎样理解 HTML 语义化

1) 何为语义化

语义化的含义就是用正确的标签做正确的事情,HTML语义化是指根据内容的结构选择合适的标签,也就是根据网页内容将代码语义化。
  HTML标签语义化是Web网页标准化的重要一环,也是标准制定时重要的设计原则。HTML5中新增加的很多标签(如:<article>、<nav>、<header>和<footer>等)就是基于这样的设计原则。

2)检验标准

浏览器会对语义化的标签设计默认的样式,所以验证页面是否语义规范的一个简单方式就是去掉CSS样式后页面是否还能正常阅读。

3)优点
  • 有利于搜索引擎以及爬虫工具等更容易读懂页面代码。因为机器不会关注页面实际渲染的外观,爬虫是依赖于标签来确定上下文和各个关键字的权重,只会关注页面内容本身,页面渲染的漂亮与否对机器识别毫无帮助。
  • 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构。HTML标签是页面内容的载体,语义化的标签相对于是对所包含内容的一个整体声明,也使得页面整体结构清晰。
  • 便于团队开发和维护
  • 便于开发者阅读和写出更优雅的代码。使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
4)如何做到html语义化

A、代码中使用的标签<div>和<span>是在所有的HTML标签中最没有语义的。所以要做到标签语义化,首先要尽量少用<div>和<span>这两个标签,在使用这两个标签时尽量能找到更有语义的标签代替。
  网页的开发者应该熟悉所有规范的HTML标签的使用场景,在合适的地方使用合适的标签。
  例如,标签Hx系列则表示标题,在网页中展示各层级的标题时使用;ul和ol标签表示列表,在展现各种数据列表或者菜单时使用;其它使用率较高的语义标签有:p、em、strong、table、site、blockquote等,以及HTML5新加入的标签:<header><footer><article><section><nav><aside>等。
B、熟悉各标签规范的属性,给HTML标签设置必要的属性。
  和标签语义化的重要性一样,某些属性的设置也是HTML语义化重要的环节。在很多规范中规定需要设置的两个属性是alt属性和title属性,这两个属性设置的也是为了提高HTML的语义。

在img标签中,alt是必须要设置的属性,因为img是自闭合标签,并没有包含可以解释说明图片的额外信息。alt属性的文字说明是当图片在浏览器中未加载时的显示的代替;title属性是可选属性,当标签包含的内容不足以说明语义时,可以通过title添加额外的信息, 在浏览器中当鼠标移到元素上时会显示提示文本。

还有一个重要的属性是<label>标签中的for属性。<label>标签是<input>元素定义的标注。<label>标签的for属性值指代一个表单元素,属性值为此表单元素的id值。for属性的作用不仅把<lable>标签上的触发事件指向了for属性指代的表单元素,也从语义上绑定了<lable>和此表单元素。

<form>
    <label for="user_name">User Name:</label>
    <input type="text" name="user_name" id="user_name" />
</form>

4、怎样理解内容与样式分离的原则

1)网页分离

一个网页分为三个部分:Html——结构,css——表现,javascrip——行为。内容也就是html,样式也就是css。所以内容和样式的分离,就是指在网页编码的过程中,要将html和css两大部分分开。

2)如何实现

内容与样式分离的原则的实现,一个是要依靠意识,另一个是依靠经验。
  举例而言,面对一个分块明显的网页设计图时:

  • 初级的开发人员思路及制作方法:div 层层嵌套;
  • 中级的开发人员思路及制造方法:去掉多余的 div ,进行简化;
  • 高级的开发人员思路及制造方法:最大化的简化 html 的结构,然后用 css 进行设置,减少 html 与 css 的契合度。

正确做法是写HTML的时候先不管样式,重点放在HTML的结构和语义化上,让HTML能提现页面结构或者内容,,然后进行 css 样式设置,减少 HTML 与 CSS 契合度(即内容与样式分离) ,写JS的时候,尽量不要用JS去直接操作样式,而是通过给元素添加删除class来控制样式变化(即行为分离)。

3)分离原则的优点
  • 浏览器加载网页页面速度变快。分离原则下,大部分页面代码写在了CSS当中,页面体积容量变得更小。
  • 网页修改设计时,效率、省时。根据html标签内ID或class的标记,到CSS里找到相应的ID或class,可以快速替换指定位置的样式,不会破坏页面架构和其他部分的样式。
    典型的应用就是网页换肤,使用相同的 html 结构,不同的 css 样式。
  • 更好地被搜索引擎收录。基于内容与样式分离的原则,html的语义化就是首要考虑的,网页中语义化的标签代码就会更加适合搜索引擎。
  • css样式的分离,它可以根据不同的浏览器,达到显示效果的统一。保证网页架构不变形的前提下,放心在不同浏览器渲染显示样式。

参考:
https://segmentfault.com/a/1190000005626375#articleHeader4
http://www.cnblogs.com/lovefan/p/3855513.html
http://www.imooc.com/video/242

推荐阅读更多精彩内容