文档章节

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 之 HTML(一)认识前端

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

fengdaoting
05/20
0
0
前端协作流程

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

sshpp
2017/07/24
0
0
HTML5——对HTML5的认识

首先非常感谢李刚老师出的这本书《HTML5/CSS3/JavaScript讲义》,今天读了第一章节的内容,趁热打铁,总结一下。 HTML5的时代已经到来,它对所有的前端开发人员来说是一种福音。HTML5致力于解...

武小猪
06/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

码云项目100,水一发

简单回顾一下: 早期构想最多的,是希望能将PHP一些类和编码分区做得更细,所以很多尝试。但不得不说,PHP的功能过于单一,是的,也许写C/C++扩展,可以解决问题,那我为什么不用C#或者Golan...

曾建凯
今天
3
0
Spring应用学习——AOP

1. AOP 1. AOP:即面向切面编程,采用横向抽取机制,取代了传统的继承体系的重复代码问题,如下图所示,性能监控、日志记录等代码围绕业务逻辑代码,而这部分代码是一个高度重复的代码,也就...

江左煤郎
今天
4
0
eclipse的版本

Eclipse各版本代号一览表 Eclipse的设计思想是:一切皆插件。Eclipse核心很小,其它所有功能都以插件的形式附加于Eclipse核心之上。 Eclipse基本内核包括:图形API(SWT/Jface),Java开发环...

mdoo
今天
3
0
SpringBoot源码:启动过程分析(一)

本文主要分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 还是老套路,先把分析过程的时序图摆出来:时序图-SpringBoot2.10启动分析 二.源码分析 首...

Jacktanger
今天
6
0
小白带你认识netty(二)之netty服务端启动(上)

上一章 中的标准netty启动代码中,ServerBootstrap到底是如何启动的呢?这一章我们来瞅下。 server.group(bossGroup, workGroup);server.channel(NioServerSocketChannel.class).optio...

天空小小
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部