HTML常用标签的简单用法

1.常用标签

1.1 注释标签

1.1标题标签 - 块级元素

1.2 段落标签 - 块级元素

1.8 无语义标签 - div & span

2.综合案例

2.1 展示简历信息

2.2 填写简历信息

1.常用标签

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

1.1 注释标签

1.1标题标签 - 块级元素


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 段落标签 - 块级元素


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>Documenttitle>
head>
<body>
    
    
    
    <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.    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 会忽略换行和空格，所以需要使用标签 -
换行标签，空格。

1.3 格式化标签 - 行内元素


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

1.4 图片标签


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>Documenttitle>
head>
<body>
    
    
 
    
    
 
    
    
 
      
    
    <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 里面可以写一个完整的网址，可以跳转到任意的网站：


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>Documenttitle>
head>
<body>
    
    <a href="https://www.sogou.com">这是一个超链接a>
body>
html>

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

1.html 文件


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>Documenttitle>
head>
<body>
    
    
 
    
    <a href="hello.html" target="_blank">跳转到 hello.htmla>
body>
html>

hello.html 文件


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>Documenttitle>
head>
<body>
    <a href="1.html">跳转到 1.htmla>
body>
html>

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

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

1.6 表格标签

table：表示整个表格；

tr：表示表格中的一行；

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

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


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>13td>
        tr>
        <tr>
            <td>李四td>
            <td>女td>
            <td>23td>
        tr>
    table>
body>
html>

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

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

1.7 列表标签

有序列表：ol - ordered list

无序列表：ul - unordered list

列表项：li


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>Documenttitle>
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 表单标签


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>Documenttitle>
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 展示简历信息


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>联系电话：13955546745p>
    <p>邮箱：3167723456@qq.comp>
    <div>
        <a href="https://gitee.com/xiaobite_hl">我的 Giteea>
    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 填写简历信息


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>1995option>
                    <option>1996option>
                    <option>1997option>
                    <option>1998option>
                    <option>1999option>
                    <option>2000option>
                    <option>2001option>
                    <option>2002option>
                    <option>2003option>
                    <option>2004option>
                    <option>2005option>
                    <option>2006option>
                select>
 
                <select>
                    <option>--请选择月份--option>
                    <option>1option>
                    <option>2option>
                    <option>3option>
                    <option>4option>
                    <option>5option>
                    <option>6option>
                    <option>7option>
                    <option>8option>
                    <option>9option>
                    <option>10option>
                    <option>11option>
                    <option>12option>
                select>
 
                <select>
                    <option>--请选择日期--option>
                    <option>1option>
                    <option>2option>
                    <option>3option>
                    <option>4option>
                    <option>5option>
                    <option>6option>
                    <option>7option>
                    <option>8option>
                    <option>9option>
                    <option>10option>
                    <option>11option>
                    <option>12option>
                    <option>13option>
                    <option>14option>
                    <option>15option>
                    <option>16option>
                    <option>17option>
                    <option>18option>
                    <option>19option>
                    <option>20option>
                    <option>21option>
                    <option>22option>
                    <option>23option>
                    <option>24option>
                    <option>25option>
                    <option>26option>
                    <option>27option>
                    <option>28option>
                    <option>29option>
                    <option>30option>
                    <option>31option>
                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>

效果图：

谢谢观看！！

相关阅读:
springboot增加license授权认证
 易基因｜DNA-蛋白质互作的检测技术及ChIP-seq实验关键 | 易讲堂
 前端架构-分层而治，铁打的MV流水的C
【C语言_线程pthread_互斥锁mutex_条件触发cond 之解析与示例 (开源)】.md updata:23/11/03
JavaWeb三大组件-Filter
29.5.4 恢复数据
 百度地图数据可视化
 win11下安装golang
第14届蓝桥杯省赛 ---- C/C++ C组
 基于单片机体温脉搏检测控制系统及源程序
原文地址：https://blog.csdn.net/xaiobit_hl/article/details/126802562