代码重构:HTML与语义化

标签: 前端技术 HTML | 发表时间:2013-02-26 19:17 | 作者:标点符
出处:http://www.biaodianfu.com

在前端开发过程中,很多人谈到“模块化”,很少人特别关注“语义化”,简单的说大多数人更关注功能的实现,而忽视了实现的细节。所谓HTML语义化,就是尽可能的理解要表达的内容,选择适合的HTML标签,将内容转换成浏览器认识的语言,通过浏览器传达信息给用户。

目前很多的前端书籍取名就叫精通DIV+CSS,让人感觉DIV可以搞定一切,但是DIV标签仅代表一个块状标记,HTML的每个标签都有它特定的意义,而语义化就是让我们在适当的位置用适当的标签,以更好的让人和机器(机器可理解为浏览器可理解为搜索引擎)都一目了然。

下面来说说HTML语义化具体的作用

1、对于用户

整个语义化对已用户的影响微乎其微,没有多少个用户会在看网页时直接查看源代码,网站上也不太可能出现样式丢失的问题。所以此点基本上可以忽略。

2、对于搜索引擎

页面的语义化对搜索引擎的理解非常重要,因为现有的很多搜索引擎目前注重的还是依依标记,而非表现标记。例如H1-H6的合理使用。strong标签的合理使用都会给SEO带来很好的效果。需要注意的是,语义化并不特指H1~H6和strong标签。

3、对于开发人员

W3C给我们定了一个很好的标准,在团队中大家都遵循这个标准,可以减少很多差异化的东西,方便开发和维护,提高开发效率,利于模块化的开发。

HTML 规范其实一直在往语义化的方向上努力,许多元素、属性在设计的时候,就已经考虑了如何让各种用户代理甚至网络爬虫更好地理解HTML 文档。HTML5 更是在之前规范的基础上,将所有表现层(presentational)的语义描述都进行了修改或者删除,增加了不少可以表达更丰富语义的元素。为什么这样的语义元素是有意义的?因为它们被广泛认可。所谓语义本身就是对符号的一种共识,被认可的程度越高、范围越广,人们就越可以依赖它实现各种各样的功能。

HTML5 并非 Web 语义唯一倚仗的规范,除了 W3C 和 WHATWG 外,还有其它的组织在为扩展、标准化 Web 语义做着贡献。只要有浏览器厂商、搜索引擎原意支持,它们的规范一样可以成为通用的基础设施。例如 microformats 社区以及  http://Schema.org  上都有对 HTML 以及 Microdata 规范的扩展词汇表,Google、Bing、Yahoo! 等搜索引擎以及各个主流浏览器都不同程度地接纳了其中定义的语义扩展,并应用在了生产中。

讲了这么多内容,但是可能还是不太理解什么是语义化HTML。要求:将下面的内容转化成语义化HTML~

以上内容的代码实现为:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>旅游产品经理(出境游)招聘</title>
</head>
<body>
    <h1>旅游产品经理(出境游)</h1>
    <dl>
        <dt>工作地点</dt>
        <dd>广州</dd>
        <dt>职位类别</dt>
        <dd>产品运作</dd>
        <dt>学历要求</dt>
        <dd>本科</dd>
        <dt>人数</dt>
        <dd>2</dd>
        <dt>更新日期</dt>
        <dd>2011-09-16</dd>
    </dl>
    <h2>工作职责</h2>
    <ol>
        <li>前期目的市场分析、市场调研以及制定产品设计思路。</li>
        <li>制定所负责的区域的产品资源采购策略与订单策略。</li>
        <li>本地市场竞争信息的收集、分析及对策。</li>
        <li>参与制定所负责区域的市场营销策略。</li>
        <li>下属日常工作的抽查、监控和培养。</li>
    </ol>
    <h2>职位要求</h2>
    <ol>
        <li>大专或以上学历。</li>
        <li>2年或以上同等职位工作经验者。</li>
        <li>具备旅行社经验者优先,有旅行社出境游(港澳或东南亚)团队管理经验者优先。</li>
        <li>普通话标准,英文较好,口吃清晰,极强的沟通能力,抗压力强。</li>
        <li>良好的客户服务意识,良好的职业道德和团队合作意识。</li>
        <li>良好的数据分析,逻辑分析及学习能力。</li>
        <li>熟练使用计算机和Office办公软件。</li>
    </ol>
</body>
</html>

上述代码在不添加CSS的情况下,在浏览器中看到的内容如下:

最后,除了HTML的语义化完,CSS也可以做到语义化,比如如何命名ID和Class等。后续会再做介绍。

Related posts:

  1. 时间管理:什么是GTD?
  2. WEB数据挖掘相关术语整理
  3. 基于网页框架和规则的网页噪音去除方法

相关 [代码重构 html 语义化] 推荐:

代码重构:HTML与语义化

- - 标点符
在前端开发过程中,很多人谈到“模块化”,很少人特别关注“语义化”,简单的说大多数人更关注功能的实现,而忽视了实现的细节. 所谓HTML语义化,就是尽可能的理解要表达的内容,选择适合的HTML标签,将内容转换成浏览器认识的语言,通过浏览器传达信息给用户. 目前很多的前端书籍取名就叫精通DIV+CSS,让人感觉DIV可以搞定一切,但是DIV标签仅代表一个块状标记,HTML的每个标签都有它特定的意义,而语义化就是让我们在适当的位置用适当的标签,以更好的让人和机器(机器可理解为浏览器可理解为搜索引擎)都一目了然.

HTML语义化的应用

- - 标点符
HTML语义化就是根据具体内容,选择合适的HTML标签进行代码的编写. 用合理HTML标记以及其特有的属性去格式化文档内容. 便于开发者阅读和写出更优雅的代码,同时让搜索引擎的爬虫能更好的识别. 相比先前网页开发过程中仅关注布局和功能,在开发过程中使用表格布局或DIV+CSS布局,越来越多的人关注HTML语义化,核心是语义化可以带来显而易见的好处:.

代码重构

- - ITeye博客
随着程序的演化,我们有必要重新思考早先的决策,并重写部分代码. 代码需要演化;它不是静态的事物. 重写、重做和重新架构代码合起来,称为重构.    当你遇到绊脚石  ---  代码不在合适,你注意到有两样东西其实应该合并或是其他任何对你来说是"错误"的东西  -------- . 如果代码具备以下特征,你都应该考虑重构代码:.

代码重构总结

- - 开源软件 - ITeye博客
重构:对软件内部结构的一种调整,目的是在不改变软件之可察行为前提下,提高其理解性,降低其修改成本. 创建一个新方法,命名以它做什么来命名,而不是怎么做来命名. 如果只是简单的委托,可以将方法内联. 被子类继承的方法不能内联. 如果一个临时变量只被简单的表达式赋值一次,就可以将它内联. 将这个临时变量申明为final.

代码重构方向原则指导

- - 外刊IT评论
提示:如果您在阅读器里点击订阅本站的文章链接时发现有一个中转页,这说明你的订阅地址有误,本站的订阅地址(RSS)是:. http://www.aqee.net/feed/,请及时纠正. 重构是一种对软件进行修改的行为,但它并不改变软件的功能特征,而是通过让软件程序更清晰,更简洁和更条理来改进软件的质量.

降低代码重构的风险

- - InfoQ cn
重构是每一个开发人员都要面对的功课,Martin Fowler将其定义为“在不改变软件外部行为的前提下,对其内部结构进行改变,使之更容易理解并便于修改”. 技术专家Paul在 博客中讨论了重构的风险,并提出了降低风险的措施. 重构代码是危险的,代码的变化会导致测试的压力很大. 除非有必要的理由,否则不要轻易重构.

HTML 安全列表

- 火锅土豆 - 酷壳 - CoolShell.cn
下面这个网站罗列了,几乎所有的关于HTML 5 在各种主流浏览器上的安全问题,这些安全问题很有可能将会是黑客攻击你的网上的敲门砖,他们几乎都和Javascript都有关系,你就要好好注意了. IE6,7,8,9,和Opera 8.x, 9.x, 10.x 都支持这样的语法. 这个问题会存在于所有的Firefox版本中,可以让用户进行XSS(跨站脚本)攻击.

HTML学习笔记

- - CSDN博客推荐文章
超文本标记语言( 英文:HyperText Markup Language,HTML)是为“ 网页创建和其它可在 网页浏览器中看到的信息”设计的一种 标记语言. HTML被用来结构化信息——例如标题、段落和列表等等  点击打开链接. w3schools  点击打开链接 {语法大全,超赞.

html嵌套规则

- - Web前端 - ITeye博客
转载: http://www.studyofnet.com/news/412.html. 一、HTML 标签包括 块级元素(block)、内嵌元素(inline). 一般用来搭建网站架构、布局、承载内容……它包括以下这些标签:. 一般用在网站内容之中的某些细节或部位,用以“强调、区分样式、上标、下标、锚点”等等,下面这些标签都属于内嵌元素:.

Html 转换成PDF

- - 编程语言 - ITeye博客
最近在搞一个关于html转换为pdf的需求,网上找了很多,但是如果批量处理就会出现问题,最后找到了PD4ML,解决了我的问题. String urlstring = "file:///D:/债权转让及受让协议--魏然2014-08-16.html";. 需要在src目录下创建fonts文件夹,并且在文件夹中建立pd4fonts.properties ,配置文件中的内容如下.