HTML概述
HTML是开发一切网页的基础，如果我们需要开发网页，我们就需要了解HTML的基础知识，但HTML的基础知识并不会很多
标签分类
HTML的程序由许多标签组成有的标签为双标签，有的标签为单标签
双标签：比如<head></head>和<title></title>就是双标签，由一个标签开始，最后由一个标签结束，在这两者范围内就是这个双标签所有的内容
单标签：比如<input>就是单标签，不需要设置一个结束标签，单个标签就能表示部分内容
标签之间的关系
父子关系
<head>
<title>Document</title>
</head>一个标签的整体在另外一个标签中，这种标签关系被称为父子关系
兄弟关系
<head>
</head>
<body>
</body>两个标签都在一个标签的范围内，并且两个标签都为这个标签的儿子标签，并不是孙子标签，那么称这两个标签为兄弟标签
HTML的基本结构
以下为HTML的基本结构
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的内容，主体
</body>
</html>标签的解释
| <html></html> | 文档的根 |
| <head></head> | 文档的头部 |
| <title></title> | 网页的标题 |
| <body></body> | 文档的主题 |
文档的运行结果
快速生成文档的基本骨架
ctrl+/演示结果如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>我们来分析一下这里比我的基础框架要多的元素
!DOCTYPE文档类型声明：用来告诉浏览器我们的文档需要用哪种方式解析，不同的文档需要不同的解析方式!DOCTYPE不是html的内容，也不是标签，只是为浏览器指明以何种方式解析文档
lang=”en“语言识别种类：这里的lang原型是language，en的原型是english，用于识别页面的种类
<meta charset="UTF-8">字符集：指明解码方式
标题标签
标题标签一般是使用<h+n></h+n>，其中n是指标题标签的等级，等级越低，对应的标签越大，等级从1到6一共有6个等级
我们来使用一段代码来演示一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>我是标题一</h1>
<h2>我是标题二</h2>
<h3>我是标题三</h3>
<h4>我是标题四</h4>
<h5>我是标题五</h5>
<h6>我是标题六</h6>
</body>
</html>演示结果为
我们可以看出，这里随n的增大标题的大小逐渐减小
段落标签与换行标签
段落标签是一个双标签：<p></p>，换行标签是一个单标签</br>
我们来输入一段文本来演示一下
<p></p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
望着测验魔石碑上面闪亮得甚至有些刺眼的五个大字，少年面无表情，唇角有着一
抹自嘲，紧握的手掌，因为大力，而导致略微尖锐的指甲深深的刺进了掌心之中，带来一阵阵钻心的疼痛…
“萧炎，斗之力，三段！级别：低级！”测验魔石碑之旁，一位中年男子，看了一眼碑上所显示出来的信息，语气漠然的将之公布了出来…
中年男子话刚刚脱口，便是不出意外的在人头汹涌的广场上带起了一阵嘲讽的骚动。
“三段？嘿嘿，果然不出我所料，这个“天才”这一年又是在原地踏步！”
“哎，这废物真是把家族的脸都给丢光了。”
“要不是族长是他的父亲，这种废物，早就被驱赶出家族，任其自生自灭了，哪还有机会待在家族中白吃白喝。”
“唉，昔年那名闻乌坦城的天才少年，如今怎么落魄成这般模样了啊？”
“谁知道呢，或许做了什么亏心事，惹得神灵降怒了吧…”
周围传来的不屑嘲笑以及惋惜轻叹，落在那如木桩待在原地的少年耳中，恍如一根根利刺狠狠的扎在心脏一般，让得少年呼吸微微急促。
少年缓缓抬起头来，露出一张有些清秀的稚嫩脸庞，漆黑的眸子木然的在周围那些嘲讽的同龄人身上扫过，少年嘴角的自嘲，似乎变得更加苦涩了
</body>
</html>在html中的文本是没有换行的，都被转换成了空格
演示结果
我们使用<p></p>为文本加上段落再看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>望着测验魔石碑上面闪亮得甚至有些刺眼的五个大字，少年面无表情，唇角有着一</p>
<p>抹自嘲，紧握的手掌，因为大力，而导致略微尖锐的指甲深深的刺进了掌心之中，带来一阵阵钻心的疼痛…</p>
<p>“萧炎，斗之力，三段！级别：低级！”测验魔石碑之旁，一位中年男子，看了一眼碑上所显示出来的信息，语气漠然的将之公布了出来…</p>
<p>中年男子话刚刚脱口，便是不出意外的在人头汹涌的广场上带起了一阵嘲讽的骚动。</p>
<p>“三段？嘿嘿，果然不出我所料，这个“天才”这一年又是在原地踏步！”</p>
<p>“哎，这废物真是把家族的脸都给丢光了。”</p>
<p>“要不是族长是他的父亲，这种废物，早就被驱赶出家族，任其自生自灭了，哪还有机会待在家族中白吃白喝。”</p>
<p>“唉，昔年那名闻乌坦城的天才少年，如今怎么落魄成这般模样了啊？”</p>
<p>“谁知道呢，或许做了什么亏心事，惹得神灵降怒了吧…”</p>
<p>周围传来的不屑嘲笑以及惋惜轻叹，落在那如木桩待在原地的少年耳中，恍如一根根利刺狠狠的扎在心脏一般，让得少年呼吸微微急促。</p>
</body>
</html>演示结果
<br/>
<br/>可以作为单标签直接插在文本中，让文本实现换行
演示代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<p>
<p>望着测验魔石碑上面闪亮得甚至有些刺眼的五个大字，少年面无表情，唇角有着一</p>
<p>抹自嘲，紧握的手掌，因为大力，而导致略微尖锐的指甲深深的刺进了掌心之中，带来一阵阵钻心的疼痛…</p>
<p>“萧炎，斗之力，三段！级别：低级！”测验魔石碑之旁，一位中年男子，看了一眼碑上所显示出来的信息，语气漠然的将之公布了出来…</p>
<p>中年男子话刚刚脱口，便是不出意外的在人头汹涌的广场上带起了一阵嘲讽的骚动。</p>
<p>“三段？嘿嘿，果然不出我所料，这个“天才”这一年又是在原地踏步！”</p>
<p>“哎，这废物真是把家族的脸都给丢光了。”</p>
<p>“要不是族长是他的父亲，这种废物，早就被驱<br/>赶出家族，任其自生自灭了，哪还有机会待在家族中白吃白喝。”</p>
<p>“唉，昔年那名闻乌坦城的天才少年，如今怎么<br/>落魄成这般模样了啊？”</p>
<p>“谁知道呢，或许做了什么亏心事，惹得神灵降怒了吧…”</p>
<p>周围传来的不屑嘲笑以及惋惜轻叹，落在那如木桩待在原地的少年耳<br/>中，恍如一根根利刺狠狠的扎在心脏一般，让得少年呼吸微微急促。</p>
</body>
</html>演示结果
在红色方框中，我们可以看到文本实现了换行
文本格式化标签
有四种文本格式化标签
| 标签名 | 功能 |
| <strong></strong>或<b></b> | 加粗 |
| <em></em>或<i></i> | 倾斜 |
| <del></del>或<s></s> | 删除线 |
| <ins></ins>或<u></u> | 下划线 |
演示代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<p><strong>这是下划线标签</strong></p>
<p><em>这是倾斜标签</em></p>
<p><del>这是下划线标签</del></p>
<p><ins>这是下划线标签</ins></p>
</body>
</html>演示结果
用于布局的标签
<div></div>和<span></span>
<div></div>：被标签包含的文字会选择在下一行开始独占一行
<span></span>：被此标签包含的文字会与前面的文字连接起来，但它们两段文字之间仍然存在空格
演示代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
这是一段文字
<div>这是被div包含的文字</div>
这是一段文字<span>这是被span包含的文字</span>这是一段文字
</body>
</html>演示结果
这两个标签现在还没有很大的价值，需要学到后面的CSS它们的价值才会得到体现
图像标签
图像标签用于在网页中安插图片，图像标签的原型为
<img src="URL">URL为图像的路径，路径种类分为：网络路径，相对路径，绝对路径
网络路径
当我们在浏览器中搜索一张图片时，我们可以复制它的图片路径，再将路径添加到代码中，那么我们的网页就可以加载这张图片
演示代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.z1Nx7Pdmjjh8pXUivik29gHaEh?w=308&h=187&c=7&r=0&o=5&dpr=1.5&pid=1.7">
</body>
</html>演示结果
我们的网页加载出了一张图片，这张图片就是我从网上找的地址
相对路径
在我们的文件当中有两个隐藏的文件分别是：./和../
./：表示当前目录的路径
../：表示上一个目录的路径
当我们工作目录下有我们需要的图片，那么我们只需要用相对路径就可以了
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./DM_20250318115412_001.png">
</body>
</html>演示结果
我们的网页加载了一张我们当前目录下存储的图片
绝对路径
绝对路径就是我们的图片在我们计算机磁盘当中的准确位置
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="C:\Users\27295\fcode1\微信图片_20250506142012.png">
</body>
</html>演示结果
src时img标签的一个属性，除了这个属性之外，img还有其它属性，这里我们写出来就不一 一演示了
| 属性 | 功能 |
| src | 图片路径 |
| alt | 在图片显示错误时呈现的文字 |
| title | 当鼠标放到图片上时显示的文字 |
| width | 图片的宽度 |
| height | 图片的高度 |
| border | 设置图片边框的粗细 |
超链接标签
<a href="跳转链接" target="跳转方式">文本或图片</a>href后面输入需要跳转的链接目标地址
target有两个值，分别是默认的_self在当前页面跳转，_blank在新的标签页面跳转
跳转演示代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://www.bilibili.com/" target="_self">
<img src="C:\Users\27295\fcode1\微信图片_20250506142012.png" title="当前页面跳转"></a>
<a href="https://www.bilibili.com/" target="_blank">
<img src="C:\Users\27295\fcode1\微信图片_20250506142012.png" title="当前页面跳转"></a>
</body>
</html>空连接：当我们还没想好要放什么链接时，我们的href可以等于#
特殊字符
因为html语法的原因，文档当中有些字符不能直接写出来，html提供的特殊的字符来代替
| 特殊字符 | 描述 | 代码 |
|---|---|---|
| 空格 | | |
| < | 大于号 | < |
| > | 小于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 度 | ° |
| ± | 正负号 | ± |
| ✖ | 乘号 | × |
| ➗ | 除号 | ÷ |
| ² | 平方上标 | ² |
| ³ | 立方上标 | ³ |
这里我们着重记住前三个就够了
表格标签
表格标签基础框架
<body>
<table>
<tr>
<th>
</th>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</body><table>: 用于定义整个表格
<tr>用于定义表格的行，必须嵌套在<table>中
<th>用于定义表格的表头，必须嵌套在<ty>中
<td>用于定义单元表格，必须嵌套在<tr>中
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<th>BIAOTOU1</th>
<th>BIAOTOU2</th>
<th>BIAOTOU1</th>
</tr>
<tr>
<td>BIAOGE1</td>
<td>BIAOGE2</td>
<td>BIAOGE3</td>
</tr>
<tr>
<td>BIAOGE11</td>
<td>BIAOGE22</td>
<td>BIAOGE33</td>
</tr>
</table>
</body>
</html>演示结果
<th>定义的表头中的字体更粗，更显得它像表头
代码当中的border是用于控制表格的外边框的距离
当border过大演示结果为
cellpadding和cellspacing
cellpadding用于控制单元格和边框的距离
cellspacing用于控制单元格之间的距离
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<th>BIAOTOU1</th>
<th>BIAOTOU2</th>
<th>BIAOTOU1</th>
</tr>
<tr>
<td>BIAOGE1</td>
<td>BIAOGE2</td>
<td>BIAOGE3</td>
</tr>
<tr>
<td>BIAOGE11</td>
<td>BIAOGE22</td>
<td>BIAOGE33</td>
</tr>
</table>
</body>
</html>演示结果
合并单元格
colspan
rowspan
cowspan和rowspan都是放在<td>里，用于增加长和宽
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<th>BIAOTOU1</th>
<th>BIAOTOU2</th>
<th>BIAOTOU1</th>
</tr>
<tr>
<td colspan="2">BIAOGE1</td>
<td>BIAOGE2</td>
<td>BIAOGE3</td>
</tr>
<tr>
<td>BIAOGE11</td>
<td>BIAOGE22</td>
<td>BIAOGE33</td>
</tr>
</table>
</body>
</html>演示结果
列表
列表分为三大类分别是：有序列表，无序列表，自定义列表
有序列表
有序列表会自动给我们的列表数据排序使用的是<ol></ol>和<li>和</li>
基本格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
</body>
</html>演示结果
无序列表
无序列表不会再第一行为我们的列表数据进行排序，使用的标签是<ul></ul>和<li></li>
基本格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</body>
</html>演示结果
自定义列表
自定义列表所使用的标签为<dl></dl>和<dd></dd>和<dt></dt>
基本格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<dl>
<dt>列表1</dt>
<dd>列表2</dd>
<dd>列表3</dd>
</dl>
</body>
</html>演示结果
dl是整个表格的主题，dt是表格的标题，dd是表格单元
表单
在学习表单，我们会学习一个form的标签，html通过这个标签实现了网页框的数据与服务器数据的交互，form可以为我们形成一个表单域，在这个表单域中的数据可以传递给服务器，但是我们这里的学习不需要传递数据给服务器，我们直接学习表单域中的控件
input
input可以给我们的网页提供控件，至于提供什么控件需要我们给什么属性
input原型
<input type="属性">属性有以下几种
| 属性值 | 描述 |
|---|---|
| button | 可以点击的按钮 |
| checkbox | 复选框 |
| file | 用于上传文件 |
| hidden | 隐藏的输入字段 |
| image | 图像的提交按钮 |
| password | 密码输入 |
| radio | 单选框 |
| reset | 重置表单数据 |
| sumit | 提交表单数据 |
| text | 供用户输入文字 |
这里我们就不演示了
<lable>标签
用于绑定表单，使我们鼠标点击这个标签的内容可以实现和点击绑定表单签同样的功能
基本框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="radio" name="sex" id="man">
<label for="man">男</label>
<input type="radio" name="sex" id="woman">
<label for="woman">女</label>
</body>
</html>演示结果
当我们点击这个男字符时，左边会亮，点击这个女字符时，右边会亮
<select></select>
用于控制下拉链表
基本框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select>
<option>元素1</option>
<option>元素2</option>
<option>元素3</option>
<option>元素4</option>
<option>元素5</option>
<option>元素6</option>
<option>元素7</option>
</select>
</body>
</html>演示结果
<textarea></textarea>
用于创建一个文本输入框
基本框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<textarea>
</textarea>
</body>
</html>演示结果
扫一扫
9264
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
