A guide to writing HTML code

General convention

Tag

Self-closing tag, no need to close (for example: img input br hr, etc.);
Optional closing tag, which needs to be closed (for example: bed06894275b65c1ab86501b08a632eb or 36cc49f0c466276486e50c850b7e4956);
Reduce the number of tags as much as possible;

<img src="images/google.png" alt="Google">
<input type="text" name="title">

<ul>
  <li>Style</li>
  <li>Guide</li>
</ul>

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

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

Class and ID

class should be named after the function or content, not the expression;
class and id should be named in lowercase letters, multiple When forming words, use dash-separation;
Use unique ids as Javascript hooks and avoid creating classes without style information;

<!-- Not recommended -->
<p class="j-hook left contentWrapper"></p>

<!-- Recommended -->
<p id="j-hook" class="sidebar content-wrapper"></p>

Attribute Order

HTML attributes should appear in a specific order to ensure readability.

id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role

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

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

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

Quotation marks

Use double quotation marks uniformly for the definition of attributes.

<!-- Not recommended -->
<span id=&#39;j-hook&#39; class=text>Google</span>

<!-- Recommended -->
<span id="j-hook" class="text">Google</span>

bnesting

a Nesting of p is not allowed. This constraint is a semantic nesting constraint, and there are other constraints that are different from it Strict nesting constraints, such as a is not allowed to nest a.

Strict nesting constraints are not allowed in all browsers; as for semantic nesting constraints, most browsers will handle fault tolerance, and the generated document trees may be different from each other.

Semantic nesting constraints

25edfb22a4f469ecb59f1190150159c6 used under ff6d136ddc5fdfeffaf53ff6ee95f185 or c34106e0b4e09414b63b2ea253ff83d6;
152436f649dfcc2350c70c7083a3231e, 73de882deff7a050a357292d0a1fca94 are used under 5c69336ffbc20d23018e48b396cdd57a;
ae20bdd317918ca68efdc799512a9b39, 92cee25da80fac49f6fb6eec5fd2c22a, 06669983c3badb677f993a8c29d18845, a34de1251f0d9fe1e645927f19a896e8, b6c5a531a458a2e790c1fd6421739d1c are used under f5d188ed2c074f8b944552db028f98a1;

Strict nesting constraints

Inline-Level elements can only contain text or other inline-Level elements;
3499910bf9dac5ae3c52d5ede7383485 Interactive elements 3499910bf9dac5ae3c52d5ede7383485, bb9345e55eb71822850ff156dfde57c8, 221f08282418e2996498697df914ce4e, etc. can be nested; block-level elements e388a4556c0f65e1904146cc1a846bee, 4a249f0d628e2318394fd9b75b4636b1~e388a4556c0f65e1904146cc1a846bee ;, e388a4556c0f65e1904146cc1a846bee, ff6d136ddc5fdfeffaf53ff6ee95f185/c34106e0b4e09414b63b2ea253ff83d6/25edfb22a4f469ecb59f1190150159c6, 5c69336ffbc20d23018e48b396cdd57a/73de882deff7a050a357292d0a1fca94/67bc4f89d416b0b8236eaa5f43dee742, ff9c23ada1bcecdd1a0fb5d5a0f18437, etc.

Boolean attributes

In the HTML5 specification, attributes such as disabled, checked, and selected do not need to set values.

<input type="text" disabled>

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

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

Semantic
HTML without CSS is a semantic system rather than a UI system.

Normally, each tag has semantics. The so-called semantics means that your clothes are divided into jackets, pants, skirts, underwear, etc., each with corresponding functions and meanings. So you can't put underwear around your neck. -- A hint of

In addition, the semantic HTML structure helps machines (search engines) understand. On the other hand, when multiple people collaborate, they can quickly understand the developer's intentions.

Common tag semantics

##e388a4556c0f65e1904146cc1a846bee4a249f0d628e2318394fd9b75b4636b1c1a436a314ed609750bd7c7d319db4da684271ed9684bde649abda8831d4d355 ...ff6d136ddc5fdfeffaf53ff6ee95f185e0ae88fdaa8efc66b5c9f7b725bcdac8Block quote0c6faf73e948e14603f4f040c4d60351Bold for style boldBold for emphasisItalic for styleSlanted for emphasisCode identificationAbbreviation

## Tags	Semantics
paragraph
Title
Unordered list
	beafbc2b8a3a352ee5f41c5a0c884975
	5a8028ccc7a7e27417bff9f05adf5932
	907fae80ddef53131f3292ee4f81644b
	code
	abbr
	示例 将你构建的页面当作一本书，将标签的语义对应的其功能和含义； 书的名称：4a249f0d628e2318394fd9b75b4636b1 书的每个章节标题: c1a436a314ed609750bd7c7d319db4da 章节内的文章标题: 684271ed9684bde649abda8831d4d355 小标题 / 副标题: 3f7b3decd2dcafb07b84d2d3985d9f40 39318b6f72ed39310530dfd69d0078e1 4e9ee319e0fa4abc21ff286eeb145ecc 章节的段落: e388a4556c0f65e1904146cc1a846bee HEAD 文档类型 为每个 HTML 页面的第一行添加标准模式（standard mode）的声明， 这样能够确保在每个浏览器中拥有一致的表现。 <!DOCTYPE html> 语言属性 <!-- 中文 --> <html lang="zh-Hans"> <!-- 简体中文 --> <html lang="zh-cmn-Hans"> <!-- 繁体中文 --> <html lang="zh-cmn-Hant"> <!-- English --> <html lang="en"> 字符编码 以无 BOM 的 utf-8 编码作为文件格式； 指定字符编码的 meta 必须是 head 的第一个直接子元素 <html> <head> <meta charset="utf-8"> ...... </head> <body> ...... </body> </html> IE 兼容模式 优先使用最新版本的 IE 和 Chrome 内核。 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> SEO 优化 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> viewport viewport: 一般指的是浏览器窗口内容区的大小，不包含工具条、选项卡等内容； width: 浏览器宽度，输出设备中的页面可见区域宽度； device-width: 设备分辨率宽度，输出设备的屏幕可见宽度； initial-scale: 初始缩放比例； maximum-scale: 最大缩放比例； 为移动端设备优化，设置可见区域的宽度和初始缩放比例。 <meta name="viewport" content="width=device-width, initial-scale=1.0"> iOS 图标 apple-touch-icon 图片自动处理成圆角和高光等效果； apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图； <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 --> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"> <!-- iPad，72x72 像素，可以没有，但推荐有 --> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-72x72-precomposed.png" sizes="72x72"> <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 --> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-114x114-precomposed.png" sizes="114x114"> <!-- Retina iPad，144x144 像素，可以没有，但推荐有 --> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png" sizes="144x144"> favicon 在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico。为了保证 favicon 可访问，避免 404，必须遵循以下两种方法之一： 在 Web Server 根目录放置 favicon.ico 文件； 使用 link 指定 favicon； <link rel="shortcut icon" href="path/to/favicon.ico"> HEAD 模板 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="path/to/favicon.ico"> HTML 注释 模块注释 <!-- 文章列表列表模块 --> <p class="article-list"> ... </p> 区块注释 <!-- @name: Drop Down Menu @description: Style of top bar drop down menu. @author: Ashu(Aaaaaashu@gmail.com) --> 更多HTML代码书写规范指南相关文章请关注PHP中文网！