HTML常用标签的简单用法

Master_hl

已于 2022-09-11 16:16:49 修改

阅读量480

点赞数 1

分类专栏： html 文章标签： html

于 2022-09-11 16:12:03 首次发布

本文链接：https://blog.csdn.net/xaiobit_hl/article/details/126802562

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.8 无语义标签 - div & span

2.综合案例

2.1 展示简历信息

2.2 填写简历信息

1.常用标签

注释标签、标题标签、段落标签、换行标签、格式化标签、图片标签、超链接标签、表格标签、表单标签、无语义标签....

1.1 注释标签

1.1标题标签 - 块级元素

<!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 bgcolor=pink>
    <!-- 标题名称越小，字体越大 -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

h1 ~ h6，数字越小，字体就越大越粗；数字越大，字体就越小越细。

1.2 段落标签 - 块级元素

<!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>Document</title>
</head>
<body>
    <!-- 使用 lorem<tab> 排版测试 -->
    <!-- 列编辑  ： 多行排版测试 - 按住 alt键，鼠标往下点 -->
    <!-- html 会忽略 换行 和 空格 -->
    <p>这是一个段落 Lorem ipsum dolor sit, amet consectetur adipisicing elit. <br> Architecto tenetur nihil qui id quia magnam. Consectetur consequuntur omnis a excepturi totam ex nobis deserunt, cupiditate voluptatem, itaque, impedit ad veniam.</p>
    <p>这是一个段落 Lorem ipsum dolor sit, amet consectetur adipisicing elit.&nbsp;&nbsp;&nbsp; Architecto tenetur nihil qui id quia magnam. Consectetur consequuntur omnis a excepturi totam ex nobis deserunt, cupiditate voluptatem, itaque, impedit ad veniam.</p>
    <p>这是一个段落 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto tenetur nihil qui id quia magnam. Consectetur consequuntur omnis a excepturi totam ex nobis deserunt, cupiditate voluptatem, itaque, impedit ad veniam.</p>
    <p>这是一个段落 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto tenetur nihil qui id quia magnam. Consectetur consequuntur omnis a excepturi totam ex nobis deserunt, cupiditate voluptatem, itaque, impedit ad veniam.</p>
    <p>这是一个段落 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto tenetur nihil qui id quia magnam. Consectetur consequuntur omnis a excepturi totam ex nobis deserunt, cupiditate voluptatem, itaque, impedit ad veniam.</p>
</body>
</html>

1.排版测试，，使用 lorem ；

2.列编辑：多行排版测试，同一列，按住 alt，鼠标往下点；

3.html 会忽略换行和空格，所以需要使用标签 - <br> 换行标签， &nbsp 空格。

1.3 格式化标签 - 行内元素

<!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>Document</title>
</head>
<body>
    <strong>加粗1</strong>
    <b>加粗2</b>
    <em>倾斜1</em>
    <i>倾斜2</i>
    <del>删除线1</del>
    <s>删除线2</s>
    <ins>下划线1</ins>
    <u>下划线2</u>
</body>
</html>

1.4 图片标签

<!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>Document</title>
</head>
<body>
    <!-- 相对路径 -->
    <!-- <img src="image/gitee.jpg" alt=""> -->

    <!-- 访问上级目录前面需要两个 . -->
    <!-- <img src="../gitee.jpg" alt=""> -->

    <!-- src里面一般不写绝对路径  -->
    <!-- <img src="D:/bit-mysql/icoding/src/gitee.jpg" alt=""> -->

    <!-- 使用网络路径(URL) -->  
    <!-- alt：如果图片路径有问题，加载不出来，就会显示及 alt 里面的内容和图裂了的图标 -->
    <img src="https://i03piccdn.sogoucdn.com/65969965190dcae3" 
        alt="ikun" title="鸡你太美"
        width="400px"
        height="300px">
</body>
</html>

图片路径正常：图片路径有问题：

1. src 里面既可以写相对路径，也可以写绝对路径，但是一般不写绝对路径，常用写法，是在 src 里面写网络路径，也就是我们在百度里查看一张图片，右击复制图片地址，将其放入 src 中。

2. 如果路径有问题，图片就会出现图裂了的图标，当图片加载不出来时，就会显示 alt 里面的内容。

3. title：鼠标放在图片上，显示 title 里面的内容。

4. 图片大小，可以通过 width、height 来设置。

1.5 超链接标签

href 里面可以写一个完整的网址，可以跳转到任意的网站：

<!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>Document</title>
</head>
<body>
    <!-- 链接就相当于 qq 的快捷方式，超链接就是加强版的链接，跳转范围很广 -->
    <a href="https://www.sogou.com">这是一个超链接</a>
</body>
</html>

href 里面也可以只写一个文件名/相对路径，表示在当前网站内跳转：

1.html 文件

<!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>Document</title>
</head>
<body>
    <!-- 在当前页面跳转 -->
    <!-- <a href="hello.html"> 跳转到 hello.html </a> -->

    <!-- 在新的页面打开 -->
    <a href="hello.html" target="_blank">跳转到 hello.html</a>
</body>
</html>

hello.html 文件

<!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>Document</title>
</head>
<body>
    <a href="1.html">跳转到 1.html</a>
</body>
</html>

1. 如果 a 标签里只有 href，那么就只能在当前页面跳转，想要跳转到新的页面，需要设置 target = "_blank" .

2. href 里面还可以写成 # ，表示不进行任何跳转；还可以写成其他类型的文件，这个时候会触发浏览器的 "下载" 功能。

1.6 表格标签

table：表示整个表格；

tr：表示表格中的一行；

td：表示表格中的一个单元格；

th：也表示单元格，用来表示表头的单元格，字体相对更粗，文字会居中。

<!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>
    <style>
        /* CSS 代码 */
        td {
            text-align: center;
        }
    </style>
</head>
<body>
    <table border="1px" width = "500px" height = "400px" cellspacing = "0">
        <tr>
            <th>姓名 </th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>13</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>23</td>
        </tr>
    </table>
</body>
</html>

1. td 单元格里的内容，想要通过纯 html 是做不到的，所以可以搭配 CSS；

2. 表格有一个边框，单元格也有一个边框，这样的表格看起来就有两条边框了，要想只有一条边框，可以通过设置 cellspacing = 0 来做到。

1.7 列表标签

有序列表：ol - ordered list

无序列表：ul - unordered list

列表项：li

<!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>Document</title>
</head>
<body>
    <!-- 有序列表 -->
    <ol>
        <li>李华</li>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>

    <!-- 无序列表(重要) -->
    <ul>
        <li>李华</li>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>
</body>
</html>

1.7 表单标签

<!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>Document</title>
</head>
<body>
    <!-- 单行输入框 -->
    <input type="text">
    <br>

    <!-- 密码框 -->
    <input type="password">
    <br>

    <!-- 单选框 -->
    <input type="radio" name="gender" id="male"><label for="male">男</label>
    <input type="radio" name="gender" id="female" checked = "checked"><label for="female">女</label>
    <br>

    <!-- 复选框 -->
    <input type="checkbox"> 吃饭
    <input type="checkbox"> 睡觉
    <input type="checkbox"> 打游戏
    <br>

    <!-- 按钮 -->
    <input type="button" value = "这是一个按钮">
    <br>

    <!-- 文件选择器 -->
    <input type="file">
    <br>

    <!-- 下拉菜单 -->
    <select>
        <option>北京</option>
        <option>上海</option>
        <option selected = "selected">广州</option>
        <option>深圳</option>
    </select>
    <br>


    <!-- 多行编辑框 -->
    <textarea cols="30" rows="10"></textarea>
</body>
</html>

1. 单行输入框：type = "text"；

2. 密码框：type = "password"；

3. 单选框：type = "radio" ，设置 name 属性等于相同的值，可以做到排他；如果单选框按太小了，点不到，可以设置点文字也生效，通过 label 标签，id媒介，将文字和单选框绑定在一起；如果想要默认情况下选择一个，就在想设置的地方，添加 checked = "checked"

4. 复选框：type = "checkbox"；

5. 按钮：type = "button" ，还可以给按钮设置 value；

6.文件选择器：type = "file";

7. 下拉菜单：select，option，可以通过设置 selected = "selected" 将某个选项设为默认被选中；

8. 多行编辑框：textarea。

1.8 无语义标签 - div & span

1.无语义标签没有特定的应用场景，可以适用于大部分的场景；

2.前面介绍的标签中，除了 input 系列标签无法用无语义标签代替，其他的标签基本上都可以使用 div / span 来代替。

3.区别：div 是一个 "大盒子" ，属于块级元素，独占一行；span 是一个 "小盒子"，属于行内元素，不独占一行。

2.综合案例

2.1 展示简历信息

<!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>
    <h1>李华的简历</h1>
    <h2>基本信息</h2>
    <img src="https://i01piccdn.sogoucdn.com/17e322ad5c5e7c50" width = "180px" height = "180px" alt="照片">
    <p>应聘岗位：Java 开发工程师</p>
    <p>联系电话：13955546745</p>
    <p>邮箱：3167723456@qq.com</p>
    <div>
        <a href="https://gitee.com/xiaobite_hl">我的 Gitee</a>
    </div>
    <div>
        <a href="https://i.csdn.net/#/user-center/profile?spm=1011.2266.3001.5111">我的博客</a>
    </div>

    <h2>教育背景</h2>
    <ol>
        <li>2002-2008 培正幼儿园</li>
        <li>2008-2014 培正小学</li>
        <li>2014-2017 培正中学</li>
        <li>2017-2020 培正高中</li>
        <li>2020-2022 培正大学</li>
    </ol>

    <h2>专业技能</h2>
    <ul>
        <li>熟练掌握 Java 的基本语法，熟悉面向对象程序设计;</li>
        <li>熟悉常用的数据结构，例如：顺序表、链表、栈、队列、二叉树、哈希表等等;</li>
        <li>熟练掌握 MySQL 数据库，可以使用 SQL 语句完成基本的增删改查;</li>
        <li>熟悉进程和线程的基本概念，熟练掌握多线程编程，理解线程安全的相关问题和解决方案;</li>
        <li>熟悉网络原理和网络编程，尤其是对于 TCP/IP/HTTP 等重要的协议有所理解。</li>
    </ul>

    <h2>项目经历</h2>
    <ol>
        <li>
            <h3>留言墙</h3>
            <p>开发时间：2022 年 8 月 9 日 ~ 2022 年 9 月 9 日</p>
            <p>功能介绍：</p>
            <ul>
                <li>支持留言发布</li>
                <li>支持匿名留言</li>
            </ul>
        </li>
            <h3>学习小助手</h3>
            <p>开发时间：2022 年 6 月 10 日 ~ 2022 年 8 月 10 日</p>
            <p>功能介绍：</p>
            <ul>
                <li>支持错题检索</li>
                <li>支持同学讨论</li>
            </ul>
        <li>

        </li>
    </ol>

    <h2>个人评价</h2>
    <p>在校期间，学习努力认真，吃苦耐劳！</p>
</body>
</html>

效果图：

2.2 填写简历信息

<!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>
    <h1>请填写简历信息</h1>
    <table width = "500px">

        <tr>
            <td>姓名</td>
            <td>
                <input type="text">
            </td>
        </tr>

        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="gender"> <img src="image/male.png" width="18px"> 男
                <input type="radio" name = "gender"> <img src="image/female.png" width="18px"> 女
            </td>
        </tr>

        <tr>
            <td>出生日期</td>
            <td>
                <select>
                    <option>--请选择年份--</option>
                    <option>1995</option>
                    <option>1996</option>
                    <option>1997</option>
                    <option>1998</option>
                    <option>1999</option>
                    <option>2000</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</option>
                    <option>2004</option>
                    <option>2005</option>
                    <option>2006</option>
                </select>

                <select>
                    <option>--请选择月份--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                </select>

                <select>
                    <option>--请选择日期--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                    <option>13</option>
                    <option>14</option>
                    <option>15</option>
                    <option>16</option>
                    <option>17</option>
                    <option>18</option>
                    <option>19</option>
                    <option>20</option>
                    <option>21</option>
                    <option>22</option>
                    <option>23</option>
                    <option>24</option>
                    <option>25</option>
                    <option>26</option>
                    <option>27</option>
                    <option>28</option>
                    <option>29</option>
                    <option>30</option>
                    <option>31</option>
                </select>
            </td>
        </tr>

        <tr>
            <td>应聘岗位</td>
            <td>
                <input type="checkbox"> 前端开发
                <input type="checkbox"> 后端开发
                <input type="checkbox"> 测试开发
                <input type="checkbox"> 运维开发
            </td>
        </tr>

        <tr>
            <td>掌握的技能</td>
            <td>
                <textarea cols="30" rows="10"></textarea>
            </td>
        </tr>

        <tr>
            <td>项目经历</td>
            <td>
                <textarea cols="30" rows="10"></textarea>
            </td>
        </tr>

        <tr>
            <td></td>
            <td>
                <input type="checkbox"> 我已阅读了公司的招聘要求
            </td>
        </tr>

        <tr>
            <td></td>
            <td>
                <a href="#">查看我的状态</a>
            </td>
        </tr>

        <tr>
            <td></td>
            <td>
                <h3>请应聘者确认：</h3>
                <ul>
                    <li>以上信息真实有效</li>
                    <li>能够尽早去公司实习</li>
                    <li>能够接收公司的加班文化</li>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>

效果图：