HTML編碼規范

版規則

縮進

使用2個空格縮進

<ul>
  <li>Fantastic</li>
  <li>Great</li>
</ul>

.example {
  color: blue;
}

大小寫

只允許使用小寫。

所有的代碼都用小寫字母：適用于元素名，屬性，屬性值（除了文本和CDATA），選擇器，特性，特性值（除了字符串）。

<!-- 不推薦 -->
<A HREF="/">Home</A>

<!-- 推薦 -->
<img src="google.png"
alt="Google">

行為空格

建議刪除行尾白空格。

<!-- 不推薦 -->
<p>What?  </p>

<!-- 推薦 -->
<p>Yes please.</p>

常規Meta規則

編碼

如果沒有特殊需求，一般采用utf-8編碼。如果是cms站點，則遵守該站點的編碼規則。

<!-- 網頁編碼 -->
<meta charset="utf-8">

注釋

盡可能的去解釋你寫的代碼。說明該代碼包括什么、目的是什么、能做什么、為什么使用它等。

注釋是否需要詳盡，取決于項目的復雜程度。

一般單行注釋：

<!-- col -->

模塊間注釋：

<!-- news -->
<div class="news">
  <h2>News</h2>
  <p>...</p>
</div>
<!--/ news -->

循環注釋：

<ul>
  <!-- loop: new list -->
  <li>new's title 1</li>
  <li>new's title 2</li>
  <li>new's title 3</li>
  <li>new's title 4</li>
  <li>new's title 5</li>
  <!-- /loop: new list -->
</ul>

cms輸出注釋：

<!-- cms: news list -->
<ul>
  <li>new's title 1</li>
  <li>new's title 2</li>
  <li>new's title 3</li>
  <li>new's title 4</li>
  <li>new's title 5</li>
</ul>
<!-- /cms: news list -->

Tab選項卡內容注釋：

<!-- tab: news list -->
<div class="tab"></div>
<!-- /tab: news list -->

常規HTML設計規則

文檔類型

使用html5文檔聲明，不再使用XHTML（application/xhtml+xml）。

HTML5是目前所有HTML文檔類型中的首選：

<!DOCTYPE html>

HTML 的正確性

編寫有效、正確的HTML代碼，否則很難達到性能上的提升。

可以使用一些工具驗證你的代碼，如 W3C HTML validator

HTML 的語義性

根據HTML各個元素的用途而去使用它們。

<!-- 不推薦 -->
<div class="col">
  <div class="title">
news</div>
  <p>list1</p>
  <p>list2</p>
  <p>list3</p>
</div>

<!-- 推薦 -->
<div class="col">
  <h2 class="title">
news</h2>
  <p>list1</p>
  <p>list2</p>
  <p>list3</p>
</div>

部分標簽說明：

div 主要用于布局，分割頁面的結構;
ul/ol 主要用于無序/有序列表;
dl/dt/dd 當頁面中出現第一行為類似標題/簡述，然后下面為詳細描述的內容時應該使用該標簽;
span 沒有特殊的意義，可以用作排版的輔助，然后在css中定義span;
h1-h6 標題, 根據重要性依次遞減;
h1 最重要的標題;
label 使表單更有親和力而且能輔助表單排版;

不推薦使用的標簽：

font 文字的外觀，大小和顏色;
u 文本下劃線;
center 居中對齊;
s 刪除線;
strike 刪除線;
noframes 無視框時的內容;
iframe 定義嵌入視圖;
isindex 不建議使用（可搜尋，使用input代替）;
dir 目錄式列舉;
menu 菜單列表;
basefont 定義基本字體;
applet 定義java程序;
frame 定義個別視框;
frameset 視框格式總定義;

多媒體元素降級處理

給多媒體元素，比如canvas、videos、 images增加alt屬性，提高可用性（特別是常用的img標簽，盡可量得加上alt屬性，提供圖片的描述信息）。

<!-- 不推薦 -->
<img src="world.jpg">

<!-- 推薦 -->
<img src="world.jpg"
alt="our world images">

type屬性

在樣式表和腳本的標簽中忽略type屬性。

HTML5默認type為text/css和text/javascript類型，所以沒必要指定。即便是老瀏覽器也是支持的。

<!-- 不推薦 -->
<link rel="stylesheet"
 href="//www.google.com/css/maia.css"
 type="text/css">
<script src="
 //www.google.com/
 js/gweb/analytics/autotrack.js"
 type="text/javascript">
 </script>

<!-- 推薦 -->
<link rel="stylesheet"
 href="//www.google.com/css/maia.css">
<script src="
 //www.google.com/
 js/gweb/analytics/autotrack.js">
 </script>

HTML代碼格式規則

每個塊元素、列表元素或表格元素都獨占一行，每個子元素都相對于父元素進行縮進。按設計稿劃分模塊，盡量使頁面模塊化，模塊與模塊之前要有清晰的注釋。

如上面頁面框架，推薦寫法：

<!-- hader -->
<div class="header">header</div>
<!-- /hader -->
<!-- nav -->
<div class="nav">nav</div>
<!-- /nav -->
<!-- main -->
<div class="main">
  <!-- container -->
  <div class="container">
    <!--news-->
    <div class="news">
      <h2>news<h2>
      <p>...</p>
    </div>
    <!--news-->
  </div>
  <!--/container-->
  <!--sidebar-->
  <div class="sidebar">
sidebar</div>
  <!--sidebar-->
</div>
<!--/main-->
<!--footer-->
<div class="footer">
footer</div>
<!--/footer-->

HTML與SEO

頁面良好層次

保證整個頁面在未加載樣式表時仍有較好的層次清晰的頁面結構。

<!-- 不推薦 -->
<div class="logo">My Site</div>
<div class="nav">
  <a href="#">Home</a>
  <a href="#">News</a>
  <a href="#">Mobile</a>
</div>
<div class="news">
  <div>News</div>
  <a href="#">
news list 1</a>
  <a href="#">
news list 2</a>
  <a href="#">
news list 3</a>
</div>

<!-- 推薦 -->
<h1 class="logo">My Site</h1>
<ul class="nav">
  <li><a href="#">
Home</a></li>
  <li><a href="#">
News</a></li>
  <li><a href="#">
Mobile</a></li>
</ul>
<div class="news">
  <h2>News</h2>
  <ul>
    <li><a href="#">
news list 1</a>
</li>
    <li><a href="#">
news list 2</a>
</li>
    <li><a href="#">
news list 3</a>
</li>
  </ul>
</div>

權重標簽使用

H標簽使用

h1 權重高，體現當前網頁中相對比較重要的信息，但不宜過多，建議一個頁面只放一個;
h2 可以做副標題;
h3 可以做新聞列表;
h4-h6 可做相關新聞的列表標簽屬性完整;

strong、b使用

將需要加粗的文字使用b標簽來顯示。

將需要強調的文字（主要指包含關鍵詞的信息）使用strong標簽來強調主要內容。

注：b是粗體標簽，屬于實體標簽，它所包圍的字符將被設為bold（粗體）；strong 是加重語氣標簽，屬于邏輯標簽，它的作用是加強字符語氣。

標簽屬性使用

在很多情況下，a都要使用title來說明該鏈接的相關說明或目的意義。

例如：當使用overflow隱藏掉a中的溢出文字時，該a中的title是必不可少的，它可以告訴用戶被隱藏掉的文字內容是什么；又或者當一個圖片型鏈接出現時，該a中的title同樣是必不可少的，它可以告訴用戶這個圖片鏈接是做什么用的。

注：僅在img里添加alt標簽在火狐提示文字是出不來的，alt是圖片加載失敗或未加載完全時顯示出來的提示文字，要想鼠標移上去顯示提示信息應該用title，嚴謹的寫法是img里加入alt和title這兩個標簽。

精簡代碼

代碼保持精簡，最優化，這樣搜索引擎才更喜歡。

html5 中，在增加了大量的表單元素與屬性的同時，也增加了大量在提交時對表單與表單內新增元素進行內容有效性驗證的功能，接下來我們來說1下自動驗證。

在html5中，通過對元素使用屬性的方法，可以實現在表單提交時履行自動驗證的功能，在履行代碼后，將在表單提交時自動驗證輸入的內容是不是為數字，如果驗證通不過，將顯示毛病信息文字。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>表單驗證示例</title>
</head>
<body>
    <form action="#" method="post">
            <input type="text" name="text" required pattern="^\w.*$">
            <input type="submit" value="提交">
    </form>
</body>
</html>

接下來我們來看1下在html5 中追加的關于對元素內輸入內容進行限制的屬性的指定。

1.required屬性

html5 中新增的required屬性可以利用在大多數輸入元素上（除隱藏元素，圖片元素按鈕上）。在提交時，如果元素中內容為空白。則不允許提交，同時在閱讀器中顯示信息提示文字，提示用戶這個元素中必須輸入內容，效果如圖

2.pattern屬性之條件到的新增的input元素，比如email，number，URL等，要求輸入內容符合1定的格式，對input元素使用pattern屬性，并且將屬性值設置為某個格式的正則表達式，在提交時會檢查其內容是不是符合給定格式。當輸入的內容不符合給定格式時，則不允許提交，同時在閱讀器中顯示信息提示文字，提交輸入的內容必須符合給定格式，代碼以下，要求輸入內容為1個數字與3個大寫字母：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>表單驗證示例</title>
</head>
<body>
    <form action="#" method="post">
            請輸入指定內容:<input pattern="[0⑼][A-Z]{3}" name="part" placeholder="輸入:1個數字3個大寫字母">
            <input type="submit" value="提交">
    </form>
</body>
</html>

履行效果以下：

3.min屬性與max屬性

min與max這兩個屬性是日期類型或數值類型的input元素的專用屬性，他們限制了在input元素中輸入的數值與日期的范圍。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>表單驗證示例</title>
</head>
<body>
    <form action="#" method="post">
            請輸入數值:<input type="number" name="point" min="0" max="100" />
            <input type="submit" value="提交">
    </form>
</body>
</html>

履行效果以下：

4.step屬性

step屬性控制input元素中的值增加過減少時的步驟。例如當你想讓用戶輸入的值在0與100之間，但必須是5的倍數時，你可以指定step為5，代碼以下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>表單驗證示例</title>
</head>
<body>
    <form action="#" method="get">
      <input type="number" name="point" step="5" />
      <input type="submit" />
    </form>
</body>
</html>

效果以下：

原文：http://www.wfuyu.com/htmlcss/27520.html

優雅的表單校驗：打造用戶友好且高效的前端交互體驗

**引言**

在Web應用開發中，表單是用戶與系統進行信息交互的核心載體。如何實現優雅且高效的表單校驗，既能確保數據的有效性和安全性，又能提升用戶體驗，成為每個前端開發者必須掌握的重要技能。本文將深入探討表單校驗的設計原則、實戰技巧以及現代JavaScript庫如React中的最佳實踐，并通過實例代碼演示如何實現這一目標。

## **一、表單校驗的重要性及設計原則**

### **1. 表單校驗的重要性**

- 數據完整性：防止因用戶輸入錯誤導致的數據丟失或損壞。

- 系統安全：對敏感信息進行驗證，防止惡意攻擊和注入。

- 用戶體驗：及時反饋，降低用戶出錯概率，提升操作流暢度。

### **2. 設計原則**

- **實時反饋**：提供實時校驗，減少提交后才顯示錯誤的滯后感。

- **清晰提示**：錯誤信息應簡潔明了，指明具體問題并給出解決建議。

- **容錯處理**：對于可選但格式嚴格的內容，允許用戶暫時跳過或選擇臨時保存。

- **漸進增強**：針對不同瀏覽器和設備，提供兼容性強且一致的校驗體驗。

## **二、HTML5原生表單校驗**

### **3. HTML5內置校驗屬性**

```html

<form>

</form>

```

### **4. 自定義錯誤提示**

```javascript

document.querySelector('form').addEventListener('invalid', function(event) {

event.preventDefault(); // 阻止默認錯誤提示

const input = event.target;

input.setCustomValidity(''); // 清除默認錯誤信息

if (!input.validity.valid) { // 檢查有效性

input.setCustomValidity('您輸入的信息不符合要求，請檢查后重新輸入');

}

});

```

## **三、JavaScript深度定制表單校驗**

### **5. JavaScript自定義校驗函數**

```javascript

function validateForm(form) {

const emailInput = form.email;

const passwordInput = form.password;

if (!/^\S+@\S+\.\S+$/.test(emailInput.value)) {

emailInput.setCustomValidity('郵箱格式不正確');

} else {

emailInput.setCustomValidity('');

}

if (passwordInput.value.length < 6 || passwordInput.value.length > 20) {

passwordInput.setCustomValidity('密碼長度需在6到20個字符之間');

} else {

passwordInput.setCustomValidity('');

}

// 綁定表單提交事件

document.querySelector('form').addEventListener('submit', function(event) {

event.preventDefault();

validateForm(this);

if (this.checkValidity()) { // 執行自定義校驗并通過時，再調用checkValidity確認所有原生校驗也通過

// 提交表單邏輯...

}

});

```

## **四、React中的表單校驗**

### **6. React Hooks結合Formik實現表單校驗**

首先安裝`formik`庫：

```bash

npm installformik@latest --save

```

然后使用Formik創建一個具有校驗功能的React表單組件：

```jsx

import React from 'react';

import { Formik, Form, Field, ErrorMessage } from 'formik';

const initialValues = { email: '', password: '' };

const validationSchema = Yup.object().shape({

email: Yup.string().email('無效的郵箱地址').required('郵箱為必填項'),

password: Yup.string().min(6, '密碼至少6位').max(20, '密碼不能超過20位').required('密碼為必填項'),

});

const MyForm = () => (

<Formik

initialValues={initialValues}

validationSchema={validationSchema}

onSubmit={(values, { setSubmitting }) => {

setTimeout(() => {

alert(JSON.stringify(values, null, 2));

setSubmitting(false);

}, 400);

}}

{({ isSubmitting }) => (

<Form>

<div>

</div>

<div>

</div>

{isSubmitting ? '提交中...' : '提交'}

</button>

</Form>

)}

</Formik>

);

export default MyForm;

```

## **五、總結與展望**

優雅的表單校驗不僅在于技術實現，更在于設計理念。從基礎的HTML5特性到高級的JavaScript定制，再到現代框架如React提供的解決方案，我們始終要關注用戶體驗，讓表單校驗成為增強用戶信任、簡化交互流程的關鍵環節。隨著Web生態的發展，新的表單處理庫和模式不斷涌現，持續跟進學習和實踐才能把握未來趨勢，創造出更加出色的表單交互體驗。

在線咨詢

上一篇：SFC游戲模擬器：Snes9X EX+手機版
下一篇：HTML 字符實體

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商