docs(html): levels

alibaba · Jan 5, 2025 · 3860223 · 3860223
1 parent a3d2862
commit 3860223
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 22 deletions.
diff --git a/docs/coding/html.md b/docs/coding/html.md
@@ -27,7 +27,9 @@ order: 1
 
 ## DOCTYPE
 
-### `mandatory` Must have doctype at the beginning
+### Must have doctype at the beginning
+
+Level: **Mandatory**
 
 ```html
 <!-- ❌ missing doctype -->
@@ -43,7 +45,9 @@ order: 1
 <html lang="zh-CN"></html>
 ```
 
-### `mandatory` Must use HTML5 lowercase doctype
+### Must use HTML5 lowercase doctype
+
+Level: **Mandatory**
 
 ```html
 <!-- ❌ xhtml doctype -->
@@ -66,7 +70,9 @@ order: 1
 
 ## `<html>` element
 
-### `mandatory` Must have and only have one `<html>` element at root
+### Must have and only have one `<html>` element at root
+
+Level: **Mandatory**
 
 ```html
 <!-- ❌ missing <html> -->
@@ -99,7 +105,9 @@ order: 1
 </html>
 ```
 
-## `mandatory` `<html>` element must have `lang` attribute
+### `<html>` element must have `lang` attribute
+
+Level: **Mandatory**
 
 `lang` attribute is important for search engines, screen readers and translation tools. The value is usually in `language-REGION` format, e.g. `en-US`, `zh-CN`.
 
@@ -133,7 +141,9 @@ If a part of the document is written in another language, add `lang` attribute t
 </html>
 ```
 
-### `mandatory` `<html>` must have and only have one `<head>` and one `<body>` as children
+### `<html>` must have and only have one `<head>` and one `<body>` as children
+
+Level: **Mandatory**
 
 ```html
 <!-- ❌ missing <head> -->
@@ -171,7 +181,9 @@ If a part of the document is written in another language, add `lang` attribute t
 
 ## `<meta>` elements
 
-### `mandatory` `<meta>` element must be contained in `<head>` element
+### `<meta>` element must be contained in `<head>` element
+
+Level: **Mandatory**
 
 ```html
 <!-- ❌ <meta> in <body> -->
@@ -197,15 +209,19 @@ If a part of the document is written in another language, add `lang` attribute t
 </html>
 ```
 
-### `mandatory` Must use UTF-8 charset
+### Must use UTF-8 charset
+
+Level: **Mandatory**
 
 ```html
 <head>
   <meta charset="utf-8" />
 </head>
 ```
 
-### `recommended` Responsive web page should have viewport meta
+### Responsive web page should have viewport meta
+
+Level: **Recommended**
 
 The following settings match the actual device size. Users can scale the content with touch gestures.
 

diff --git a/docs/coding/html.zh.md b/docs/coding/html.zh.md
@@ -27,7 +27,9 @@ order: 1
 
 ## DOCTYPE
 
-### `强制` 文档开头必须有 doctype
+### 文档开头必须有 doctype
+
+等级：**强制**
 
 ```html
 <!-- ❌ 缺少 doctype -->
@@ -43,7 +45,9 @@ order: 1
 <html lang="zh-CN"></html>
 ```
 
-### `强制` 必须使用 HTML5 小写 doctype
+### 必须使用 HTML5 小写 doctype
+
+等级：**强制**
 
 ```html
 <!-- ❌ xhtml doctype -->
@@ -66,7 +70,9 @@ order: 1
 
 ## `<html>` 元素
 
-### `强制` 必须有且仅有一个位于顶层的 `<html>` 元素
+### 必须有且仅有一个位于顶层的 `<html>` 元素
+
+等级：**强制**
 
 ```html
 <!-- ❌ 缺少 <html> -->
@@ -99,8 +105,9 @@ order: 1
 </html>
 ```
 
-## `强制` HTML 元素必须有 `lang` 属性
+## HTML 元素必须有 `lang` 属性
 
+等级：**强制**
 `lang` 属性有助于搜索殷勤，屏幕阅读器、翻译工具的正常工作。属性的值通常是 `语言-地区` 格式，如 `en-US`, `zh-CN`。
 
 ```html
@@ -133,7 +140,9 @@ order: 1
 </html>
 ```
 
-### `强制` `<html>` 元素的内容必须有且仅有一个 `<head>` 和一个 `<body>`
+### `<html>` 元素的内容必须有且仅有一个 `<head>` 和一个 `<body>`
+
+等级：**强制**
 
 ```html
 <!-- ❌ 缺少 <head> -->
@@ -171,7 +180,9 @@ order: 1
 
 ## `<meta>` 元素
 
-### `强制` `<meta>` 元素必须包含在 `<head>` 元素内
+### `<meta>` 元素必须包含在 `<head>` 元素内
+
+等级：**强制**
 
 ```html
 <!-- ❌ <meta> 在 <body> 里 -->
@@ -197,15 +208,19 @@ order: 1
 </html>
 ```
 
-### `强制` 必须使用 UTF-8 字符编码
+### 必须使用 UTF-8 字符编码
+
+等级：**强制**
 
 ```html
 <head>
   <meta charset="utf-8" />
 </head>
 ```
 
-### `推荐` 响应式页面应当设置 viewport
+### 响应式页面应当设置 viewport
+
+等级：**推荐**
 
 让页面大小适配设备实际尺寸，用户可以用手势缩放页面内容。
 
@@ -318,8 +333,8 @@ order: 1
 
 ### 1.5 页面标题
 
-- 1.5.1 `强制` 页面需要指定 title 标签，有且仅有 1 个。
-
+- 1.5.1 页面需要指定 title 标签，有且仅有 1 个。
+  等级：**强制**
   ```html
   <head>
     <meta charset="utf-8" />
@@ -348,8 +363,8 @@ order: 1
 
 ### 2.2 注释
 
-- 2.2.1 `强制` 在 HTML 注释代码中，不允许出现任何敏感信息。
-
+- 2.2.1 在 HTML 注释代码中，不允许出现任何敏感信息。
+  等级：**强制**
   常见的敏感信息包括：
 
   - 业务相关敏感信息，例如业务规则
@@ -376,7 +391,8 @@ order: 1
 
 ### 2.3 标签
 
-- 2.3.1 `强制` 标签名统一使用小写。
+- 2.3.1 标签名统一使用小写。
+  等级：**强制**
 
   ```html
   <!-- bad -->
@@ -404,7 +420,8 @@ order: 1
 
 ### 2.4 属性
 
-- 2.4.1 `强制` 属性值使用双引号，不要使用单引号。
+- 2.4.1 属性值使用双引号，不要使用单引号。
+  等级：**强制**
 
   ```html
   <!-- bad -->