HTML常见标签总结

news2024/12/29 9:06:16

目录

1.标题标签

 2.段落标签

3.字体修饰标签

4.图片标签

5.超链接标签

6.表格标签

7.列表标签

8.表单标签

 9.下拉菜单

10 多行文本框

1.标题标签

一级标题是<h1></h1>中间填上标题的内容,一共可以设置六级标题,数字越小,标题就越大越粗

我们测试一段代码

<!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>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    
</body>
</html>

我们的效果图如下

 2.段落标签

段落标签之间会有换行,并且段落之间有明显的段落间距

我们使用<p></p>标签

<!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>
    <p>ssssssssssssssssssss</p>
    <p>ssssssssssssssssssss</p>
    <p>ssssssssssssssssssss</p>
    <p>ssssssssssssssssssss</p>
    
</body>
</html>

在这个代码中,我们使用p给文本分段,效果如下

3.字体修饰标签

加粗:<b></b>

倾斜:<i></i>

删除线:<s></s>

 下划线:<u></u>

我们直接看代码

<!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>
    <b>加粗的效果</b>
    <i>倾斜的效果</i>
    <s>删除线的效果</s>
    <u>下划线的效果</u>
</body>
</html>

我们看效果

 我们这里可以看到,虽然我们代码中使用了换行,但是我们的输出却没有换行,这是因为我们这个标签内的元素叫做"行内元素",具体我们后面会讲,想要换行,可以再加上p标签

我们用代码来演示

<!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>
    <p><b>加粗的效果</b></p>
    <i>倾斜的效果</i>
    <s>删除线的效果</s>
    <u>下划线的效果</u>
</body>
</html>

运行结果

可以看到我们的加粗是独占一行的,因为我们给了p标签

4.图片标签

<img>是图片的标签,img标签必须带有个 src属性,来指定图片的路径

这里我们还可以用width和height属性来设置宽度和高度

这里的alt标签是在图片挂了的时候,旁边显示一行小字,我们看具体的演示

<!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="https://profile.csdnimg.cn/F/7/9/1_qq_55546526" alt="甘枳" width="300px" height="300px">
</body>
</html>

 我们看下效果

而当我们的图片挂了的时候

可以看到,会显示这个小字

5.超链接标签

<a></a>是超链接的标签,我们可以在网页中加入超链接

<!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="https://www.baidu.com/">百度</a>
</body>
</html>

 

 这样我们可以看下效果

可以看到,这里 

我们有了一个百度的链接,我们点过区

 

 可以看到,我们就访问到了百度这个网页

6.表格标签

table:表示整个表格

tr:表示表格的一行

td:表示一个单元格

th:表示表头单元格

thead:表示表格头部区域

tbody:表格得到主体区域

我们来看演示

<!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>
    <table>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>宿舍</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>2</td>
        </tr><tr>
            <td>3</td>
            <td>王五</td>
            <td>3</td>
        </tr>
    </table>
</body>
</html>

我们可以看到这个的效果就是没有线框的,和我们平常见到的表格有点不太一样,那我们想让他有边框,就可以给table加标签,具体实现如下

<!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>
    <table width="500px" height="500px" border="1px">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>宿舍</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>2</td>
        </tr><tr>
            <td>3</td>
            <td>王五</td>
            <td>3</td>
        </tr>
    </table>
</body>
</html>

 看下效果

 可以看到,我们这个表格就变得好看了起来

7.列表标签

列表标签有两种,一个是有序列表ol,一个是无序列表ul,还有列表项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></ol>
    
    
    <ul><li>哈哈哈</li><li>哈哈哈</li><li>哈哈哈</li></ul>
</body>
</html>

3

8.表单标签

 input标签

这个标签有很多形态,type给不同的值,可以呈现出不同的效果

<!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">用户名
    <input type="password">密码
    <input type="radio" name="one">单选1
    <input type="radio" name="one">单选2
    <input type="checkbox">A
    <input type="checkbox">B
    <input type="checkbox">C
</body>
</html>

text:输入框

password密码输入框

radio选项框,当给名字的时候,相同名字的选项只能选一个

checkbox:多选框

我们看下效果

 这里我们没有加换行,如果需要可以加上换行

这里我们可以给单选加上label标签,这样我们就不是必须点那个小圆点了,就点字也可以了

代码案例如下

<!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">
    密码<input type="password">
    <input type="radio" name="one" id="1"><label for="1">单选1</label>
    
    <input type="radio" name="one" id="2"><label for="2">单选2</label>
    <input type="checkbox">A
    <input type="checkbox">B
    <input type="checkbox">C
</body>
</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>
    <p>
        <input type="button" value="这是按钮" onclick="alert('你按了按钮')">
    </p>
    提交一个文本<input type="file" >
</body>
</html>

button是按钮类型

file是提交文本的类型

我们看下演示效果

 

 9.下拉菜单

我们用select来做下拉菜单,用option标签标识选项内容

我们看代码

<!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>
   <select>
    <option>男</option>
    <option>女</option>
   </select>
</body>
</html>

 

10 多行文本框

我们想要多行文本框的时候,可以使用textarea

<!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>
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2116.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

深度残差收缩网络（Deep Residual Shrinkage Networks for Fault Diagnosis ）

深度残差收缩网络（Deep Residual Shrinkage Networks for Fault Diagnosis ）

摘要-本文开发了新的深度学习方法&#xff0c;即深度残余收缩网络&#xff0c;提高来自高噪声振动信号的特征学习能力&#xff0c;并实现较高的故障诊断准确性。软阈值作为非线性转换层插入到深层体系结构中&#xff0c;以消除不重要的特征。此外&#xff0c;考虑到通常为阈值设…
阅读更多...
大数据编程实验一：HDFS常用操作和Spark读取文件系统数据

大数据编程实验一：HDFS常用操作和Spark读取文件系统数据

大数据编程实验一&#xff1a;HDFS常用操作和Spark读取文件系统数据 文章目录大数据编程实验一&#xff1a;HDFS常用操作和Spark读取文件系统数据一、前言二、实验目的与要求三、实验内容四、实验步骤1、HDFS常用操作2、Spark读取文件系统的数据五、最后我想说一、前言 这是我…
阅读更多...
Swift基础——字典

Swift基础——字典

Swift基础——字典 嗯。。。前面我们已经学习了数组&#xff08;相关文章地址&#xff09;&#xff0c;我们知道了在Swift中&#xff0c;苹果提供了两种集合类型来存储集合的值即Array和Dictionary。 Dictionary字典 字典&#xff1a;一种存储多个相同类型值的容器&#xff…
阅读更多...
谈谈Java对象的生命周期

谈谈Java对象的生命周期

经过前面的分析 &#xff0c;我们现在来看一下创建的对象到底是什么东西&#xff0c;并且完整的总结一下一个对象从创建到回收到底经过了哪些阶段。 1 对象的创建 对象创建的主要流程: 1.类加载检查 虚拟机遇到一条new指令时&#xff0c;首先将去检查这个指令的参数是否能在常…
阅读更多...
【趣学算法】贪心算法、海盗古董装船问题

【趣学算法】贪心算法、海盗古董装船问题

14天阅读挑战赛 努力是为了不平庸~ 算法学习有些时候是枯燥的&#xff0c;这一次&#xff0c;让我们先人一步&#xff0c;趣学算法&#xff01; 文章目录贪心本质贪心选择最优子结构最优装载问题sort函数总结贪心本质 一个贪心算法总是做出当前最好的选择&#xff0c;也就是说…
阅读更多...
R语言“优雅地“进行医学统计分析

R语言“优雅地“进行医学统计分析

本文首发于公众号&#xff1a;医学和生信笔记&#xff0c;完美观看体验请至公众号查看本文。 医学和生信笔记&#xff0c;专注R语言在临床医学中的使用&#xff0c;R语言数据分析和可视化。 文章目录主要函数描述性统计比较均值增强R中的ANOVA事后检验&#xff08;post-hoc&…
阅读更多...
嘉立创EDA的一些使用技巧

嘉立创EDA的一些使用技巧

立创EDA专业版-使用教程 (lceda.cn):https://prodocs.lceda.cn/cn/faq/editor/index.html绘制板框&#xff1a;https://blog.csdn.net/gutie_bartholomew/article/details/122936253和 mil 的切换&#xff0c;按【Q】切换单位测量 AltM&#xff0c;方便地测量物件之间的距离。按…
阅读更多...
MySQL调优之索引在什么情况下会失效？

MySQL调优之索引在什么情况下会失效？

MySQL中提高性能的一个最有效的方式是对数据表设计合理的索引。索引提供了高效访问数据的方法&#xff0c;并且加快查询的速度&#xff0c;因此索引对查询的速度有着至关重要的影响。 使用索引可以快速地定位表中的某条记录&#xff0c;从而提高数据库查询的速度&#xff0c;提…
阅读更多...
Spring JdbcTemplate.queryForObject()

Spring JdbcTemplate.queryForObject()

Spring JdbcTemplate 是JDBC核心包中的中心类。它简化了 JDBC 与 Spring 的使用&#xff0c;并有助于避免常见错误。在此页面上&#xff0c;我们将学习使用它的queryForObject 方法。 JdbcTemplate.queryForObject不同参数的方法。1. <T> T queryForObject(String sql, …
阅读更多...
继承-安全-设计模式

继承-安全-设计模式

继承 与 原型、原型链 1. 继承是什么&#xff1f; 继承就是一个对象可以访问另外一个对象中的属性和方法 2. 继承的目的&#xff1f; 继承的目的就是实现原来设计与代码的重用 3. 继承的方式 java、c等&#xff1a;class**javaScript&#xff1a; 原型链 ** ES2015/ES6 中…
阅读更多...
数据导入与预处理-拓展-pandas可视化

数据导入与预处理-拓展-pandas可视化

数据导入与预处理-拓展-pandas可视化1. 折线图1.1 导入数据1.2 绘制单列折线图1.3 绘制多列折线图1.4 绘制折线图-双y轴2. 条形图2.1 单行垂直/水平条形图2.2 多行条形图3. 直方图3.1 生成数据3.2 透明度/刻度/堆叠直方图3.3 拆分子图4. 散点图4.1生成数据4.2 绘制大小不一的散…
阅读更多...
自动化测试的使用场景有哪些？如何正确使用？

自动化测试的使用场景有哪些？如何正确使用？

目录 前言 什么是自动化测试&#xff1f; 自动化测试的使用场景有哪些&#xff1f; 自动化测试有什么好处&#xff1f; 总结 前言 本文将通过介绍 自动化测试是什么 &#xff0c; 哪些场景适用于自动化测试 &#xff0c; 自动化测试的好处 &#xff0c; 以及通过 具体的自…
阅读更多...
vue如何二次封装一个高频可复用的组件

vue如何二次封装一个高频可复用的组件

在我们的业务里&#xff0c;我们通常会二次封装一些高频业务组件&#xff0c;比如弹框&#xff0c;抽屉&#xff0c;表单等这些业务组件&#xff0c;为什么要二次封装&#xff1f;我们所有人心里的答案肯定是&#xff0c;同样类似的代码太多了&#xff0c;我想复用组件&#xf…
阅读更多...
2004-2020中小企业板上市公司财务报表股票交易董事高管等面板数据

2004-2020中小企业板上市公司财务报表股票交易董事高管等面板数据

1200变量&#xff01;中小企业板上市公司面板数据大全 2004-2020年 1、时间&#xff1a;2004-2020年 2、数据范围&#xff1a;共计973家上市公司 3、数据指标&#xff1a;包括财务报表、股票交易、董事高管等1200变量 4、用途&#xff1a;进行上市公司高管股权激励与公司绩…
阅读更多...
C语言刷题系列——1.将三个整数按从大到小输出

C语言刷题系列——1.将三个整数按从大到小输出

将三个整数按从大到小输出1.输入三个整数2.最大的值放在a中&#xff0c;最小值放在c中&#xff0c;剩余的一个放在bstep1&#xff1a;a和b比较step2&#xff1a;a和c比较step3&#xff1a;b和c比较3.最终的代码1.输入三个整数 先写好main函数、头文件 #include <stdio.h&g…
阅读更多...
用高并发技巧解决redis热key问题

用高并发技巧解决redis热key问题

​ 这篇文章我将介绍工作中处理热key问题的常用手段&#xff0c;可能介绍的不是很全&#xff0c;毕竟不同的业务场景可能有不同的解决方案&#xff0c;但是相信通过这部分的介绍能提供一个热key问题的思路。 热key问题&#xff0c;简单来说就是对某一资源的访问量过高问题&…
阅读更多...
Unity学习shader笔记[一百零八]简单萤火效果

Unity学习shader笔记[一百零八]简单萤火效果

之前用粒子系统基于原有萤火虫的粒子改了一波慢萤火效果就被惊艳到了&#xff0c;开始大家讨论&#xff0c;就都觉得这样大数量的粒子消耗挺大的&#xff0c;后面测试过才发现单纯的粒子系统在总粒子数量3000&#xff0c;每秒300的生成数量&#xff0c;屏幕呈现有1000多个粒子的…
阅读更多...
【黄啊码】MySQL入门—17、在没有备份的情况下，如何恢复数据库数据？

【黄啊码】MySQL入门—17、在没有备份的情况下，如何恢复数据库数据？

大家好&#xff01;我是黄啊码&#xff0c;MySQL的入门篇已经讲到第16个课程了&#xff0c;今天我们继续讲讲大白篇系列——科技与狠活之恢复数据库 在没做数据库备份&#xff0c;没有开启使用 Binlog 的情况下&#xff0c;尽可能地找回数据。 今天的内容主要包括以下几个部分…
阅读更多...
2022NISCTF--web

2022NISCTF--web

easyssrf 打开题目&#xff0c;显示的是 尝试输入&#xff0c; 发现输入flag有东西 读取文件 访问下一个网站 读取文件 不能以file开头 直接伪协议&#xff0c;base64解码 checkIn 奇怪的unicode编码 当选中左边的时候右边也会被选中 我们在vscode看看 这样的额 展示的是UTF-1…
阅读更多...
Linux系统中利用open函数多次打开同一个文件操作方法

Linux系统中利用open函数多次打开同一个文件操作方法

大家好。 今天的话主要和大家聊一聊&#xff0c;在Linux系统中如果一个文件被打开多次会出现什么情况。 目录 第一&#xff1a;多次打开同一个文件 ​第二&#xff1a;一个文件被打开多次&#xff0c;在内存中不会存在多份动态文件 ​第三&#xff1a;多次open打开同一…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023