当前位置：首页 > news >正文

前端三件套详解之 HTML

news 来源：原创 2025/5/24 15:12:52

HTML：

师承b站pink老师【黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程】

HTML概述

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，用浏览器即可对HTML文件进行读取和显示。

1.1 什么是 HTML?

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

1.2 HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签（结束标签里面一般有一个/）

<标签> 内容 </标签>

1.3 Web浏览器

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：

HTML 语法规范

2.1 基本语法

HTML 文档的的后缀名必须是.html 或.htm，浏览器的作用是读取HTML 文档，并以网页的形式显示出它们。此时，用浏览器打开这个网页，我们就可以预览我们写的第一个HTML 文件了。
html标签是用<>尖括号括起来的的关键词
html标签是通常是成对出现的例如<html></html> (第一个是开始标签第二个是结束标签) '双标签'
有些特殊的标只能是单个标签（极少情况）例如<br /> '单标签'
标签关系：包含和并列

<html><head> </head><body> </body>
</html>
<html>包含<head>和<body>
<head>和<body>并列

2.2 HTML基本结构标签

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。

<html> html标签<head> 文档的头部<title> 文档的标题 </title></head><body>文档的主体</body>
</html>

2.3 文档类型声明标签

<!DOCTYPE> 文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。

<!DOCTYPE html>     //文档声明标签  告诉浏览器使用哪种HTML版本来显示网页
当前页面采取的是HTML5版本来显示网页.

<!DOCTYPE> 声明位于文档中的最前面的位置，处于<html> 标签之前
<!DOCTYPE>不是一个HTML 标签，它就是文档类型声明标签

2.4 lang语言种类

用来定义当前文档显示的语言。

en定义语言为英语
zh-CN定义语言为中文
简单来说,定义为en 就是英文网页, 定义为zh-CN 就是中文网页其实
对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文这个属性对浏览器和搜索引擎(百度.谷歌等)还是有作用的
```
<html lang="en">  
//lang:语言种类 "en"是英文即该网页是英文网页,"zh-CN"是中文即该网页是中文网页(用zh-CN好一点)
```

2.5 字符集编码

字符集(Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。在<head>标签内，可以通过<meta> 标签的charset属性来规定HTML 文档应该使用哪种字符编码

<meta charset="UTF-8">      //字符集编码(一般用UTF-8否则容易乱码)

charset常用的值有：GB2312 、BIG5 、GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符
上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码，尽量统一写成标准的"UTF-8"，不要写成 "utf8" 或"UTF8"

2.6 快捷键的使用

~~在vscode里上面的东西统统不用手敲！~~如果我们需要生成页面骨架结构。输入! 按下Tab键即可

<!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>

2.7 注释

如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。HTML中的注释以“”结束。

<!-- 注释标签 -->   快捷键：Ctrl + /

2.8 特殊字符

在HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。

重点记住：空格、大于号、小于号这三个，其余的使用很少，如果需要回头查阅即可。

HTML常用标签

3.1 标题标签

为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>标题标签</title>
</head>
<body><h1>标题标签</h1><h2>标题标签共6级</h2><h3>标题标签独占一行</h3><h4>文字加粗</h4><h5>大小依次递减</h5><h6>xhy</h6>
</body>
</html>

3.2 段落标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，段落标签用于定义段落，它可以将整个网页分为若干个段落</p>

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

3.3 换行标签

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签<br/>

<br/>

3.4 文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。标签语义: 突出重要性, 比普通文字更重要

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本格式化标签</title>
</head>
<body><b>这个文本是加粗的</b> <br /><strong>这个文本是加粗的</strong> <br /><em>这个文本是斜体的</em> <br /><i>这个文本是斜体的</i> <br />我是<del>删除线</del> <br />我是<s>删除线</s> <br />我是<ins>下划线</ins> <br />我是<u>下划线</u> <br />这个文本包含<sub>下标</sub> <br />这个文本包含<sup>上标</sup>
</body>
</html>

3.5 div和span标签

<div> 和 <span> 标签是没有语义的，它们就是一个盒子，用来装内容的。

<div>标签用来布局，但是现在一行只能放一个。大盒子

<span>标签用来布局，一行上可以多个。小盒子

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>div和span标签</title>
</head>
<body><div>我是一个div标签我一人独占一行</div>    <!-- //div用于布局 表示分隔,分区(可以理解为一个大盒子) --><div>我是一个div标签我一人独占一行</div><span>哈登</span><span>库里</span><span>杜兰特</span> <!-- //span标签也用于布局 一行可以放多个span可以理解为一个小盒子 -->
</body>
</html>

3.6 图像标签

在 HTML 标签中， <img> 标签用于定义 HTML 页面中的图像。

src 是 <img> 标签的必须属性，它用于指定图像文件的路径和文件名。

<img> 其他属性：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图像标签</title>
</head>
<body><h4> 图像标签的使用：</h4><img src=".\photos\harden.jpg" width="500"/><!-- //scr 图片路径 必须属性 --><h4> alt 替换文本 图像显示不出来的时候用文字替换</h4><img src=".\photos\harden1.jpg" alt="harden"/><h4>title 提示文本 鼠标放到图像上，提示的文字</h4><img src=".\photos\harden.jpg" alt="harden" title="13号 harden!" width="500"/><h4>width 设置图像的宽度</h4><img src=".\photos\harden.jpg" alt="harden" title="13号 harden!" width="600" /><h4>height 设置图像的高度</h4><img src=".\photos\harden.jpg" alt="harden" title="13号 harden!" height="200" /><h4>border 设置图像的边框(一般不会用这里的属性来设置 会用css来设置)</h4><img src=".\photos\harden.jpg" alt="harden" title="13号 harden!" width="500" border="15"/><h4>图片路径(绝对路径) 文件绝对路径</h4><img src="D:\Users\Desktop\照骗\快船队标.png" alt="harden" title="13号 harden!" width="500" border="15" /><h4>图片路径(绝对路径) 网络绝对路径</h4><img src="https://res.nba.cn/resource/mat1/chinanba/images/nbalogo/nba-icon.png?20220224" alt="nba" title="nba" width="500" border="15" />
</body>
</html>

3.7 超链接标签

在 HTML 标签中，<a> 标签用于定义超链接，作用是从一个页面链接到另一个页面。

<a>超链接标签的语法格式：

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

链接的分类

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>超链接标签</title>
</head>
<body><h4>1、外部链接</h4><a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a> <!-- href是必须属性；target 打开窗口的方式 默认值是 _self 在当前窗口打开；_blank  是在新窗口打开页面 --><a href="https://sports.qq.com/" target="_self"> 腾讯体育（当前窗口打开）</a> <br><a href="https://www.hupu.com/" target="_blank"> 虎扑体育</a><h4>2、内部链接：网站内部页面之间的相互链接</h4><a href="06-文本格式化标签.html" target="_blank">06-文本格式化标签</a><h4>3、空链接 #</h4><a  href="#" target="_blank">  nba</a><h4>4、下载链接：地址链接的是 文件.exe或者.zip等压缩包形式</h4><a href=".\zipfile\harden.zip"> 下载文件</a><h4>5、网页元素的链接</h4><a href="https://china.nba.cn" target="_blank"> <img src="https://res.nba.cn/resource/mat1/chinanba/images/nbalogo/nba-icon.png?20220224" alt="nba" title="nba.com" width="500" border="15" /> </a><h4>6、锚点链接 见此页面</h4><a href="10-锚点链接.html"  target="_blank"> 点击此处查看锚点链接</a>
</body>
</html>

表格标签

<table> 表格标签主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。

每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题。

tr：tr 是 table row 的缩写，表示表格的一行。
td：td 是 table data 的缩写，表示表格的数据单元格。
th：th 是 table header的缩写，表示表格的表头单元格。

<table> 元素表示整个表格，它包含两个主要部分：<thead> 和 <tbody>。

<thead > 用于定义表格的标题部分: 在 <thead > 中，使用 <th > 元素定义列的标题，以下实例中列标题分别为"列标题1"，"列标题2"和"列标题3"。
<tbody > 用于定义表格的主体部分: 在 <tbody > 中，使用 <tr > 元素定义行，并在每行中使用 <td > 元素定义单元格数据，以下实例中有两行数据，每行包含三个单元格

<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>

列表标签

表格是用来显示数据的，那么列表就是用来布局的。列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。

根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。

5.1 无序列表

<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li> 标签定义。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>无序列表</title>
</head>
<body><h3>喜欢的球星</h3><ul><!-- 1、无序列表各个列表项无顺序级别之分，是并列的 --><!-- 2、<ul>中只能嵌套<li>，<ul>标签中输入其他标签或文字的做法是不被允许的 --><!-- 3、<li>相当于一个容器，可以容纳所有元素 --><!-- 4、无序列表会带自己的样式属性（一般用css来设置） --><li><a href="https://sports.qq.com/kbsweb/players.htm?pid=4563" target="_blank">詹姆斯-哈登</a></li><li><a href="https://sports.qq.com/kbsweb/players.htm?pid=4612" target="_blank">斯蒂芬-库里</a></li><li>杜兰特</li><li>詹姆斯</li><li>约基奇</li><li>欧文</li></ul>
</body>
</html>

5.2 有序列表

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。

在 HTML 标签中，<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用 <li> 标签来定义列表项。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>有序列表（实际应用较少了解）</title>
</head>
<body><h3>球队排行榜</h3><!-- <ul>中只能嵌套<li>，<ul>标签中输入其他标签或文字的做法是不被允许的 --><!-- <li>相当于一个容器，可以容纳所有元素 --><!-- 无序列表会带自己的样式属性（一般用css来设置） --><ol><li>骑士</li><li>雷霆</li><li>凯尔特人</li></ol>
</body>
</html>

5.3 自定义列表

在 HTML 标签中，<dl> 标签用于定义描述列表（或定义列表），该标签会与 <dt> 标签（定义项目/名字）和 <dd> 标签（描述每一个项目/名字）一起使用。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自定义列表</title>
</head>
<body><h3></h3><!-- 自定义列表常用于对术语或名词进行解释和描述；定义列表的列表项前没有任何项目符号 --><!-- <dl>标签定义描述列表（自定义列表）；<dt>标签 定义项目/名字；<dd> 描述每一个项目/名字 --><!-- <dl>中只能嵌套<dt>和<dd>，<dl>标签中输入其他标签或文字的做法是不被允许的 --><!-- <dt>和<dd>可以容纳任何标签 --><dl><dt>球员</dt><dd><a href="https://sports.qq.com/kbsweb/players.htm?pid=4563" target="_blank">詹姆斯-哈登</a></dd><dd><a href="https://sports.qq.com/kbsweb/players.htm?pid=4612" target="_blank">斯蒂芬-库里</a></dd><dd>杜兰特</dd><dt>球队</dt><dd>快船</dd><dd>勇士</dd><dd>太阳</dd>                </dl>
</body>
</html>

表单标签

在网页中，我们需要跟用户进行交互，收集用户资料，此时就需要用到表单标签 在HTML中，一个完整的表单通常由表单域、表单控件（表单元素）和提示信息三个部分构成

6.1 表单域

表单域是一个包含表单元素的区域

在HTML标签中， <form> 标签用于定义表单域，以实现用户信息的收集和传递

<form> 会把它范围内的表单元素信息提交给服务器

<from> 提示信息： <表单元素> 提示信息： <表单元素> 提示信息： <表单元素> 
</from>

6.2 表单元素

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件

表单元素可分为三类，即：input输入表单元素、select下拉表单元素、textarea文本域元素

6.2.1 input 输入表单元素

<input>标签是一个单标签，用于收集用户信息

<input>标签的属性：

文本框（text）<input type="text">

<form action="#"><input type="text">
</form>

密码框（password）<input type="password">

<form action="#"><input type="password">
</form>

单选按钮（radio）<input type="radio">

<form action="#">性别：男<input type="radio">女<input type="radio">
</form>

复选框（checkbox）<input type="checkbox">

<form action="#">爱好：唱 <input type="checkbox"> 跳 <input type="checkbox"> rap <input type="checkbox"> 篮球 <input type="checkbox">
</form>

提交按钮（submit）<input type="submit">

<form action="#"><input type="submit" value="提交">
</form>

重置按钮（reset）<input type="reset">

<form action="#"><input type="reset" value="重新填写">
</form>

文件域（file）<input type="file">

<form action="#">上传头像：<input type="file">
</form>

综合应用:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单</title>
</head>
<body><!-- 表单通常用于收集用户信息 --><!-- 表单通常由表单域、表单控件（表单元素）、提示信息组成 --><!-- <from>标签用于定义表单域，已实现用户信息的收集和传递 --><!-- <from>会把它范围内的表单元素信息提交给服务器 --><!-- <from action="demo.php" method="POST" name="name1" > --><from><!-- 表单元素是允许用户在表单中输入或者选择的内容控件 --><!-- <input>标签用于收集用户信息是一个单标签 type是<input>的必须属性 type属性设置不同的属性值用来指定不同的控件类型 --><!-- text 文本框 用户可以在里面输入任何文字 -->用户名：<input type="text" name="username" value="请输入用户名"> <br><!-- password 密码框 用户看不到输入的文字 -->密码：<input type="password" name="pwd" > <br>手机号：<input type="text" name="sjh"> <br><!-- radio 单选按钮 多选一 --><!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选一  （单选框和复选框必须有相同的name） --><!-- checked属性主要针对单选框和复选框，表示一打开页面就默认选中某个表单元素 -->性别：男 <input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女"> <br><!-- checkbox 复选框 可以实现多选 -->爱好：唱 <input type="checkbox" name="aihao" value="唱"> 跳 <input type="checkbox" name="aihao" value="跳"> rap <input type="checkbox" name="aihao" value="rap"> 篮球 <input type="checkbox" name="aihao" value="篮球">  <br><!-- 点击了提交按钮，可以把表单域from里面的 表单元素 里面的值 提交给后台服务器 --><input type="submit" value="注册"> <br><!-- 重置按钮可以还原表单元素初始的默认状态 --><input type="reset" value="重新填写"> <br><!-- 普通按钮 button  一般用于js启动脚本 --><input type="button" value="获取短信验证码"> <br><!-- file 文件域 用于上传文件 -->上传头像：<input type="file"></from>
</body>
</html>

6.2.2 select 下拉表单元素

使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用标签控件定义下拉列表

<select>中至少包含一对<option>

在<option>中定义selected=“selected”时，当前项即为默认选中项

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>select下拉表单元素</title>
</head>
<body><form>籍贯：<select><option selected="selected">湖南</option><option>湖北</option><option>广东</option><option>广西</option></select></form>
</body>
</html>

6.2.3 textarea 表单元素

当用户输入内容较多的情况下，我们可以用表单元素标签替代文本框标签，在表单元素中，<textarea>标签是用于定义多行文本输入的控件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>select下拉表单元素</title>
</head>
<body><form>今日反馈：<textarea>请在此输入内容</textarea></form>
</body>
</html>