一、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。常见的单标签有img、link、input、hr、br,

如下不好的写法:

<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标签

如下,一般charset的meta标签要写在head标签后的第一个标签:

<head>
<meta charset="utf-8">
</head>

一个原因是避免网页显示unicode符号时乱码,写在前面是因为w3c有规定,语言编码要在html文档的前1024个字节。如果不写的话在老的浏览器会有utf-7攻击的隐患,具体可以自行查阅资料,只是现在的浏览器基本都去掉了对utf-7编码的支持了。

charset的标签写成html5的这种比较简洁的写法就行了,不需要写成html4这种长长的:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

14. 特殊符号使用html实体

不要直接把Unicode的特殊符号直接拷到html文档里面,要使用它对应的实体Entity

特别是像©这种符号,不要从UI里面直接拷一个unicode的字符过去,如果直接拷过去会比较丑,它取的是用的字体里面的符号。

15. img空src的问题

有时候可能你需要在写一个空的img标签,然后在JS里面动态地给它赋src,所以你可能会这么写:

<img src="" alt>
但是这样写会有问题,如果你写了一个空的src,会导致浏览器认为src就是当前页面链接,然后会再一次请求当前页面,就跟你写一个a标签的href为空类似。如果是background-image也会有类似的问题。这个时候怎么办呢?如果你随便写一个不存在的url,浏览器会报404的错误。
我知道的有两种解决方法,第一种是把src写成about:blank,如下:
<img src="about:blank" alt>

这样它会去加载一个空白页面,这个没有兼容问题,不会加载当前页面,也不会报错

第二种办法是写一个1px的透明像素的base64,如下代码所示

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

第二种可能比较符合规范,但是第一种比较简单,并且没有兼容性问题。

16. 关于行内元素空格和换行的影响

有时候换行可能会引入空格,如下代码:

<form>
<label>Email: </label>
<input type="email">
</form>

在label和input中间会有一个空格,这样可能会导致设置lable的width和input 的width两者的和等于form的时候会导致input换行了,有时候你检查半天没查出原因,最后可能发现,原来是多了一个空格,而这个空格是换行引起的

为什么<form>和<label>之间以及<input>和</form>之间的换行为什么没引入空格

这是因为块级元素开始的空白文本将会被忽略,并且,块级元素后面的空白文本结点将不会参与渲染

<div></div>
<div></div>

两个div之间有textNode的文本节点,但是不会参与渲染。

17. 类的命名使用小写字母加中划线连接

如下使用-连接,不要使用驼峰式:

<div class="hello-world"></div>

前端(HTML/CSS/JS)-HTML编码规范的更多相关文章

  1. 【转发】网易邮箱前端技术分享之javascript编码规范

    网易邮箱前端技术分享之javascript编码规范 发布日期:2013-11-26 10:06 来源:网易邮箱前端技术中心 作者:网易邮箱 点击:533 网易邮箱是国内最早使用ajax技术的邮箱.早在 ...

  2. Vue.js 组件编码规范

    本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...

  3. 认识大前端html+css+js

    认识大前端:前端就是将效果图生成网页,利用html+css+js等技术. 如果把前端比作一台汽车,那么html就是车的骨架,css就是完整的车的模型,而js就充当着车的发动机... 建议:   刚刚开 ...

  4. 前端开发 css、less编写规范

    壹 ❀ 引 早在大半年前,我在负责整理定义了前端组JavaScript开发规范与less.css样式开发规范.一直想将两个规范整理成文章,但在整理了JavaScript规范后,我花了较多的时间在学习J ...

  5. 中阶d01-- web前端 html css js bootstrap

    html 页面骨架结构css 页面优化js(脚本语言) 页面和用户互动 bootstrap 前端框架,主要实现不同设备直接打开页面时播放比例设置(全屏暂时,不要滚动条)

  6. 实现简易版德州扑克|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS

    实现简易版德州扑克 1.先上达到网页效果图(简易版德州扑克) 网页分为发牌区和牌池,上面为发牌区,下面是牌池区 2. 代码实现 2.1 HTML和JS代码 ` <link rel="s ...

  7. 用CSS实现蒙德里安名画|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS

    实现项目:用CSS实现蒙德里安名画 1.首先,献上代码和效果图 1.1代码: <head> <style> .centerframe{ display: flex; heigh ...

  8. html、css、js的命名规范

    最佳原则 坚持制定好的代码规范. 无论团队人数多少,代码应该同出一门. 项目命名 全部采用小写方式, 以下划线分隔. 例:my_project_name 目录命名 参照项目命名规则: 有复数结构时,要 ...

  9. JS前端编码规范

    转自<前端编码规范之JavaScript>,网址:http://www.cnblogs.com/hustskyking/p/javascript-spec.html 一个是保持代码的整洁美 ...

随机推荐

  1. 使用log4net日志组件经验分享

    常见步骤: 第一:在项目中引用log4net组件. 第二:配置log4net,一般都写在web.config中. 第三:调用部分.       具体怎么配置,大家可以参考博客其它博友写的,这里我只写我 ...

  2. S5PV210中断处理

    _start: 1.设置栈空间:防止之前的UBOOT代码被覆盖,应为c中需要栈空间 ldr sp, =0x40010000 2.设置CPSR的I,F位,A8打开IRQ,FIQ中断: mov r0, # ...

  3. CentOS 7 安装 Nginx 反向代理 node

    安装 nginx yum install epel-release yum install nginx 配置 nginx sudo vim /etc/nginx/nginx.conf, 改成下面配置: ...

  4. 架构师入门:搭建基本的Eureka架构(从项目里抽取)

    没有废话,直接上干货,理论部分大家可以看其它资料. 这里是部分关键代码,如果需要全部可运行的代码,请给本人留言. 在后继,还将给出搭建高可用Eureka架构的方式. 1 Eureka的框架图 在Eur ...

  5. HDU 3001(状态压缩dp)

    状态压缩dp的第一题! 题意:Mr ACMer想要进行一次旅行,他决定访问n座城市.Mr ACMer 可以从任意城市出发,必须访问所有的城市至少一次,并且任何一个城市访问的次数不能超过2次.n座城市间 ...

  6. Spring-Security+Freemarker 开启跨域请求伪造防护功能

         CSRF简介--摘抄自<Spring实战(第4版)> 我们可以回忆一下,当一个POST请求提交到"/spittles"上时,SpittleController ...

  7. js内存泄露的原因

    1.意外的全局变量 function fun(){ a=19//全局变量 console.log(a) } 2.未及时清理计时器或者回调函数 //记得及时清理定时器 var intervalId=se ...

  8. 解决hadoop中 bin/hadoop fs -ls ls: `.': No such file or directory问题

    出现这样的问题确实很苦恼...使用的是2.7版本..一般论坛上的都是1.x的教程,搞死人 在现在的2.x版本上的使用bin/hadoop fs -ls  /就有用 应该使用绝对路径就不会有问题.... ...

  9. Ubuntu14.04上搭建FTP服务器

    Ubuntu上常用的Ftp服务器是vsFTPd.安装前检查下是否已经装好了.用 sudo service vsftpd restart,如果提示重启成功之类的信息,说明此服务器已经安装好了vsFTPd ...

  10. UVA - 1632 Alibaba 区间dp

    题意:给定n个点,其中第i个点的坐标是,且它会在秒后消失.Alibaba可以从任意位置出发,求访问完所有点的最短时间.无解输出No solution. 思路:表示访问完区间后停留在i点的最短时间,表示 ...