HTML编码规范

法

缩进使用soft tab（4个空格）；
嵌套的节点应该缩进；
在属性上，使用双引号，不要使用单引号；
属性名全小写，用中划线做分隔符；
不要在自动闭合标签结尾处使用斜线（HTML5 规范指出他们是可选的）；
不要忽略可选的关闭标签，例:

<!DOCTYPE html>
 <html>
 	<head>
 		<title>Page title</title>
 	</head>
 	<body> <img src="images/company_logo.png" alt="Company">
 		<h1 class="hello-world">Hello, world!</h1>
 	</body>
 </html>

HTML5 doctype在页面开头使用这个简单地doctype来启用标准模式，使其在每个浏览器中尽可能一致的展现；虽然doctype不区分大小写，但是按照惯例，doctype大写（关于html属性，大写还是小写）。<!DOCTYPE html> <html> ... </html> lang属性根据HTML5规范：应在html标签上加上lang属性。这会给语音工具和翻译工具帮助，告诉它们应当怎么去发音和翻译。
更多关于 lang 属性的说明在这里；在sitepoint上可以查到语言列表；
但sitepoint只是给出了语言的大类，例如中文只给出了zh，但是没有区分香港，台湾，大陆。而微软给出了一份更加详细的语言列表.aspx)，其中细分了zh-cn, zh-hk, zh-tw。<!DOCTYPE html> <html lang="en-us"> ... </html> 字符编码通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式，通常指定为’UTF-8’。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> ... </html> IE兼容模式用 <meta> 标签可以指定页面应该用什么版本的IE来渲染；<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> </head> ... </html> 引入CSS, JS根据HTML5规范, 通常在引入CSS和JS时不需要指明 type，因为 text/css 和 text/javascript 分别是他们的默认值。HTML5 规范链接使用link
使用style
使用script <link rel="stylesheet" href="code_guide.css">  <style> ... </style>  <script src="code_guide.js"></script>  <script> ... </script> 属性顺序属性应该按照特定的顺序出现以保证易读性；

class
id
name
data-*
src, for, type, href, value , max-length, max, min, pattern
placeholder, title, alt
aria-*, role
required, readonly, disabled

class是为高可复用组件设计的，所以应处在第一位；
id更加具体且应该尽量少使用，所以将它放在第二位。

<a class="..." id="..." data-modal="toggle" href="#">Example link</a>

<input class="form-control" type="text">

<img src="..." alt="...">

boolean属性

boolean属性指不需要声明取值的属性，XHTML需要每个属性声明取值，但是HTML5并不需要；
更多内容可以参考 WhatWG section on boolean attributes：
boolean属性的存在表示取值为true，不存在则表示取值为false。

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
    <option value="1" selected>1</option>
</select>

JS生成标签

在JS文件中生成标签让内容变得更难查找，更难编辑，性能更差。应该尽量避免这种情况的出现。

减少标签数量

在编写HTML代码时，需要尽量避免多余的父节点；很多时候，需要通过迭代和重构来使HTML变得更少。

<!-- Not well -->
<span class="avatar">
    <img src="...">
</span>

<!-- Better -->
<img class="avatar" src="...">

实用高于完美

尽量遵循HTML标准和语义，但是不应该以浪费实用性作为代价；任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。

个人编写HTML使用的软件是dreamweaver，这个软件的话，正版是要购买的，一开始学习HTML就是用的这个软件了，挺好用的，而且代码提示特别方便，不用担心太多的标签和属性记劳~

1.什么是HTML？

HTML 是用来描述网页的一种语言，指的是超文本标记语言: HyperText Markup Language；
HTML 不是一种编程语言，而是一种标记语言；
HTML文档也叫做 web 页面；

2.HTML基本结构

<!DOCTYPE html>：文档声明；
<html>：HTML 页面的根元素；
<head>：用于定义文档的头部，是所有头部元素的容器；
<meta>：提供有关页面的元信息，位于文档的头部，不包含任何内容；
<title>：文档的标题；
<body>：定义文档的主体，包含文档的所有内容；

3.HTML标签使用？

HTML 标签是由尖括号包围的关键词，且通常是成对出现的如<a></a>，当然也有单个的，只不过比较少如<hr>；
标签对中的第一个标签表示开始标签，第二个标签表示结束标签；

4.HTML常用标签介绍

除了HTML基本结构的几个标签以外，HTML还有一些比较常用的基本标签；

（1）文本标签：

h1-h6：用于定义标题，h1为最大标题，h6为最小标题；
p：定义段落；
span：组合文档中的行内元素；
br：换行；
hr：水平线；
strong/b：加粗文字；
em/i：斜体；
u：下划线；
s：删除线；
pre：定义预格式化的文本，保持原有格式；
sub：下标；
sup：上标；
blockquote：块引用；

（2）布局标签：

div：定义文档中的分区或节，把文档分割为独立的、不同的部分；
header：定义页面的头部；
aside：用作文章的侧栏；
section：定义文档中的节；
footer：定义文档或节的页脚，通常包含文档的作者、版权信息、使用条款链接、联系信息等；
article：规定文章独立的其他内容，如标题、内容、评论；

（3）多媒体标签：

img：用于在网页中插入图像；
audio：定义声音，比如音乐或其他音频流；
video：定义视频，比如电影片段或其他视频流；

（4）超链接标签：

a：定义超链接，指定页面间的跳转；

（5）序列化标签：

ul：定义无序列表；
ol：定义有序列表；
li：定义列表项目，可用在无序列表ul和有序列表ol中；
dl：定义了定义列表；
dt：定义了定义列表中的项目（即术语部分）；
dd：在定义列表中定义条目的定义部分；

（6）表格标签：

table：定义 HTML 表格；
tr：定义表格的行；
td：定义表格的单元；
th：定义表头；
caption：定义表格标题；
col：为表格中一个或多个列定义属性值；
colgroup：用于对表格中的列进行组合，以便对其进行格式化；
thead：定义表格的表头；
tbody：表格主体，也就是正文部分；
tfoot：定义表格的页脚（脚注或表注）；

（7）表单标签：

form：用于为用户输入创建 HTML 表单；
input：用于搜集用户信息；
button：定义一个按钮；
select：创建单选或多选菜单；
option：定义下拉列表中的一个选项；
textarea：定义多行的文本输入控件；
label：为 input 元素定义标注（标记）；
fieldset：用于将表单内的相关元素分组；
legend：为 fieldset 元素定义标题；

5.HTML注意事项

HTML文件当以后缀名为 .html 或 .htm 来命名；
HTML标签和属性是不区分大小写的，建议HTML标签和属性都小写，属性值必须用双引号包围；
HTML标签都是以开始标签起始，以结束标签终止；
HTML标签之间尽量缩进与换行，每行代码不要过长，方便阅读和维护；
HTML标签使用必须符合标签嵌套规则，如禁止a标签嵌套a标签，p标签嵌套div标签等；
建议不使用HTML已经废弃的或者不赞成使用的标签，少使用table布局、iframe框架嵌套以及flash播放器；

一篇介绍了网页的基本结构，那如何编写网页的内容? 前提是要学会HTML标签的用法，本篇主要介绍HTML标签是什么，如何学习，需要大概多长时间学习。

本篇主要基于html5介绍，html5 是最新版的标准，之前的版本可以自己了解下。

HTML 简介

HTML的英文全称是Hyper Text Markup Language，直译为超文本标记语言。它是全球广域网上描述网页内容和外观的标准。HTML包含了一对打开和关闭的标记，在当中包含有属性和值。标记描述了每个在网页上的组件，例如文本段落、表格或图像等。

事实上，HTML是一种因特网上较常见的网页制作标注性语言，而并不能算做一种程序设计语言，因为它缺少程序设计语言所应有的特征。HTML通过IE等浏览器的翻译，将网页中所要呈现的内容、排版展现在用户眼前。

一个html标签基本结构如下：

<标签名称  属性="属性值"></标签名称> 或 <标签名称 属性="属性值"/>

有以下特点：

由尖括“<”、“>”号包围的标记元素，比如 <html>和</html>就是一对标记。
通常是成对出现的，比如 <div> 和 </div>，也有单独呈现的标签，如：<img />、<input/>等。
标签对中的第一个标签是开始标签，第二个标签是结束标签；
一般成对出现的标签，其内容在两个标签中间，如<h1>标题</h1>。单独呈现的标签，则在标签属性中赋值，如<input type="text" />。
网页展示的内容需写在<body>标签中。
标签不区分大小写，建议按规范小写。

HTML标签按功能大体可分以下几种类型：

构成网页基本架构的标签，比如：<!DOCTYPE>（定义文档类型）、<html>(根标签),<meta>（元信息）、<head> (网页头部区域)、<body> （网页内容区域）。
用于引入外部资源及客户端脚本的标签，比如：<link>（外部资源，css样式文件）， <script>（客户端js脚本）。
用于描述布局的标签，比如： <div>、<ul>（无序列表）、<ol>（有序列表）、<h1>到<h6>（标题1到6）、<table>（表格）、<footer>（页脚）、<header>（页头）等。
用于描述文本格式的标签，比如：<p> (段落)、<strong>(加粗)、<q>（引用）、<span>等。
用于引入多媒体资源的标签，比如：<img>、<video>、<audio>等。
用于制作表单的标签，比如：<form>(表单),<input>(输入框),<textarea>(文本域)，<select>(下拉菜单),<radio>(单选项),<checkbox>(多选项)等。
其它标签（不是很常用的）。

如何学习html的标签用法

没有捷径，需要多看，多练。在这里我不一一介绍每个标签的具体含义及用法，相关语法可以参考以下几个网站：

https://www.w3cschool.cn/html5/
https://developer.mozilla.org/zh-CN/docs/Web/HTML

制定一个学习计划,每天坚持下去

要求，每天花费3到5个小时学习，至少1到2周掌握常用的html标签含义及用法，可以按照上面介绍的标签进行分类学习，感谢关注，祝你学习愉快。

在线咨询

上一篇：Python转JavaScript编译器，天了噜！还
下一篇：Eclipse +JAVA EE 配置Tomcat

您的项目需求

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

整合营销服务商