HTML基础

最新推荐文章于 2025-05-21 14:08:49 发布

ruby_array

最新推荐文章于 2025-05-21 14:08:49 发布

阅读量885

点赞数 1

分类专栏：前端_核心

前端_核心专栏收录该内容

2 篇文章

订阅专栏

本博客是在MDN的知识基础上，结合了自己的开发经验所做出的总结
MDN地址：https://developer.mozilla.org/zh-CN/

基础知识

什么是HTML?

HTML，它的英文全称是HyperText Markup Language，翻译为中文就是超文本标记语言。如同名字所表示的含义，HTML并不是一种编程语言，而是一种标记语言，它在页面中的作用是搭建出页面的树状结构，在该结构上的每一个节点就是一个标记。

HTML的基本结构

HTML的基本结构
HTML的基本组成包括：开始标签（Opening tag）、结束标签（Closing tag）和内容（Content），内容可以是空的。这三者结合在一起组成了一个完整的标签，或被称为元素（Element）。

空元素

一般的元素都包含了开始标签和结束标签和内容，但是有一类元素不需要包含任何内容，所以他们仅使用一个单独的标签来表示，我们将这类元素称为空元素（Empty elements）或单元素（void elements）。

元素的类别

我们习惯将元素分为三种类型：块级元素、内联元素、内联块元素。他们在页面上的表现各有不同，拥有不同的display属性。

元素类别	特性
块级元素	独自占据一行的空间;可以给宽高赋值；支持四个方向的padding/margin；
内联元素	仅占据内容占用的空间;不支持宽高的赋值;支持左右方向的padding/margin；
内联块元素	仅占据内容占用的空间;支持宽高赋值;支持四个方向的padding/margin；

元素的嵌套

我们可以将一个元素放在另一个元素中，这种结构被称作嵌套。

<p>My cat is <strong>very</strong> grumpy.</p>

元素的嵌套应遵循一定的规则：

块元素可以嵌套所有的元素，但是p元素仅可以嵌套内联元素
内联元素可以嵌套其他的内联元素，不可以嵌套自己
a元素可以嵌套所有元素，但是不可以嵌套自己

属性（Arrtibute）

一个基本的属性有三个部分组成：

在元素和属性之间有个空格space (如果有一个或多个已存在的属性，就与前一个属性之间有一个空格)
属性后面紧跟着一个“=”符号
有一个属性值,由一对引号“ ”引起来

有一类特殊的属性，叫做布尔属性，布尔属性拥有默认的值true，可以在书写的时候省略赋值

<input type="text" disabled>

HTML中的特殊字符

在HTML中，字符 <, >,”,’ 和 & 是特殊字符. 它们是HTML语法自身的一部分, 在使用这些特殊的字符时，我们需要使用字符引用。

Literal character	Character reference equivalent
<	<
>	>
“	"
‘	'
&	&
空格

字符引用如下方代码所示：

<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p>

HTML中的注释

为了将一段HTML中的内容置为注释，你需要将其用特殊的记号包括起来，比如：

<p>I'm not inside a comment</p>

<!-- <p>I am!</p> -->

HTML文件的基础结构

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

如上方代码所示，一个HTML文件的基础结构包含四个部分：doctype、html元素、head元素、body元素，他们在结构中的作用如下表

元素	作用
doctype	声明文档的类型;
html	文档的根元素;
head	包含了页面中不需要展示给用户的元数据;
body	包含了页面中展示给用户的全部内容;

Head元素

什么是Head标签?

head元素的内容不会显示在浏览器中，它的作用是包含一些页面的元数据，在大型的页面中，head中可能会包含很多的元数据。head元素中主要嵌套的元素如下表：

元素	作用
title	表示页面的标题;
meta	可以包含多种信息，类似于一个页面的配置参数;
link	引用文件，可以引用css文件，或为页面的标题增加图标;
style	在style标签中可以书写页面的css样式，这种书写css的方式被称为内联样式表;
script	可以引用js文件，或在script中书写js代码;

元数据：meta元素

元数据就是描述数据的数据,meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

例如下方代码，为文档指定了字符编码。

<meta charset="utf-8">

许多<meta> 元素包含了name 和 content属性:

name 属性指定了meta 元素的类型; 说明该元素包含了什么类型的信息
content 指定了实际的元数据内容
例如下方代码，说明了文档的作者，为文档增加了描述。

<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">

菜鸟教程中整理了一些常用的meta元素
http://www.runoob.com/w3cnote/meta.html

为页面的标题增加图标

将以下行添加到HTML <head>中以引用它，将favicon.ico替换为自己的文件即可

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

为页面指定语言

在制作一个新页面时，我们应该在根元素上为页面指定语言，指定语言使用lang属性，如下：

<html lang="zh-cmn-Hans">

为页面设置语言，有两个用处：

方便搜索引擎对页面进行有效的索引
方便视力有障碍的人士使用屏幕阅读器来浏览页面

lang是一个通用的属性，如果页面中的局部使用了其他的语言，可以在该处单独设置语言的类型，如下：

<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>

关于语言的设置规定，可以在该网站上查找：https://www.w3.org/International/articles/language-tags/

基本规则与基础元素

结构化

一篇文章，通常包含了标题、段落，可能还会存在副标题、二级标题、列表、表格等作为文章的结构。网页的结构与一篇文章相似，常见的网页结构一般由头部(head)、侧边栏(side)、主体内容(main)、尾部(footer)组成。
H5为HTML新增了非常多的结构化元素。

结构化良好的页面，便于用户进行浏览和阅读
便于搜索引擎进行SEO
方便视力障碍人士使用屏幕阅读器浏览页面
便于开发者维护页面内容

下方表格列举了一些常用的结构化元素，它们大部分来自于H5的新内容

元素	语义
header	常见于页面的顶部，展现了一系列的介绍性内容。如果它是body的子元素,它就定义了网站的全局页眉。但是如果它是 article 或section 的子元素，它就定义了这些部分的特定的页眉;
nav	导航栏：包含了页面主要的导航功能。二级链接等，不会进入导航功能部分;
main	页面的主要内容，每个页面仅可以有一个main元素;
article	闭合一块与自身相关的内容，这块内容能够解释它自身而不是页面上其他的内容（例如一篇单独的博客）;
section	近似于article，但是它更多的是伴随着由一个单独功能构成的页面（例如一个小型的地图，或者是一组文章的标题和摘要）;
aside	侧边栏：包含的内容并不与主要内容有直接的联系，但是它可以提供额外的不直接有联系的信息（术语表条目，作者简介，相关链接等等）;
footer	包含了页面的页脚部分;
br	用于换行;
hr	表示水平分割线;

语义化

我们需要确保使用了正确的元素来给予内容正确的意思、作用以及外形。
语义化对于SEO非常重要，大部分元素都拥有自己的语义，还有一些元素不包含任何语义。

常用的块级元素与其语义

元素	语义
h1、h2、h3、h4、h5、h6	表示1-6级标题，一个页面中仅可以出现一个h1标题;
p	表示一段文字;
div	没有语义;
ul>li	ul表示无序列表，li表示列表中的一个单项;
ol>li	ol表示有序列表，li表示列表中的一个单项;
dl>(dt+dd)	dl表示描述列表，dt表示列表中的一个单项的标题，dd表示该项的描述;
blockquote	表示该区域的内容是引用的，使用cite属性表示引用的地址;
address	标记该HTML文档作者的联系方式;
code	用于标记计算机通用代码;
pre	用于标记固定宽度的文本块，其中保留空格（通常是代码块）;

常用的内联元素与其语义

元素	语义
a	表示一段链接;
span	没有语义;
b	文字加粗、没有语义;
strong	文字加粗、表示强调;
i	文字斜体、没有语义;
em	文字斜体、表示重要;
u	文字增加下划线、没有语义;
q	表示此处的文字是引用的，使用cite属性表示引用的地址;
cite	表示此处的文字是引用的，文字斜体，通常配合a标签使用;
abbr	表示缩略语，可以配合title属性使用，比如HTML是HyperText Markup Language的简写;
sup	表示上标;
sub	表示下标;
time	标记时间和日期;
var	用于标记具体变量名;
kbd	用于标记输入电脑的键盘（或其他类型）输入，表示文本是从键盘上键入的。;
samp	用来定义计算机程序的样本文本;

超链接

超链接是互联网的一个功能，它使我们能够将我们的文档链接到任何其他文档，几乎任何网络内容都可以转换为链接。
在HTML中，我们使用a元素来创建超链接，如代码所示：

<a href="https://www.mozilla.org/zh-CN/">the Mozilla homepage</a>.

URL，中文名称：统一资源定位器，英文全称：Uniform Resource Locator。url是定义了一个网络位置的文本字符串。通过url，我们可以访问网络上的页面、资源和文件。URL通过路径(path)来查找文件。

a元素的属性和作用：

属性	作用
download	表示对该链接所指向的资源进行下载，可以不赋值，如果赋值则表示下载文件的名字;
target	表示链接内容打开的方式，拥有四个值：_blank、_self、_parent、_top;

使用a元素定位锚点
如下方代码所示，如果将a元素的href指向页面中存在的一个id，那么点击该链接时，页面的可视区将会跳到该id所指向的元素的位置。

<a href="Mailing_address">Mailing_address</a>

使用a元素，借助mailto:URL的写法打开发送邮件界面。mailto有三个参数：主题(subject)、抄送(cc)和主体(body)

<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>

调试HTML代码

由于在开发中不经常使用该功能，所以此处仅做记录，如果在工作中遇到需要修改错误的HTML代码时，可以参照此处的建议进行HTML调试：
https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML
https://validator.w3.org/#validate_by_uri

HTML书写规范

多媒体和嵌入

图片

在网页上展示图片，有两种方法，第一种是使用img元素引入图片，第二种是使用css中的background系列属性设置元素的背景图片，在本节中，我们主要介绍第一种使用img元素的方式。
一个普通的img标签如下：

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth">

在使用img元素时，需要注意必须为img元素设置alt属性
我们可以通过width/height属性为img元素设置宽高
在仅设置了宽度或高度时，img图片会根据图片的原始宽高比例自动进行缩放

如果需要为图片增加描述信息，最好的方式是使用H5新增的figure与figcaption元素。
figure元素规定独立的流内容（图像、图表、照片、代码、表格等等）。
figure元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。
如下方代码所示：

<figure>
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth">
  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
</figure>

视频与音频

从前，我们使用flash引入视频和音频文件，H5提供了video和audio元素，使得音视频的引入变得更加便捷。
video和audio的使用方法非常近似，下面表格列举了video元素中可用的一些属性：

属性	作用
src	指向引用视频文件的地址;
controls	表示允许出现浏览器默认的控制窗口;
autoplay	自动播放;
loop	在视频/音频结束时自动循环播放;
muted	静音;
preload	预加载，在播放之前就开始加载文件;
poster	指向视频在未播放时展示的图片文件，在audio元素中不适用;
width	设置宽度，在audio元素中不适用;
height	设置高度，在audio元素中不适用;

video元素在使用时可以包含内容，当浏览器不支持video元素时，就会展示这些内容。
视频文件有多种格式，为了兼容支持不同格式的浏览器，我们可以在video内嵌套source元素，如下：

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

如果你想要在音视频中展示歌词或字幕，需要在video/audio元素中嵌套track元素，如下：

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>

track元素中指向的歌词/字母文件使用WebVTT格式，下面是一个WebVTT 文件的例子：

WEBVTT

1
00:00:22.230 --> 00:00:24.606
This is the first subtitle.

2
00:00:30.739 --> 00:00:34.074
This is the second.

  ...

iframe

使用iframe元素，可以在网页中嵌入另一个网页。
iframe可以拥有下列属性：

属性	作用
src	指向引用页面的文件或地址;
allowfullscreen	允许网页进入全屏模式;
frameborder	设置iframe的边框，推荐使用CSS替代;
width	设置宽度;
height	设置高度;
sandbox	关于引用页面的安全性设置，兼容 IE10 以上浏览器;

为了增加站点的安全性，应该尽量减少iframe的使用，在必须使用iframe时，可以通过这些工作增强页面的安全性：
- 使用https：https://developer.mozilla.org/en-US/docs/Glossary/HTTPS
- 使用sandbox属性：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox；
- 配置CSP指令：https://developer.mozilla.org/en-US/docs/Web/Security/CSP

svg

图片可以分为位图和矢量图，位图是使用像素网格拼成的图片，矢量图片是使用算法来生成的，所以矢量图可以任意放大，不会失真。
SVG 是用于描述矢量图像的XML语言，兼容 IE9 以上版本的浏览器。下面是一个例子：

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>

关于SVG的更多知识，参考：https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started

表单元素

什么是表单？

表单是用户和web站点或应用程序之间交互的主要内容之一。它们允许用户将数据发送到web站点。大多数情况下，数据被发送到web服务器，web站点也可以选择不将数据发送到服务器，自己使用这些数据。

form

想要创建一个HTML表单，必须从form开始。form元素按照一定的格式定义了表单和确定表单行为的属性。下面是一个小例子：

<form>
  <label for="username">
    <span>Name:</span>
    <input id="username" type="text" name="username">
    <abbr title="required">*</abbr>
  </label>
</form>

这里列举了form元素的属性和作用：

属性	作用
name	表单的名称;
method	发送数据时使用的HTTP方法，可选get/post;
action	指向提交数据到哪个URL地址，可以是绝对路径也可以是相对路径，不填写则发送到本页面;
target	选项与a标签的target一致，规定在何处打开 action URL;
enctype	规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method=”post” 的情况）;
accept-charset	规定服务器可处理的表单数据字符集;
autocomplete	H5新增，自动补全;
novalidate	H5新增，提交时不进行验证;

fieldset与legend

fieldset用来将一个完整的表单，按照功能区分为不同的小部件。处于样式和语义的考虑，我们可以在fieldset元素内嵌套一个legend元素，作为该表单小部件的标签。下面是例子：

<form>
  <fieldset>
    <legend>Fruit juice size</legend>
    <p>
      <input type="radio" name="size" id="size_1" value="small">
      <label for="size_1">Small</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_2" value="medium">
      <label for="size_2">Medium</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_3" value="large">
      <label for="size_3">Large</label>
    </p>
  </fieldset>
</form>

label

label用于为单个表单元素定义标签，使用label定义的标签，可以与它指向的表单发生联动。它有两种使用方式。
第一种使用方式，使用for属性，指向对应表单元素的id：

<label for="name">Name:</label> <input type="text" id="name" name="user_name">

第二种使用方式，将标签和表单都嵌套在label标签内：

<label for="name">
  Name: <input type="text" id="name" name="user_name">
</label>

表单元素的通用属性

属性	作用
name	表单的名称。通常情况下，表单元素必须要有name属性，来告诉服务器该数据的名称;
value	初始值;
autofocus	页面加载完成时自动选中改元素，默认为false;
disabled	表单元素处于禁用状态，默认为false;

input(单行文本域)

input元素，根据type值的不同，可以变为多个不同类型的表单元素。
input系列元素大部分都是单行文本域，文本域拥有下列一些规范：

可以设置readonly属性，使得用户无法修改内容
可以设置palceholder属性，用来描述文本域内需要输入的内容
可以设置size属性，规定最大的内容字符数
根据浏览器的支持，部分文本域可以获得默认的拼写检查
输入带有换行符的文本，浏览器会在发送数据之前删除这些换行符。

type值	作用
text	最基本最简单的文本域;
password	输入的字符会被显示为*，但是直接提交信息仍然是不安全的;
search	用于搜索;
email	浏览器带有email格式验证，设置multiple属性后，可以用逗号分隔，输入多个email地址;
url	浏览器带有url验证;
tel	用来输入电话号码，在移动设备上会调出虚拟的数字键盘;

textarea(多行文本域)

textarea是多行文本域元素，与其他表单元素通过value来设置和取值不同，textarea是拥有双标签的元素，通过标签内嵌套的内容来取值和赋值。下面是它可以拥有的一些属性：

属性	作用
cols	控制文本域的列数，即宽度，默认为20;
rows	控制文本域的可见文本行数;
wrap	表示控件是如何包装文本的。可能的值：soft、hard 或 soft;

select(下拉菜单)

下拉菜单由select元素创建，select可以嵌套一个或多个option元素来作为选项，下方为例子：

<select id="simple" name="simple">
  <option>Banana</option>
  <option>Cherry</option>
  <option>Lemon</option>
</select>

option元素可以设置一个selected属性，来表明该元素在select内部是默认被选中的元素。如果希望将下拉菜单内的选项分为不同的类别，可以使用optgroup元素，下方是例子：

<select id="groups" name="groups">
  <optgroup label="fruits">
    <option>Banana</option>
    <option selected>Cherry</option>
    <option>Lemon</option>
  </optgroup>
  <optgroup label="vegetables">
    <option>Carrot</option>
    <option>Eggplant</option>
    <option>Potato</option>
  </optgroup>
</select>

option元素可以嵌套内容，也可以设置value属性，在设置了value属性时，发送给服务器的属性即为value属性的值，否则将发送嵌套内容的值给服务器。
select在设置了multiple属性后，支持选择多个选项，此时select将不会表现为一个下拉菜单，而是表现为一个将所有选项都展示出来的列表。

datalist(自动补全列表)

datalist是H5的新增内容，兼容 IE10 以上版本浏览器。它配合input单行文本域配合使用。为datalist元素设置id。为input元素设置list属性指向对应的id。
在datalist元素中嵌套option作为自动补全的选项。datalist元素内部会忽略掉非option的元素。
下面是个例子：

<label for="myFruit">What is your favorite fruit? (With fallback)</label>
<input type="text" id="myFruit" name="fruit" list="fruitList">

<datalist id="fruitList">
    <option>Apple</option>
    <option>Banana</option>
    <option>Blackberry</option>
    <option>Blueberry</option>
    <option>Lemon</option>
    <option>Lychee</option>
    <option>Peach</option>
    <option>Pear</option>
</datalist>

checkbox(复选框)和radio(单选框)

checkbox和radio都拥有checked属性，根据checked属性的值(true/false)来表示是否选中。
radio通常不会单独出现，我们会为指向同一个名称的radio设置相同的name属性。它们将被认为属于同一组的按钮。同一组中只有一个按钮可以同时被选。如果一个name属性中没有任何值被选择，那么它被认为处于未知状态；下方是例子：

<input type="checkbox" checked id="soup" name="meal">
<label for="soup">汤</label>

<input type="radio" checked id="man" value="man" name="sax">
<label for="man">男</label>
<input type="radio" id="woman" value="woman" name="sax">
<label for="woman">女</label>

button(按钮)

在HTML中，有三种按钮可供选择：分别是submit、reset、anonymous。submit是提交按钮，可以将数据发送给服务器；reset是重置按钮，会将所在form元素内的所有表单元素重置为初始状态；anonymous是无功能的按钮，也是button元素在未设置type属性时的默认值。
下方是例子：

<button type="submit">
    This a <br><strong>submit button</strong>
</button>

<input type="submit" value="This is a submit button">

<button type="reset">
    This a <br><strong>reset button</strong>
</button>

<input type="reset" value="This is a reset button">

<button type="button">
    This an <br><strong>anonymous button</strong>
</button>

<input type="button" value="This is an anonymous button">

input[type=file](文件上传)

上传文件使用input[type=file]元素，下面是个例子：

<input type="file" name="file" id="file" accept="image/*" multiple>

input[type=file]可以设置multiple属性，使得该表单可以上传多个文件。
input[type=file]可以设置accept属性，来设置可以接受的文件类型。

input[type=hidden](隐藏的表单)

如果需要上传一些不需要展示给用户的数据，那么可以使用隐藏的表单，下方是例子：

<input type="hidden" id="timestamp" name="timestamp" value="1286705410">

input[type=image](将图片作为提交按钮)

input[type=image]与submit同样会产生提交行为。与submit不同的是，使用input[type=image]进行提交时，用户在图片上点击的位置信息也会提交给服务器，也许这个功能可以用来做找茬之类的游戏吧，在某些情景下还是蛮有用的。
input[type=image]在使用上与img元素相似，必须设置alt属性，使用src属性指向图片资源，下面是例子：

<form action="http://test.com" name="pos">
    <input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />
<form>

在点击这个图片表单时，将会发送下面这条信息：

http://test.com?pos.x=123&pos.y=456

input[type=number](数字)

input[type=number]仅支持数字的输入。它带有增加和减少数字的按钮。兼容 IE10 以上浏览器。

通过设置min和max属性来约束该值
通过设置step属性来指定增加和减少按钮更改小部件的值的数量
例子：

<input type="number" name="age" id="age" min="1" max="10" step="2">

input[type=range](滑块)

input[type=range]是一块可以通过滑动来选择数据的表单。使用时必须设置min、max、step属性。兼容 IE10 以上浏览器。滑块有一个缺点，无法在实时将当前的值展现出来。下面是例子：

<input type="range" name="beans" id="beans" min="0" max="500" step="10">

input[type=date](日期时间选择器)

浏览器的支持程度不好。根据需要取到的时间值，时间选择器有多种类型：
本地时间：

<input type="datetime-local" name="datetime" id="datetime">

月：

<input type="month" name="month" id="month">

时间：

<input type="time" name="time" id="time">

星期：

<input type="week" name="week" id="week">

年月日及时间：

<input type="date" name="myDate" min="2013-06-01" max="2013-08-31" id="myDate">

所有日期和时间控制都可以使用min和max属性来约束范围。

input[type=color](拾色器)

浏览器的支持程度不好。通过拾色器，用户可以用直观的方式来选择颜色，例子如下：

<input type="color" name="color" id="color">

progress(进度条)和meter(仪表)

原生进度条和仪表的样式难以通过css改变，不建议使用。例子：

<progress max="100" value="75">75/100</progress>

<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>

表单校验

为了保证用户输入的数据是我们想要的格式或内容，我们需要对数据进行校验。表单校验分为客户端校验和服务端校验，本节只讨论客户端校验就可以了。

客户端校验表单内容有两种方式：使用JS来自定义校验，或者使用H5新增的pattern属性以及表单验证功能。

在使用H5表单验证功能时，可以使用CSS的伪类来更改验证之后表单的样式：
校验通过的伪类：:valid
校验未通过的伪类：:invalid

必填项：H5的新属性：required，可以使得一个表单变为必填项。

校验规则：为pattern属性赋予一个正则表达式，则该表单的校验规则即为正则的内容。

限制长度：对于文本域来说，可以通过minlength和maxlength来限制允许通过校验的字符数量。

自定义表单

觉得原生的表单元素不好看？觉得原生的表单元素不好用？去自定义吧。。。
注意事项：https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets

表格

什么是表格？

表格是由行和列组成的结构化数据集(表格数据)，它能够使你简捷迅速地查找某个表示不同类型数据之间的某种关系的值。表格的一个特点就是严格. 通过在行和列的标题之间进行视觉关联的方法，就可以让信息能够很简单地被解读出来。

表格的组成元素

table元素用来表示一个表格；
caption元素，表示表格的标题

元素	语义
table	表示这是一个表格;
caption	表格的标题;
thead	表格的头部;
tbody	表格的正文;
tfoot	页脚;
tr	表示一行;
th	放在thead中，表示一个单元格;
td	放在tbody中，表示一个单元格;
colgroup	不需要在页面中显示，用来修饰表格的列，与tr同级别;
col	放在colgroup中，不需要在页面中显示，用来修饰表格的列，与th、td同级别;