HTML常见标签-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_73756512/article/details/137956933

本文主要介绍了HTML的多种标签，包括段落换行、列表、超链接、图片和音频、表格、表单、特殊字符、布局标签等，详细说明了各标签的属性和使用方法。同时，还介绍了表单数据的提交方式GET和POST的特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

段落换行标签：

代码案例：

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

    <p>
       央广网北京4月14日消<br/>息（记者 果君）为深入总结"读懂中国"活动经验和启示，
    更好发挥"五老"在立德树人中的独特作用，<br>
    引导广大青年学生坚定理想信念，
    矢志奉献国家和人民，4月13日， 
    </p>
    <br><br><br><br>
    <hr>
    <p>
        央广网北京4月14日消息（记者 果君）为深入总结"读懂中国"活动经验和启示，
    更好发挥"五老"在立德树人中的独特作用，
    引导广大青年学生坚定理想信念，
    矢志奉献国家和人民，4月13日，
    </p>
    
    


</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>
    <!--有序列表-->
    <ol>
        <li>数据类型</li>
        <li>变量</li>
        <li>函数</li>
        <li>对象</li>
    </ol>
    <!-- 无序列表 -->
    <ul>
        <li>java</li>
        <li>c++</li>
        <li>c</li>
        <li>go</li>
    </ul>
    <!-- 嵌套 -->
    <ul>
        <li>java
            <ol>
                <li>数据类型</li>
                <li>变量</li>
                <li>函数</li>
                <li>对象</li>
            </ol>
        </li>
        <li>c++</li>
        <li>c</li>
        <li>go</li>
    </ul>
</body>
</html>

效果图：

超链接标签：

a
- herf 用于定义跳转目标资源的地址
  - 1、完整url
    - https://www.zhipin.com
  - 2、相对路径
    - 以当前资源的所在路径为出发点去找目标资源
    - ./表示的当前资源的所在路径，可以省略不写
    - ../表示当前资源的上一层路径，需要时必须显示写出
  - 3、绝对路径
    - 1、无论当前资源在哪里，使用固定的位置作为出发点去找目标资源
    - 以 / 开头
- 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.zhipin.com" target="-blank">boss直聘</a>
     <!-- 相对路径 -->
     <a href="02标题段落换行.html" target="_blank">02标题标签</a>
</body>
</html>

效果图：（点击标签可跳转）

图片和音频标签：

img
- src定义图片的相对路径
  - 1、url
  - 2、相对路径
  - 3、绝对路径
- title定义鼠标悬停时提示的文字
- alt定义图片加载失败时提示文字

代码演示：

<!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="img/photo.pngs" width="220px" title="cao" alt="sha">
     <br>
     <img src="/demo1-html/img/photo.png" title="ni">
</body>
</html>

效果图：

audio
- src。
  - 1、url
  - 2、相对路径
  - 3、绝对路径
- controls 属性告诉浏览器在音频播放器中显示默认的控件，例如播放按钮、音量控制等。
- <code> 标签用于在浏览器不支持 <audio> 元素时显示备用内容。
- 除了 src 和 controls 属性外，<audio> 标签还有其他一些常用的属性，例如：
- autoplay：指定音频在加载完毕后立即开始播放。
- loop：指定音频循环播放。
- preload：指定浏览器在页面加载时是否预加载音频，可能的值为 "none"、"metadata" 或 "auto"。

代码案例：

表格标签：

table 整张表格
- thead表头
- tbody表体
- tfoot表尾
  - tr表格中的一行
    - td行中的一个单元格
    - th自带加粗和居中效果的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>
     <h3 style="text-align: center;">员工技能竞赛评分表</h3>
     <table border="1px" style="margin: 0px auto; width: 300px;">
        <thead>
            <tr>
                <th>排名</th>
                <th>姓名</th>
                <th>分数</th>
                <th>备注</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>找</td>
                <td>100</td>
                <td rowspan="6">当老板</td>
            </tr>

            <tr>
                <td>2</td>
                <td>不到</td>
                <td>99</td>
                
            </tr>

            <tr>
                <td>3</td>
                <td>工作</td>
                <td>98</td>
                
            </tr>
            <tr>
                <td>总人数</td>
                <td colspan="2">200</td>
                
                
            </tr>
            <tr>
                <td>平均分</td>
                <td colspan="2">100</td>
                
                
            </tr>
            <tr>
                <td>及格率</td>
                <td colspan="2">90% </td>
                
             
            </tr>
        </tbody>
        

     </table>
</body>
</html>

效果图：

表单标签：

form表单标签
- action定义数据的提交地址
  - 1、url
  - 2、相对路径、
  - 3、绝对路径
- method 定义数据的提交方式
- GET：
  - 参数会一键值对形式放在url后提交
    - 1、url?key=value&key=vaue&key=value
    - 2、数据直接暴露在地址栏上，相对不安全
    - 3、地址栏的长度有限制，所以提交的数据量不大
    - 4、地址栏上，只是字符，不能提交文件
    - 5、相比于post，效率更高
- POST：
  - 1、参数默认不放在url后面
  - 2、数据不会直接暴露在地址栏上，相对安全
  - 3、数据都是单独打包，通过请求体发送，提交数据量较大
  - 4、请求提中，可以是字符，也可以是字节，可以提交文件
  - 5、相比于get，相率较低

表单项标签：用户输入信息的标签
- 表单项标签一定要定义name属性，该属性用于明确提交时的参数名
- 表单项标签还需要定义value属性，该属性用于明确提交值得实参
- 希望用户提交一些特定的信息，但是考虑到安全问题，或者是用户操作问题，不希望数据发生变化
  - readonly 只读，提交时不携带
  - disabled 不可用，提交时不携带

input
- type输入信息得表单项类型（不指定type的属性值，默认按钮为提交按钮的功能）
  - text单行普通文本框
  - password密码框
  - submit提交按钮
  - reset重置按钮
  - button普通按钮
  - radio单选框【多个选项选一个】
    - 多个单选狂使用相同的name属性值，则就会有互斥效果ed
    - checked：默认选中，可直接写。checked
  - checkbox复选框【多个选项，选多个】
  - hidden隐藏域，不显示在页面上，提交时会携带
  - file文件上传框

textarea 文本域，多行文本框
select 下拉框
- option选项

代码案例：

<!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>
     <form action="test.html" method="get">
        <!-- 添加表单项标签 用户输入信息的标签 -->
        <!-- 希望用户提交一些特定的信息，但是考虑到安全问题，或者是用户操作问题，不希望该数据发生变化
            readonly 只读 提交时不携带
            disabled 不可用 提交时不携带
        -->
        

        <input type="hidden" name="id" value="123">
        <input type="text" name="pid" value="456" readonly><br>
        <input type="text" name="did" value="789" disabled><br>

        用户名：<input type="text" name="username"/><br>
        密码：<input type="password" name="userPwd"/><br>
        性别：
              <input type="radio" name="gender" value="1" checked>男
              <input type="radio" name="gender" value="0">女
              <br>
        爱好：
              <input type="checkbox" name="hobby" value="1" checked>乒乓球
              <input type="checkbox" name="hobby" value="2" checked>吃
              <input type="checkbox" name="hobby" value="3">运动
              <input type="checkbox" name="hobby" value="4" >挣钱
              <br>
        个人简介：
            <textarea name= "intro" style="width: 300px; height: 100px"></textarea>
            <br>
        籍贯：
            <select name="pro" id="">
                <option value="1">江</option>
                <option value="2">浙</option>
                <option value="3">沪</option>
                <option value="0" selected>-请选择-</option>
            </select>
        选择头像：
            <input type="file">

            <br>
        <input type="submit" value="登录">
        <input type="reset" value="清空">
     </form>
</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>
    &lt;h1&gt;一级标题 &lt;/h1&gt;
    <hr>
    &amp;gt;

    
</body>
</html>

效果图：

布局标签：

css设置样式：
- 通过元素的style属性进行设置
- style = "样式名:样式值;样式名:样式值......"
块元素：自己独占一行元素，块元素得CSS样式得宽，高往往都是生效的
- div
行内元素：自己不会独占一行的元素块元素的CSS样式的宽高等等，往往都是不生效
- 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>
<body style="background-color:cadetblue ;">
    <div style="border:1px solid red; width: 500px;height: 100px;margin: 10px auto;background-color: antiquewhite;">123</div>
    <div style="border:1px solid red; width: 500px;height: 100px;margin: 10px auto;background-color: bisque;">456</div>
    <div style="border:1px solid red; width: 500px;height: 100px;margin: 10px auto;background-color: rgb(255, 196, 0);">
        <span style="font-size: 30px;color: aliceblue;">b，</span>spanstrong：文本加粗；
        </div>
    <span style="border:1px solid black; width: 500px;height: 100px;">555</span>
</body>
</html>

效果图：