HTML学习笔记

998福报

已于 2023-01-30 03:46:30 修改

阅读量911

点赞数 1

分类专栏：前端学习文章标签： html Powered by 金山文档

于 2023-01-20 16:09:38 首次发布

本文链接：https://blog.csdn.net/XiaoQianGua/article/details/128742244

版权

前端学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、什么是前端

前端对于网站来说，通常是指网页，网站的前端部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发。

前端设计一般可以理解为网站的视觉设计，比如 UI 设计；前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript等。

前端开发的核心部分主要是：HTML，CSS，JavaScript 三个部分。

HTML 是这三者中最基础的部分，相当于是网页的骨架，也就是网页的结构；CSS 部分是网页的表现形式，也可以说是网页的美化，比如一个图片的大小、位置，文字的大小颜色等；JavaScript 是一种动态的脚本语言，负责与用户进行交互，增加用户体验的作用。

2、网页组成

一个网页的组成部分主要包括下面几个部分：文字、图片、输入框、视频、音频、超链接等。

3、Web 标准

说道 Web 标准，不能不说 W3C 组织（World Wide Web Consortium），全程为「万维网联盟」。万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。

W3C 最重要的工作是发展 Web 规范，这些规范描述了 Web 的通信协议。简单的说就是就是确定 Web 页面的语法格式和规范的。

与之类似的一个组织是「European Computer Manufacturers Association」（ECMA组织），这个组织制定了标准的脚本语言规范 ECMAScript ，而 JavaScript 就参照的这个规范。

那么 Web 标准规范了下面三个部分：

HTML 标准（结构标准），相当人的骨架结构。

CSS 样式（表现）标准，相当于给人化妆变的更漂亮。

JavaScript 行为标准，相当与人在唱歌，页面更灵动。

4、浏览器内核

浏览器内核是一个浏览器的核心部分，也就是「渲染引擎」。它的主要作用是决定一个浏览器如何显示网页的内容及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同。

这里涉及到一个「兼容性问题」，浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。所以我们在编写代码的时候，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给用户更好的使用体验。

常见浏览器以及对应的内核：

内核	代表浏览器	描述
Trident	IE	IE内核，是微软开发的一种排版引擎
Gecko	Firefox	Gecko是当年最流行的排版引擎之一，仅次于Trident
Webkit	Safari	苹果浏览器内核，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高
Chromium	Chrome（前期）	fork自苹果的Webkit内核，谷歌前期使用，后期谷歌联手Opera自研和发布了Blink引擎
Blink	Chrome/Opera	Blink内核诞生于2013年4月。Blink其实是基于WebKit的
Presto	Opera前内核,已废弃	2013年被Blink取代

参考链接：https://www.zguangju.com/Other/browserKernel.html

5、认识 HTML

通常我们看到的网页，都是以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。

HTML 指的是超文本标记语言，它是用来描述网页的一种语言。

所谓超文本，有 2 层含义：

它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。

它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

6、HTML 结构标准

HTML 基本结构如下：

<!doctype html> 声明文档类型

<html> 根标签

<head> 头标签

<title></title> 标题标签

</head>

<body> 主体标签

</body>

</html>

<!DOCTYPE html> 是告诉浏览器，以下文件用 HTML 哪个版本解析，这里是 HTML5 版本。

<html></html> 标签是一个网页的根标签，所有的标签都要写在这一对根标签里面。

<head></head> 是头标签，主要是定义文档（网页）的头部，包括完档的属性和信息，文档的标题，还可以引入 JavaScript 脚本，CSS 格式等。

<body></body> 是一个文档的主题，里面包含文档的所有内容，比如文本，超链接，图片，表格等内容。

7、html 标签分类

HTML标签从数量上分为单标签和双标签。

单标签： <! Doctype html>双标签： <html> </html> ，<head></head>， <title></title>

8、html 标签关系分类

包含（嵌套关系）：<head><title></title></head> 父子关系并列关系： <head></head> <body></body> 兄弟姐妹

9、开发工具

前期学习一种语言的时候，开发工具很重要。Web开发工具有很多。最简单的一个开发工具就是 Windows 系统自带的记事本了，但是又难用又难看，没有语法高亮、代码补全等功能。

那么我推荐大家使用的是「Visual Studio Code」，VScode 是一款轻量级的编辑器，安装包小，启动速度快，而且功能非常强大，以及成为前端不可缺少的编码利器。

提到 Web 开发工具不得不提到 JebBrain 全家桶的「 Webstorm 」软件。目前已经被广大 Web 开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。它令人称到的是它智能打代码补全、代码一键格式化、HTML 提示、联想查询、代码重构等强大功能。

建议初学者初期使用VSCode等文本编辑器，太过于智能的编辑器确实会带给我们极大地便利，但是在带给我们便利的同时，也会削弱我们对基础知识的掌握，只有自己一个单词一个单词敲出来的代码，才会让我们记得更加牢固。

一、常用标签

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

1.1、单标签

注释标签：

换行标签：<br> 或 <br />

水平线标签：<hr> 或 <hr />

图片标签：<img> 或 <img />

src : 图片的来源（必写属性）
alt : 替换文本，图片不显示的时候显示的文字（重要性：1.SEO优化 2.盲人阅读需求）
title : 提示文本，鼠标放到图片上显示的文字
width : 图片宽度
height : 图片高度
PS：图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放

输入框：<input> 或 <input />

外部资源链接：<link href="example.css" rel="stylesheet">

1.2、双标签

段落标签：<p></p>

一般用作一段段的文字。上下自动生成空白行。br 换行不会生成空白行。

标题标签：<h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6>

h1 在一个页面里最好只出现一次。（作用是：便于SEO 搜索引擎优化）

文本加粗：<strong></strong> 或者 <b></b>

工作里尽量使用strong，对于盲人来说 strong有语义强调的功能。

文本倾斜：<em></em> <i></i>

删除线标签：<del></del> <s></s>

下划线标签：<ins></ins> <u></u>

二、超链接

<ahref=""title=""target="">填写内容</a>

href ：超链接指向的url地址。（跳转的页面，必写属性
title ：提示文本，鼠标放到链接上显示的文字
target="_self" （默认值），在自身页面打开（关闭自身页面，打开链接页面）
target=”_blank” 打开新页面，（自身页面不关闭，打开一个新的链接页面）
PS：当 href 的值为 javascript:void(0); 或 javascript:; ，表示超链接不做任何事情，不做任何跳转。

2.1、锚链接

我们先搞清楚什么是锚链接：

锚链接也称锚点链接，命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，自动跳转到我们设置锚点的位置，类似于我们阅读书籍时的目录页码或章回提示。

锚点链接可以跳转到页面的任何位置。一般用于在页面下面的时候，点击回到最上面。锚点链接的名称可以随意取，只起到标记作用。

<pid="AAA">

</p>

...

<ahref="#AAA"></a> // 超链接到锚点

2.2、空链

不知道链接到那个页面的时候，用空链

<ahref="#">空链</a>

PS：空链相当于 #top，实际点击此链接的时候会跳转到页首的位置。

2.3、文件下载

<ahref="./test.rar"></a>

<ahref=""download="5.html">点击下载</a>

2.4、超链接优化写法

<basetarget="_blank"> // 让所有的超链接都在新窗口打开

PS：写的位置在 head 里面。

三、特殊字符（HTML 实体）

是一段以连字号（&）开头、以分号（;）结尾的文本（字符串）。

实体常常用于显示保留字符（这些字符会被解析为 HTML 代码，比如<括号）和不可见的字符（如“不换行空格”）。你也可以用实体来代替其他难以用标准键盘键入的字符。

特殊符号	字符代码
(空格)
<	<
>	>
&	&
¥	¥
©	©

参考链接：HTML特殊字符编码对照表

四、列表

4.1、无序列表

<ul> 元素（或称 HTML 无序列表元素）表示一个内部包含多个元素的无序列表或项目的元素。

<ultype="">

......

</ul>

属性：

type：着重号样式

type="square" ：小方块
type="disc" ：实心小圆圈
type="circle" ：空心小圆圈

4.2、有序列表

<ol> 元素表示有序列表，通常渲染为一个带编号的列表。

<oltype=""start="">

......

</ol>

type="1,a,A,i,I" ，type的值可以为1,a,A,i,I
start="3" 指定了列表编号的起始值（只能是数字）。
reversed：指定列表中的条目是否是倒序排列的

4.3、自定义列表

通常用于展示词汇表或者元数据 (键 - 值对列表)。

<dl>

</dl>

五、音频/视频标签

您的浏览器不支持 audio 元素。

</audio>

Sorry, your browser doesn't support embedded videos.

</video>

属性：
width：音频/视频展示区域的宽度，单位是 CSS 像素。
height：音频/视频展示区域的高度
src：音频/视频文件的 URL。
controls: 显示音频/视频控件（比如播放/暂停按钮）
autoplay: 音频/视频在就绪后马上播放
loop: 每当音频/视频结束时重新开始播放。
muted：默认值是 false，设置为true的时候，视频播放的时候音频会关闭。
poster：一个海报帧的 URL，用于在用户播放或者跳帧之前展示。
preload: 有三个值：auto，metadata，none 是否在页面加载后载入音频/视频。（如果设置了 autoplay 属性，则忽略该属性）
auto: 当页面加载后载入整个音频
metadata: 当页面加载后只载入元数据
none: 当页面加载后不载入音频
空字符串：也就代指 auto 值。

六、head标签相关知识

head标签是文档相关的配置信息（元数据），包含了所有的头部标签元素，在head中你可以插入脚本（scripts）,样式文件（CSS）,及各种meta信息。

头部标签元素描述了文档的各种属性和信息，包括文档的标题、作者，关键字，文档的描述，以及与外部资源之间的关系等等。

下面列举一些head标签中常用的标签：

title标签

<title> 元素定义文档的标题，显示在浏览器的标题栏或标签页上。

base标签

<base> 元素指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个 <base> 元素。

link标签

link标签规定了当前文档与外部资源的关系，常用于链接样式表CSS，此外也可以被用来创建站点图标 (比如 PC 端的 “favicon” 图标) 。

rel="stylesheet"：链接的是什么？比如：样式表stylesheet，还是图标icontype="text/css"：规定链接文件的类型是css文件href="./demo.css"：链接的文件路径

style标签

<style>

p {

color: blue;

}

</style>

meta标签

meta元素可以定义文档的各种元数据，提供各种文档信息，通俗点说就是可以理解为提供了关于网站的各种信息。被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

下面列举一些meta标签常用属性：

charset编码

声明了文档的字符编码。

ASCII/ANSI/Unicode：英语GBK ：亚洲通用字符集GB2312：中文简体Big5 ：台澳港繁体UTF-8：世界通用字符集

name和content

name属性和content属性一般结合起来使用，name用来表示元数据的类型，表示当前meta标签的具体作用；content属性用来提供值。

name	content
application-name	网页中所运行的应用程序的名称
keywords	描述网站内容的关键词,以逗号隔开，用于SEO搜索
description	一段简短而精确的、对页面内容的描述。一些浏览器，比如 Firefox 和 Opera，将其用作书签的默认描述。
author	当前页的作者名
copyright	版权信息
referrer	控制由当前文档发出的请求的 HTTP Referer 请求头。
renderer	renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面
viewport	它提供有关视口初始大小的提示，仅供移动设备使用

author示例：

http-equiv和content

http-equiv属性定义了一个编译指示指令。

http-equiv属性	content
content-type	声明网页字符编码。其值必须是text/html; charset=utf-8
refresh	指定一个时间间隔(以秒为单位),在此时间过去之后从服务器重新载入当前页面,也可以另外指定一个页面.
X-UA-Compatible	浏览器采取何种版本渲染当前页面
expires	设定网页的到期时间，过期后网页必须到服务器上重新传输
catch-control	指定所有缓存机制在整个请求/响应链中必须服从的指令

示例：网页自动跳转

七、表格

在HTML中，我们可以使用table标签来展示表格数据。

1.1、标准结构

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

注意：写 <thead>，<tbody>，<tfoot>对SEO更好，不写也没问题。

<table>

<tr>

<th>First name</th>

</tr>

<tr>

</tr>

</table>

快捷写法：

VSCode快捷写法：table>tr*2>td*3 + tab ：建立2行3列的表格

注意：td可以换成th，th会自动加粗，并且水平居中对齐

1.2、常见属性

width：（宽度）
height：（高度）
border：（边框宽度）
cellspacing：（单元格与单元格的间距）// 还可以使用css属性border-spacing设置单元格间隔，相当于cellspacing，但是border-spacing优先级更高。
cellpadding：（单元格内容距边框的距离）
bordercolor：table边框颜色（只能在table使用，在tr或者td使用无效）
bgcolor：表格背景颜色，可以采用预先定义的字符串或者 6 位的十六进制编码（black = "#000000"）
align="left | right | center"：
如果直接给table使用align=”center” ，则表格居中
如果给tr或者td使用，tr或者td内容居中。

示例：

<tablewidth="300px"height="300px"border="5"cellspacing="10px"cellpadding="0"bgcolor="pink"align="center">

<tr>

<td>窗外的麻雀</td>

</tr>

<tr>

<td>窗外的麻雀</td>

</tr>

<tr>

<td>窗外的麻雀</td>

</tr>

</table>

1.3、其他属性

内容上下方向对齐方式

<tr>

<tdvalign="bottom">张三</td>

</tr>

valign="top | middle | bottom"

无内容时单元格的设置

empty-cells:show/hide /* 当单元格无内容时，是否显示该单元格的边框区域，当不使用边框合并的时候才会生效*/

单元格宽度使用固定

table-layout:auto/fixed;

/*定义表格的布局算法，设置为fixed，内容超出单元格的宽度则固定不变，如果没有设置宽度则平均分配；设置auto时则随内容宽度而定。*/

细线表格

border-collapse决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。

table {

border-collapse:collapse|separate;

}

合并单元格

<td colspan=“2”>填写内容</td>：将两列合并成1列

<td rowspan=“3”>填写内容</td> ：将三行合并成1行

<tableborder="2"cellspacing="0"width="400"height="100"align="center">

<tralign="center"bgcolor="yellow"height="100">

<tdcolspan="2">在电线杆上多嘴</td>

<td>在电线杆上多嘴</td>

</tr>

<tralign="center"bgcolor="#CCC"height="100">

<td>在电线杆上多嘴</td>

<tdrowspan="2">在电线杆上多嘴</td>

</tr>

<tralign="center"bgcolor="#CCC"height="100">

<td>在电线杆上多嘴</td>

</tr>

</table>

八、HTML 表单

HTML 表单主要用于收集用户的输入信息。

它包含各种表单元素。

表单元素是允许用户在表单中输入内容的一些标签元素，比如：输入框（input）、文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）等等。

比如我们经常用到的注册/登录的界面就是一个表单。

一个常见的表单，通常由左侧提示文本和右侧表单元素组成。

1、表单域

表单域，顾名思义，就是包含表单元素的一个区域。我们用 form 标签来表示表单域。

语法如下：

<formaction="" target="_blank">http://xxx.com/1.php"method="get"name=""autocomplete="off"></form>

action：处理表单提交的地址URL，表示表单要提交到什么地方进行处理
method：表示浏览器使用哪种方式来提交表单
get：通过地址栏提交表单数据，表单数据会附加在 action 属性的 URL 中，并以 ? 作为分隔符（简单来说，就是可以在地址栏里看到你提交的内容），安全性较差，因为如果输入了账号和密码，那么就可以直接在地址栏看到了。
post：表单数据会包含在表单体内然后发送给服务器，安全性高。
name: 表单的名称。
autocomplete：表示是否能够自动补全上次的输入内容。

2、表单元素-输入框

输入框使用input标签。

<input>标签，根据type属性的不同，会有不同的表现样式。默认type="text"，也就是文本输入框。

2.1、文本输入框

单行的文本区域，（输入中的换行会被自动去除）。

<inputtype="text"

name="username"

maxlength="6"

readonly="readonly"

disabled="disabled"

value="用户名"/>

type：type="text" 表示文本输入框
name：输入框的名字
maxlength：文本框能输入的最大字符数。
minlength：文本框能输入的最小字符数。
readonly：文本框只读
disabled：文本框禁用
value：输入框中的默认内容
placeholder：输入框中的提示语

2.2、密码输入框

用于输入密码的元素。

<inputtype="password"/>

注意：密码字段字符不会明文显示，而是以星号 * 或圆点 · 替代。

PS：文本输入框的所有属性对密码输入框都有效

2.3、数字输入框

用于输入数字的元素。

<inputtype="number"name="num"step="2"/>

step：默认情况下，向上和向下按钮可以将值增加或减小。通过使用step 属性来更改此步长值。
min：最小值
max：最大值

注意：min和max只是点击上下按钮不会让你低于 min 或高于 max 的值，但是可以通过手动输入数字。

2.3、单选框

单选框的type=radio，单选框元素默认渲染为小型圆圈图表，填充即为激活，也就是我们所说的选中效果。

<inputtype="radio"name="gender"checked="checked"/>男

<inputtype="radio"name="gender"/>女

checked="checked" 或者直接写 checked，可以设置默认选中的项。

单选效果：当有多个单选框是如何设置只能有一个被选中？默认的情况下，单选框是独立存在的，如果要实现单选切换效果，需要将 name 的值设置相同，才能实现单选效果。

设置单选框的样式（add 20181009）

由于单选框的样式是只能设置大小，不能设置颜色，更不能设置样式。所以，一般我们自定义单选框的样式。

实现原理：

在单选框的后面加上label标签（需要设置为inline-block或者block），在点击单选框的时候，使用 + 选择器选中label标签，设置label标签的宽高和颜色代替单选框，将单选框display:none；

代码：

<!DOCTYPE html>

<head>

<metacharset="UTF-8">

<title>Document</title>

<style>

input {

display: none;

}

label {

display: inline-block;

width: 30px;

height: 30px;

background-color: #ccc;

border-radius: 50%;

vertical-align: middle;

}

input:checked + label {

background-color: red;

}

</style>

</head>

<body>

<inputtype="radio"name="sex"id="a"><labelfor="a"/>男

<inputtype="radio"name="sex"id="b"><labelfor="b"/>女

<inputtype="radio"name="sex"id="c"><labelfor="c"/>保密

</body>

</html>

另外，我们还可以实现选项卡效果，代码如下：

<!DOCTYPE html>

<head>

<metacharset="UTF-8">

<title>Document</title>

<style>

* {

padding: 0;

margin: 0;

}

ul {

position: relative;

}

li {

list-style: none;

float: left;

}

input {

outline: none;

}

input[type="radio"] {

display: none;

}

label {

display: block;

text-align: center;

line-height: 42px;

width: 124px;

height: 42px;

color: rgb(227,64,5);

border-bottom: 1pxsolidrgb(227,64,5);

cursor: pointer;

}

input:checked + label {

background-color: rgb(227,64,5);

color: #fff;

}

li.dv1,

li.dv2 {

width: 248px;

height: 50px;

/* background-color: #ddd; */

position: absolute;

display: none;

}

.dv1 {

position: relative;

left: 0;

top: 42px;

}

.dv2 {

left: 0;

top: 42px;

}

input:checked + label + div {

display: block;

}

.txt1 {

position: absolute;

width: 200px;

height: 30px;

left: 50%;

top: 50%;

margin-left: -100px;

margin-top: -15px;

}

.txt1input[type="text"] {

width: 150px;

height: 30px;

vertical-align: top;

float: left;

box-sizing: border-box;

border: 1pxsolidrgb(227,64,5);

border-radius: 10px0010px;

padding-left: 5px;

}

.txt1input[type="submit"] {

width: 50px;

height: 30px;

float: left;

border: 1pxsolidrgb(227,64,5);

border-radius: 010px10px0;

margin-left: -1px;

background-color: rgb(227,64,5);

color: white;

}

.txt2 {

position: absolute;

width: 200px;

height: 30px;

left: 50%;

top: 50%;

margin-left: -100px;

margin-top: -15px;

}

.txt2input[type="text"] {

width: 150px;

height: 30px;

vertical-align: top;

float: left;

box-sizing: border-box;

border: 1pxsolidrgb(227,64,5);

border-radius: 10px0010px;

padding-left: 5px;

}

.txt2input[type="submit"] {

width: 50px;

height: 30px;

float: left;

border: 1pxsolidrgb(227,64,5);

border-radius: 010px10px0;

margin-left: -1px;

background-color: rgb(227,64,5);

color: white;

}

</style>

</head>

<body>

<divclass="box">

<formaction="">

<ulclass="uu">

<li>

<inputtype="radio"name="yz"id="a"checked>

<labelfor="a">客服验证</label>

<divclass="dv1">

<divclass="txt1">

<inputtype="text"placeholder="请输入需要验证的QQ号">

<inputtype="submit"value="验证">

</div>

</li>

<li>

<inputtype="radio"name="yz"id="b">

<labelfor="b">网址验证</label>

<divclass="dv2">

<divclass="txt2">

<inputtype="text"placeholder="请输入需要验证的网址">

<inputtype="submit"value="验证">

</div>

</li>

</ul>

</form>

</div>

</body>

</html>

效果：

2.4、多选框

复选框可以选取一个或多个选项：

第一个多选框：<inputtype="checkbox"checked="checked"value="one"/>

第二个多选框：<inputtype="checkbox"checked/>

value：复选框选中时的值。如果省略，则默认为"on"。

注意：所有的 <input> 元素都有 value 属性；但是，它对 checkbox 类型的输入有特殊作用：当表单被提交时，只有当前被选中的复选框会被提交给服务器，值就是 value 属性的值。如果没有指定 value，默认为字符串 on。

2.5、文本上传控件

文本上传控件允许用户可以从他们的设备中选择一个或多个文件。选择后，这些文件可以使用提交表单的方式上传到服务器上。

accept：表示允许的文件类型（accept="image/*,.pdf" 表示任何图片文件或者pdf文件。
multiple：如果出现，则表示用户可以选择多个文件

20181009 修改文本上传控件的样式：

实现原理：

由于上传控件的大小和颜色等是无法直接修改的，若想要修改的话，可以另外添加一个div，将div的大小设置和file控件的大小一致，将div定位，之后file文件也进行定位，覆盖到div之上（可以设置z-index），然后设置file控件的opacity为0即可。

示例：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

input {

width: 180px;

height: 60px;

background-color: pink;

position: absolute;

left: 0;

top: 0;

z-index: 1;

opacity: 0;

}

div {

width: 180px;

height: 60px;

background-color: #37f;

color: white;

text-align: center;

line-height: 60px;

position: absolute;

left: 0;

top: 0;

}

</style>

</head>

<body>

</body>

</html>

2.6、文件提交按钮

文件提交按钮，可以实现信息提交功能。

当用户单击确认按钮时，表单的内容会被传送到服务器。表单form的属性 action 定义了服务端的文件名。

用户名: <input type="text" name="user">

</form>

比如在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 html_form_action.php 文件。

2.7、按钮

用来创建一个没有默认值的可点击按钮。已经在 HTML5 被 <button>元素取代。

<button>button按钮</button>

区别：<button>在form里面，默认可以进行提交操作，除非设置type=button；而input按钮需要配合JS进行提交。

2.8、重置按钮

此按钮点击后，会将表单的所有内容重置为输入前的初始值（一般为空值）。不推荐使用。

3、下拉列表

下拉列表在我们的表单中也非常常用。

使用 <select>标签，来创建下拉列表。

使用 <select> 元素中的 <option> 标签，来表示下拉列表中的每一个选项。

示例：

</select>

</optgroup>

</optgroup>

</select>

常见属性：

name：下拉列表名称
multiple：表示下拉列表可以多选
selected：设置默认选中的选项
disabled：1、用在select上禁用整个下拉列表；2、如果用在选项上，表示禁用该选项。
value: 选中的下拉框的值
<optgroup></optgroup> 对下拉列表进行分组。
label：分组名称。