菜单 搜索
首页 前端知识 HTML中的常见标签

HTML中的常见标签

2024-06-25 23:06:04 前端知识 前端哥 777 259 我要收藏

文章目录

  • 什么是标签
  • 常见标签
    • 标题标签
    • 段落标签
    • 换行标签
    • 图片标签
    • 超链接标签
    • 表格标签
    • 列表标签
      • 有序列表
      • 无序列表
    • 表单标签
    • 无语义标签
      • div
      • span
  • 使用HTML代码展示简历信息
  • 使用HTML代码填写简历信息

什么是标签

HTML代码通常使用 标签 的形式来展示内容．
1、标签是以键值对 的形式组织数据，例如< p>hello< /p>，此处hello是值，值可以随意更改成任何值都可以，两边的标签是键。
1、标签名会放在<>中，大部分标签成对出现，例如< a>标签,< a>为开始标签,< /a>为结束标签.结束标签一般在标签名前含有 /。
2、少数标签只有开始标签，没有结束标签。例如< br>标签，这样的标签称为 单标签。

常见标签

标题标签

在这里插入图片描述

效果展示：
在这里插入图片描述

数字越大，字体越小；数字越小，字体越大。

段落标签

在这里插入图片描述

段落标签通常使用p标签表示。
1、p标签具有自动换行的功能。
2、当前的 p 标签描述的段落, 前面还没有缩进. (未来 CSS 会学)
3、自动根据浏览器宽度来决定排版.
4、html 内容首尾处的换行, 空格均无效.
5、在 html 中文字之间输入的多个空格只相当于一个空格.
6、html 中直接输入换行不会真的换行, 而是相当于一个空格.

HTML代码：
在这里插入图片描述

展示效果：
在这里插入图片描述
在使用P标签写html代码时，即使进行了段落的分段，在html页面显示中，也依旧没有进行分段，所以html中的行首行末的缩进是无效的，进行多个空格操作，html也只会默认进行了一个空格操作。

换行标签

在这里插入图片描述

html中通过< br>进行换行。html中许多标签并不自带自动换行的功能，使用< br>单标签，能够将html中的内容分行。
没使用< br>的效果：
在这里插入图片描述
在这里插入图片描述

使用< br>的效果：
在这里插入图片描述

在这里插入图片描述

图片标签

在这里插入图片描述
src表示图片的的来源地址，图片的地址有：
1、绝对地址
2、相对地址（基准目录就是 html当前所在的目录）
3、网络地址（可以是一个网络图片、动图的地址）

将图片地址填入img标签中的src属性，就可以在网页上显示一张图片。width、height属性就是设置图片的宽度、高度。
在这里插入图片描述
在这里插入图片描述

超链接标签

在这里插入图片描述
在标签的href属性填入一个URL(网址)，在网页上点击该标签就可以从当前网页跳转到别的网页。
在这里插入图片描述
上述标签在网页上显示的效果，是一个超链接。
在这里插入图片描述
点击这个 百度 图标，就可以跳转到 百度的首页。

表格标签

在这里插入图片描述
表格标签的有 table 标签、tr 标签、th标签、td标签。
table标签是表格标签的开始标签，只有先声明 table 标签，才能生成一个表格
tr 标签是 表格的 行，表示 一行
th 标签是 表格的 表头
td 标签 是表示表格的一个单元格
在这里插入图片描述

列表标签

有序列表

在这里插入图片描述
ol 标签 就是 ordered list , 使用 ol 标签需要使用列表表项li标签来使用。
有序列表会在值的前面进行数字排序。
在这里插入图片描述

无序列表

在这里插入图片描述
ul 标签 就是 unordered list , 使用 ul 标签需要使用列表表项li标签来使用。
无序列表不会在值的前面进行数字排序。
在这里插入图片描述

表单标签

在这里插入图片描述
input标签 是一个 为了与用户交互（让前后端结合）的一个标签。它有多种形态，不同的形态表示不同的元素效果。
1、单行文本框
在这里插入图片描述
在这里插入图片描述
可以在文本框里输入信息。

2、密码框
在这里插入图片描述
在这里插入图片描述
密码框输入的信息都是加密的形态。

3、单选框(radio)在这里插入图片描述
单选框的name属性需要具有同一个，这样能够保证在多个单选框的情况下，进行多选一的效果。可以使用checked = “checked” 属性去默认选择某一个单选框。

在这里插入图片描述

4、复选框（checkbox）
在这里插入图片描述
复选框使用
复选框也可以使用checked = “checked” 属性去默认选择某一个复选框。

5、按钮（button）在这里插入图片描述
value属性的值就是按钮上显示的值。
在这里插入图片描述
属性onclick 中使用了一个alert()函数，函数里可以填写点击按钮后弹出的内容。onclick属性能够让静态的按钮变成动态的，点击按钮后，会弹出一个提示框。
在这里插入图片描述

无语义标签

div

div标签具有自动换行功能。div标签一般在html什么场景下都能使用，除了表单标签类型的功能无法实现外。

span

span标签同div标签一样适合各种场景，不过span标签不具备自动换行的功能。

使用HTML代码展示简历信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>resume1</title>
</head>
<body>
  <h1>小葵花</h1>  

  <h2>基本信息</h2>

  <img src="img/dog.png" alt="" width="500px" height="300px"> 

  <div>求职意向: Java开发工程师</div>
  <div>联系电话:1298379183</div>
  <div>邮   箱:98273839@qq.com</div>
  <div>  <a href="https://www.baidu.com">我的gitee</a></div>
  <a href="https://www.baidu.com">我的博客</a>

  <h2>教育背景</h2>
  <div>1.1990 - 1996 小葵花幼儿园 幼儿园</div>
  <div>2.1996 - 2002 小葵花小学  小学</div>
  <div>3.2002 - 2005 小葵花中学  初中</div>
  <div>4.2005 - 2008 小葵花中学  高中</div>
  <div>5.2008 - 2012 小葵花大学  计算机专业 本科</div>

  <h2>专业技能</h2>
  <ul>
    <li>Java基础语法扎实,已经刷了800道leetcode题</li>
    <li>常见数据结构都可以实现并熟练应用</li>
    <li>熟知计算机网络理论,并且可以独立排查常见问题</li>
    <li>掌握web开发能力,并且独立开发了学校的留言墙功能</li>
  </ul>

  <h2>我的项目</h2>

  <ol>
    <li>
        <h3>留言墙</h3>
        <div>开发时间:2008年9月 - 2008年12月</div>
        <div>功能介绍:</div>
        <ul>
            <li>支持留言发布</li>
            <li>支持匿名留言</li>
        </ul>
    </li>

    <li>
        <h3>学习小助手</h3>
        <div>开发时间:2008年9月 - 2008年12月</div>
        <div>功能介绍:</div>
        <ul>
            <li>支持错题检索</li>
            <li>支持同学探讨</li>
        </ul>
    </li>

  </ol>

  <h2>个人评价</h2>
  <div>在校期间,学习成绩优良,多次获得奖学金</div>
  
</body>
</html>

在这里插入图片描述

使用HTML代码填写简历信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>resume2</title>
</head>

<style>
.div1{
    margin: 0px 90px 0px 0px;
    background-color:white;
}
.div2{
    margin: 0px 85px 0px 0px;
    background-color:white;
}
.div3{
    margin: 0px 55px 0px 0px;
    background-color:white;

}
.div4{
    margin: 0px 55px 0px 0px;
    background-color:white;

}
.div5{
    margin: 0px 40px 0px 0px;
    background-color:white;

}
.div6{
    margin: 0px 55px 0px 0px;
    background-color:white;

}
.div7{
    margin: 0px 120px 0px 0px;
    background-color:white;

}
.div9{
    margin: 0px 60px 0px 120px;
    background-color:white;

}


</style>

<body>
    <h1>请填写简历信息</h1>
    <div>
        <span  class="div1">姓名</span>

        <span>
            <input type="text" name="" id="">
        </span>
    </div>

    <div>
        <span  class="div2">性别</span>
        <span>
            <input type="radio" name="gender" id="male">
            <label for="male">
                <img src="img\male.png" alt="" width="25px" height="25px">
                男
            </label>
            <input type="radio" name="gender" id="female">
            <label for="female">
                <img src="img\female.png" alt="" width="25px" height="25px">
                女
            </label>
        </span>
    </div>

    <div>
        <span class="div3">出生日期</span>
        <span>
            <select name="" id="">
                <option value="" selected = "selected">请选择年份--</option>
                <option value="">1990</option>
                <option value="">2000</option>
                <option value="">2012</option>
                <option value="">2018</option>
                <option value="">2022</option>
                <option value="">2023</option>
            </select>
        </span>


        <span>
            <select name="" id="">
                <option value="" selected = "selected">请选择月份--</option>
                <option value="">1</option>
                <option value="">2</option>
                <option value="">3</option>
                <option value="">4</option>
                <option value="">5</option>
                <option value="">6</option>
                <option value="">7</option>
                <option value="">8</option>
                <option value="">9</option>
                <option value="">10</option>
                <option value="">11</option>
                <option value="">12</option>
            </select>
        </span>

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

    <div>
        <span class="div4">应聘岗位</span>

        <span>
            <input type="checkbox">前端开发
            <input type="checkbox">后端开发
            <input type="checkbox">测试开发
            <input type="checkbox">运维开发
        </span>
    </div>

    <div>
        <span class="div5">掌握的技能</span>
        <span>
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </span>
    </div>


    <div>
        <span class="div6">项目经历</span>
        <span>
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </span>
    </div>

    <div>
        <span class="div7"></span>
        <span>
            <input type="checkbox">我已仔细阅读过公司的招聘要求
        </span>
    </div>


    <div>
        <span class="div7"></span>
        <span>
            <a href="https://www.baidu.com">查看我的状态</a>
        </span>
    </div>

    <div class="div9">
        <span > </span>
        <span >
            <h3>请应聘者确认:</h3>
            <ul>
                <li>以上信息真实有效</li>
                <li>能够尽早去公司实习</li>
                <li>能接受公司的加班文化</li>
            </ul>
        </span>
    </div>


    

</body>
</html>

在这里插入图片描述

转载请注明出处或者链接地址：https://www.qianduange.cn//article/13572.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

FastJson使用详解这一篇就够了

2024-07-27 22:07:32

JSON、Ajax

2024-07-27 22:07:31

SpringBoot优雅地定制JSON响应数据

2024-07-27 22:07:31

JsonNode、ObjectNode和ArrayNode

2024-07-27 22:07:30

如何用 Python 的 requests 库发送 JSON 数据的 POST 请求

2024-07-27 22:07:27

JSONObject中Java对象转换成Json格式的两种方式

2024-07-27 22:07:16

MySQL JSON数据类型全解析（JSON datatype and functions）

2024-07-27 22:07:29

【Python系列】深入解析 Python 中的 JSON 处理工具

2024-07-27 22:07:35

掌握数据转换的艺术：json-typescript-mapper

2024-07-27 22:07:34

MySQL中实现动态表单中JSON元素精准匹配的方法

2024-07-27 22:07:08

大家推荐的文章
1

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
2

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
3

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
4

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
5

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
6

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
7

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
8

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
9

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
10

UE4.27支持HTML5

2024-05-07 13:05:261000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！