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小时内与您取得联系。

整合营销服务商