一、HTML概念
HTML是Hyper Text Markup Language的缩写。意思是超文本标记语言。它的作用是搭建网页结构，在网页上展示内容。
1.1 超文本
HTML文件本质上是文本文件，而普通的文本文件只能显示字符。但是HTML技术通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义——本身是文本，但是呈现出来的最终效果超越了文本。
1.2 标记语言
说HTML是一种标记语言，是因为它是由一系列标签组成的，没有常量、变量、流程控制、异常处理。IO等等这些功能。
HTML很简单，每个标签都有它固定的含义和确定的页面显示效果。
标签是通过一组尖括号和标签名的方式来定义的。开始标签<>和结束标签</>一起构成了一个完整的标签。开始标签的结束标签之间的部分叫文本标签体，也简称标签体。
二、HTML的结构
2.1 文档声明
HTML文件中第一行的内容，用来告诉浏览器当前HTML文档的基本信息，其中最重要的就是当前HTML文档遵循的语法标准。
HTML5版本的文档类型声明如下：
<!DOCTYPE html>
2.2 根标签
html标签是整个文档的根标签，所有其他标签都必须放在html标签里面。
2.3 头部
head标签用于定义文档的头部，其他头部元素都放在head标签里。头部元素包括title标签、script标签、style标签、link标签、meta标签等等。
2.4 主体
body标签用于定义网页的主体内容，在浏览器窗口内显示的内容都定义到body标签内。
2.5 注释
HTML注释的写法如下：
<!---->
注释的内容不会显示到浏览器窗口内，是开发人员用来对代码内容进行解释说明。
三、HTML语法规则
- 根标签有且只能有一个
- 无论是双标签还是单标签都必须正确关闭
- 标签可以嵌套但不能交叉嵌套
- 注释不能嵌套
- 属性必须有值，值必须加引号，单引号或双引号均可
- 标签名不区分大小写，但建议使用小写
四、HTML的各个标签的使用
4.1 标题标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题标签的介绍</title>
</head>
<body>
<!--标题标签的特点:
1.独占一行
2.加粗加黑
3.默认在左边
根据标题的大小，可以分为六级标题，从大到小分别是h1到h6
-->
<h1>我是标题</h1>
<h2>我是标题</h2>
<h3>我是标题</h3>
<h4>我是标题</h4>
<h5>我是标题</h5>
<h6>我是标题</h6>
</body>
</html>
页面效果如下：
4.2 段落标签和换行标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>段落标签</title>
</head>
<body>
<!--一个p标签里面的内容就放在一段里面-->
<p>从11月15日开始，全国已连续九天每日新增本土感染者突破两万。其中，23日，这一数值已经破三万。国家疾控局传防司二级巡视员胡翔11月22日介绍说，11月1日以来，全国已经累计报告了25.3万例感染者，近一周平均每天报告2.22万例，较上一周增长了一倍。这意味着，截至23日24时，11月新增本土感染者接近30万。</p>
<p>从11月15日开始，全国已连续九天每日新增本土感染者突破两万。其中，23日，这一数值已经破三万。国家疾控局传防司二级巡视员胡翔11月22日介绍说，11月1日以来，全国已经累计报告了25.3万例感染者，近一周平均每天报告2.22万例，较上一周增长了一倍。这意味着，截至23日24时，11月新增本土感染者接近30万。</p>
<p>从11月15日开始，全国已连续九天每日新增本土感染者突破两万。其中，23日，这一数值已经破三万。国家疾控局传防司二级巡视员胡翔11月22日介绍说，11月1日以来，全国已经累计报告了25.3万例感染者，近一周平均每天报告2.22万例，较上一周增长了一倍。这意味着，截至23日24时，11月新增本土感染者接近30万。</p>
<p>从11月15日开始，全国已连续九天每日新增本土感染者突破两万。其中，23日，这一数值已经破三万。国家疾控局传防司二级巡视员胡翔11月22日介绍说，11月1日以来，全国已经累计报告了25.3万例感染者，近一周平均每天报告2.22万例，较上一周增长了一倍。这意味着，截至23日24时，11月新增本土感染者接近30万。</p>
<!--换行标签 br-->
helloworld<br>
你好世界
</body>
</html>
页面效果如下：
4.3 无序列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无序列表标签</title>
</head>
<body>
<!--
无序列表标签通常是使用在展示一系列的数据的情况下
ul表示无序列表，其中的li表示列表的每一项
-->
<ul>
<li>刘备</li>
<li>关羽</li>
<li>张飞</li>
<li>马超</li>
</ul>
</body>
</html>
页面效果如下：
4.4 超链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接标签</title>
</head>
<body>
<!--
超链接标签a的作用：进行资源跳转
href：要跳转到资源的路径
target：新页面的打开方式
-->
<!--
1. 跳转到本项目的资源：使用相对路径
相对路径：以当前路径作为基准，如果资源在同一目录下则直接写资源名；
如果在不同目录下，要找上一级目录，则使用../
. 当前目录
.. 上一级目录
-->
<a href="01_header.html">跳转到01_header.html</a>
<br>
<a href="../01_html入门/start.html">跳转到start.html</a>
<br>
<!--
2. 跳转到其他服务器的资源：使用完整的url访问路径
绝对路径：以/开头，从服务器的根路径开始写，其实就是在完整的url的基础上省略http://服务器的主机地址:端口号
-->
<a href="http://www.baidu.com">跳转到百度</a>
<br>
<!--
target属性表示新页面的打开方式
_self：新页面在当前页面打开
_blank：新页面会新打开一个标签页
-->
<a href="http://www.baidu.com" target="_blank">跳转到百度</a>
</body>
</html>
页面效果如下：
4.5 图片标签
将准备好的图片放在img文件夹下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!--
image标签用于显示图片
src：用于指定要显示的图片的路径，建议使用相对路径。项目中的图片一般存放在一个img文件夹中
width：图片的宽度
height：图片的高度
-->
<img src="../img/前端.jpeg" width="550" height="310"/>
</body>
</html>
页面效果如下：
4.6 块标签
块并不是为了显示文章的内容，而是为了方便结合CSS对页面进行布局。
块有两种，div是前后有换行的块，span是前后没有换行的块。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div和span标签的介绍</title>
</head>
<body>
<!--
div和span的区别：
div会独占行，它不和其他的div处于同一行（但是css中可以使用浮动来让多个div处于同一行）
span不会独占行，多个span可以在同一行
-->
<div style="border: 1px solid black;width: 100px;height: 100px">这是一个div块</div>
<div style="border: 1px solid black;width: 100px;height: 100px">这是一个div块</div>
<span style="border: 1px solid black;width: 100px;height: 100px">这是一个span块</span>
<span style="border: 1px solid black;width: 100px;height: 100px">这是一个span块</span>
<div>hello world 你好世界</div>
</body>
</html>
页面效果如下：
4.7 转义字符
在HTML文件中，<、>等等符号已经被赋予了特定含义，不会作为符号本身显示到页面上，此时如果要使用符号本身怎么办呢？需要使用HTML实体来进行转义。
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| 空格 |  ； | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| " | 引号 | " |
| ’ | 撇号 | ' |
| © | 版权 | © |
| ® | 注册商标 | ® |
4.8 小结
| 标签名称 | 功能 |
|---|---|
| h1~h6 | 1级标题~6级标题 |
| p | 段落 |
| a | 超链接 |
| br | 换行 |
| ul/li | 无序列表 |
| img | 图片 |
| div | 定义一个前后有换行的块 |
| span | 定义一个前后无换行的块 |
五、表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
<!--美化table、th、td标签-->
<style type="text/css">
table,th,td {
border-collapse: collapse;
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<!--合并单元格：
rowspan：跨行合并
colspan：跨列合并
-->
<table>
<tr>
<th>姓名</th>
<th>属性</th>
<th>级别</th>
<th>忍村</th>
</tr>
<tr>
<td>漩涡鸣人</td>
<td>风</td>
<td>下忍</td>
<td>木叶</td>
</tr>
<tr>
<td>宇智波佐助</td>
<td rowspan="2">雷&火</td>
<td colspan="2">下忍</td>
</tr>
<tr>
<td>我爱罗</td>
<td>影</td>
<td>砂隐村</td>
</tr>
</table>
</body>
</html>
页面效果如下：
六、表单标签
6.1 表单标签的作用
在项目开发过程中，凡是需要用户填写的信息都需要用到表单。
表单的作用是接收用户的输入信息，并且将用户输入的信息提交给服务器。
6.2 form标签的介绍
在HTML中使用form标签来定义一个表单。form标签有两个重要的属性：action和method。
6.2.1 action属性
用户在表单里填写的信息需要发送到服务器端。服务器端接收表单数据的地址要写在form标签的action属性中。
6.2.2 method属性
form标签中method属性用来定义提交表单的请求方式。method属性只有两个可选值：get或post，没有极特殊情况的话使用post即可。
七、 表单项标签
表单中的每一项，包括：文本框、密码框、单选框、多选框等等，都称之为表单项，一个表单中可以包含多个表单项。
7.1 name和value属性
在各个具体的表单标签中，通过name属性来给数据起名字，通过value属性来保存要发送给服务器的值。
7.2 单行文本框
用户名<input type="text" name="username"/><br/>
7.3 密码框
密码<input type="password" name="pwd"/><br/>
7.4 单选框
性别<input type="radio" name="gender" value="male" checked="checked"/>男
<input type="radio" name="gender" value="female"/>女<br/>
7.5 多选框
兴趣爱好
<input type="checkbox" name="hobby" value="basketball"/>篮球
<input type="checkbox" name="hobby" value="football" checked/>足球
<input type="checkbox" name="hobby" value="pingpangball" checked/>乒乓球
<input type="checkbox" name="hobby" value="badminton"/>羽毛球
<br/>
7.6 下拉框
学历
<select name="education">
<option value="gz">高中</option>
<option value="zk">专科</option>
<option value="bk">本科</option>
<option value="ss">硕士</option>
<option value="bs">博士</option>
</select>
<br/>
7.7 按钮
<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<br/>
7.8 隐藏域
<!--隐藏域：通过隐藏域设置的表单不会显示在页面上，用户看不到。
但是在提交表单时会一起被提交。
-->
<input type="hidden" name="id" value="1"/>
7.9 多行文本框
<!--多行文本域-->
<textarea name="desc" rows="10" cols="50">
7.10 效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form action="http://www.baidu.com" method="post">
<!--
表单项的name属性，就是该表单项的数据的名字。
表单的value属性，如果表单是输入框，它的输入数据就是value；
如果是单选框或复选框需要手动设置value；
如果是按钮，就是按钮上的文字
有三种：
1. input 输入项：根据type属性的不同，可以分为不同的输入项
1. text：文本框，默认类型
2. password：密码框
3. radio：单选框。要求同一组单选框的name属性相同。checked属性表示默认选中。
4. checkbox：多选框。要求同一组的多选框的name属性相同。checked属性表示默认选中
5. button：表示普通按钮，不具备任何功能要结合JS一起使用。
6. submit：表示提交按钮，点击就能将表单提交给服务器
7. reset：表示重置按钮，点击就能重置表单
8. hidden：表示隐藏域，向服务器提交数据但是不在页面上显示出来
2. select 下拉框
其中的每一个option标签是一个选项。selected="selected"属性实现默认选中的效果
3. textarea 文本域
-->
用户名<input type="text" name="username"/><br/>
密码<input type="password" name="pwd"/><br/>
性别<input type="radio" name="gender" value="male" checked="checked"/>男
<input type="radio" name="gender" value="female"/>女<br/>
兴趣爱好
<input type="checkbox" name="hobby" value="basketball"/>篮球
<input type="checkbox" name="hobby" value="football" checked/>足球
<input type="checkbox" name="hobby" value="pingpangball" checked/>乒乓球
<input type="checkbox" name="hobby" value="badminton"/>羽毛球
<br/>
学历
<select name="education">
<option value="gz">高中</option>
<option value="zk">专科</option>
<option value="bk">本科</option>
<option value="ss">硕士</option>
<option value="bs">博士</option>
</select>
<br/>
<input type="button" value="普通按钮"/>
<br/>
<input type="submit" value="提交"/>
<br/>
<input type="reset" value="重置表单">
<br/>
<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<br/>
<!--隐藏域：通过隐藏域设置的表单不会显示在页面上，用户看不到。
但是在提交表单时会一起被提交。
-->
<input type="hidden" name="id" value="1"/>
<!--多行文本域-->
<textarea name="desc" rows="10" cols="50">
</textarea>
<br/>
</form>
</body>
</html>
页面效果如下：
![[附源码]SSM计算机毕业设计小锅米线点餐管理系统JAVA](https://img-blog.csdnimg.cn/ac89a3acf9cc4d7ca5c5d0c4abec4110.png)