HTML常见标签

深碍√TFBOYSˉ_ 2023-09-27 15:19 76阅读 0赞

![在这里插入图片描述][dd37c14ca2a141ddb7154c8c8b25c2c0.gif_pic_center]

#### 文章目录 ####

*  一、HTML基础标签
 *   *  注释标签
     *  标题标签
     *  段落标签
     *  换行标签
     *  格式化标签
     *  图片、音频、视频标签
     *  超链接标签
     *  列表标签
     *  表格标签
     *  布局标签
     *  表单标签
     *   *  表单标签概述
         *  form标签属性
         *  表单项标签
         *  综合案例

## 一、HTML基础标签 ##

基础标签就是和文字相关的标签

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&lt;h1&gt; ~ &lt;h6&gt;</td> 
   <td>定义标题，h1最大，h6最小</td> 
  </tr> 
  <tr> 
   <td>&lt;font&gt;</td> 
   <td>定义文本的字体，尺寸，颜色</td> 
  </tr> 
  <tr> 
   <td>&lt;b&gt;</td> 
   <td>定义粗体文本</td> 
  </tr> 
  <tr> 
   <td>&lt;i&gt;</td> 
   <td>定义斜体文本</td> 
  </tr> 
  <tr> 
   <td>&lt;u&gt;</td> 
   <td>定义文本下划线</td> 
  </tr> 
  <tr> 
   <td>&lt;center&gt;</td> 
   <td>文本居中</td> 
  </tr> 
  <tr> 
   <td>&lt;p&gt;</td> 
   <td>定义段落</td> 
  </tr> 
  <tr> 
   <td>&lt;br&gt;</td> 
   <td>定义换行</td> 
  </tr> 
  <tr> 
   <td>&lt;hr&gt;</td> 
   <td>定义水平线</td> 
  </tr> 
 </tbody> 
</table>

### 注释标签 ###

我们的注释是不会直接出现在界面上的，为了提高我们代码的可读性

ctrl + / 可以快速加注释和取消注释

### 标题标签 ###

我们这里的标题标签一共有6个

<h1>hello</h1>
    <h2>hello</h2>
    <h3>hello</h3>
    <h4>hello</h4>
    <h5>hello</h5>
    <h6>hello</h6>

![在这里插入图片描述][b602d25c0572424292bf104c427b6fbe.png]  
h后面的数字越小，字体越大  
我们需要注意的是我们每个标题标签是在浏览器显示独占一行的，和我们代码怎样编写位置如何摆放是无关的

### 段落标签 ###

这个标签顾名思义，就说为了将一段长文本粘贴到html中能够起到分段的效果

<p>这是段落标签</p>

这里给大家介绍一个小技巧，我们vscode为了方便我们用户测试数据更方面，为我们提供了自动生成一段随机文本的功能，输入Lorem按下tab键即可  
![在这里插入图片描述][4d90d0f65d9345cf91fc409782e77fdc.png]  
![在这里插入图片描述][c947111a35354b0382ce9377f1bb9eb4.png]  
![在这里插入图片描述][69ea58621b09481a8614d005499e01c5.png]  
p标签和p标签之间存在一个空隙，但是首行并没有缩进，这个我们后面会在css学到

### 换行标签 ###

大家需要注意我们换行是一个单标签，br 是 break的缩写，标识换行

<br/> 规范写法
    <br> 省略写法

![在这里插入图片描述][82ef9375423446f892274d4e2e3fa31c.png]  
我们发现，加了br标签之后，我们浏览器的内容换行了，大家需要注意这个换行，和我们在html代码里写的换行是不一样的，我们在html源代码中写的换行会被忽略，或者多个连续空格会被视为一个，如果想要我们浏览器界面显示换行的效果，我们还得使用  
标签

### 格式化标签 ###

我们这里的格式化指的是文本变粗，倾斜，删除线，下划线

![在这里插入图片描述][d220e947a0774bed87ed3c2475d8a31a.png]  
大家可以看一下这些标签的效果，需要注意的是这些标签不独占一行

### 图片、音频、视频标签 ###

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&lt;img&gt;</td> 
   <td>定义图片</td> 
  </tr> 
  <tr> 
   <td>&lt;audio&gt;</td> 
   <td>定义音频</td> 
  </tr> 
  <tr> 
   <td>&lt;video&gt;</td> 
   <td>定义视频</td> 
  </tr> 
 </tbody> 
</table>

这三个标签都有对应的属性  
**img：** src：规定图片的URL(统一资源定位符)，height定义图片高度，width定义图片宽度  
**audio：** src：规定音频的URL，controls：显示播放控件  
**video：** src：规定视频的URL，controls：显示播放控件

**尺寸单位：** 我们这里的height属性和width属性有两种设置方式：

> 像素：单位是px  
> 百分比：占父标签的百分比，例如高度设置为30%，意思就是代表高度为父标签的30%

**资源路径：** 图片，音频，视频标签都有src属性，而src是用来指定对应图片，音频，视频的路径，指定方式于以下两种方式：  
1.绝对路径：完整路径，这里的绝对路径指的是网络中的绝对路径，格式一般为: 协议://ip地址:端口号/资源名称  
例如：https://img2.baidu.com/it/u=357065505,1326814890&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667  
2.相对路径：表示相对位置，页面与该资源的相对位置。

> ./表示当前路径  
> . ./表示上一级路径  
> . ./. ./表示上两级路径

![在这里插入图片描述][ee3f68890a7c4d7eadc3071b084f3829.png]

我们在我们html文件的统计目录下放了一张图片  
![在这里插入图片描述][5d08b025884b46fa979d393baa5637de.png]  
这是我们相对路径的方式设置图片的src，我们也可以使用绝对路径的方式  
![在这里插入图片描述][c7c22d1cf1e64a779f869540cd79db30.png]  
我们也可以直接使用网络上的绝对地址，但是这种方式不太推荐，如果这张网络图片地址变了那我们的网页就无法加载出来该图片  
我们再来介绍img的两外两个属性:  
1.alt属性：在图片挂掉之后，浏览器显示alt对应的内容

![在这里插入图片描述][3ed8e98e25c145b280d9166dee18e673.png]  
![在这里插入图片描述][40c496d71d1c491ba919504aed512b48.png]  
2.title属性：当我们鼠标停在图片上，会给出一个对应的提示  
![在这里插入图片描述][b40c2b3c60aa465f929642c6b943bc60.png]  
![在这里插入图片描述][aa48414ec2a54f0381d594f784efd130.png]

height / width是用来描述我们图片在浏览器上显示的尺寸的，可以同时设置也可以只设置其中一个，如果设置一个另一个按照等比例缩放，我们这里的单位为px(像素)  
![在这里插入图片描述][1d1ac3724289481cbd61ceaecd2828b8.png]

### 超链接标签 ###

在网页上我们可以看到许多超链接标签，比如：  
![在这里插入图片描述][38b25bef4e2b441fa5adb62b71638270.png]

<a> 定义超链接，用于链接到另一个资源 </a>

我们的a标签有两大类属性：

1.  href：指定访问的资源URL
2.  target：指定默认打开资源的方式

> \_self：默认值，代表在当前页面打开  
> \_blank：在一个空白页面打开

![在这里插入图片描述][096b91f815ac41fe99370985629519fa.png]  
![在这里插入图片描述][adf79cef93974d7382f8b1ae61cfc893.png]

### 列表标签 ###

HTML中列表分为：

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&lt;ol&gt;</td> 
   <td>有序列表</td> 
  </tr> 
  <tr> 
   <td>&lt;ul&gt;</td> 
   <td>无序列表</td> 
  </tr> 
  <tr> 
   <td>&lt;li&gt;</td> 
   <td>定义列表项</td> 
  </tr> 
 </tbody> 
</table>

我们分别给大家演示一下：  
有序列表

![在这里插入图片描述][1a2a8542d1504a3bae5c3190e6c65271.png]  
无序列表

![在这里插入图片描述][47f3030163b74874ab067114f6ddda62.png]  
我们的列表还有一个type属性，有序列表中的type属性用来指定标记的标号类型(数字，字母，罗马数字)，无序列表中的type属性用来指定标记的形状  
![在这里插入图片描述][40ab354738a04733b600e63e72cd21f6.png]

### 表格标签 ###

我们想要定义一个表格，有以下标签：  
1.table：用于定义表格

> border：设置表格边框的宽度  
> width：设置表格的宽度  
> cellspacing：规定单元格之间的空白

2.tr：定义行  
align：定义表格行内容的对齐方式

3.td：定义单元格

> rowspan：规定单元格可横跨的行数  
> colspan：规定单元格可横跨的列数

4.th:用来定义表头单元格

![在这里插入图片描述][c9ad7df07a754617a5bef53118788f4e.png]  
这是没有加任何属性的表格，甚至看不出来是表格，我们来调整一下吧  
![在这里插入图片描述][f17bb486aa464730b60d4e8b7521d2d0.png]

### 布局标签 ###

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&lt;div&gt;</td> 
   <td>定义HTML文档中的一个区域部分，经常与CSS一起布局网页</td> 
  </tr> 
  <tr> 
   <td>&lt;span&gt;</td> 
   <td>用于组合行内元素</td> 
  </tr> 
 </tbody> 
</table>

这两个标签没有什么具体的含义，一般与CSS结合一块使用，div标签在浏览器有换行的效果，而span标签在标签没有换行效果

![在这里插入图片描述][1f035a4160ac43ca84dee29efe8969aa.png]

### 表单标签 ###

大家对表单标签的效果并不陌生，我们经常见到的登陆页面，注册页面等等。  
![在这里插入图片描述][50e4da3b201748a2a88c72d39d1ade63.png]  
像这样的表单就是用来采集用户输入的数据，然后将数据发送到服务端，服务端会对数据进行操作，比如注册就是将数据保存到数据库中，而登陆就说根据用户密码对数据库进行查询操作

#### 表单标签概述 ####

表单：在网页中主要负责数据采集功能，使用标签定义表单  
表单项：不同类型的input元素，下拉列表，文本域等

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&lt;form&gt;</td> 
   <td>定义表单</td> 
  </tr> 
  <tr> 
   <td>&lt;input&gt;</td> 
   <td>定义表单项，通过type属性控制输入形式</td> 
  </tr> 
  <tr> 
   <td>&lt;label&gt;</td> 
   <td>为表单项定义标注</td> 
  </tr> 
  <tr> 
   <td>&lt;select&gt;</td> 
   <td>定义下拉列表</td> 
  </tr> 
  <tr> 
   <td>&lt;option&gt;</td> 
   <td>定义下拉列表的列表项</td> 
  </tr> 
  <tr> 
   <td>&lt;textarea&gt;</td> 
   <td>定义文本域</td> 
  </tr> 
 </tbody> 
</table>

#### form标签属性 ####

form是一个表单标签，它在页面没有任何显示效果，需要借助于表单项标签来展现不同的效果  
form标签的两个重要属性：  
1.**action**：规定当提交表单时向何处发送表单数据，该属性就说URL，我们以后需要将数据发送到服务器，这里就需要写服务器的URL，\#代表提交到当前页面  
2.**method：** 规定用于发送表单数据的方式，有以下两种：

> get：默认值，请求参数会拼接到URL后面，URL长度限制为4kb  
> post：浏览器会将数据放到http请求消息体中，请求参数是无限制的

![在这里插入图片描述][94fc9c9f88e84f63ae7121bd61ce401d.png]  
我们可以看到有一个输入框，然后可以提交数据，一般我们是提交到服务器，但是我们为了给大家展示，这里我们将action设置为\#，将数据提交到我们当前页面，与此同时大家需要给Input输入框设置name属性，这里和后端交互有关系，大家不必关心

![在这里插入图片描述][f39a190a11994f54a14f3be73ccd3a1f.png]  
我们在浏览器输入框输入hello，然后提交  
![在这里插入图片描述][474b9b257df9484398b313f96ad0ecf2.png]  
我们可以看到浏览器地址栏的URL拼接了我们提交的内容，username就是输入框name的属性值，而hello就说我们输入框输入的内容，因为我们method是使用的默认method=’get‘，所以会直接拼接到URL，如果我们湘江信息隐藏，可以将method设置为post

![在这里插入图片描述][0915ad0f97054d008584abc2afd2ef29.png]我们可以发现我们提交的数据并没有拼接到URL后，那么如何查看提交的数据呢？我们可以借助浏览器的开发者工具来查看  
![在这里插入图片描述][bb983fee1a954ff68755ec274fa15570.png]  
鼠标右键然后选择检查，Network选项  
![在这里插入图片描述][297a10c533934f3c97a2d33c29f11b55.png]  
从新提交数据，右边数据往下滑即可找到

#### 表单项标签 ####

这里我们主要介绍三种表单项  
1.<input>：表单项，通过type属性控制输入形式,type属性有以下：  
![在这里插入图片描述][cfd8d319fc8748fc82af025d0f797c00.png]  
2.<select>：定义一个下拉菜单，<option>定义列表项

![在这里插入图片描述][b909724b5ac84693ab8fe3c642685666.png]  
3.<textarea>：文本域，可以输入多行文本，input数据库按只能输入一行文本  
![在这里插入图片描述][668793d5f46747bd90a562d223d335fb.png]  
注意：  
1.以上标签项的内容要提交，必须定义name属性  
2.每一个标签都有id属性，id属性是唯一标识  
3.单选框，复选框，下拉列表都需要使用value属性指定提交的值

#### 综合案例 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>表单练习</title>
    </head>
    <body>
        <form action="#" method="post">
            <label for="username">用户名：</label>
            <input type="text" name="username" id="username"><br>
    
            <label for="password">密码：</label>
            <input type="password" name="password" id="password"><br>
    
            性别：
            <input type="radio" name="gender" value="1" id = "male"><label for="male">男</label>
            <input type="radio" name="gender" value="2" id="female"><label for="female">女</label><br>
    
            爱好：
            <input type="checkbox" name="hobby" id="1">游戏
            <input type="checkbox" name="hobby" id="2">骑行
            <input type="checkbox" name="hobby" id="3">电影
            <br>
        
            头像：
            <input type="file"><br>
        
            城市：
            <select name="city" >
                <option>西安</option>
                <option>北京</option>
                <option>上海</option>
            </select>
            <br>
    
            个人介绍：
            <textarea name="desc" cols="30" rows="10"></textarea>
            <br>
            <br>
    
            <input type="submit" value="注册">
            <input type="reset" value="重置">
            <input type="button" value="按钮">
        </form> 
        
    
    
    </body> 
    </html>

![在这里插入图片描述][162dbaef3a5c4916804d3866fc190743.png]

[dd37c14ca2a141ddb7154c8c8b25c2c0.gif_pic_center]: https://img-blog.csdnimg.cn/dd37c14ca2a141ddb7154c8c8b25c2c0.gif#pic_center
[b602d25c0572424292bf104c427b6fbe.png]: https://img-blog.csdnimg.cn/b602d25c0572424292bf104c427b6fbe.png
[4d90d0f65d9345cf91fc409782e77fdc.png]: https://img-blog.csdnimg.cn/4d90d0f65d9345cf91fc409782e77fdc.png
[c947111a35354b0382ce9377f1bb9eb4.png]: https://img-blog.csdnimg.cn/c947111a35354b0382ce9377f1bb9eb4.png
[69ea58621b09481a8614d005499e01c5.png]: https://img-blog.csdnimg.cn/69ea58621b09481a8614d005499e01c5.png
[82ef9375423446f892274d4e2e3fa31c.png]: https://img-blog.csdnimg.cn/82ef9375423446f892274d4e2e3fa31c.png
[d220e947a0774bed87ed3c2475d8a31a.png]: https://img-blog.csdnimg.cn/d220e947a0774bed87ed3c2475d8a31a.png
[ee3f68890a7c4d7eadc3071b084f3829.png]: https://img-blog.csdnimg.cn/ee3f68890a7c4d7eadc3071b084f3829.png
[5d08b025884b46fa979d393baa5637de.png]: https://img-blog.csdnimg.cn/5d08b025884b46fa979d393baa5637de.png
[c7c22d1cf1e64a779f869540cd79db30.png]: https://img-blog.csdnimg.cn/c7c22d1cf1e64a779f869540cd79db30.png
[3ed8e98e25c145b280d9166dee18e673.png]: https://img-blog.csdnimg.cn/3ed8e98e25c145b280d9166dee18e673.png
[40c496d71d1c491ba919504aed512b48.png]: https://img-blog.csdnimg.cn/40c496d71d1c491ba919504aed512b48.png
[b40c2b3c60aa465f929642c6b943bc60.png]: https://img-blog.csdnimg.cn/b40c2b3c60aa465f929642c6b943bc60.png
[aa48414ec2a54f0381d594f784efd130.png]: https://img-blog.csdnimg.cn/aa48414ec2a54f0381d594f784efd130.png
[1d1ac3724289481cbd61ceaecd2828b8.png]: https://img-blog.csdnimg.cn/1d1ac3724289481cbd61ceaecd2828b8.png
[38b25bef4e2b441fa5adb62b71638270.png]: https://img-blog.csdnimg.cn/38b25bef4e2b441fa5adb62b71638270.png
[096b91f815ac41fe99370985629519fa.png]: https://img-blog.csdnimg.cn/096b91f815ac41fe99370985629519fa.png
[adf79cef93974d7382f8b1ae61cfc893.png]: https://img-blog.csdnimg.cn/adf79cef93974d7382f8b1ae61cfc893.png
[1a2a8542d1504a3bae5c3190e6c65271.png]: https://img-blog.csdnimg.cn/1a2a8542d1504a3bae5c3190e6c65271.png
[47f3030163b74874ab067114f6ddda62.png]: https://img-blog.csdnimg.cn/47f3030163b74874ab067114f6ddda62.png
[40ab354738a04733b600e63e72cd21f6.png]: https://img-blog.csdnimg.cn/40ab354738a04733b600e63e72cd21f6.png
[c9ad7df07a754617a5bef53118788f4e.png]: https://img-blog.csdnimg.cn/c9ad7df07a754617a5bef53118788f4e.png
[f17bb486aa464730b60d4e8b7521d2d0.png]: https://img-blog.csdnimg.cn/f17bb486aa464730b60d4e8b7521d2d0.png
[1f035a4160ac43ca84dee29efe8969aa.png]: https://img-blog.csdnimg.cn/1f035a4160ac43ca84dee29efe8969aa.png
[50e4da3b201748a2a88c72d39d1ade63.png]: https://img-blog.csdnimg.cn/50e4da3b201748a2a88c72d39d1ade63.png
[94fc9c9f88e84f63ae7121bd61ce401d.png]: https://img-blog.csdnimg.cn/94fc9c9f88e84f63ae7121bd61ce401d.png
[f39a190a11994f54a14f3be73ccd3a1f.png]: https://img-blog.csdnimg.cn/f39a190a11994f54a14f3be73ccd3a1f.png
[474b9b257df9484398b313f96ad0ecf2.png]: https://img-blog.csdnimg.cn/474b9b257df9484398b313f96ad0ecf2.png
[0915ad0f97054d008584abc2afd2ef29.png]: https://img-blog.csdnimg.cn/0915ad0f97054d008584abc2afd2ef29.png
[bb983fee1a954ff68755ec274fa15570.png]: https://img-blog.csdnimg.cn/bb983fee1a954ff68755ec274fa15570.png
[297a10c533934f3c97a2d33c29f11b55.png]: https://img-blog.csdnimg.cn/297a10c533934f3c97a2d33c29f11b55.png
[cfd8d319fc8748fc82af025d0f797c00.png]: https://img-blog.csdnimg.cn/cfd8d319fc8748fc82af025d0f797c00.png
[b909724b5ac84693ab8fe3c642685666.png]: https://img-blog.csdnimg.cn/b909724b5ac84693ab8fe3c642685666.png
[668793d5f46747bd90a562d223d335fb.png]: https://img-blog.csdnimg.cn/668793d5f46747bd90a562d223d335fb.png
[162dbaef3a5c4916804d3866fc190743.png]: https://img-blog.csdnimg.cn/162dbaef3a5c4916804d3866fc190743.png