一、初识HTML
1、什么是HTML
HTML中文名叫做“超文本标记语言”，是一种用于创建网页的标准标记语言。超文本的意思就是不止是文本，还可以包含图片，链接，音乐，甚至程序等非文字元素。通过一系列 “标签” 来描述网页结构和内容的呈现方式，使得浏览器读取 HTML 文档后，按照标签含义将内容显示出来。
2、HTML的结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页标题</title>
</head>
<body>
<h1>页面内容</h1>
</body>
</html>标准的超文本标记语言文件都具有一个基本的整体结构，标记一般都是成对出现，即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有二个双标记符用于页面整体结构的确认。
<!DOCTYPE html>——HTML文档类型声明，用于告知浏览器当前文档使用HTML标准编写。
<html>——HTML 文档的根标签，所有其他 HTML 元素都包含在这个标签内，它表示整个 HTML 文档的开始。
</html>——是 HTML 文档根标签的结束标签，表示整个 HTML 文档的结束。
<head>——头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页只显示的效果。
</head>——头部信息的结尾。
<meta charset="utf-8">——是一个元数据标签，用于指定文档的字符编码为 UTF-8。UTF-8 是一种通用的字符编码格式，它可以支持几乎所有的字符，确保页面能够正确显示各种语言和特殊字符。
<body>——定义了 HTML 文档的主体部分，包含了网页中所有可见的内容，如文本、图片、链接、视频等，是网页内容实际展示的区域。
</body>——主体部分的结尾。
3、HTML dom树
HTML DOM（Document Object Model）树是指HTML文档的对象模型，它在内存中被创建以便对文档进行动态操作。DOM 提供了一种结构化的方式，将 HTML 文档表示为树状结构，其中每个 HTML 元素都被表示为树中的一个节点。
HTML DOM 树的主要组成部分：
文档节点（Document Node）： 整个 HTML 文档是根节点，它包含了所有的 HTML 元素。
元素节点（Element Node）： HTML 文档中的每个 HTML 元素都被表示为一个元素节点，例如<p>、<div>、<a> 等。
文本节点（Text Node）： HTML 文档中的文本内容被表示为文本节点，例如元素内的文本、属性值等。
属性节点（Attribute Node）： HTML 元素的属性被表示为属性节点，例如元素的 id、class、src 等。
DOM 树的结构反映了 HTML 文档的层次结构。每个元素节点都有父节点和可能的子节点。根据 HTML 文档的嵌套关系，DOM 树的节点之间形成了父子关系、兄弟关系等。
二、HTML 标题元素
标题（Heading）是通过 <h1> - <h6> 标签进行定义的。
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>输出网页后，我们会看到：
三、HTML 文本元素
1、段落文本
段落是通过 <p> 标签定义的。
浏览器会自动地在段落的前后添加空行
2、文本格式化
加粗文本使用b标签展示，
斜体文本使用i标签展示，
展示下标用sub标签，上标用sup标签。
举个例子吧：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>物理公式</title>
</head>
<body>
<h1>自由落体公式</h1>
<h2><i>h</i><b>=</b>1/2gt<sup>2</sup></h2>
</body>
</html>
输出得到：
四、HTML 链接元素
1、什么是链接
HTML 使用超级链接与网络上的另一个文档相连。
HTML中的链接是一种用于在不同网页之间导航的元素。
链接通常用于将一个网页与另一个网页或资源（如文档、图像、音频文件等）相关联。
链接允许用户在浏览网页时单击文本或图像来跳转到其他位置，从而实现网页之间的互联。
2、链接的语法
<a href="目标地址" target="打开方式" title="提示信息" rel="链接关系">链接文本或元素</a>href：指定链接目标的URL
target（可选）：指定链接如何在浏览器中打开。常见的值包括 _blank（在新标签或窗口中打开链接）和 _self（在当前标签或窗口中打开链接）。
title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。
rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。
比如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关注永雏塔菲谢谢喵</title>
</head>
<body>
<a href="https://mzh.moegirl.org.cn/永雏塔菲" target="_blank">关于永雏塔菲</a>
<br>
<a href="https://space.bilibili.com/1265680561" target="_blank">永雏塔菲的个人空间</a>
</body>
</html>就得到了相应页面，点击超链接也能进行跳转
五、HTML注释元素
在 HTML 中，注释的开始标签是 <!--，结束标签是 -->。在编写 HTML 代码时，有时代码逻辑可能较为复杂，通过添加注释可以清晰地说明代码的功能和实现思路。
六、HTML内联样式
HTML CSS（层叠样式表）：通过设置style属性来设置标签的样式
常用CSS样式：
背景颜色：background-color
字体颜色 ，字体大小：color（颜色），和font-size（字体大小）
文本对齐方式：text-align（left,center,right）
如果要在一行添加多项样式，用分号隔开就行。
举个栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>奶龙</title>
</head>
<body>
<div style="width: 1000px;height: 1000px">
<h1 style="color:black;text-align: center">奶龙</h1>
<p style="font-size:20px;color:black">奶龙是注册商标《奶龙》及其衍生作品中的主角。
它是一只拥有“duangduang”大肚子的异星幼龙，呆萌可爱又带点小机灵的大吃货一枚。
来到地球遇到了活泼搞笑、富有正义感、酷爱发明的中国少年小七，一人一龙一拍即合，
迅速成为好友并开启了搞笑冒险之旅。持续给观众和粉丝们带来快乐和勇气。</p>
</div>
</body>
</html>结果是：
有点画蛇添足了，其实背景默认是白色，字体颜色默认也是黑色....就这样吧
七、HTML img元素
图像标签（ <img>）和源属性（Src）常用CSS样式：
在 HTML 中，图像由<img> 标签定义。
要在页面上显示图像，你需要使用源属性（src）。
alt 属性用来为图像定义一串预备的可替换的文本。
height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。
style属性中可以设置填充模式()：
fill：默认值。图片将完全填充容器，可能会被拉伸或挤压，以适应容器的尺寸。
contain：图片将在容器内等比例缩放，以确保整个图片都能完全显示在容器内，可能会在容器内留有空白。
cover：图片将在容器内等比例缩放，以确保整个容器都被图片覆盖，可能会裁切图片。
none：图片将保持原始尺寸，不会进行缩放或拉伸，可能会超出容器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>永雏塔菲</title>
</head>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid white;
}
</style>
<body>
<div>
<img style=
"width: 200px;
height: 200px;
object-fit: cover;"
src="https://ts1.cn.mm.bing.net/th/id/R-C.1268dfc05757922fb23e2e2a3968fc6f?rik=4h6D2sBz6+Zn0A&riu=http://i1.hdslb.com/bfs/archive/337c133d1f965900212c827093ba9cf41fa19065.jpg&ehk=hmIY4nFATi9hveykfjkOHoyY+JPSGpFUprkm4yyl49g=&risl=&pid=ImgRaw&r=0">
</div>
</body>
</html>相应结果是
八、HTML Table元素
1、表格的语法
HTML表格：是一种用于展示结构化数据的标记语言元素。由 <table> 标签来定义。
<tr>：tr 是 table row 的缩写，表示表格的一行。
<td>：td 是 table data 的缩写，表示表格的数据单元格。
<th>：th 是 table header的缩写，表示表格的表头单元格。
<caption>：给table设置一个标题。
给table设置border属性，表格将显示边框。
给table设置cellpadding属性，创建单元格内容与其边框之间的空白。
给table设置cellspacing属性，增加单元格之间的距离。
<table>
<thead>
<tr>
<th>列标题1</th>
<th>列标题2</th>
<th>列标题3</th>
</tr>
</thead>
<tbody>
<tr>
<td>行1，列1</td>
<td>行1，列2</td>
<td>行1，列3</td>
</tr>
<tr>
<td>行2，列1</td>
<td>行2，列2</td>
<td>行2，列3</td>
</tr>
</tbody>
</table>border、cellpadding、cellspacing属性的设置在<table>里，我仍然举个我课表的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<table border="1" cellpadding="5" cellspacing="10">
<caption>2025年我的上学期课表</caption>
<thead>
<tr>
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr>
<th>1、2</th>
<th>高等数学A（下）</th>
<th></th>
<th>大学体育（下)</th>
<th></th>
<th>高等数学A（下）</th>
</tr>
<tr>
<th>3、4</th>
<th>思想政治理论课实践教学</th>
<th>通用学术英语2</th>
<th>高等数学A（下）</th>
<th>大学物理C（上）</th>
<th></th>
</tr>
<tr>
<th>5、6</th>
<th>大学物理C（上）</th>
<th></th>
<th>思想道德与法治</th>
<th>通用学术英语2</th>
<th>大学生心理健康教育</th>
</tr>
<tr>
<th>7、8</th>
<th></th>
<th>线性代数</th>
<th></th>
<th>日语2</th>
<th></th>
</tr>
<tr>
<th>9、10</th>
<th>国家安全教育</th>
<th>习网络强国重要思想概论</th>
<th></th>
<th>线性代数</th>
<th></th>
</tr>
<tr>
<th>11、12</th>
<th></th>
<th>工程伦理</th>
<th></th>
<th></th>
<th></th>
</tr>
</tbody>
</table>
</body>
</html>结果是：
九、HTML 有序列表与无序列表
HTML 支持有序、无序和定义列表，列表也支持嵌套使用。
1、有序列表
使用<ol>和<li>标签来定义,并可以直接使用 type 属性来设置样式。
A：大写字母列表
a：小写字母列表
I：罗马数字列表
i：小写罗马数字列表
2、无序列表
使用<ul>和<li>标签来定义，并可以通过style中的list-style-type来设置样式。
disc：原点样式
circle：空心圈样式
square：正方形样式
创建一个有序列表吧！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>如何毁掉自己的人生</h1>
<ol type="i">
<li>对编程感兴趣</li>
<li>高考完填报计算机专业</li>
<li>学习各种语言</li>
<li>每天赛博搬砖</li>
</ol>
</body>
</html>
十、HTML 区块元素和内联元素
大多数 HTML 元素被定义为块级元素或内联元素。
float属性：通过浮动可以使一个元素向父元素的左侧或右侧移动。可以应用于任何块级元素、行内元素以及行内块元素。
1、块级元素
在浏览器显示时，通常会以新行来开始。
<div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
2、内联元素
在显示时通常不会以新行开始。
<span>元素是内联元素，可用作文本的容器。
以块级元素举例：
<!DOCTYPE html>
<html>
<style>
div{
text-align: left;
}
.container{
width: 400px;
height: 400px;
}
.first{
width: 100%;
height: 50px;
background-color: purple;
}
.second{
width: 100%;
height: 50px;
background-color: greenyellow;
}
.third{
width: 100%;
height: 50px;
background-color: mediumpurple;
}
.fourth{
width: 100%;
height: 50px;
background-color: wheat;
}
</style>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>柚子社四大名著</h1>
<div class="container">
<div class="first" style="color: white">魔女的夜宴</div>
<div class="second" style="color: white">千恋万花</div>
<div class="third" style="color: white">Riddle Joker</div>
<div class="fourth" style="color: white">星光咖啡馆与死神之蝶</div>
</div>
</body>
</html>
十一、HTML 表单元素
表单用于收集用户的输入信息，通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。
<form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法(通常有get、post等)
<label> 元素用于为表单元素添加标签。
<input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段，required可以指定当前输入是否必填。
常见的type有以下：
text：文本域，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
password：密码字段。
radio：单选按钮。
checkbox：复选框
Submit：提交按钮，当用户单击确认按钮时，表单的内容会被传送到action 属性指定的服务器。
<select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。
正经地写一个登录界面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="#" method="post">
<label for="username">
用户名:
<input type="text" id="username" name="username">
</label>
<br>
<label for="password">
密码:
<input type="password" id="password" name="password">
</label>
<br>
<input type="submit" value="登录">
</form>
</body>
</html>
当然，你也可以用上一些type，让页面更丰富：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单登录页面</title>
</head>
<body>
<form action="#" method="post">
<label for="username">
用户名:
</label>
<input type="text" id="username" name="username">
<br>
<label for="password">
密码:
</label>
<input type="password" id="password" name="password">
<br>
<label>
性别:
</label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">
男
</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">
女
</label>
<br>
<input type="checkbox" id="check" name="check" checked>
<label for="check">同意遵守规则</label>
<br>
<input type="submit" value="提交">
</form>
</body>
</html>
就这样吧，接下来轮到CSS了...!
