文章目录
前言
HTML是超文本编译语言，是用于创建网页的标准标记语言。通俗的来讲，大部分的页面都是HTML页面，在一个网页中，HTML通过各种标签来展示网页的内容，如文字，图片，链接，表格，列表，表单等。
这个文章将教大家学习一下这些标签的使用方法。
一、HTML框架标签
首先我们在我们的编译器（我这里用的是VScode）新建一个HTML项目。生成如图。
我们可以看到，一个HTML项目中由两个部分组成，
- 头部< head > < /head >,其中存放页面的标题，序言，说明等内容，不作为内容来显示。
- 主体< body > < /body >，其中存放页面的实际内容，如文字，图片，视频等。
1，< !DOCTYPE html >框架标签
文档类型声明，该标签用来向浏览器声明这是一个HTML页面。
2，< html lang = " en ">
该html标签通过lang属性来指定网页的语言，来告诉浏览器整个页面所使用的语言。
例如：
当 lang= "en "时，表明该网页是英文网页，在新版的浏览器中打开会弹出是否进行翻译选项。
当 lang = " zh-CN "时，表明该页面是中文页面，这时浏览器就不会提示翻译。
二、HTML头部中的基础标签
1.< meta >元数据标签
提供了一些关于网页的额外信息，这些信息不会直接显示在网页上，但可以被搜索引擎和浏览器使用。
主要用途（基础）：
- 字符集声明：< meta charset=“UTF-8” >用于指定网页使用的字符编码。(UTF-8是目前最庞大的字符编码，编写网页时优先选择该字符编码）
- 视口设置：< meta name=“viewport” content=“width=device-width,initial-scale=1” >用于设置网页的视口大小和初始缩放比例，以适应不同设备的屏幕大小。
2.< title >网页标题 < /title >
该标签为网页标题标签，网页的标题是“这是我的网页标题”。当您在浏览器中打开此网页时，可以在标签页上看到这个标题。即当打开一个网页时浏览器最上方的标题。
三，HTML主体中的基础标签
1，< h1 >~< h6 >标题标签
标题标签从h1-h6逐渐变小，并且标签独占一行，且加粗。
<!-- 这是一个注释标签，在页面中不显示-->
<h1>这是一个标题标签</h1>
<h2>这是一个标题标签</h2>
<h3>这是一个标题标签</h3>
<h4>这是一个标题标签</h4>
<h5>这是一个标题标签</h5>
<h6>这是一个标题标签</h6>
2，< p > 段落标签
<p>欢迎大家多到中国各地走一走、看一看，客观真实向世界讲好中国故事，讲好中国共产党故事，讲好我们正在经历的新时代故事。” </p>
但是单独的段落标签不能完成段落的换行，加粗，倾斜，删除线，下划线等展示手法，所以就有如下标签可以修饰一个段落。
- < br / >换行
- < strong > 加粗< /strong >或< b >< /b >
- < em >倾斜< /em >或< i >< /i >
- < del >删除线< /del >或< s >< /s>
- < ins >下划线< /ins >或< u >< /u>
- < hr > 水平线
<p>换行</p>
<br />
<strong> 加粗</strong>
<b>加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>
<hr>
3，< a >锚标签
用于创建超链接。它可以将用户带到另一个页面或网站。< a >标签可以链接到其他网页、图片、文档等资源，也可以用于创建电子邮件地址的链接。
< a >< /a >可以包含文本，图像，表格，音频和视频等。
< a >标签通常包含两个属性：
1.href属性
用于指定链接的目标地址。href可以包含多种类型：
<!-- #空链接，暂定连接的内容，方便修改 -->
<a href="#">空链接</a>
<!-- 外部链接，跳转到另外一个页面 -->
<a href="https://www.example.com">这是一个链接</a>
<!-- 内部链接，跳转到项目中的另一个页面 -->
<a href="example.html"></a>
<!-- 下载文件 -->
<a href="file.exe">下载一个exe文件</a>
另外，特殊的是，href中还有一种形式，可以用来跳转到当前页面的某一部分，大部分网页目录就是这么制作的。
<!-- href 中需要用 #名字 用来指定跳转的地址-->
<a href="#one">跳转到当前页面的另一部分</a>
<!-- 被跳转的地址需要用id属性来定义名字 -->
<p id="one">这是被跳转的部分</p>
2.target属性
用于规定链接文档的打开方式。这个属性可以有以下几种值：
- _self：这是默认值，如果不需要特别指定打开方式，就使用这个值。它表示打开链接的方式为就在当前页面打开。
- _blank：这个值表示在新的、未命名的窗口中打开目标文档。即新建一个窗口打开。
<a href="example.html" target="_self">这是一个链接，并且打开方式为在当前页面打开</a>
4，< img >图像标签
用于在页面中插入图像。
<img src="图片URL" />
1，src属性指定了图片的URL，可以是本地文件路径或者是互联网上的图片；
路径有两种：
- 相对路径
以当前页面为参考：
a，同一级 直接引用
b，下一级 /
c，上一级 …/ - 绝对路径
a，在电脑中的位置 ，例如 D：
b，网络上的图片地址，直接引用链接
2，alt属性用于提供图片的描述信息，当图片无法显示时，会显示这个描述信息。
<img src="图片URL" alt="图片描述">
3，title属性用于鼠标放图片上时提示文字。
<img src="图片URL" title="这是一个图片">
4，width和height属性来指定图片的宽度和高度，单位一般为px。
<img src="example.jpg" alt="示例图片" width="500" height="600">
5，border属性用来指定img边框的粗细，默认为0。
<img src="example.jpg" border="20px">
5，< ul >、< ol >、< dl >列表标签
用于创建无序列表和有序列表。
- 无序列表
无序列表使用< ul >标签来定义，每个列表项使用< li >标签来定义。将显示一个包含三个列表项的列表，每个列表项前面都有一个圆点标记。
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
- 有序列表
有序列表使用< ol >标签来定义，每个列表项使用< li >标签来定义。将显示一个包含三个列表项的列表，每个列表项前面都有一个数字标记。
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
- 定义列表
定义列表使用< dl >标签来定义，其中每个项目使用< dt >标签来定义项目名称，使用< dd >标签来定义项目描述。< dd >中的内容是对< dt >中的内容加以描述。
<dl>
<dt>苹果</dt>
<dd>一种常见的水果</dd>
<dt>香蕉</dt>
<dd>另一种常见的水果</dd>
</dl>
6，< table >表格标签
用于创建一个表格，它可以包含行和列，用于展示不同类型的数据。
< tr >为行，< td >为列，可以理解为格子。
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
</table>
1，< table>属性：
- align属性用来定义表格相对于页面的位置，其值有left，center，right，分别对应左，中，右。
- border属性用来定义表格的边框像素，即边框的粗细。
- cellpadding属性定义单元格和内容之间的距离。
- cellspacing属性定义单元格之间的距离。
<table border="1" cellpadding="20px">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
</table>
2，< td >属性：
- rowspan属性是跨行属性，可以将行单元格合并。（竖向合并）
- colspan属性是跨列属性，可以将列单元格合并。（横向合并）
注意：在书写时需要注意单元格的个数。
<table border="1" cellpadding="20px">
<tr>
<td colspan="2">one</td>
<td>two</td>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>30</td>
<td>上海</td>
</tr>
</table>
7，< form >表单标签
表单标签，用于创建用户可填写的表单。表单可以包含各种类型的输入字段，如文本字段、复选框、单选按钮、下拉菜单等。通过使用< form >标签，可以将表单数据提交给服务器进行处理。
<h4>青春不常在，抓紧谈恋爱</h4>
<form>
<table>
<tr>
<td>性别：</td>
<td>
<input type="radio" id="sex1" name="sex"><label for="sex1">男</label>
<input type="radio" id="sex2" name="sex"><label for="sex2">女</label>
</td>
</tr>
<tr>
<td>生日：</td>
<td>
<select>
<option>请选择年</option>
<option>2001</option>
<option>2002</option>
</select>
<select>
<option>请选择月</option>
<option>11</option>
<option>12</option>
</select>
<select>
<option>请选择日</option>
<option>14</option>
<option>15</option>
</select>
</td>
</tr>
<tr>
<td>所在地区</td>
<td>
<input type="text" value="请输入详细地址">
</td>
</tr>
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" id="bachelor" name="marry"><label for="bachelor">未婚</label>
<input type="radio" id="married" name="marry"><label for="married">已婚</label>
<input type="radio" id="divorce" name="marry"><label for="divorce">离婚</label>
</td>
</tr>
<tr>
<td>学历</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" name="modl">妩媚的
<input type="checkbox" name="modl">可爱的
<input type="checkbox" name="modl">小鲜肉
<input type="checkbox" name="modl">老腊肉
<input type="checkbox" name="modl">都喜欢
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea>
自我介绍
</textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="免费注册">
</td>
</tr>
<tr>
<td>
<input type="checkbox">我同意注册条款和加入会员标准
</td>
</tr>
<tr>
<td>
<a href="#">我是会员，立即登录</a>
</td>
</tr>
</table>
<ul>
<li>年满十八，单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</form>
- action属性指定了表单数据提交的目标URL（/submit-data）
- method属性指定了数据提交的方法（post）。当用户点击提交按钮时，表单数据将被发送到指定的URL。
- < input type=“text” >：创建文本字段。
- < input type=“password” >：创建密码字段。
- < input type=“checkbox” >：创建复选框。
- < input type=“radio” >：创建单选按钮。
- < input type=“submit” >：创建提交按钮。
- < input type=“reset” >：创建重置按钮。
- < select >：创建下拉菜单。
- < textarea >：创建多行文本框。
总结
以上就是前端学习路线第一阶段———HTML的学习内容，当然，光凭HTML不能完整的做出一个网页，为了做出一个漂亮的网页，我们还需要学习CSS样式来装饰我们的网页。
让我们一起接着来学前端吧。
501
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
