概述
HTML（超文本标记语言—HyperText Markup Language）是构成 Web 世界的基础，是一种用来告知浏览器如何组织页面的标记语言。
超文本 Hypertext：指连接单个或多个网站间的网页链接，通过这些链接可以访问互联网中的内容。
标记 Markup：用于注明文本、图片等内容，以便在浏览器中正确显示，例如 <head>、<body> 等。
网页的构成
-
HTML：通常用来定义网页内容的含义和基本结构
-
CSS：通常用来描述网页的表现与展示效果
-
JavaScript：通常用来执行网页的功能与行为
组成
标签
HTML 页面由一系列的元素（elements）组成，而元素是使用标签创建的。
一对标签（tags）可以设置一段文字样式、添加一张图片或创建超链接等。
在 HTML 中，<h1> 标签表示标题，可以使用开始标签和结束标签包围文本内容，以标题形式显示。
<h1>开始学习 Java Web</h1>
<h2>二级标题</h2>
属性
HTML 标签可以拥有属性：
- 属性：属于标签，用于修饰标签，提供额外的效果。
- 定义：属性一般定义在起始标签内部。
- 格式：以 属性=属性值 的形式出现。
- 引号：属性值通常用 '' 或 "" 括起来，不加引号也是可以的（但不建议）。
例如：
<h1 align="center">开始学习 Java Web</h1>
在这个例子中，align 属性表示水平对齐方式，赋值为 center 表示 居中。
结构
文档结构包含以下几个主要部分：
1、文档声明：<!DOCTYPE html> 声明当前 HTML 版本，指示浏览器以 HTML5 渲染页面。
2、html 根标签：所有内容都需放在 <html> 标签内部。
3、文档头部配置：使用 <head> 标签定义页面的配置信息，包括外部文件引入和元数据。
- <meta charset="utf-8">：设置文档字符集为 UTF-8。
- <title>：定义文档标题，在浏览器标签中显示，并用于页面收藏。
4、文档显示内容：<body> 标签内的内容将在浏览器中显示。
HTML语法
注释方式
在 HTML 中，注释的语法是使用 <!-- 注释内容 -->。这段内容在浏览器中不会被显示，主要用于代码说明或记录。
<!-- <h1>hello world</h1> --><h1>hello world</h1>基本元素
空元素
一些元素只有一个标签，称为空元素。它们在开始标签中进行关闭。例如：
第一行文档<br/>
第二行文档<br/>
嵌套元素
将元素放置在其他元素内部的行为被称为嵌套。例如：
<h2><u>二级标题</u></h2>
块元素与行内元素
在 HTML 中，有两种重要的元素类别：块级元素和行内元素。
- 块级元素：独占一行。块级元素以块的形式展示，会导致换行。常见的块级元素包括 <p>、<hr>、<li>、<div> 等。
- 行内元素：不会导致换行。行内元素通常出现在块级元素内部，只环绕文档内容的一小部分。常见的行内元素有 <b>、<a>、<i>、<span> 等。
注意：块级元素不能嵌套在行内元素中，但可以嵌套在其他块级元素中。
常用标签
- <div>：一个通用的块级内容容器，没有特殊语义，通常用于分组和样式化。常用属性包括 id、style 和 class。
- <span>：一个通用的行内内容容器，也没有特殊语义，常用于对元素进行样式处理。
基本属性
标签属性用于扩展标签，提供额外信息，不会直接出现在内容中，但可以改变标签的行为或提供数据。属性总是以 name="value" 的格式展示。
属性规则
- 属性名：同一标签中，属性名不得重复。
- 大小写：属性和属性值对大小写不敏感。建议使用小写。
- 引号：双引号最常用，但单引号也可以。
常用属性
| 属性名 | 作用 |
|---|---|
| class | 定义元素类名，用于选择和访问特定元素 |
| id | 定义元素唯一标识符，在整个文档中必须唯一 |
| name | 定义元素名称，可用于提交表单的字段 |
| value | 定义元素内显示的默认值 |
| style | 定义CSS样式，覆盖之前设置的样式 |
特殊字符
在HTML中，某些字符具有特殊含义，因此需要使用字符实体来表示。
| 原义字符 | 等价字符引用 |
|---|---|
| < | < |
| > | > |
| " | " |
| ' | ' |
| & | & |
| 空格 | |
文本标签
文本内容标签用于设置文字的基本样式和结构。
| 标签名 | 作用 |
|---|---|
| p | 表示文本的一个段落 |
| h | 表示文档标题，<h1>–<h6>，呈现六个不同的级别的标题 |
| hr | 表示段落级元素之间的主题转换，通常显示为水平线 |
| li | 表示列表里的条目，常用于 ul 和 ol |
| ul | 表示无序列表，可包含多个元素，无编号显示 |
| ol | 表示有序列表，通常渲染为带编号的列表 |
| em | 表示文本着重，通常用斜体显示 |
| strong | 表示文本重要性，通常用粗体显示 |
| i | 表示斜体 |
| b | 表示加粗文本 |
使用文本标签的效果示例
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>文本标签示例</title>
</head>
<body><h1>这是主标题</h1>
<p>这是一个段落，包含 <strong>重要信息</strong> 和 <em>强调文本</em>。</p>
<hr>
<h2>这是副标题</h2>
<p>以下是一个无序列表：</p>
<ul><li>无序列表项 1</li><li>无序列表项 2</li><li>无序列表项 3</li>
</ul>
<p>以下是一个有序列表：</p>
<ol><li>有序列表项 1</li><li>有序列表项 2</li><li>有序列表项 3</li>
</ol><p>这是 <i>斜体文本</i> 和 <b>加粗文本</b> 的示例。</p></body>
</html>
图片标签
<img> 标签用于在网页中显示图片。以下是使用该标签的示例及其属性说明：
<img src="../img/b.jpg" width="400" height="200" alt="描述文本" title="悬停提示文本" />
属性说明
| 属性名 | 作用 |
|---|---|
| src | 指定图片的路径。 |
| title | 鼠标悬停时显示的提示文本。 |
| alt | 图片无法显示时的替代文本描述。 |
| height | 指定图片的高度。 |
| width | 指定图片的宽度。 |
超链接标签
超链接使用 <a> 标签，主要用于实现页面之间的跳转。以下是基本用法示例：
<a href="https://www.baidu.com/" target="_blank" title="点击访问示例网站">访问示例网站</a>属性说明
| 属性名 | 作用 |
|---|---|
| href | 指定链接目标的URL。 |
| target | 指定链接打开的方式（如新窗口或同窗口）。 |
| title | 鼠标悬停时显示的提示文本。 |
表单标签
表单概述
<form> 标签是一个用于收集用户输入并提交给 Web 服务器的容器。
<form><!-- 表单元素 -->
</form>
常用属性：
- action：指定表单提交的 URL。
- method：提交方式，常见值为 GET 和 POST。
- autocomplete：自动补全输入内容。
GET 和 POST 的区别
- GET：数据附加在 URL 中，适合获取数据；不安全且有长度限制。
- POST：数据在表单体中，适合传输敏感或大量数据；较安全且无大小限制。
表单元素
常用的表单元素标签包括：
| 标签名 | 作用 | 备注 |
|---|---|---|
| label | 表单元素的说明，配合表单元素使用 | for属性值为相关表单元素id属性值 |
| input | 表单中输入控件，多种输入类型，用于接受来自用户数据 | type属性值决定输入类型 |
| button | 页面中可点击的按钮，可以配合表单进行提交 | type属性值决定按钮类型 |
| select | 表单的控件，下拉选项菜单 | 与option配合实用 |
| optgroup | option的分组标签 | 与option配合实用 |
| option | select的子标签，表示一个选项 | |
| textarea | 表示多行纯文本编辑控件 | |
| fieldset | 用来对表单中的控制元素进行分组(也包括 label 元素) | |
| legend | 用于表示它的fieldset内容的标题。 | fieldset 的子元素 |
按钮控件
<button> 标签通过 type 属性控制行为：
- button：自定义按钮。
- submit：提交表单。
- reset：重置表单。
输入控件 <input>
在HTML表单中，input控件的type属性是最重要的设置之一。不同的type属性值对应不同的输入字段类型，决定了用户如何输入数据以及浏览器如何展示控件。
输入控件基本概念
- label标签：用于描述表单字段。for属性与input标签的id属性相对应，确保点击标签时焦点跳转到对应的输入框。
- input标签：定义用户可以输入数据的区域。可通过不同的type属性，设定不同的输入方式。
input标签常见属性
- type: 指定输入类型，如text、password、email等。
- id: 该元素的唯一标识符，通常与label的for属性配合使用。
- name: 该字段在提交时的名称，表单数据以键值对的形式提交，name是键。
- value: 定义输入字段的初始值。
- placeholder: 显示提示文本，当输入为空时出现。
- required: 该字段是否为必填项。
- readonly: 是否只读，用户无法修改输入框内容。
- disabled: 禁用输入框，用户无法操作且值不会提交到服务器。
- autocomplete: 控制是否开启自动补全功能，可设为off关闭。
n-v属性
表单提交时，使用name属性作为键，value属性作为值，多个键值对以&符号分隔，传递到服务器。
常见的type属性值
| 属性值 | 作用 | 示例或说明 |
|---|---|---|
text | 单行文本输入 | 用于普通文本输入 |
password | 密码输入，遮挡输入内容 | 仅显示掩码而非真实字符 |
email | 电子邮件输入 | 会进行简单的邮箱格式验证 |
radio | 单选按钮 | 在同一组中只能选择一个 |
checkbox | 复选框 | 可以多选，提交时数据为数组 |
date | 日期选择 | 包含年、月、日 |
time | 时间选择 | 仅包含小时和分钟 |
datetime-local | 日期时间选择，不含时区 | 包含年、月、日、时间 |
number | 数字输入 | 允许输入浮点数 |
range | 范围选择 | 可设定最大值、最小值、步长等 |
tel | 电话号码输入 | 支持电话号码格式 |
url | URL输入 | 自动校验URL格式 |
file | 文件上传 | 支持文件选择和上传 |
hidden | 隐藏字段，用户不可见 | 用于传递隐藏数据 |
选择控件
<select>标签用于创建下拉列表，允许用户从预定义的选项中选择一个值。每个选项由<option>标签定义。
<select name=""><option value="">显示的内容</option>
</select>
选择控件元素
- <option>：表示列表中的每个选项。value属性定义选中该选项时提交的值，而option标签内的文本为用户界面上显示的内容。
- <optgroup>：用于将下拉列表中的选项进行分组，分组名由label属性指定。
文本域控件
<textarea>标签用于创建多行文本输入框，允许用户输入大量文本。
<textarea name="textarea" rows="10" cols="50">Write something here</textarea>
文本域属性
- name: 提交时该文本域的名称。
- rows: 文本域的行数。
- cols: 文本域的列数，控制宽度。
分组控件
<fieldset>标签用于将表单中的元素分组，通常与<legend>标签一起使用，为组提供一个标题。它可以帮助对表单进行逻辑分割，提高可读性。
分组控件元素
- <fieldset>: 定义一组表单控件。
- <legend>: 为控件组提供一个标题。
- <input>: 使用单选按钮提供“同意”或“不同意”选择。
表格标签
在 HTML 中，表格标签 <table> 用于显示结构化的数据，表格由行（<tr>）和单元格（<td> 或 <th>）组成。
基本属性
- <table>: 定义表格容器。
- <tr>: 表示表格中的一行（table row）。
- <td>: 表格中的单元格（table data）。
- <th>: 表头单元格（table header），用于标题栏，通常字体加粗且居中显示。
表格结构
表格结构标签可分为表头（<thead>）、表主体（<tbody>）、表尾（<tfoot>），它们有助于逻辑分割表格内容，提升可读性与布局管理。
| 标签名 | 作用 | 备注 |
|---|---|---|
<thead> | 定义表格的列头的行 | 一个表格中仅有一个 |
<tbody> | 定义表格的主体 | 用来封装一组表行（<tr>） |
<tfoot> | 定义表格的各列汇总行 | 一个表格中仅有一个 |
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><title>示例</title>
</head><body><table><thead><tr><th>产品</th><th>价格</th><th>库存</th></tr></thead><tbody><tr><td>手机</td><td>5000元</td><td>200</td></tr><tr><td>笔记本</td><td>8000元</td><td>100</td></tr></tbody><tfoot><tr><td>合计</td><td colspan="2">库存总量：300</td></tr></tfoot></table></body></html>跨行跨列
跨行和跨列可以使用以下属性：
- rowspan：定义跨行的单元格数。
- colspan：定义跨列的单元格数。
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><title>示例</title>
</head><body><table width="400px" border="1px" align="center"><thead><tr><th>姓名</th><th>性别</th><th>年龄</th><th>数学</th><th>语文</th></tr></thead><tbody><tr align="center"><td>张三</td><td rowspan="2">男</td> <!-- 性别跨两行 --><td>23</td><td colspan="2">90</td> <!-- 数学成绩跨两列 --></tr><tr align="center"><td>李四</td><td>24</td><td>95</td><td>98</td></tr></tbody><tfoot><tr><td colspan="4">总分数：</td> <!-- 合并四列 --><td>373</td></tr></tfoot></table></body></html>样式布局与 div 标签使用
基本格式
在 HTML 中，样式通常放置在 <head> 标签中，使用 <style> 标签包裹样式规则。每个标签的样式可以通过选择器定义不同的样式属性。
<style>标签名 {属性名1: 属性值1;属性名2: 属性值2;属性名3: 属性值3;}
</style>
背景格式
背景颜色 (background-color)：用于设置元素的背景颜色。
body {background-color: #567895;
}
背景图片 (background-image)：通过 url() 函数指定图片路径，将图片作为背景。
body {background-image: url("path-to-image/bg.png");
}
背景重复 (background-repeat)：控制背景图片是否平铺，以及平铺的方向。
body {background-image: url("star.png");background-repeat: repeat-x; /* 水平重复 */
}
可选值：
- no-repeat：不重复背景
- repeat-x：水平重复
- repeat-y：垂直重复
- repeat：双向重复（默认）
div 布局
简单边框布局：为 div 标签设置边框。
使用 class 属性布局：通过 class 属性为 div 标签添加多个样式属性，如宽度、浮动、背景等。
浮动布局：使用 float 属性让元素沿左边或右边浮动，从而实现流体布局。
float: left; /* 左浮动 */
float: right; /* 右浮动 */
使用 clear 清除浮动，避免浮动对页面其他部分的影响：
clear: both;
div 的基本布局示例
语义化标签
HTML5 中引入了语义化标签，这些标签不仅帮助开发者组织和理解页面结构，还能让搜索引擎和辅助技术更好地解析页面的内容。
| 标签 | 名称 | 作用 | 备注 |
|---|---|---|---|
| header | 标头元素 | 表示内容的介绍或标题部分 | 块级元素，一个文档中可以定义多个 header 标签 |
| nav | 导航元素 | 表示页面中的导航链接 | 用于定义导航栏，通常包含菜单或目录，可嵌套在 header 中 |
| article | 文章元素 | 表示独立的内容区域 | 独立的可重用内容块，常用于文章、博客、新闻条目等 |
| footer | 页脚元素 | 表示页面或内容的底部信息 | 定义文档或部分的页脚，可以包含版权声明、相关链接等 |
语义化标签的作用
- 增强可读性：通过使用语义化标签，代码结构更清晰，其他开发者能够更容易理解页面结构。
- SEO 优化：搜索引擎更好地解析语义化标签，从而提升页面的搜索排名。
- 可访问性增强：语义化标签帮助屏幕阅读器等辅助技术更好地解读页面内容，提升可访问性。
HTML拓展
音频标签
<audio> 标签用于在网页中嵌入音频，是 HTML5 引入的新标签。
常用属性：
| 属性名 | 取值 | 描述 |
|---|---|---|
| src | URL | 音频资源的路径 |
| autoplay | autoplay | 音频准备就绪后自动播放 |
| controls | controls | 显示播放控件（播放、暂停等按钮） |
| loop | loop | 音频循环播放 |
| preload | preload | 音频在页面加载时预加载；如果使用 "autoplay"，则忽略该属性。 |
示例：
视频标签
<video> 标签用于在网页中嵌入视频，同样是 HTML5 引入的新标签。
常用属性：
| 属性名 | 取值 | 描述 |
|---|---|---|
| src | URL | 要播放的视频的 URL。 |
| width | 设置视频播放器的宽度。 | |
| height | 设置视频播放器的高度。 | |
| autoplay | autoplay | 视频在加载后自动播放。 |
| controls | controls | 显示播放控件。 |
| loop | loop | 视频循环播放。 |
| preload | preload | 视频在页面加载时预加载。<br />如果使用 "autoplay"，则忽略该属性。 |
| muted | muted | 静音播放。 |
| poster | URL | 视频加载时显示的封面图片。 |
示例：
回到顶部
在 HTML 中，使用锚点可以实现页面内的跳转，如“回到顶部”的功能。
示例：
详情与概要标签 <details> 和 <summary>
<summary> 标签用于描述概要信息，<details> 标签用于显示隐藏的详细信息。默认情况下，详情是折叠的，需要点击查看。
示例：
