一 html 编码规范
1. img 标签要写 alt 属性
根据 W3C 标准, img 标签要写 alt 属性, 如果没有就写一个空的但是一般要写一个有内容的, 根据图片想要表达的意思, 因为 alt 是在图片无法加载时显示的文字
如下不太好的写法:
<img src="company-logo.svg" alt="ABC Company Logo">
更好的写法:
<img src="chime-logo.svg" alt="ABC Company">
这里就不用告诉用户它是一个 Logo 了, 直接告诉它是 ABC Compay 就好了再如:
<img src="user-head.jpg" alt="User Portrait">
可改成:
<img src="user-head.jpg" alt="Bolynga Team">
如果图片显示不出来, 就直接显示用户的名字
有些人偷懒就直接写个空的 alt 那也可以, 但是在一些重要的地方还是要写一下, 毕竟它还是有利于 SEO.
2. 单标签不要写闭合标签
为什么? 因为写了也没用, 还显得你不懂 html 规范, 我们不是写 XHTML 常见的单标签有 imglinkinputhrbr,
如下不好的写法:
- <img src="test.jpg"></img><br/>
- <input type="email" value=""/>
应改成:
- <img src="test.jpg"><br>
- <input type="email" value="">
3. 自定义属性要以 data - 开头
自己添加的非标准的属性要以 data - 开头, 否则 w3c validator 会认为是不规范的, 如下不好的写法:
<div count="5"></div>
应改成:
<div data-count="5"></div>
4. td 要在 tr 里面, li 要在 ul/ol 里面
如下不好的写法:
- <div>
- <li></li>
- <li></li>
- </div>
更常见的是 td 没有写在 tr 里面:
- <table>
- <td></td>
- <td></td>
- </table>
如果你写得不规范, 有些浏览器会帮你矫正, 但是有些可能就没有那么幸运因为标准并没有说如果写得不规范应该怎么处理, 各家浏览器可能有自己的处理方式
5. ul/ol 的直接子元素只能是 li
- <ol>
- <span>123</span>
- <li>a</li>
- <li>b</li>
- </ol>
这样写也是不规范的, 不能直接在 ol 里面写 span,ol 是一个列表, 它的子元素应该都是 display: list-item 的, 突然冒出来个 span, 你让浏览器如何自处所以写得不规范就会导致在不同的浏览器会有不同的表现
同样, tr 的直接子元素都应该是 td, 你在 td 里面写 tr 那就乱了
6. section 里面要有标题标签
如果你用了 section/aside/article/nav 这种标签的话, 需要在里面写一个 h1/h2/h3 之类的标题标签, 因为这四个标签可以划分章节, 它们都是独立的章节, 需要有标题, 如果 UI 里面根本就没有标题呢? 那你可以写一个隐藏的标题标签, 如果出于 SEO 的目的, 你不能直接 display: none, 而要用一些特殊的处理方式, 如下套一个 hidden-text 的类:
- <style>.hidden-text{position: absolute; left: -9999px; right: -9999px}</style>
- <section>
- <h1 class="hidden-text">Listing Detail</h1>
- </section>
7. 使用 section 标签增强 SEO
使用 section 的好处是可以划分章节, 如下代码:
- <body>
- <h1>Listing Detail</h1>
- <section>
- <h1>House Infomation</h1>
- <section>
- <h1>LOCATION</h1>
- <p></p>
- </section>
- <section>
- <h1>BUILDING</h1>
- <p></p>
- </section>
- </section>
- <section>
- <h1>Listing Picture</h1>
- </section>
- </body>
就会被 outline 成这样的大纲:
8. 行内元素里面不可使用块级元素
例如下面的写法是不合法的:
- <a href="/listing?id=123">
- <div></div>
- </a>
a 标签是一个行内元素, 行内元素里面套了一个 div 的标签, 这样可能会导致 a 标签无法正常点击再或者是 span 里面套了 div, 这种情况下需要把 inline 元素显式地设置 display 为 block, 如下代码:
- <a href="/listing?id=123" style="display: block">
- <div></div>
- </a>
9. 每个页面要写 <!DOCType html>
设置页面的渲染模式为标准模式, 如果忘记写了会怎么样? 忘记写了会变成怪异模式, 怪异模式下很多东西渲染会有所不同, 怪异模式下 input/textarea 的默认盒模型会变成 border-box, 文档高度会变成可视窗口的高度, 获取 window 的高度时就不是期望的文档高度还有一个区别, 父容器行高在怪异模式下将不会影响子元素
<div><img src="test.jpg" style="height:100px"></div>
在标准模式下 div 下方会留点空白, 而在怪异模式下会这个就提醒我们在写邮件模板时需要在顶部加上 <!DOCType html>, 因为在本地开发邮件模板时是写 html 片段, 没有这个的话就会变成怪异模式
10. 特殊情况下才在 html 里面写 script 和 style
通常来说, 在 html 里面直接写 script 和 style 是一种不好的实践, 这样把样式结构和逻辑都掺杂在一起了但是有时候为了避免闪屏的问题, 可能会直接在相应的 html 后面跟上调整的 script, 这种 script 看起来有点丑陋, 但是很实用, 是没有办法的办法
11. 样式要写在 head 标签里
样式不能写在 body 里, 写在 body 里会导致渲染两次, 特别是写得越靠后, 可能会出现闪屏的情况, 例如上面的已经渲染好了, 突然遇到一个 style 标签, 导致它要重新渲染, 这样就闪了一下, 不管是从码农的追求还是用户的体验, 在 body 里面写 style 终究是一种下策
同样地 script 不要写在 head 标签里面, 会阻碍页面加载
而 CSS 也推荐写成 style 标签直接嵌在页面上, 因为如果搞个外链, 浏览器需要先做域名解析, 然后再建立连接, 接着才是下载, 这一套下来可能已经过了 0.5s/1s, 甚至 2~3 秒而写在页面的 CSS 虽然无法缓存, 但是本身它也不会很大, 再加 gzip 压缩, 基本上在 50k 以内
12. html 要加上 lang 的属性
如下, 如果是英文的网页, 应该这么写:
- <html lang="en">
- <html lang="en-US">
第一种表示它是英文的网页, 第二种表示它是美国英语的网页, 加上这个的好处是有利于 SEO 和屏幕阅读器使用者, 他可以快速地知道这个网页是什么语言的, 如果是中文可以这么写:
<html lang="zh-CN">
13. 要在 head 标签靠前位置写上 charset 的 meta 标签
- <head>
- <meta charset="utf-8">
- </head>
- <form>
- <label>Email: </label>
- <input type="email">
- </form>
- <div></div>
- <div></div>
来源: https://www.cnblogs.com/QianBoy/p/8542301.html