作者有话说：
本篇主讲表单标签，稍带提了一些基础知识。关于HTML还有很多内容没有提及，想深入了解的可移步其他大佬的文章或者我们有缘再见~
目录
1、什么是HTML
HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。通过它，可以实现图片、链接、音乐以及程序等等多种元素。现如今，HTML已经是程序员必须掌握的一项基本功。
HTML的特点：简单灵活，可扩展性，平台无关性
2、我的第一个HTML
新建一个.html文件，内容如下
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落</p>
</body>
</html>其中：
- <!DOCTYPE html> ——声明为HTML5文档
- <html>——HTML页面的根元素，网页的开始
- <head>——包含文档的元数据，网页的头部
- <title>——网页的页名
- <body>——包含可见的页面内容，网页的内容
- <h1>——标题标签
- <p>——段落标签
保存后运行，在浏览器中打开
3、HTML标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
3.1 基础标签
- 标题标签
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的，字体从大到小 ，加粗并换行。
<!DOCTYPE html>
<html>
<head>
<title>标题标签</title>
</head>
<body>
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<h4>这是一个标题</h4>
<h5>这是一个标题</h5>
<h6>这是一个标题</h6>
</body>
</html>运行结果如下
- 段落标签
HTML 段落是通过 <p> 标签进行定义的。
其中，段落标签 align 属性的取值为 left、 center、 right，默认的位置是 left
<!DOCTYPE html>
<html>
<head>
<title>段落标签</title>
</head>
<body>
<p>这是一个段落</p>
<p align="center">这是一个段落</p>
<p align="right">这是一个段落</p>
<p align="left">这是一个段落</p>
<p align="">这是一个段落</p>
</body>
</html>运行结果如下
注意：段落标签是块级标签，可以自动换行
- 链接标签
HTML 链接是通过 <a> 标签进行定义的。
<!DOCTYPE html>
<html>
<head>
<title>链接标签</title>
</head>
<body>
<a href="https://www.baidu.com/">点这里>></a>
</body>
</html>
注意：在 href 属性中填写指定链接的地址。
- 图像标签
HTML 图像是通过 <img> 标签进行定义的。
<!DOCTYPE html>
<html>
<head>
<title>图像标签</title>
</head>
<body>
<img src="哆啦A梦.jpg" width="500" height="350">
</body>
</html>
注意：建议设置宽度高度时以图片原尺寸为基础，防止运行时图片变形
3.2 常用标签
| <b> / <strong> ：字体加粗 | <i> / <em> ：斜体 |
| <u> ：文字加下划线 | <del> ：文字加删除线 |
| <br> ：换行 | <font> ：修饰字体颜色 |
| <pre> ：原样输出内容 | <span> ：用来组合文档中的行内元素 |
| <div> ：块级元素，把文档分割为独立的、不同的部分。 | <hr> ：水平分割线 |
| <sub> ：定义下标文本 | <sup> ：定义上标文本 |
| < ! -- 注释 解释说明 -- !> |
3.3 表单标签
-
< form >
<form> 标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单用于向服务器传输数据。
注意，<form> 一般与 input 连用，<form> 是块级元素，其前后会产生换行。
from 的属性：
- action ：规定当提交表单时向何处发送表单数据，取值为文件路径 *ps：相对路径与绝对路径 相对路径：当前源文件和目标文件的相对路径的位置——建议使用 绝对路径：从盘符开始依次找到想要找到的文件的文件路径，路径+文件名
- name ：规定表单的名称。
- method ：规定用于发送 form-data 的 HTTP 方法，取值为 get / post 请求方式 *ps：get 与 post get请求会将用户名和密码暴露在地址栏上，不安全 post请求相较于比较安全 共同点：都是可以让后台接收数据的
<form name="biaodan" method="post" action="https://www.baidu.com/"> 表单内容 <input> </form>
-
< input >
<input> 标签用于搜集用户信息。
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
intput 的常用属性：type name value id 等
语法结构
<input type="元素类型" name="元素名称" value="元素值" id="客户唯一标识符">input 的其他部分属性：
| checked ：规定此 input 元素首次加载时应当被选中 | readonly ：规定输入字段为只读 |
| disabled ：当 input 元素加载时禁用此元素 | autofocus：默认光标的位置 |
| required ：指示输入字段的值是必需的 | size ：定义输入字段的宽度 |
| maxlength ：规定输入字段中的字符的最大长度 | ..... |
type 属性的取值：
| type = " text "：文本框(单行) | type = " password "：密码框 |
| type = "radio"：单选按钮 | type = "chexbox"：多选按钮 |
| type = "submit"：提交按钮 | type = "reset"：复位按钮 重置按钮 |
| type = "button"：普通的按钮 | type = "image"：图像按钮 |
| type = "file"：上传文件 文件域 | type = "hidden"：隐藏域 用户在页面上不可见的内容 提交用户不可以看见的一些信息 |
| type = "email"：邮箱 | type = "color"：选择颜色 |
| type = "date"：日期 | type="time"：时间 |
| type="datetime-local"：日期+时间 | type="range"：进度条 |
-
< select >
select 元素可创建单选或多选菜单。
<select> 元素中的 <option> 标签用于定义列表中的可用选项。
语法结构
<select>
<option>选择一</option>
<option>选择二</option>
<option>选择三</option>
<option>选择四</option>
</select>select 的部分常用属性：
| value ：选项的值 | require ：规定文本区域是必填的 |
| autofocus ：规定在页面加载后文本区域自动获得焦点 | disabled ：规定禁用该下拉列表 |
| multiple ：规定可选择多个选项 | name ：规定下拉列表的名称 |
| selected ：默认被选中的选项 |
-
< textarea >
<textarea> 标签定义多行的文本输入控件。
文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸，但推荐使用 CSS 的 height 和 width 属性。
语法结构
<textarea name = "" cols = "" rows = "">内容</textarea>注意：在文本输入区内的文本行间，用 "%OD%OA" （回车/换行）进行分隔。
可以通过 <textarea> 标签的 wrap 属性设置文本输入区内的换行模式。
textarea 的部分常用属性：
| rows ：控制文本域的行数 （高度） | cols ：控制文本域的列数 （宽度） |
| wrap ：当在表单中提交时，文本域中的文本如何换行 |
3.4 超链接
超链接是各个网页之间的桥梁，使页面能够跳转。超链接除了指向另一个网页，还可以指向邮箱地址、图片、文件等。
-
< a >
a 标签是实现超链接的重要方式，但不是唯一。本文仅探讨通过 a 标签添加的超链接。
<a> 元素最重要的属性是 href 属性，它指示链接的目标。
语法结构
<a href="https://www.baidu.com/">点击我</a>
a 最重要的三个属性：href 、title 、target
- href 属性用于指示一个目标，该属性必不可少，没有它超链接不能跳转。href 属性的值是网页或资源的地址。比如上面语法结构中提到的。
链接可以是一个完整的地址（绝对地址），也可以是相对地址。外部链接通常使用完整的链接地址，而内部链接，比如电脑上的文件或图片，通常使用相对地址。
<a href="../demo01/1.jpg">图片</a>注意：当要链接的图片或文件与 .html 文件在同一个文件夹里面时，可以直接写要链接的文件名。
- title 属性可以为超链接设置一些介绍信息。当鼠标悬停在超链接上时，会显示 title 属性值的内容。设置 title 可以提升用户体验。
<a href="https://www.douban.com/" title="有不会，找度娘">百度一下</a>
- target 属性规定在何处打开链接文档。默认情况下，是刷新当前网页所在的窗口，加载新的页面。
target 常用属性值：
| _self ：默认状态。在当前页面所在窗口打开链接的网页 | _blank ：在当前浏览器中打开一个新窗口加载链接的网页 |
| _parent ：在父窗口打开链接的网页 |
<a href="https://www.baidu.com/">点这点这</a><br>
<a href="https://www.baidu.com/" target="_black">再来再来</a><br>
<a href="https://www.baidu.com/" target="_self">再试一次</a><br>其实，关于链接的样式还有一些常用属性 ，不过是写在 < body > 中，也就是说，是 body 的常用属性。
在所有浏览器中，链接的默认外观是：
- 未被访问的链接带有下划线而且是蓝色的
- 已被访问的链接带有下划线而且是紫色的
- 活动链接带有下划线而且是红色的
我们可以通过在 body 中加上对应属性用于自定义外观：
| link ：文档中未访问链接的默认颜色 | alink ：文档中活动链接的的颜色 |
| vlink ：文档中已被访问链接的颜色 | bgcolor ：文档的背景颜色 |
| backgroun ：文档的背景图片（一般不建议使用） |
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body link="red" vlink="blue" alink="green" bgcolor="pink" background="哆啦A梦.jpg">
<a href="https://www.baidu.com/">点击我</a>
</body>注意：背景图片和背景颜色同时存在时候要注意优先级，一般来说，图片的优先级更高。
4、小试牛刀
初步了解HTML及表单标签后，以用户注册页面为例，实际操作一下
提示：该例子中有注意到排版间隔的问题， 表示空格，可以利用空格使对齐。
邮箱一栏中带有提示信息，input 标签中 placeholder 属性：提供可描述输入字段预期值 的提示信息，该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
下面附上部分代码
<div align="center">
<h1>用户注册</h1>
<form action="2.html" name="name" method="post">
<p>
用 户 名 <input type="text" name="usname" value="" id="usname" readonly=""><br>
<input type="text" name="usname1" value="zhangsan" disabled=""><br><br>
密 码 <input type="password" name="password" required autofocus><br><br>
性别 <input type="radio" name="name"value="gender" checked="">男<input type="radio" name="name" value="gander">女<br><br>
爱好
<input type="checkbox" name="sing" value="唱">唱
<input type="checkbox" name="dance" value="跳">跳
<input type="checkbox" name="rap" value="Rap">Rap
<input type="checkbox" name="basketball" value="打篮球">打篮球<br><br>
邮箱 <input type="email" name="email" placeholder="请输入你的邮箱"><br><br>
用户头像 <input type="file" name="file"><br><br>
家庭住址
<select name="address">
<option value="1">请选择你的住址</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>重庆</option>
<option>南京</option>
</select><br><br>
收货地址
<select multiple="">
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>重庆</option>
<option selected="">南京</option>
</select><br><br>
建议或意见 <textarea name="" cols="30" rows="">你的建议或意见</textarea> <br><br>
选择你喜欢的颜色 <input type="color">
注册时间 <input type="datetime-local"><br><br>
</p>
<input type="submit" value="注册">
<input type="reset" value="重置">
</form>
</div>
942
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
