您没有来错地!为了更好的发展,黑基网已于9月19日正式更名为【安基网】,域名更换为www.safebase.cn,请卸载旧的APP并安装新的APP,给您带来不便,敬请理解!谢谢

黑基Web安全攻防班
安基网 首页 IT技术 办公设计 查看内容

HTML/CSS/JS编码规范

2017-8-21 11:37| 投稿: lofor |来自: 互联网

摘要: 最近整理了一份HTML/CSS/JS编码规范,供大家参考。目录:一、HTML编码规范1. img标签要写alt属性根据W3C标准,img标签要写alt属性,如果没有就写一个空的。但是一般要写一个有内容的,根据图片想要表达的意思,因为a ...

最近整理了一份HTML/CSS/JS编码规范,供大家参考。

目录:

一、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="">

如果你用React写jsx模板,它就要求每个标签都要闭合,但是它始终不是原生html.

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

有时候可能会直接在ul里面写一个div或者span,以为这样没关系:

<ol>
    <span>123span>
    <li>ali>
    <li>bli>
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 Detailh1>
section>

7. 使用section标签增强SEO

使用section的好处是可以划分章节,如下代码:

<body>
<h1>Listing Detailh1>
<section>
    <h1>House Infomationh1>
    <section>
       <h1>LOCATIONh1>
       <p>p>
    section>
    <section>
        <h1>BUILDINGh1>
        <p>p>
    section>
section>
<section>
    <h1>Listing Pictureh1>
section>
body>

就会被outline成这样的大纲:

Listing Detail

  1. House Infomation
    1. LOCATION
    2. BUILDING
  2. Listing Picture

可以使用 html5 outliner 进行实验,可以看到,我们很任性地使用了多个h1标签,这个在html4里面是不合法的。

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. 每个页面要写

设置页面的渲染模式为标准模式,如果忘记写了会怎么样?忘记写了会变成怪异模式,怪异模式下很多东西渲染会有所不同,怪异模式下input/textarea的默认盒模型会变成border-box,文档高度会变成可视窗口的高度,获取window的高度时就不是期望的文档高度。还有一个区别,父容器行高在怪异模式下将不会影响子元素,如下代码:

<div><img src="test.jpg" style="height:100px">div>

在标准模式下div下方会留点空白,而在怪异模式下会。这个就提醒我们在写邮件模板时需要在顶部加上,因为在本地开发邮件模板时是写html片段,没有这个的话就会变成怪异模式。

10. 要用table布局写邮件模板

由于邮件客户端多种多样,你不知道用户是使用什么看的邮件,有可能是用的网页邮箱,也有可能用的gmail/outlook/网易邮箱大师等客户端。这些客户端多种多样,对html/css的支持也不一,所以我们不能使用高级的布局和排版,例如flex/float/absolute定位,使用较初级的table布局能够达到兼容性最好的效果,并且还有伸缩的效果。

另外邮件模板里面不能写媒体查询,不能写script,不能写外联样式,这些都会被邮件客户端过滤掉,样式都得用内联style,你可以先写成外联,然后再用一些工具帮你生成内联html。

写完后要实际测一下,可以用QQ邮箱发送,它支持发送html格式文本,发完后在不同的客户端打开看一下,看有没有问题,如手机的客户端,电脑的客户端,以及浏览器。

由于你不知道用户是用手机打开还是电脑打开,所以你不能把邮件内容的宽度写死,但是完全100%也不好,在PC大屏幕上看起来可能会太大,所以一般可以这样写:

"border-collapse:collapse;font-family: Helvetica Neue,Helvetica,Arial;font-size:14px;width:100%;height:100%">
    <tr><td align="center" valign="top"><table style="border:1px solid #ececec;border-top:none; max-width:600px;border-collapse:collapse">
    <tr><td>内容1td>tr>
    <tr><td>内容2td>tr>table>td>tr>table>

最外面的table宽度100%,里面的table有一个max-width:600px,相对于外面的table居中。这样在PC上最大宽度就为600px,而在手机客户端上宽度就为100%。

但是有些客户端如比较老的outlook无法识别max-width的属性,导致在PC上太宽。但是这个没有办法,因为我们不能直接把宽度写死不然在手机上就要左右滑了,也不能写script判断ua之类的方法。所以无法兼容较老版本outlook.

11. html要保持简洁,不要套太多层

需要套很多层的,一般有两种情况,一种是切图不太会,需要套很多层来维持排版,第二种是会切图,但是把UI拆解得太细。像以下布局:

我会这么写:

<ul>
    <li>
        <div class="img-container">
            <img>
        div>
        <div class="text">div>
    li>
ul>

因为它是一个列表,所以外面用ul/li作为容器,里面就两个div,一个图片的float: left,另外一个文字的容器,这样就可以了。不用套很多层,但是有一些是必要的,你写得太简单的话,扩展性不好,例如它是一个列表那你就应该使用ul/ol,如果你要清除浮动,那你可能需要套一个clearfix的容器。

如果有一块是整体,它整体向右排版,那么这一块也要套一个容器,有时候为了实现一些效果,可能也要多套一个容器,例如让外面的容器float,而里面的容器display: table-cell。但是你套这些容器应该都是有价值,如果你只是为了在功能上看起来整齐划一,区分明显好像没太大的意义。

12. 特殊情况下才在html里面写script和style

通常来说,在html里面直接写script和style是一种不好的实践,这样把样式、结构和逻辑都掺杂在一起了。但是有时候为了避免闪屏的问题,可能会直接在相应的html后面跟上调整的script,这种script看起来有点丑陋,但是很实用,是没有办法的办法。

13. 样式要写在head标签里

样式不能写在body里,写在body里会导致渲染两次,特别是写得越靠后,可能会出现闪屏的情况,例如上面的已经渲染好了,突然遇到一个style标签,导致它要重新渲染,这样就闪了一下,不管是从码农的追求还是用户的体验,在body里面写style终究是一种下策。

同样地script不要写在head标签里面,会阻碍页面加载。

而CSS也推荐写成style标签直接嵌在页面上,因为如果搞个外链,浏览器需要先做域名解析,然后再建立连接,接着才是下载,这一套下来可能已经过了0.5s/1s,甚至2~3秒。而写在页面的CSS虽然无法缓存,但是本身它也不会很大,再加gzip压缩,基本上在50k以内。

14. html要加上lang的属性

如下,如果是英文的网页,应该这么写:

<html lang="en">
<html lang="en-US">

第一种表示它是英文的网页,第二种表示它是美国英语的网页,加上这个的好处是有利于SEO和屏幕阅读器使用者,他可以快速地知道这个网页是什么语言的,如果是中文可以这么写:

<html lang="zh-CN">

15. 要在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">

据我所查,就算是IE6也支持那种简短的写法,虽然它不是一个html5浏览器。

16. 特殊符号使用html实体

不要直接把Unicode的特殊符号直接拷到html文档里面,要使用它对应的实体Entity,常用的如下表所示:

符号实体编码
©©
®®
>>
<<
&&

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

17. 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的透明像素的baseb4,如下代码所示:

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


小编推荐:欲学习电脑技术、系统维护、网络管理、编程开发和安全攻防等高端IT技术,请 点击这里 注册黑基账号,公开课频道价值万元IT培训教程免费学,让您少走弯路、事半功倍,好工作升职加薪!



免责声明:本文由投稿者转载自互联网,版权归原作者所有,文中所述不代表本站观点,若有侵权或转载等不当之处请联系我们处理,让我们一起为维护良好的互联网秩序而努力!联系方式见网站首页右下角。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

相关阅读

最新评论

最新

返回顶部