文档章节

Web前端规范--HTML规范

CharmyZ
 CharmyZ
发布于 2016/10/20 11:50
字数 628
阅读 13
收藏 0

1、html标签、html属性全部小写。

2、 文件应以”<!DOCTYPE … …>”首行顶格开始,推荐使用”<!DOCTYPE HTML>”。

3、必须声明文档的编码charset,且与文件本身编码保持一致,推荐使用UTF-8编码。

<meta charset="UTF-8">

4、根据页面内容和需求填写适当的keywords和description。

5、 IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

6、 使用双引号(“”) 而不是单引号(”) 。

7、 如果只需兼容 IE10+,可将 HTML5 的 async 属性加至脚本中,它可防止阻塞 DOM 的解析 。

<script src="main.js" async></script>

8、双标签必须闭合,单标签(自关闭标签)不闭合。

9、使用style、link、script,不用指定type属性,因为 text/css 和 text/javascript 分别是他们的默认值。

10、 table不建议用于布局,tab只可用于表现具有明显表格形式的数据。

11、使用link将CSS文件引入,并置于head中。使用script将JS文件引入,并置于body底部。

12、 段落文字应该用<p>,避免使用<br>。

13、 列表项放<ul>、<ol>、<dl>,不要使用一系列的<div>或<p> 。

14、 form button应制定type类型,使用type="submit"、type="reset"或type="button"。

15、 有效使用<thead>、<tfoot>、<tbody>、<th>(scope属性)。可以把<tfoot>放<tbody>前提高加载速度。

16、 块元素、列表元素、表格元素都放在新行。

17、图片文件可采用有意义的备选文本(alt)( 图片的 alt 属性是可不填写内容的alt=""

<img src="banner.jpg" alt="welcome">

18、 严格地保证结构、表现、行为三者分离,并尽量使三者之间没有太多的交互和联系。

19、 不在元素上使用 style 属性(比如<div style="border:1px solid #CCC"></div>是不建议的)

20、标签最好语义化。

21、 标题最好用h*(同一页面只能有一个h1)。

22、尽可能减少div多层嵌套。

23、指定img明确的宽度和高度,可以增加页面渲染速度

24、多余代码, 比如页面注释掉不需要的代码,应该坚决删除掉。

25、注意浮动的浏览器兼容问题。及时清除浮动。

26、 很多浏览器会将含有这些词的作为广告拦截: ad、ads、adv、banner、sponsor、gg、guangg、guanggao等 页面中尽量避免采用以上词汇来命名。

© 著作权归作者所有

共有 人打赏支持
CharmyZ
粉丝 0
博文 23
码字总数 3334
作品 0
闵行
前端工程师
精读《现代 js 框架存在的根本原因

1 引言 深入思考为何前端需要框架,以及 web components 是否可以代替前端框架? 原文地址,建议先阅读原文,或者阅读概述。 2 概述 现在前端框架非常多了,如果让我们回答 “为什么要用前端...

黄子毅
05/21
0
0
精读《现代 js 框架存在的根本原因》

1 引言 深入思考为何前端需要框架,以及 web components 是否可以代替前端框架? 原文地址,建议先阅读原文,或者阅读概述。 2 概述 现在前端框架非常多了,如果让我们回答 “为什么要用前端...

黄子毅
05/21
0
0
前端协作流程

Web系统   在介绍协作流程之前,首先简单地了解Web系统的结构   从宏观上来说,Web系统是部署在服务器上用于为web客户端提供服务的系统。不同的Web客户端根据不同的需求,发送请求到服务...

sshpp
2017/07/24
0
0
从零开始学 Web 之 HTML(一)认识前端

大家好,这里是 Daotin 从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩...

fengdaoting
05/20
0
0
史上最全的前端资源大汇总

1.前言 最近有很多朋友问我有没有相关的书籍推荐,希望能够自学一下前端。 正好最近在查阅文章的时候,发现有朋友已经进行过总结。 经过沟通和“行贿”��,终于取得转载权利,在此感谢晚晴...

mr_lp
2017/01/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

qduoj~前端~二次开发~打包docker镜像并上传到阿里云容器镜像仓库

上一篇文章https://my.oschina.net/finchxu/blog/1930017记录了怎么在本地修改前端,现在我要把我的修改添加到部署到本地的前端的docker容器中,然后打包这个容器成为一个本地镜像,然后把这...

虚拟世界的懒猫
今天
1
0
UML中 的各种符号含义

Class Notation A class notation consists of three parts: Class Name The name of the class appears in the first partition. Class Attributes Attributes are shown in the second par......

hutaishi
今天
1
0
20180818 上课截图

小丑鱼00
今天
1
0
Springsecurity之SecurityContextHolderStrategy

注:下面分析的版本是spring-security-4.2.x,源码的github地址是: https://github.com/spring-projects/spring-security/tree/4.2.x 先上一张图: 图1 SecurityContextHolderStrategy的三个......

汉斯-冯-拉特
今天
1
0
LNMP架构(Nginx负载均衡、ssl原理、生成ssl密钥对、Nginx配置ssl)

Nginx负载均衡 网站的访问量越来越大,服务器的服务模式也得进行相应的升级,比如分离出数据库服务器、分离出图片作为单独服务,这些是简单的数据的负载均衡,将压力分散到不同的机器上。有时...

蛋黄_Yolks
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部