你的HTML页面书写规范吗？必须知道的HTML书写规范

言：每一个行业都有自己的规范，不已规矩，不成方圆。尤其是代码，代码规范便于阅读，便于维护。

1.用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。

2.嵌套元素应当缩进一次（即两个空格）。

3.对于属性的定义，确保全部使用双引号，绝不要使用单引号。

4.不要在自闭合（self-closing）元素的尾部添加斜线

5.不要省略可选的结束标签（closing tag）（例如，</li> 或</body>）。

6.为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。<!DOCTYPE html>

7.语言属性

根据 HTML5 规范：

强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等.

<html>

</html>

8.IE 兼容模式

IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。

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

9.字符编码

通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）。

<head>

</head>

10.引入 CSS 和 JavaScript 文件

根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。

<style>

/* ... */

</style>

11.

布尔（boolean）型属性

布尔型属性可以在声明时不赋值。XHTML 规范要求为其赋值，但是 HTML5 规范不需要。

12.

减少标签的数量

编写 HTML 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现。请看下面的案例：

<span>

</span>

13.

不要使用 @import

与 <link> 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：

使用多个 <link> 元素

通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件

通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能

14.

class 命名

class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。破折号应当用于相关 class 的命名（类似于命名空间）（例如，.btn 和 .btn-danger）。

避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。

class 名称应当尽可能短，并且意义明确。

使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。

基于最近的父 class 或基本（base） class 作为新 class 的前缀。

使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。

.t { ... }

.red { ... }

.header { ... }

/* Good example */

.tweet { ... }

.important { ... }

.tweet-header { ... }

两个概念应该是一个老生常谈的问题了，新手前端和高级前端的区别也在于此。如何将JS性能优化到最合适的程度，如何保证页面更流畅的运行是前端永远绕不开的话题，而节流和防抖能有效的优化性能。下面我们一起看看：

防抖（Debounce）

我对函数防抖的定义：当函数被连续调用时，该函数并不执行，只有当其全部停止调用超过一定时间后才执行1次。

一个被经常提起的例子：

上电梯的时候，大家陆陆续续进来，电梯的门不会关上，只有当一段时间都没有人上来，电梯才会关门。

Talk is cheap，我们直接 show code 吧。

先做基本的准备（篇幅原因，HTML部分省略）：

let container = document.getElementById('container');
// 事件处理函数
function handle(e) {
 console.log(Math.random()); 
}
// 添加滚动事件
container.addEventListener('scroll', handle);

我们发现，每滚动一下，控制台就会打印出一行随机数。

基础防抖

我们现在写一个最基础的防抖处理：

function debounce(func, wait) {
 var timeout;//标记
 return function() {
 clearTimeout(timeout);
 timeout = setTimeout(func, wait);
 }
}

事件也做如下改写：

container.addEventListener('scroll', debounce(handle, 1000));

现在试一下，我们会发现只有我们停止滚动1秒钟的时候，控制台才会打印出一行随机数。

标准防抖

以上基础版本会有两个问题，请看如下代码：

// 处理函数
function handle(e) {
 console.log(this); //输出Window对象
 console.log(e); //undefined
}

没错，当我们不使用防抖处理时，handle()函数的this指向调用此函数的container，而在外层使用防抖处理后，this的指向会变成Window。其次，我们也要获取到事件对象event。

所以我们要对防抖函数做以下改写：

function debounce(fn, wait) {
 let timeout;
 return function() {
 let that = this;
 let arg = arguments;
 clearTimeout(timeout);
 timeout = setTimeout(function(){
 fn.apply(that,arg)//使用apply改变this指向
 }, wait);
 }
}

当然了，如果使用箭头函数便可以省去外层声明。

先触发式防抖

以上的情况都是只有当连续触发停止后才执行，那如果我们想让事件第一次触发就执行，后面的连续触发都不执行，直到停止触发一段时间才可以再次触发（比如防止频繁点击），该如何处理呢？

那么可以利用同样的原理，稍作修改即可：

function debounce(fn, wait) {
 let timeout;
 return function(){
 let arg = arguments;
 let that = this;
 clearTimeout(timeout);
 !timeout && fn.apply(that,arg)
 timeout = setTimeout(function(){
 timeout = null;
 }, wait);
 }
}

节流 (Throttle)

顾名思义，节流就是节约流量，将连续触发的事件稀释成预设评率。 比如每间隔1秒执行一次函数，无论这期间触发多少次事件。

这有点像公交车，无论在站点等车的人多不多，公交车只会按时来一班，不会来一个人就来一辆公交车。

标准节流

function throttle(fn, wait) {
 let timeout; 
 return function () {
 if (!timeout) { 
 timeout = setTimeout(() => {
 timeout = null;
 fn.apply(this, arguments)
 }, wait)
 }
 }
}

用滚动事件来描述节流，其实是一个非常典型的场景，比如需要用滚动事件判断是否加载更多等。

先触发式节流

和防抖函数类似，以上的情况是先等待后触发，如果我们想让事件先触发后等待，该如何处理呢？网上大部分文章都告诉你用时间戳的方式去实现，其实只要像防抖一样稍作修改即可实现。

function throttle(fn, wait) {
 let timeout; 
 return function () {
 if (!timeout) { 
 fn.apply(this, arguments)
 timeout = setTimeout(() => {
 timeout = null;
 }, wait)
 }
 }
}

这样，我们就会发现第一次触发函数就会立即生效。

总结

关于防抖与节流，lodash、underscore等工具库都有完善的实现可以直接用，本没有必要造轮子。本文的目的仅仅是为了将其主要思想和实现思路展现出来。更重要的，知道防抖和节流的本质后，就知道在何时使用防抖或者节流，何时先触发或后触发。无论需求如何改变，都可以灵活的运用

TML 文档是由 HTML 元素定义的。

HTML 元素(推荐学习：HTML入门教程)

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

开始标签
元素内容
结束标签
<p>
This is a paragraph
</p>
<a href="default.htm" >
This is a link
</a>
<br />

注：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。

HTML 元素语法

HTML 元素以开始标签起始

HTML 元素以结束标签终止

元素的内容是开始标签与结束标签之间的内容

某些 HTML 元素具有空内容（empty content）

空元素在开始标签中进行关闭（以开始标签的结束而结束）

大多数 HTML 元素可拥有属性

嵌套的 HTML 元素

大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。

HTML 文档由嵌套的 HTML 元素构成。

实例：

不要忘记结束标签

即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：

上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

注：未来的 HTML 版本不允许省略结束标签。

以上就是HTML元素的语法与构成的详细内容，更多请关注其它相关文章！

在线咨询

上一篇：荷式开门，救命大法，请不要只是刷爆朋友圈！
下一篇：如何控制表单内tab键切换的顺序

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

你的HTML页面书写规范吗？必须知道的HTML书写规范

言：每一个行业都有自己的规范，不已规矩，不成方圆。尤其是代码，代码规范便于阅读，便于维护。

防抖（Debounce）

节流 (Throttle)

总结

您的项目需求