HTML中的常见标签

已于 2023-12-27 12:04:54 修改
阅读量3.4k 收藏 3
点赞数
分类专栏： 前端 javase 文章标签： html 前端 javascript
于 2023-10-17 10:46:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63191002/article/details/133875736
版权

文章目录

什么是标签

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>

在这里插入图片描述

zhenzhizz`
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML标签合集——段落标签，换行标签，水平线标签，文本格式化标签
weixin_49771248的博客
10-10 444
了解html各类基础标签方便以后的学习
HTML常用标签之换行标签
热门推荐
m0_61794291的博客
01-08 1万+
最近在学习html，在这里分享下自己的学习笔记~ 换行标签<br/>，简单易懂，咱们直接来看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de
【网页前端设计HTML】HTML文本标签之换行标签和各类文本标签
最新发布
weixin_53597021的博客
07-12 726
在HTML中，我们可以使用“sup标签”来实现文本的上标效果。在HTML中，我们可以使用“sub标签”来实现文本的下标效果。在HTML中，我们可以使用“big标签”来实现字体的变大，还可以使用“small标签”来实现字体的变小。在HTML中，我们可以使用 i 标签、em标签和cite标签来实现文本的斜体效果。在HTML中，我们可以使用“strong标签”或“b标签”来对文本进行加粗。在HTML中，我们可以使用“s标签”来实现文本的中划线效果。在HTML中，我们可以使用br标签来给文字换行。
HTML <br>换行标签
boonyaxnn的博客
08-15 4345
我的主页 静夜思 唐 李白 床前明月光， 疑是地上霜。 举头望明月， 低头思故乡。 效果图：
HTML常用标签之标题、段落、换行和水平线标签
weixin_45604020的博客
06-19 936
文字汇总了html常用的标签，分析了各类标签的使用特点，并演示代码给出运行截图，让读者更容易阅读理解。
HTML标签之段落＜p＞、换行＜br＞、水平线＜hr＞
在夜里行走的博客
12-26 3270
标签在HTML页面中创建水平线，需要在内容后添加，否则，水平线就在内容自上。标签在不产生一个新段落的情况下换行。是一个空的HTML元素（单标签）。标签（双标签）定义的。
HTML的常见标签.docx
08-03
本文将详细介绍HTML的常见标签，按照它们的功能分为七个部分：基础部分、表单部分、图像部分、音频部分、链接部分、列表部分和表格部分。这些标签对于HTML初学者来说极其重要，也适合作为参考文档快速查询使用。 ##...
HTML常见标签
03-16
这篇博客主要探讨了HTML中的一些常见...以上只是HTML常见标签的一部分，实际使用中还有许多其他标签和属性，它们共同构建了丰富多彩的网页世界。通过深入学习和实践，开发者可以创建出功能强大、用户体验优秀的网页。
Java中替换HTML标签的方法代码
09-04
在Java编程语言中，处理HTML标签是常见的需求，特别是在数据清洗、文本提取或者邮件处理等场景。本篇文章将深入探讨如何使用Java中的`String`类提供的`replaceAll()`方法来替换HTML标签。 首先，我们来看一下给出的...
HTML5标签使用的常见误区
01-31
最近组内进行HTML5标签的学习，方法呢就是大家每人挑选几个标签，自己先去学习，然后给大家作讲解。这个过程大家还是挺有收获的。但是现在HTML5还处在草案阶段，有些新的标签元素的解释也是经常有变化，甚至标签加入...
HTML的常见标签使用示例
08-16
HTML的常见标签使用示例
HTML段落标签、换行标签、文本格式化标签与水平线标签
小何代码咖啡馆
04-16 1438
在四个格式化标签中虽然每一类的第一个标签和第二个标签实现的效果相同，但是为了更加强调文本效果，提高代码可读性，推荐用第一种标签。在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，在HTML中，可以使用下面的标签实现对应的属性，并且这些标签可以嵌套使用。标签用于定义段落，它可以将整个网页分为若干个段落。标签可以在网页上实现水平分割线的效果。注意，水平分割线标签为单标签。为文本分段可以使用段落标签。包裹需要放在一段的文字。标签表示换行，也可以用。在HTML中，常见用。
html中的换行(\n)或回车(\r)符号不起作用的解决办法、br、white、space、pre、line
软件毕设协助及软件开发、智慧电子模块、计算机科技、软件开发、硬件开发、程序员、写代码、工程师、互联网、物联网、技术栈、程序、编程、IT。
08-31 1万+
html中的换行(\n)或回车(\r)符号不起作用的解决办法、br、white、space、pre、line
HTML【段落和换行标签】
qq_58692334的博客
05-26 442
在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，标签用于定义段 落，它可以将整个网页分为若干个段落。单词 paragraph [ ˈ pær ə græf] 的缩写，意为段落。标签语义：可以把 HTML 文档分割为若干段落。1. 文本在一个段落中会根据浏览器窗口的大小自动换行。2. 段落和段落之间保有空隙。在 HTML 中 ， 一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望 某段文本强制换行显示，就需要使用换行标签。
前端中换行的转义字符
weixin_35752645的博客
01-09 2909
在 HTML 中，换行的转义字符是 <br> 标签。这个标签可以在文本中强制执行换行。例如： <p>这是第一行。<br>这是第二行。</p> 在 CSS 中，换行的转义字符是 \A。例如： p::before { content: "这是第一行。\A这是第二行。"; } 注意：在 HTML 中，你也可以使用段落元素 <p> 来实现...
HTML基础-关于语法结构的学习笔记
HLAn的博客
09-24 266
HTML基础学习
零基础HTML入门教程(11)——换行br
weixin_61808806的博客
12-02 4101
br 标签是空标签（意味着它没有结束标签，因此这是错误的：有开有闭合的br。在 XHTML 中，把结束标签放在开始标签中，也就是 br/。请注意，br 标签只是简单地开始新的一行，而当浏览器遇到 p 标签时，通常会在相邻的段落之间插入一些垂直的间距。我们上一小节学习了img图像，我们这一小节学习一下新的标签br换行标签，并且熟练使用。我们可以看到加br的哪行代码下面，行内块本应该不换行，但是加完br之后换行了。本小结我们学习了br这个标签他可以起到强制换行的作用，我们要合理熟练使用。
Html中识别换行符‘\n‘
Peng的博客
07-06 1万+
转载于：HTML文章页面，识别不了换行问题的解决 问题详情 后端返回的长串字符中是由换行符 ‘\n’的，但是前端展现该长串字符时却没有识别’\n’，挤在一行影响页面布局。 解决方案 查找相关资料后得到解决方案：CSS中由“white-space” 属性设置如何处理元素内的空白，设置元素的样式为white-space: pre-line即可解决问题。 注： 在React中这样设置该属性 <span style={{whiteSpace: 'pre-line'}} > // ..
HTML 中 input标签常见属性和用法
04-28
HTML 中 input 标签是用来创建用户输入表单的元素，它有很多属性和用法，以下是常见的一些： 1. type 属性：用来指定 input 的类型，包括 text、password、checkbox、radio、submit、reset、button、file 等。 2. name 属性：用来指定 input 的名称，用于后台处理表单数据。 3. value 属性：用来指定 input 的值，对于 type 为 text、password、hidden、submit、reset、button 等类型的 input，value 属性表示默认值；对于 type 为 checkbox、radio 等类型的 input，value 属性表示被选中的值。 4. placeholder 属性：用来指定 input 的占位符，显示在 input 为空时的提示文字。 5. required 属性：用来指定 input 是否为必填项。 6. disabled 属性：用来指定 input 是否禁用。 7. readonly 属性：用来指定 input 是否只读。 8. autofocus 属性：用来指定 input 是否自动聚焦。 9. multiple 属性：用来指定 input 是否允许多选，仅适用于 type 为 file 的 input。 10. accept 属性：用来指定 input 可接受的文件类型，仅适用于 type 为 file 的 input。 11. size 属性：用来指定 input 的宽度，以字符为单位。 12. maxlength 属性：用来指定 input 可接受的最大长度。 13. min 属性和 max 属性：用来指定 input 可接受的最小值和最大值，仅适用于 type 为 number、range、date、time、datetime-local 的 input。 14. step 属性：用来指定 input 的步长，仅适用于 type 为 number、range 的 input。 以上是常见的一些 input 属性和用法，不同的 input 类型可能还有其他特殊的属性和用法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值