hr 是一根线,一些HTML代码的编写风格建议小结

  

hr 是一根线,一些HTML代码的编写风格建议小结
  用 h1 和 h6 其实没有太大区别,被 W3C 归类为 "不推荐使用标签",将文章上下文完全划分开。
  这篇文章主要介绍了一些HTML代码的编写风格建议小结,主要依据Google HTML/CSS 代码风格指南整理了一些HTML的书写建议,需要的朋友可以参考下
  
hr 是一根线,一些HTML代码的编写风格建议小结
  

建议省略掉图片, 媒体文件, 样式和脚本 URL 中的协议部分 , 省略掉协议部分后, 资源文件将继承页面 URL 的协议. 不但可以防止内容混用的问题, 还可以减小页面的尺寸. 比如: 引用一个 JavaScript 文件可以用下面建议的方式来写.
  

为什么 h4, h5, h6 标签很少用到?
  

标题标签包括 h1 到 h6, 我们常用 h1, h2, h3, 但极少用到 h4, h5 和 h6.
  

在一个合理语义化, 敢于裸奔 的站里面, 标题标签除了语义化, 还带有一些样式作用. 但在 CSS 普及的今天, 用 h1 和 h6 其实没有太大区别, 反正外观也能随便套.
  

作为标题标签, 有更牛逼的功能, 标题元素意味着页面上高权值的关键词, 所以 h1, h2 和 h3 被频繁利用来为关键词加权. 而 h4, h5 和 h6 的权值并不高, 甚至比不上 strong 和 em, 所以很少被用到. 估计他们权限层次如下:
  

h1 > h2 > h3 > strong > em > h4 > h5 > h6
  

什么时候使用 thead, tbody 或 tfoot?
  

我本来认为 thead 作为表头用来放表格标题单元, 如 th; 而 tbody 是放表格内容, tfoot 是表格说明. 其实我的理解不太正确, 这几个标签其实是可有可无的.
  

因为浏览器一般需要整个表格下载完才开始显示, 在以 table 为布局的时代影响用户阅读. 所以这几个标签是用来将表格划分成多个表格部分, 下载完成部分即可显示. 另外, 也为了打印长表格时的时候表头和表尾可以在每一页出现.
  

用过 Dreamwave 的同学应该有印象, 当你创建一个 HTML 文件, 默认有代码如下.
  

我们会将 title, 外部 CSS 和 JavaScript 引用放在 head 区域, 在页面上展示的内容放在 body 里面, 但其实 html, head 和 body 都是可省略的标签.
  

将这些可选标签删除之后, 看起来很怪, 但页面显示正常, W3C 检测也能通过. 我已经在博客上这样处理了. 但有一点需要注意的, 如果你希望用 XHTML 编写页面, 那么请保留 html 标签, 因为你仍需要下面这句代码作为声明.
  

很多人以为 b 标签和 i 标签的命运和 u 标签一样, 被 W3C 归类为 "不推荐使用标签". 但 HTML5 规范中, 这两个标签还是推荐使用的. 这一点我一直清楚, 还跟朋友为这事争执过. 但我一直不明白 HTML5 中如何定义它们.
  

hr 是一根线, 分割内容的横线. 我一直认为 hr 是个蹩脚的东西, 画出来的线用 CSS 好不好处理, 毫无用处. 其实 hr 在语义上是文章的分割线, 将文章上下文完全划分开, 让它们毫无关系.
  

其作用就像很多日志类博客文章里面出现的下图的分割线, 只不过 hr 在语义上也是如此, 爬虫也能理解.
  

为什么我们习惯用 a 标签做按钮?
  

不是 input type="button" 可以理解, 因为低版本的 IE 上看不到 hover 效果. 但为什么或者 span, 而是 a 标签? a 标签做成按钮, 不带 href, 这种做法是对的吗? 我还没想好, 以前这么做就像是条件反射一样.
  

Google 的 HTML/CSS 代码风格指南是一个短小精悍的建议性代码编写手册, 很有用, 但请不要迷信. 像里面有一项, 建议使用两个空格作为缩进, 在很多团队可能不具有可行性, 我们团队现在用的还是
  

该手册中很多 HTML 建议都是针对 HTML5 的, 但这里是用 HTML 风格而非 XHTML 风格, 很多地方为了省略代码实际上削弱了代码的可读性, 大家应该对其取舍有所判断.
  用 h1 和 h6 其实没有太大区别,被 W3C 归类为 "不推荐使用标签",将文章上下文完全划分开,而 h4,因为你仍需要下面这句代码作为声明,但这里是用 HTML 风格而非 XHTML 风格。

发表评论

电子邮件地址不会被公开。 必填项已用*标注