- HTML5
1.1 HTML 介绍
HTML（超文本标记语言）是一种用于 Web 开发的标记语言，主要用来格式化和显示网页内容。可以将其视为一种文本文件，浏览器能够读取该文本文件并显示其中的内容。HTML支持多种元素（也称作标签），例如：使用单标签 <img> 插入图片，使用双标签 <html></html> 定义HTML文档的起始和结束。借助这些元素，我们可以在网页中嵌入图像、标题、段落等不同的内容，构建起网页的页面。以下是 HTML 的基本骨架：<!DOCTYPE html> <!-- 用来声明这是一个 HTML5 文档，而非其他格式的文档，一般位于文档的最前面 -->
<html> <!-- <html>、</html> 是一对双标签，用来标定该 HTML 文档的范围 --><head> <!-- <head>、</head> 标签用来包含文档的元数据，即关于网页本身的描述信息。这部分的内容通常不直接显示在网页上 -->
<meta charset="utf-8"> <!-- <meta> 用来提供网页的元信息，例如字符集、作者、关键词等。charset="utf-8" 代表网页字符集使用的是 UTF-8 字符集 -->
<title>我的网页</title> <!-- <title>、</title> 标签定义了网页的标题，即浏览器的标签栏显示的内容 -->
</head><body> <!-- <body>、</body> 标签包含网页的实际内容，即用户在浏览器中看到和互动的部分。这里包含所有展示内容，如文本、图片等 -->
</body></html>
1.2 标题元素
标题是通过 <h1>~<h6> 来定义的，<h1> 定义最大的标题，<h6> 用来定义最小的。可以用 h$*6 快捷键直接生成 <h1>~<h6> 。<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>我的网页</title>
</head><body> <h1>这是一个一级标题</h1><h2>这是一个二级标题</h2><h3>这是一个三级标题</h3> <h4>这是一个四级标题</h4><h5>这是一个五级标题</h5><h6>这是一个六级标题</h6>
</body></html>
示例效果：
每一个元素（标签），都有不同的属性可以设置，例如标题元素的 align 属性，我们可以通过设置 align 属性，来调整标题的位置，这个属性有三个可选的值 left | center | right。<!DOCTYPE html> <!-- 用来声明这是一个 HTML5 文档，而非其他格式的文档，一般位于文档的最前面 -->
<html> <!-- <html>、</html> 是一对双标签，用来标定该 HTML 文档的范围 --><head> <!-- <head>、</head> 标签用来包含文档的元数据，即关于网页本身的描述信息。这部分的内容通常不直接显示在网页上 -->
<meta charset="utf-8"> <!-- <meta> 用来提供网页的元信息，例如字符集、作者、关键词等。charset="utf-8" 代表网页字符集使用的是 UTF-8 字符集 -->
<title>我的网页</title> <!-- <title>、</title> 标签定义了网页的标题，即浏览器的标签栏显示的内容 -->
</head><body> <!-- <body>、</body> 标签包含网页的实际内容，即用户在浏览器中看到和互动的部分。这里包含所有展示内容，如文本、图片等 --> <h1 align="left">这是一个一级标题</h1><h2 align="left">这是一个二级标题</h2><h3 align="center">这是一个三级标题</h3> <h4 align="center">这是一个四级标题</h4><h5 align="right">这是一个五级标题</h5><h6 align="right">这是一个六级标题</h6> </body></html>
示例效果：
但是在实际应用中，我们一般用 CSS 来调整标题的位置和样式，一般不直接通过该属性来调整标题位置。
1.3 段落、换行、水平线
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>我的网页</title>
</head><body> <p>这是一段段落</p><p>这是另外一段段落</p> <p>这是换行标签<br>可以看到我们已经实现了换行</p> <!-- br是换行标签,是一个单标签,同时可以嵌套使用,例如嵌套在<p></p>的段落标签中使用 --> <hr> <!-- 水平线标签 -->
</body></html>
示例代码：
<hr color="" width="" size="" align="">
这里介绍四个很通用的属性
color="" 设置水平线的颜色
width="" 设置水平线的宽度，单位是像素（px）
size="" 设置水平线的高度，单位是像素（px）
align="" 设置水平线的位置<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>我的网页</title>
</head><body> <p>这是一段段落</p><p>这是另外一段段落</p> <p>这是换行标签<br>可以看到我们已经实现了换行</p> <!-- br是换行标签,是一个单标签,同时可以嵌套使用,例如嵌套在<p></p>的段落标签中使用 --> <hr color="red" width="200px" size="100px" align="center"> <!-- 水平线标签 -->
</body></html>
示例效果：
1.4 图片元素
图片是 HTML 中很重要的一个元素（标签），我们使用 <img> 来表示图片元素。这个标签有如下几个常用的属性：
-
src：路径，图片的路径。
-
alt：规定图像加载失败时的替代文本。
-
width：图像的宽度。
-
height：图像的高度。
-
title：鼠标悬停在图像上时的提示文本信息。
图片路径分为三种：绝对路径、相对路径和网络路径。绝对路径是从根目录开始的完整地址；相对路径通过 . 、… 等符号来表示当前目录或上一级目录的相对关系来定位图片；网络路径则是调用网络上的图片资源。
对应的三个例子：
- 绝对路径：/images/photo.jpg（从根目录开始，位于根目录下images文件夹中的photo.jpg图片）
- 相对路径：…/images/photo.jpg（当前目录的上一级目录下的images文件夹中的photo.jpg图片）
- 网络路径：https://example.com/images/photo.jpg（从网络地址example.com的images文件夹中调用photo.jpg图片）
1.5 超文本链接、文本
超文本链接 <a> </a> 的概念类似于快捷方式，我们可以通过点击超文本链接来快速的跳转到另外一个网站。在超文本链接中最常用的属性是 href 用来描述跳转的地址。当然，超链接的格式也可以是图片等其他格式。<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>我的网页</title>
</head><body> <p> 百度跳转超链接 </p><a href="https://www.baidu.com/"> 百度搜索 </a>
</body></html>
常用文本标签：
标签(都是双标签) 描述
轻微斜体，用来标记比较重点的文字
粗体
斜体
轻微粗体，一般用来表示加重语气
删除效果
无特殊含义，一般配合 CSS 使用
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>我的网页</title>
</head><body> <p> 文本标签示例： </p><p> em效果：<em> 着重文字（轻微斜体效果） </em> </p><p> b效果：<b> 粗体文字 </b> </p><p> i效果：<i> 斜体文字 </i> </p><p> strong效果：<strong> 加重语气 </strong> </p><p> del效果：<del> 删除字效果 </del> </p><p> span效果：<span> span文字 </span> </p>
</body></html>
文本与段落不同，但是我们可以嵌套使用两者。
1.6 有序列表、无序列表、表格
有序列表用 <ol>、</ol>、<li>、</li> 来表示，拥有 type 属性，该属性用来规定列表的格式：<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>我的网页</title>
</head><body> <ol type="1"> <!-- 阿拉伯数字列表 --><li > 第一行列表 </li><li> 第二行列表 </li><li> 第三行列表 </li><li> 第四行列表 </li><li> 第五行列表 </li></ol><ol type="a"> <!-- 小写字母列表 --><li > 第一行列表 </li><li> 第二行列表 </li><li> 第三行列表 </li><li> 第四行列表 </li><li> 第五行列表 </li></ol><ol type="A"> <!-- 大写字母列表 --><li > 第一行列表 </li><li> 第二行列表 </li><li> 第三行列表 </li><li> 第四行列表 </li><li> 第五行列表 </li></ol><ol type="i"> <!-- 小写罗马数字列表 --><li > 第一行列表 </li><li> 第二行列表 </li><li> 第三行列表 </li><li> 第四行列表 </li><li> 第五行列表 </li></ol><ol type="I"> <!-- 大写罗马数字列表 --><li > 第一行列表 </li><li> 第二行列表 </li><li> 第三行列表 </li><li> 第四行列表 </li><li> 第五行列表 </li></ol>
</body></html>
有序列表用 <ul>、</ul>、<li>、</li> 来表示，也拥有 type 属性：<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>我的网页</title>
</head><body> <ul type="disc"> <!-- 实心圆 --><li > 第一行列表 </li><li> 第二行列表 </li><li> 第三行列表 </li><li> 第四行列表 </li><li> 第五行列表 </li></ul><ul type="circle"> <!-- 空心圆 --><li > 第一行列表 </li><li> 第二行列表 </li><li> 第三行列表 </li><li> 第四行列表 </li><li> 第五行列表 </li></ul><ul type="square"> <!-- 小方块 --><li > 第一行列表 </li><li> 第二行列表 </li><li> 第三行列表 </li><li> 第四行列表 </li><li> 第五行列表 </li></ul><ul type="none"> <!-- 不显示 --><li > 第一行列表 </li><li> 第二行列表 </li><li> 第三行列表 </li><li> 第四行列表 </li><li> 第五行列表 </li></ul></body></html>
表格用 <table>、</table> 来表示，其中行用 <tr> 实现，列用 <td> 来实现。
表格的属性：
-
border：设置表格的边框。
-
width：设置表格宽度。
-
height：设置表格的高度。
我的网页 一行一列 一行二列 一行三列 二行一列 二行二列 二行三列
单元格合并：水平合并 colspan ，垂直合并 rowspan<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>我的网页</title>
</head><body>
<p> 合并 6 和 7 格子 </p>
<table align="center" border="10px"><tr><td>格子1</td><td>格子2</td><td>格子3</td><td>格子4</td><td>格子5</td></tr><tr><td colspan="2">格子6</td><td>格子8</td><td>格子9</td><td>格子10</td></tr><tr><td>格子11</td><td>格子12</td><td>格子13</td><td>格子14</td><td>格子15</td></tr><tr><td>格子16</td><td>格子17</td><td>格子18</td><td>格子19</td><td>格子20</td></tr><tr><td>格子21</td><td>格子22</td><td>格子23</td><td>格子24</td><td>格子25</td></tr>
</table></body></html>
1.7 表单
表单是用来给用户填写信息的，是让用户能够输入信息的重要元素。使用 <form> </form> 来表示。表单由容器和控件组成，例如按钮叫做控件，表单就是容器，它能够容纳各种控件。
表单的属性：
- action：服务器的地址，即用户输入的数据提交到哪里。
- name：表单的名称，识别不同的表单就是通过 name 识别的。
- method：有 get 和 post 两个值，决定了数据的提交方式。get 提交的数据 url 可以看到，但是 post 提交的数据 url 看不到，get 一般用于提交少量数据，post 一般用来提交大量数据。
表单有三个基本组成部分：表单标签（即 form 的 name）、表单域（输入框）、表单按钮（提交按钮）
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>我的网页</title>
</head><body><form> <input type="text"><input type="submit"><button> 提交按钮 </button></form></body></html>input 的 type 的值：
表单元素 描述
text 文本框
password 密码框，输入的文本不会直接显示
submit 提交，可以通过 value=“ … ” 来改变提交按钮上显示的文本信息
1.8 块元素与行内元素（内联元素）
块元素和内联元素的区别：
块元素 内联元素
独占一行，自上向下排列 不会单独占一行，只占自身的大小
可以设置 width ， height 属性 不可以设置 width ， height 属性
一般块级元素可以包含行内元素和其他块元素 一般内联元素可以包含内联元素，但包含不了块级元素
div、form、h1~h6、hr、p、table、ul a、b、em、i、span、strong等
但也有一些特例，button、img、input 等，他们是内联元素，他们可以设置 width ， height 属性
1.9 div等
<div> </div> 容器元素，该元素常用于划分网页的区域，使得我们的网页规划的更加清晰。我们一般配合 CSS 使用来划分网页。div，我们可以想象为一个一个盒子，用这些盒子来规划网页的分区。
div 的通用属性：
- id: 指定div元素的唯一标识符。
- class: 为div元素添加一个或多个类名，以便应用CSS样式。
- lang: 指定div元素中内容的语言。
- dir: 定义div元素中内容的文本方向，如ltr（从左到右）或rtl（从右到左）。
- title: 提供div元素的提示信息，通常显示为工具提示文本。
- data-*: 用于存储与div元素相关的自定义数据。
