HTML中常用的标签极其用法和效果

HTML是网页开发的基础语言，本篇文章将介绍HTML中常用的标签极其用法和效果，十分利于夯实基础知识。

目录

1.文本标签（即标题标签）

2.段落标签

3.字体标签 

4.换行标签

5.下划线标签

6.格式化标签 

7.列表标签

8.超链接

9.视频标签

10.音频标签

11.表格标签

​12.表单标签

 13.表单项标签

1.文本标签（即标题标签）
        文本标签，即标题标签，它主要用于设置文章字体标题的大小，一般有h1到h6六个选择，最大的为h1。其关键代码及效果如下图所示：

<h1>这是一号标题</h1>
<h2>这是二号标题</h2>
<h3>这是三号标题</h3>
<h4>这是四号标题</h4>
<h5>这是五号标题</h5>
<h6>这是六号标题</h6>

2.段落标签
        段落标签p，用于将网页中的文字进行分段。其关键代码及效果如下图所示：

<p>据@平安北京海淀 微博通报，针对“中国人民大学部分学生信息被非法获取”的情况，海淀警方接到报警后，立即开展调查。经查，嫌疑人马某某（男，25岁，该校毕业生）涉嫌非法获取该校部分学生个人信息等违法犯罪行为。目前，马某某已被海淀公安分局依法刑事拘留，案件正在进一步调查中。</p>
<p>警方高度重视公民个人信息保护，对于相关违法犯罪，将依法予以严厉打击。</p>

3.字体标签 
        字体标签font即用来设置字体属性的标签，其常见属性有size（字体大小）、color（字体颜色）、face（字体种类）等。其关键代码及效果如下图所示：

原价<font color="red" size="10" face="宋体">199￥</font>，现在秒杀只需要9.8￥...

4.换行标签
        换行标签br用于将句子换行，比如网页中诗歌的编辑常用到此标签。其关键代码及效果如下图所示（下文特意未在第一句诗后加该标签，以此进行区分）：

床前明月光
疑是地上霜</br>
举头望明月</br>
低头思故乡

5.下划线标签
         下划线标签hr，其主要属性有color（颜色）、size（粗细）、width（宽度）、align(居中设置，其值有left、right、center三种)。其关键代码及效果如下图所示：

<hr width="500" size="5" color="red" align="left">

6.格式化标签 
        这里的格式化标签是指对字体的设置，b、strong标签设置字体加粗，i、em设置字体为斜体。其关键代码及效果如下图所示：

<b>老李来了</b>
<strong>老李来了</strong>
<i>老李来了</i>
<em>老李来了</em>

7.列表标签
        列表种类有无序列表、有序列表和自定义列表三种。建立无序列表用ul标签，默认小黑圆圈样式，用type属性可改变其样式，其内容项用li标签。有序列表用ol标签，默认样式为阿拉伯数字，type属性可改变其样式，其内容项也用li标签。自定义列表用dl标签，其内容项用dd标签。  其关键代码及效果如下图所示（注意我的样式是更改后的，并非默认样式）：

<!--列表标签 无序列表 是由ul li定义 默认小黑圆圈 type 改变默认样式
    应用场景：一般应用于 有规则的图文组合页面
 -->
<ul type="circle">
    <li>呜呜呜</li>
    <li>嘿嘿嘿</li>
    <li>哈哈哈</li>
</ul>
<!--        有序列表 是由ol li定义 默认有序 默认样式是阿利伯数字 type
            应用场景：问卷调查  试卷
-->
<ol type="i">
    <li>第一题</li>
    <li>第二题</li>
    <li>第三题</li>
</ol>
<!--        自定义列表 是由 dl dt dd 定义 应用于 小标题下面多个列表项-->
<dl>
    <dt>水果</dt>
    <dd>香蕉</dd>
    <dd>苹果</dd>
    <dd>榴莲</dd>
</dl>

8.超链接
        超链接标签为a，其href属性用于添加跳转的地址，其值可为现成的网址，如百度网首页https://www.baidu.com/ ，也可以为自己项目中的HTML文件，还可以为本HTML文件中其他标签名。另外，其target属性用于表示跳转的位置，其_blank值表示打开新窗口跳转，_self值表示当前页面跳转。（图片不好展示跳转结果，以下只贴关键代码）

        ①以文字作为超链接，跳转至百度官网。

<!--以文字作为超链接-->
<a href="https://www.baidu.com/" target="_blank">百度</a>
        ②以文字作为超链接，跳转至自创项目中的HTML文件。

<a href="文件名.html" target="_self">简介</a>
        ③以文字为超链接，跳转至本HTML文件中的其他标签（注意，href的值为其他标签的id名，前面要加#）。

<a href="#f2">京东秒杀</a>
<img id="f1" src="img/jd1.png" alt="" width="100%">
        ④建立空链接，即无法跳转至任何网址，只要href的属性值为#即可。

<a href="#">空链接</a>
        ⑤以图片作为超链接。

<a href="网址">
    <img src="图片文件路径" alt="">
</a>
9.视频标签
        视频标签video可在网页中添加视频，记住一定要加controls属性，否则视频无法实现播放。

<!--视频标签是由video定义controls控件 -->
<video src="mp4/timo1.mp4" controls></video>
<!--视频标签是由video定义controls控件 （适合各种浏览器的兼容）-->
<video  controls>
  <source src="mp4/timo1.mp4" type="video/mp4"/>
</video>
10.音频标签
        音频标签audio即可在网页中添加音频，其原理大致和视频标签一致。

<!--音频标签是由audio定义-->
<audio src="mp3/想见你.mp3" controls></audio>
<!--音频标签是由audio定义-->
<audio  controls>
  <source src="mp3/想见你.mp3" type="audio/mp3">
</audio>
11.表格标签
        表格标签由table定义，其属性有border（边框）、width（宽度）、height（高度）、align（居中设置，其值有left、right、center）、cellpadding（单元格和内容之间的间隔）、cellspacing（单元格和单元格之间的间隔）。

        关于表格中行的标签设置为tr，除align等基本属性外，bgcolor可以设置该行的背景颜色。表格中单元格的标签设置为td，其属性与其他大致无二。td标签（或th标签）一般嵌套在tr标签内，有几个td标签，就代表该行有几个单元格。表格中的首行内容一般用th标签，它可使表中文字加粗并且自动居中。另合并行用rowspan属性，合并列用colspan属性。

<table border="1px soild" width="350px" height="150px"
        align="center" cellpadding="0" cellspacing="0">
  <!--<tr align="center">
      <td>学号</td>
      <td>姓名</td>
      <td>身高</td>
      <td>爱好</td>
  </tr>-->
  <tr bgcolor="gray">
    <th>学号</th>
    <th>姓名</th>
    <th>身高</th>
    <th>爱好</th>
  </tr>
  <tr align="center" bgcolor="#5f9ea0">
    <td>001</td>
    <td>百灵鸟</td>
    <td rowspan="2">170</td>
    <td>唱歌</td>
  </tr>
  <tr align="center" bgcolor="#90ee90">
    <td>002</td>
    <td>貂蝉</td>
    <!--        <td>170</td>-->
    <td>跳舞</td>
  </tr>
  <tr align="center" bgcolor="#ffc0cb">
    <td colspan="2">003武松</td>
    <!--        <td>武松</td>-->
    <td>180</td>
    <td>打虎</td>
  </tr>
</table>

​
12.表单标签
        表单标签为form，用于采集用户数据，其基本属性有action（提交到服务器的url）、和method（数据提交方式）。常见的数据提交方式为get和post。

        get方式提交的数据在地址栏中，参数长度被限制，提交的数据直接可见，相对不安全。

<form action="" method="get">
    <!--    文本框-->
    账号:<input type="text" name="username"/><br>
    密码:<input type="password" name="password"/><br>
    <input type="submit" value="登录">
</form>
 

        post方式提交的数据在请求体中，对参数长度没有限制，提交的数据可通过浏览器的开发者工具（f12或crtl+shift+I）中的网络（network）查看，刷新网络后点击对应的请求项即可看到提交的数据内容。

<form action="" method="post">
    <!--    文本框-->
    账号:<input type="text" name="username"/><br>
    密码:<input type="password" name="password"/><br>
    <input type="submit" value="登录">
</form>
 

 13.表单项标签
        常用标签的介绍都在下列代码中，注意在编写时一定要添加name属性，其属性值可以自定义，如未添加该属性则表单数据无法正常提交。

<form action="">
 
  <!--    文本框-->
  账号:<input type="text" name="username"/><br>
  <!--    密码框 type值为password可自动将输入的密码变成小黑点-->
  密码:<input type="password" name="password"/><br>
<!--  邮箱框 type值为Email可根据输入的数据是否有@基本判断数据是否为邮箱号-->
  邮箱:<input type="email" name="email"/><br>
<!--  文件框 常用于上传图片 type值为file可出现上传本地文件接口-->
  文件:<input type="file" name="photo"/><br>
<!--  数字框 type值为number可使输入框尾端出现上下箭头，点击箭头可实现数字的自动增减-->
  数字:<input type="number" name="number"/><br>
<!--  单选框 最常用于性别的选项 type值为radio-->
  性别:<input type="radio" name="sex" value="男"/>男
  <input type="radio" name="sex" value="女"/>女
  <br>
<!--  复选框 常用于选项的自定义 type值为checkbox-->
  爱好: <input type="checkbox" name="hobby" value="playball"/>打球
  <input type="checkbox" name="hobby" value="swim"/>游泳
  <input type="checkbox" name="hobby" value="sing"/>唱歌<br>
  职业:
<!--  下拉框 利用select标签和option标签嵌套使用-->
  <select name="opt">
    <option value="doctor">医生</option>
    <option value="teacher">老师</option>
    <option value="student">学生</option>
  </select>
  <br>
  <!-- 提交按钮 点击后可提交表单数据-->
  <input type="submit" value="登录">
  <!--    普通按钮 无任何自动功能，需要对按钮进行自定义实现实现相应跳转-->
  <input type="button" value="按钮">
  <!--    重置按钮 点击后可清楚表单中已填的所有数据-->
  <input type="reset" value="重置">
  
</form>

  另，如果单选框初始时需要固定选项，添加checked属性即可。如果需要在输入框中加入不提交至表单的提示性灰色文字，只需要添加placeholder属性即可。

<form action="" METHOD="post">
    性别：
    <input type="radio" name="sex" value="男" checked/>男
    <input type="radio" name="sex" value="女"/>女
    </br>
    姓名：
    <input type="text" name="name" placeholder="请输入真实姓名"/>
</form>