这篇博客详细介绍了HTML的基础知识，包括网页概念、HTML的定义和作用、常用浏览器内核、WEB标准的重要性，以及HTML标签的使用，如标题、段落、换行、图像和超链接等。此外，还探讨了文档类型声明、字符编码和语言定义。通过本文，读者将对HTML有全面的理解，并能开始编写基本的HTML页面。
文章目录
第一章 网页概念
1.1 什么是网页
- 网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。
- 网页是网站中的一页，通常是HTML格式的文件，它要通过浏览器来阅读。
- 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页常以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML文件。
1.2 什么是HTML（重点）
-
HTML指的是超文本标记语言(Hyper Text Markup Language)，它是用来描述网页的一种语言。
-
HTML不是一种编程语言，而是一种标记语言(markup Language)。
-
标记语言是一套标记标签(markup Language)。
-
HTML使用标记标签来描述网页
所谓超文本，有2层含义：
- 它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。
- 它还可以从一个文件跳转到另外一个文件，与世界各地主机的文件链接（超级链接文本）。
1.3 网页的形成
网页是由网页元素组成的，这些元素是利用 html 标签描述出来，然后通过浏览器解析来显示给用户的。
1.4 常用浏览器内核
浏览器内核（渲染引擎）：负责读取网页内容，整理信息，计算网页的显示方式并显示页面。
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | Trident | IE（2022年6月16日退役）、360极速浏览器、百度浏览器使用该内核 |
| firefox | Gecko | 火狐浏览器内核 |
| Safari | Webkit | 苹果浏览器内核 |
| chrome / Opera | Blink | chrome / Opera浏览器内核，Blink其实是 Webkit 的分支 |
1.5 WEB标准（重点）
Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织。
-
为什么需要Web标准
浏览器不同，它们显示页面或者排版就有些差异。
遵循Web标准除了可以让不同的开发人员写出的页面更标准、更外观统一，还有以下优点：- 让Web的发展前景更广阔
- 内容能被更广泛的设备访问
- 更容易被搜索引擎搜索
- 降低网站流量费用
- 使网站更易于维护
- 提高页面浏览速度
-
Web 标准的构成
主要包括结构(Structure)、表现(Presentation)、和行为(Behavior)三个方面。
| 标准 | 说明 |
|---|---|
| 结构 | 结构用于对网页元素进行整理和分类，主要指的是HTML |
| 表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。 |
| 行为 | 行为是指网页模型的定义及交互的编写，主要指的是Javascript。 |
第二章 HTML标签
2.1 HTML的基本语法
- HTML 标签是由尖括号包围的关键词，例如<html>。
- HTML 标签通常是成对出现的，例如 <html>和</html>，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
- 有些特殊的标签必须是单个标签（极少情况），例如<br/>,<hr/>，我们称为单标签。
2.2 HTML的标签关系
可以分为两种：包含关系与并列关系
2.2.1 包含关系
<!-- 包含关系又称父子关系 -->
<html>
<haed><head>
</html>
2.2.2 并列关系
<html>
<!-- 并列关系又称兄弟关系 -->
<head></head>
<body></body>
</html>
2.3 HTML的骨架结构
<!-- 声明标签 -->
<!DOCTYPE html>
<!-- 页面中最大的标签 根标签 -->
<html lang="en">
<!-- 头部标签 -->
<head>
<meta charset="UTF-8">
<!-- 标题标签 -->
<title>Document</title>
</head>
<!-- 文档的主体 -->
<body>
</body>
</html>
2.4 标签规范
单标签（空标记）
<标记名/>
<标记名 属性="属性值"/>
例如:<br/>
双标记（常规标记)
<标记名><标记名/>
<标记名 属性="属性值"></标记名>
例如:<head></head>
标记也可以叫标签或叫元素
2.5 文档类型声明标签和lang以及字符集
2.5.1 <!DOCTYPE>
<!DOCTYPE>文档类型声明标签，作用就是告诉浏览器要按照哪一种HTML标准来进行编写页面
<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签。
<!DOCTYPE html>
这句代码的是意思是：当前页面采取的是HTML5版本来显示网页。
<!DOCTYPE>声明必需是在HTML文档的第一行，位于<html>标签之前
2.5.2 lang
用来定义当前文档显示的语言
<html lang="en"></html>
2.5.3 字符编码
字符集是多个字符的集合，以便计算机能够识别和存储各种文字。
在<head>标签内，可以通过 <meta> 标签的 charset 属性来规定HTML文档应该使用哪种字符编码。
<meta charset="UTF-8">
注意：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用"UTF-8"编码，不要写成"utf-8"或"UTF8"。
2.5.4 mate
meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta> 标签始终位于< head >元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务
编码的设置
mate标签属性：
字符编码设置
<meta charset="UTF-8">
IE的设置
<meta http-equiv="X-UA-Compatible" content="IE=edge">
显示的设置
<meta name="viewport" content="width=device-width, initial-scale=1.0">
便于搜索引擎优化的
<meta name="title" content="HTML,CSS,Javascript">
页面的描述 便于搜索引擎优化的
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
关键字的指定便于搜索引擎优化的
<meta name="keywords" content="HTML, CSS, XML" />
页面作者
<meta name="author" content="相遇是春风十里">
页面缓存的设置
<meta http-equiv="Cache-Control" content="max-age=10080">
第三章 HTML常用标签 （重点）
3.1 注释标签
<!-- 我是一个注释 -->
3.2 标题标签
作为标题使用，并且依据重要性递减。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 注意:一个网页中的h1最好只设置一个。-->
特点：
- 文本标题自带加粗功能，有自己的文本大小
- 一个标题独占一行，有默认间距。
效果：
3.3 段落标签
可以把HTML文档分割为若干段落
<p>我是一个段落</p>
<p>我是一个段落</p>
特点：
- 文本在一个段落中会根据浏览器窗口的大小自动换行
- 段落与段落之间有间距
效果：
3.4 换行标签
强制换行
内容1<br/>内容2
注:换行是一个空标记，它具有强制换行作用
特点：
- <br/>是个单标签
- <br/>标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
效果：
3.5 水平线标签
我是水平线
<hr/>
我是水平线
<!-- 注:hr也是一个空标记-->
效果：
3.6 加粗标签
<b>加粗内容</b>
<strong>强调加粗内容</strong> (推荐使用)
效果：
3.7 倾斜标签
<i>倾斜内容</i>
<em>强调倾斜</em>（推荐使用）
效果：
3.8 删除线标签
<s>内容删除线</s>
<del>强调内容删除线</del>（推荐使用）
效果：
3.9 文本下划线标签
<u>文本内容下划线</u>
效果：
3.10 上标和下标
我是<sup>上标</sup>
我是<sub>下标</sub>
效果：
3.11 div和span标签
3.11.1 div
div，没有具体的含义，用来划分页面区域，独占一行。
<div>第一个div</div>
<div>第二个div</div>
<div>第三个div</div>
特点：
- <div>标签用来布局，但是现在一行只能放一个<div>。
效果：
3.11.2 span
span，没有实际意义，主要应用在对于文本独立修饰的时候，内容有多宽就占多宽的空间距离。
<h3>这里是一段<span>老长的文字</span>了<h3>
特点：
- <span>标签用来布局，一行上可以多个<span>。
效果：
注：红字为span里的内容
3.12 图像标签和路径
3.12.1 图像标签
<img src="图像URL" alt="" title="" ale="" width="" height="">
- src 是 <img> 标签的 必须属性，它用于指定图像文件的路径和文件名。
图像标签的其他属性：
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 图片不显示（加载失败）后的提示信息 |
| title | 文本 | 鼠标悬停在图片上显示的提示信息 |
| width | 像素 | 设置图片的宽度 |
| height | 像素 | 设置图片的高度 |
| border | 像素 | 设置图片的边框粗细 |
图像标签属性注意点:
- 图片只设置高度，宽度会等比例缩放。同理，只设置宽度，高度会同比例缩放。
- 图像标签可以拥有多个属性，必须写在标签的后面。
- 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
- 格式为
属性 = " 属性值 "
效果：
3.12.2 路径
路径分相对路径和绝对路径两种：
1.相对路径：以引用文件所在位置(图片相当于HTML页面的位置)为参加基础，而建立出的目录路径。
同一级路径:
<!-- 图片与文件在同级目录，可直接写图片名或./图片名，表示当前路径下的图片 -->
<img src="code.jgp" alt=""/>
<img src="./code.jgp" alt=""/>
下一级路径:
<!-- 图片与文件不在同级目录下，需要使用/来进入下一级目录，在来找图片存在的文件夹名里的图片 -->
<img src="images/baidu.jgp"/>
上一级路径:
<!-- 图片与文件不在同级目录下，需要使用../来返回上一级目录，在来找图片存在的文件夹名里的图片 -->
<img src="../book/code.jgp" alt=""/>
<!-- ../../ 上一级的上一级 多级返回 -->
2.绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
3.13 超链接
实现不同页面之间的跳转。
3.13.1 外部链接
<a href="https://www.csdn.net/" title="提示信息" target="">内容</a>
| 属性 | 属性值 | 描述 |
|---|---|---|
| href | 路径 | |
| title | 鼠标悬停后显示的提示信息 | |
| target | _self(默认) _blank | 当前页打开 新窗口打开 |
3.13.2 内部链接
<a href="../code/index.html" title="" target="">内容</a>
推荐使用相对路径
3.13.3 空链接
如果没有确定链接目标
<a href="#" title="" target="">内容</a>
3.13.4 下载链接
<a href="img.zip" title="" target="">下载</a>
3.13.5网页元素链接
可以在a标签中包文本、图像、视频、音频等都可以添加超链接。
<a href="https://www.csdn.net/" title="" target=""><img src="img.jpg"></a>
3.13.6 书签链接（锚点链接）
由一组a标签组成。
<a href="#name"></a>
<a name="name"></a>
<!--第一个 a 的 href 属性值 # 后面的值和第二个 a 的 name 属性值一致-->
例子：
<a href="#first">第一章</a> 放在目录位置
<a name="first">第一章</a> 放在要跳转的文章位置
3.14 列表
列表最大的特点就是整齐 、整洁、 有序，它作为布局会更加自由和方便
根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。
3.14.1 无序列表
<ul>标签表示HTML页面中项目的无序列表，而列表项使用<li>标签定义。
<!--
1.ul 中只能放 li ，li 里可以放其他标签。
2.默认为黑色实心圆
-->
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
- 无序列表的各个列表项之间没有顺序级别之分，是并列的。
- <ul> </ul>中只能嵌套<li> </li>，直接在<ul> </ul>标签中输入其他标签或者文字的做法是不被允许的。
- <li>与 </li>之间相当于一个容器，可以容纳所有元素。
- 无序列表会带有自己的样式属性，但在实际使用时，一般会用css来设置
效果：
- ul 有 type 属性
<ul type="disc">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
效果：
3.14.2 有序列表
<!-- ol 中只能放 li 标签，li 标签中可以放其他标签。-->
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ol>
效果：
<ol type="1">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ol>
- type=“1”(默认) 其他值可 type=“a” 或 “A” 或 “i” 或 “I”
效果:
<!-- start的值只能设置为数字 -->
<ol start="2">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ol>
效果：
3.14.3 自定义列表
<dl>
<dt>衣服</dt>
<dd>男装</dd>
<dd>女装</dd>
</dl>
<dl>
<dt>鞋子</dt>
<dd>男鞋</dd>
<dd>女鞋</dd>
</dl>
总结：
1.<dl></dl>里面只能包含<dt>和<dd>。
2.<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>
效果：
3.15 特殊字符
注意：字符代码后的分号需要改成英文的分号，使用英文分号会变成特殊字符，故使用中文分号。
| 特殊字符 | 描述 | 字符代码 |
|---|---|---|
| 空格 |  ； | |
| < | 小于号 | <； |
| > | 大于号 | >； |
| & | 和号 | &； |
| " | 引号 | "； |
| | | 竖条 | |； |
| ’ | 撇号 | &apos； (IE不支持) |
| ￠ | 分（cent） | ¢； |
| £ | 镑（pound） | £； |
| ¥ | 元（yen） | ¥； |
| € | 欧元（euro） | &euro； |
| § | 小节 | §； |
| © | 版权（copyright） | ©； |
| ® | 注册商标 | ®； |
| ™ | 商标 | &trade； |
| × | 乘号 | ×； |
| ÷ | 除号 | ÷； |
| W3Cschool完整特殊字符参考手册 |
第四章 表格
4.1 行、列、单元格概念
4.2 表格的基本语法
<table> <!-- 创建表格 -->
<tr> <!-- 创建行 -->
<td>1</td> <!-- 创建单元格 -->
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
- <table></table>是用于定义表格的标签。
- <tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中。
- <td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
- 字母td指表格数据（table data），即数据单元格的内容。
注意：<table>标签里只能写<tr>标签，<tr>标签里面只能放<td>，<td>则是可以放其他标签
4.3 表头单元格标签（th）
表头单元格也是单元格，常用于表格的第一行，突出重要性，表头单元格里面的文字会加粗居中显示。
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>地址</th>
</tr>
<tr>
<td>小王</td>
<td>女</td>
<td>北京</td>
</tr>
<tr>
<td>小明</td>
<td>男</td>
<td>上海</td>
</tr>
</table>
效果：
4.4 表格（table）的属性
4.4.1 border（边框）
<table border="1"> 控制表格外边框大小，内边框不变
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
效果：
4.4.2 width（宽度）
在表格中width="500"和width="500px"是一个效果，px是像素单位
<table border="1" width="500px">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
效果：
- 宽度还可以使用百分百进行设定
<table border="1" width="50%" height="500px">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
效果：
- 使用百分比来设置宽度，就会发现表格会以父元素的大小来进行调整宽度，占父元素的50%的宽度
4.4.3 height（高度）
<table border="1" height="500px">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
效果：
高度使用百分比的前提是父元素要先设置一个高度
4.4.4 align（水平对齐）
<table border="1" width="500px" align="left">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
| 属性值 | 描述 |
|---|---|
| left | 居左 |
| center | 居中 |
| right | 居右 |
效果：
4.4.5 bordercolor（边框颜色）
<table width="500px" height="200px" border="1" bordercolor="red">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
效果：
4.4.6 bgcolor（背景颜色）
<table width="500px" height="200px" border="1" bordercolor="red" bgcolor="yellow">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
效果：
4.4.7 cellspacing （单元格与单元格之间的间距）
<table width="500px" height="200px" border="1" bordercolor="red" cellspacing="0">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
效果：
4.4.8 cellpadding（单元格与内容之间的间距）
<table width="500px" height="200px" border="1" bordercolor="red" cellspacing="0" cellpadding="20">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
效果：
4.4.9 background（背景图片）
<table width="500px" height="200px" border="1" bordercolor="red" background="123.webp">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
效果：
4.5 行（tr）的属性
4.5.1 bgcolor （背景颜色）
<table border="1" width="300px" height="300px">
<tr bgcolor="red">
<td></td>
<td></td>
</tr>
<tr bgcolor="yellow">
<td></td>
<td></td>
</tr>
</table>
效果：
4.5.2 height（高度）
<table border="1" width="300px" height="300px">
<tr bgcolor="red" height="200px">
<td></td>
<td></td>
</tr>
<tr bgcolor="yellow">
<td></td>
<td></td>
</tr>
</table>
效果：
4.5.3 align（文本水平对齐）
<table border="1" width="300px" height="300px">
<tr bgcolor="red" align="left">
<td>1</td>
<td>2</td>
</tr>
<tr bgcolor="yellow" align="center">
<td>3</td>
<td>4</td>
</tr>
<tr bgcolor="blue" align="right">
<td>5</td>
<td>6</td>
</tr>
</table>
效果：
4.5.4 valign（文本垂直对齐）
<table border="1" width="300px" height="300px">
<tr bgcolor="red" valign="top">
<td>1</td>
<td>2</td>
</tr>
<tr bgcolor="yellow" valign="middle">
<td>3</td>
<td>4</td>
</tr>
<tr bgcolor="blue" valign="bottom">
<td>5</td>
<td>6</td>
</tr>
</table>
效果：
4.5.5 background（背景图片）
<table border="1" width="300px" height="300px">
<tr background="123.webp">
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
效果：
4.6 列（td）的属性
4.6.1 width（宽度）
<table border="1" width="300px" height="300px">
<tr>
<td width="200px">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
注意：当给一个单元格设置宽度时，影响的是这一整列的单元格，如下图，给单元格1设置宽度时，影响到了单元格3的宽度。
效果：
4.6.2 height （高度）
<table border="1" width="300px" height="300px">
<tr>
<td height="200px">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
注意：当给一个单元格设置高度时，影响的是这一整行的单元格，如下图，给单元格1设置高度时，影响到了单元格2的高度。
效果：
4.6.3 bgcolor（单元格颜色）
<table border="1" width="300px" height="300px">
<tr>
<td bgcolor="red">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
效果：
4.6.4 background（背景图片）
<table border="1" width="300px" height="300px">
<tr>
<td background="123.webp">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
效果：
4.6.5 align（水平文本对齐）
<table border="1" width="300px" height="300px">
<tr>
<td align="center">1</td>
<td align="right">2</td>
</tr>
<tr>
<td align="left">3</td>
<td>4</td>
</tr>
</table>
效果：
4.6.6 valign（垂直文本对齐）
<table border="1" width="300px" height="300px">
<tr>
<td valign="top">1</td>
<td valign="middle">2</td>
</tr>
<tr>
<td valign="bottom">3</td>
<td>4</td>
</tr>
</table>
效果：
4.7 表格合并
4.7.1 colspan（合并列）
<table border="1" width="300px" height="300px">
<tr align="center">
<td colspan="2">A</td>
</tr>
<tr align="center">
<td>C</td>
<td>D</td>
</tr>
<tr align="center">
<td>E</td>
<td>F</td>
</tr>
</table>
效果：
4.7.2rowspan（合并行）
<table border="1" width="300px" height="300px">
<tr align="center" >
<td rowspan="2">A</td>
<td>B</td>
</tr>
<tr align="center">
<td>D</td>
</tr>
<tr align="center">
<td>E</td>
<td>F</td>
</tr>
</table>
效果：
4.8 表格案例
实现下图：
<body>
<table border="1" width="400px" height="200px" cellspacing="0">
<tr align="center" >
<td>会员信息</td>
<td width="100px"></td>
<td>出生日期</td>
<td width="100px"></td>
</tr>
<tr align="center">
<td>身份证号</td>
<td colspan="3"></td>
</tr>
<tr align="center">
<td>通讯地址</td>
<td colspan="3"></td>
</tr>
<tr align="center">
<td>联系电话</td>
<td colspan="3"></td>
</tr>
<tr align="center">
<td>会员卡号</td>
<td colspan="3"></td>
</tr>
</table>
</body>
第五章 表单
5.1 什么是表单
收集用户的填写信息，填写的信息作为请求参数与服务器端进行交互。例如：注册和登录
5.2 表单
<form action="Login" method="post" enctype="">
action 处理表单的数据的后台程序的路径
method 提交的方式 常用的就是get 和post
- get默认的提交方式 提交数据数据是放在请求头中，长度有限制 是一种不安全的提交方式
- post指定后 提交的数据是放在请求体中长度没有限制 是一种相对安全的提交方式
enctype 表单发送的编码方式，只有method=“post” 才有效，有3种模式：
- enctype=“text/plain”: 将表单属性发送到电子邮箱时,值必须设置成text/plain，否则就会出现乱码
- enctype=“application/x-www-form-urlencoded”:此为默认值，省略不写，采用这种
- enctype=“multipart/form-data”：用于上传文件
5.3 表单控件
5.3.1 input
<input/> 单标签
| 属性 | 属性值 | 描述 |
|---|---|---|
| type | text | 输入框 |
| placeholder | 提示信息 | |
| password | 密码框 | |
| radio | 单选框 | |
| maxlength | 输入的字符最大的个数 | |
| size | 输入框长度 | |
| checkbox | 复选框 | |
| button | 普通按钮 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| image | 图片按钮 |
5.3.2 text（文本输入框）
姓名:<input type="text" name="usemane"/>
效果：
- name属性必需设置，否则在提交表单时，用户输入的数据不会被发送到服务器
5.3.3 placeholder（提示信息）
<input type="text" placeholder="输入姓名" name="text"/>
- name属性必需设置，否则在提交表单时，用户输入的数据不会被发送到服务器
效果：
5.3.4 password（密码框）
密码:<input type="password"/>
效果：
5.3.5 radio（单选框）
性别：<input type="radio" nane="sex" value='1' checked>男<input type="radio" name="sex" value='0'>女
- name 必需有，否则他们将是独立的单选框，没有联动效果
- checked 默认选中
- value 单选按钮的结果要传到服务上去 那么value的值一定要写 传上去的就是选中项的value值
效果：
5.3.6 checkbox（复选框)
您的兴趣爱好：
<input type="checkbox" name="interest" value="1" checked>篮球
<input type="checkbox" name="interest" value="2">足球
<input type="checkbox" name="interest" value="3">跑步
<input type="checkbox" name="interest" value="4">跳舞
- name 必需有，否则他们将是独立的复选框，没有联动效果
- checked 默认选中
- value 单选按钮的结果要传到服务上去 那么value的值一定要写 传上去的就是选中项的value值
效果：
5.3.7 file（文件上传）
<input type="file">
效果：
5.3.8 button（按钮）
5.3.9 普通按钮
<input type="button" value="按钮">
效果： 普通按钮没有任何效果
5.3.10 提交按钮
<input type="submit" value="提交">
效果： 提交表单信息
5.3.11 重置按钮
<input type="reset" value="重置">
效果： 点击后输入的内容清空
5.3.12 图片按钮
<input type="image" src="123.webp">
效果： 图片具有按钮功能
5.3.13 button按钮
<button></button> 单纯的标签按钮
5.3.14 label
<label for="text1">姓名:</label>
<input type="text" id="text1"/>
| 属性 | 描述 |
|---|---|
| for | 关联表单中的 id 值 |
效果： 点击姓名时，输入框会成为选中状态。
5.3.15 select（下拉框）
第一种写法：
您的学历：<select>
<option selected>小学</option>
<option>初中</option>
<option>高中</option>
<option>专科</option>
<option>本科</option>
</select>
- selected 默认选择
效果：
第二种写法：
<select>
<optgroup label="亚洲">
<option>中国</option>
<option>日本</option>
<option>韩国</option>
<option>泰国</option>
</optgroup>
<optgroup label="欧洲">
<option>英国</option>
<option>德国</option>
<option>法国</option>
<option>希腊</option>
</optgroup>
</select>
- lable 下拉组标题，它不能被选中
效果：
5.3.16 textarea（文本域）
<textarea name="" id="" cols="30" rows="10"></textarea>
效果：
扫一扫
1084
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
