大部分开发者会通过JavaScript和图片优化，通过服务器配置压缩文件合并文件——甚至调整CSS(合并小图片)。

可怜的HTML总是被忽略，虽然它一直是网络的核心语言。

HTML越来越大。前100名网站的每个HTML页面大多在40K左右。亚马逊和雅虎使用成千上万的HTML页面。在youtube.com的主页上，有多达3500个超文本标记语言元素。

HTML复杂度的降低和页面中元素数量的减少不会显著提高解析时间——但是HTML是构建极快网页、适应不同设备和影响成功的关键因素。

在本文中，您将学习如何编写简单干净的HTML，以便您可以创建一个可以快速加载并支持多种设备的网站，这将易于调试和维护。

写代码的方法不止一种——尤其是HTML。这只是说明一般经验，但不是正确的选择。　HTML, CSS 和 JavaScript

HTML是一种用来表达结构和内容的标记语言。

HTML不应该用来显示样式和样式。不要为了显得“更大”而在标题标签(h1~h6)中写单词，或者仅仅为了缩进而使用blockquotes元素。而是用CSS来改变元素的外观和布局。

HTML元素的默认外观是通过浏览器的默认样式来实现的：Firefox、Internet Explorer、Opera都不一样。例如，在Chrome中，默认h1元素呈现为32px。

　三个基本原则：

HTML用来表达结构，CSS用来表达不同的风格和主题。响应用户行为的JavaScript。

使用HTML，必要时使用CSS，必要时添加JavaScript。例如，在许多情况下，您可能使用HTML表单进行验证，使用CSS或SVG进行动画。

将CSS和JavaScript从您的HTML代码中分离出来。让它们缓存，这样代码更容易调试。在生产中，CSS和JavaScript可以被压缩和合并，并且应该是您的构建系统的一部分。注*参见JavaScript构建(编辑)系统竞赛

文档文档结构

带有HTML5的文档类型：

XML/HTML代码将内容复制到剪贴板

！DOCTYPEhtml

超文本标记语言

头

标题收件人：附件/标题

/head

身体

h1Pesto/h1

pPestoisgood！/p

/body

/html

参考页面顶部的CSS文件，如head元素：

CSS代码将内容复制到剪贴板

头

title my pestoricipe/title

linkrel='/css/global.css '

linkrel='css/local.css '

/head

通过这种方式，浏览器可以在解析HTML之前预加载样式，而不会呈现混乱的页面布局。

在正文关闭之前，将JavaScript放在页面底部。这将增加页面渲染时间，因为浏览器可以在加载JavaScript :之前渲染页面。

JavaScript代码将内容复制到剪贴板

身体

.

scriptsrc='/js/global.js '

scriptsrc='js/local.js '

/body

在JavaScript中添加事件处理。不要在HTML中添加。这个很难维护，比如：

XML/HTML代码将内容复制到剪贴板

index.html:

头

.

scriptsrc='js/local.js '

/head

bodyonload='init()'

.

buttononclick=' HandleFoo()' Foo/button

.

/body

好多了，

JavaScript代码将内容复制到剪贴板

头

.

/head

身体

.

buttonid='foo'Foo/button

.

scriptsrc='js/local.js '

/body

js/local.js:

init()；

varfooButton=

document . query select or(' # foo ')；

foo button . onclick=HandleFoo()；

　合法的HTML

网页成功的主要因素之一是浏览器可以处理无效的HTML。浏览器也有一些关于如何呈现无效代码的标准化规则。

但是，这不是你放手的理由。有效的HTML更容易调试，文件更小，速度更快，资源更少，因为渲染更快。无效的超文本标记语言使得响应性设计难以实现。

在使用模板时，编写有效的HTML尤为重要。

在您的BUILD系统中验证HTML:使用验证插件，如HTMLHint和升华器来检查您的HTML的语法。

使用HTML5文档类型。

一定要保持HTML的层次：正确嵌套元素，确保没有未闭合的元素。它可以帮助调试器添加注释。

XML/HTML代码将内容复制到剪贴板

divid='foobar '

.

/div！- foobarends -

一定要在一个不是自封闭的元素后面加上一个结束标记。例如，以下也可以工作：

XML/HTML代码将内容复制到剪贴板

pPestoisgoodtoeat.

p.和andpestoiseasytomake。

但是下面写可以避免错误，段落层次更明显：

土豆很好吃./p

p.香蒜酱很容易做。/p

项目元素(li)不必关闭。一些非常聪明的程序员会这样写。在任何情况下，列表元素(ul)都必须关闭。

XML/HTML代码将内容复制到剪贴板

保险商实验所

liBasil

油脂种类

liGarlic

/ul

你必须注意的一点是视频和音频元素。它们不是自封闭的：

XML/HTML代码将内容复制到剪贴板

！-错误： liabletocauselayouthjury-

videosrc='foo.webm'/

！-正确-

videosrc='foo.webm '

pVideoelementnotsupported。/p

/视频

相反，通过删除不必要的代码，HTML页面会变得更干净

不需要为自封闭元素添加“/”，如img等。

设置一个属性没有值，如果不添加的话(这种情况下不会自动播放，也没有控件)。

视频，它没有属性

XML/HTML代码将内容复制到剪贴板

videosrc='foo.webm '

下面两个更好

XML/HTML代码将内容复制到剪贴板

video src=' foo . webm ' autoplay=' false ' controls=' false '

video src=' foo . webm ' autoplay=' true ' controls=' true '

可读性更强

XML/HTML代码将内容复制到剪贴板

video src=' foo . webm ' autoplaycontrols

样式和脚本标记不需要类型属性；默认值是css和javascript

更好是优化协议地址(去掉http或https，会根据当前协议自动分配)

XML/HTML代码将内容复制到剪贴板

ahref='//en . Wikipedia . org/wiki/Tag _ soup ' Tagsoop/a

增强可读性，例如，乍一看它像一个标题

XML/HTML代码将内容复制到剪贴板

h2ahref='/contact'Contact/ah2

这个就像一个链接

a href='/contact'h2Contact/h1/a

应该使用小写字母

XML/HTML代码将内容复制到剪贴板

AHREF='/'Home/A

大杂烩看起来更恶心

XML/HTML代码将内容复制到剪贴板

H2Pesto/h2

　语义标记

“语义”是指与意义相关

HTML应该标注有意义的内容：元素与描述的内容一致。

HTML5引入了一些新的语义元素，如页眉、页脚和导航。

使用正确的元素来表达正确的内容有助于可访问性。

标题使用h1h2、h3，列表使用ul或ol

请注意，文章的标题应该以h1开头

使用页眉、页脚、导航和侧边

用p写文字

用em和strong代替I和b来强调

表单使用标签元素，输入类型

混合文本和元素会导致布局问题

XML/HTML代码将内容复制到剪贴板

div name : InputType=' text '/div

更好使用以下表达式

XML/HTML代码将内容复制到剪贴板

div label name :/labelinputype=' text '/div

　布局

HTML应该使用有意义的组织结构，而不是风格。

使用p元素表示文本，而不是布局。

避免使用br换行，改用块级元素和CSS。

避免使用水平分隔线HR .使用CSS的边框样式来控制。

不要使用不必要的DIV。W3C将DIV定义为顺序中的最后一个元素。

要了解哪些元素是块级元素，请避免在DIV中放置不必要的块级元素。没有必要将列表放在div中。

不要使用表格进行布局。

Flex box被广泛推荐，所以尽可能使用它。

使用CSS填充和边距来理解盒子模型。　CSS

这篇文章是关于HTML的，但是这里有一些基本的CSS技巧。

避免嵌入CSS。出于性能原因，CSS可以在BUILD期间嵌入到您的网页中。

避免重复的id。

如果要将某个样式应用到多个元素，请使用class。对父元素使用类比对子元素使用类更好：

XML/HTML代码将内容复制到剪贴板

！-有点傻： (-

保险商实验所

liclass='配料'巴兹尔/li

liclass='配料'松子/li

liclass='配料'大蒜/li

/ul

！-更好：) -

ulclass='配料'

liBasil/li

李莉列举/li

liGarlic/li

/ul

　可访问性

使用语义元素

提供向后兼容

在链接上添加标题属性，而且应该避免与环文本出现相同的内容

在输入元素上添加类型和占位符属性