HTML中的常用标签用法

news2025/4/14 20:14:56

作者：爱塔居

专栏：javaEE

作者简介：大三学生，希望和大家一起进步

目录

一、注释标签

二、标题标签：h1-h6

三、段落标签：p

四、换行标签：br

 五、格式化标签

 六、图片标签：img

七、超链接标签：a

八、表格标签

 九、列表标签

十、表单标签

10.1 form 标签

10.2 input 标签

十一、无语义标签：div&span

一、注释标签

注释不会显示在界面上，目的是提高代码的可读性。

<!--注释内容-->

ctrl+/快捷键可以快速进行注释或者取消注释。

注释原则：

1.要与代码逻辑一致

2.尽量使用中文

3.不要传递负能量

二、标题标签：h1-h6

有六个，从h1-h6。数字越大，字体就越小。

<!--创建新文件后，输入！，再回车，自动生成下列代码-->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

   

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>hello,h1</h1>
    <h2>hello,h2</h2>
    <h3>hello,h3</h3>
    <h4>hello,h4</h4>
    <h5>hello,h5</h5>
    <h6>hello,h6</h6>
</body>
</html>

生成页面：

三、段落标签：p

p标签表示一个段落。

<p>这是一个段落</p>

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

生成页面：

 我们会发现，手动给它回车是没有用的。p标签可以实现分段。

注意：

1.p标签之间存在一个空隙

2.当前的p标签描述的段落，前面还没有缩进

3.自动根据浏览器宽度来决定排版

4.html内容首尾处的换行，空格均无效

5.在html中文字之间输入的多个空格只相当于一个空格

6.html中直接输入换行不会真的换行，而是相当于一个空格。

四、换行标签：br

br表示换行：

1.br是一个单标签（不需要结束标签）

2.br标签不像p标签那样带有一个很大的空隙

3.<br/>是规范写法，不建议写成<br>

<!DOCTYPE html>
<br lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<p>p标签效果</p>
<p>粮仓中,麦粒颗颗饱满</p>
<p>下手以来,安徽省固镇县种粮大户王汉经常接到外地电话。</p>
<p>__________________________</p>
br标签效果</br>
粮仓中,麦粒颗颗饱满</br>下手以来,安徽省固镇县种粮大户王汉经常接到外地电话。</br>

</body>
</html>

生成页面：

 五、格式化标签

加粗：stong标签和b标签

倾斜：em标签和i标签

删除线：del标签和s标签

下划线：ins标签和u标签

<!DOCTYPE html>
<br lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<strong>strong 加粗</strong></body></br>
<b>b 加粗</b></br>
<em>em 倾斜</em></br>
<i>i 倾斜</i></br>
<del>del 删除线</del></br>
<s>s 删除线</s></br>
<ins>ins 下划线</ins></br>
<u>u 下划线</u>

</body>
</html>

生成页面：

 六、图片标签：img

img标签必须带有src属性，表示图片的路径。

<img src="rose.jpg">

此时，要把rose.jpg这个图片文件放到和html中的同级目录中。

img标签的其他属性：

1.alt:替换文本。当文本不能正确显示的时候，会显示一个替换的文字。

2.title：提示文本。鼠标放到图片上，就会有提示。

3.width/height：控制宽度高度。高度和宽度一般改一个就行。另外一个会等比例缩放，否则就会图片失衡

4.border:边框，参数是宽度的像素。

<img src="rose.jpg" alt="鲜花"  title="这是一朵鲜花"  width="500px" height="800px" border="5px">  

 注意：

1.属性可以有多个，不能写到标签之前。

2.属性之间用空格分割，可以是多个空格，也可以是换行

3.属性之间不分先后顺序

4.属性使用“键值对”的格式来表示

关于目录结构：

1）相对路径：以html所在位置位基准，找到图片的位置

同级路径：直接写文件名即可

下一级路径:image/1.jpg

上一级路径：../image/1.jpg

2)绝对路径：一个完整的磁盘路径或者网络路径

磁盘路径D：\rose.jpg

网络路径 https://img2.baidu.com/it/u=3329909248,3799019568&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500

我们可以在网络上找图，然后右键，选择复制图片地址

七、超链接标签：a

href:必须具备，表示点击后会跳转到哪个页面

target：打开方式，默认是_self。如果是_blank则用新的标签页打开

<a href="http://www.baidu.com">百度</a>

八、表格标签

table标签：表示整个表格

tr:表示表格的一行

td:表示一个单元格

th：表示表头单元格，会居中加粗

thead：表格的头部区域（注意和th区分，范围是比th要大的）

tbody：表格得到主体区域

table包含tr，tr包含td或者th

<!DOCTYPE html>
<br lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<table>
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>10</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>11</td>
    </tr>
</table>
</table>
</body>
</html>

生成页面： 

 合并单元：

跨行合并：rowspan="n"

跨列合并：colspan="n"

步骤：

1、先确定跨行还是跨列

2.找好目标单元格（跨列合并，左侧是目标单元格，跨行合并，上方是目标单元格。）

3.删除多余的单元格

未合并前：

<!DOCTYPE html>
<br lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<table align="center" border="10" cellpadding="20" cellspacing="0" width="500"
height="500">
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>10</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>11</td>
    </tr>
</table>
</table>
</body>
</html>

页面：

 合并行后：

<!DOCTYPE html>
<br lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<table align="center" border="10" cellpadding="20" cellspacing="0" width="500"
height="500">
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>张三</td>
        <td rowspan="2">男</td>
        <td>10</td>
    </tr>
    <tr>
        <td>李四</td>
        <!-- <td>女</td> -->
        <td>11</td>
    </tr>
</table>
</table>
</body>
</html>

生成页面：

 九、列表标签

主要是用来布局的，整齐好看

1.无序列表 ul li

2.有序列表（用的不多）ol li

3.自定义列表 dl（总标签） dt（小标签） dd（围绕标题来说明）

注意：

1.元素之间是并列关系

2.ul/ol中只能放li不能放其他标签，dl中只能放dt和dd

3.li中可以放其他标签

4.列表带有自己的样式。

十、表单标签

表单是让用户输入信息的重要途径. 分成两个部分:

表单域: 包含表单元素的区域. 重点是 form 标签.

表单控件: 输入框, 提交按钮等. 重点是 input 标签

10.1 form 标签

 <form action="test.html">

…[form 的内容]

</form>

描述了要把数据按照什么方式, 提交到哪个页面中. 

10.2 input 标签

各种输入控件, 单行文本框, 按钮, 单选框, 复选框.

1.type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等. name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的

2.name 才能多选一.

3.value: input 中的默认值.

 4.checked: 默认被选中. (用于单选按钮和多选按钮)

5.maxlength: 设定最大长度.

（1）文本框

<input tepe="text">

(2)密码框

<input type="password">

(3)单选框

<input type="radio" name="sex">男

<input type="radio" name="sex" checked="checked">女

(4)复选框

<input tepe="checkbox">吃饭<input type="checkbox">睡觉<input type="checkbox">打游戏

（5）普通按钮

<input type="button" value="按钮">

（6）提交按钮

<form action="test.html">

<input type="text" name="username">

<input type="submit" value="提交">

</form>

十一、无语义标签：div&span

div 是独占一行的, 是一个大盒子. span 不独占一行, 是一个小盒子.

<!DOCTYPE html>
<br lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div>
    <span>想听你听过的音乐</span>
    <span>想看你看过的小说</span>
    <span>我想收集每一刻</span>
</div>
<div>
    <span>我想看到你眼里的世界</span>
    <span>想到你到过的地方</span>
    <span>和你曾渡过的时光</span>
</div>
<div>
    <span>不想错过每一刻</span>
    <span>多希望我一直在你身边</span>
    <span>未来何去何从</span>
</div>
</table>
</body>
</html>

 

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

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

相关文章

快速排序到底有多快

快速排序到底有多快

作者主页&#xff1a;paper jie的博客_CSDN博客-C语言,算法详解领域博主 本文作者&#xff1a;大家好&#xff0c;我是paper jie&#xff0c;感谢你阅读本文&#xff0c;欢迎一建三连哦。 本文录入于《算法详解》专栏&#xff0c;本专栏是针对于大学生&#xff0c;编程小白精心…
阅读更多...
ECS服务器上搭建一个Java开发环境

ECS服务器上搭建一个Java开发环境

ECS服务器上搭建一个Java开发环境 本步骤将在ECS服务器上搭建一个Java开发环境&#xff0c;包括OpenJDK 1.8和Maven 3.6.3&#xff0c;并配置阿里云镜像仓库。 执行如下命令&#xff0c;安装OpenJDK 1.8。 yum -y install java-1.8.0-openjdk-devel.x86_64执行如下命令&…
阅读更多...
【NLP】用python实现文本转语音处理

【NLP】用python实现文本转语音处理

一、说明 介绍一款python调用库&#xff0c;离线软件包pyttsx3 API&#xff0c;它能够将文字转化成语音文件。Python 中有多种 API 可用于将文本转换为语音。pyttsx3 是一个非常易于使用的工具&#xff0c;可将输入的文本转换为音频。与其它类似的库不同&#xff0c;它可以离线…
阅读更多...
AutoSAR系列讲解（入门篇）2.2-SWC的类型(APPL)

AutoSAR系列讲解（入门篇）2.2-SWC的类型(APPL)

SWC的类型 一、原子级的SWC&#xff08;Atomic SWC&#xff09; 二、集合级的SWC&#xff08;Composition SWC&#xff09; 三、特殊的SWC 一、原子级的SWC&#xff08;Atomic SWC&#xff09; 原子级的SWC&#xff08;Atomic SWC&#xff09;&#xff1a;故名思意&#xff…
阅读更多...
git 的基本操作

git 的基本操作

1. git建立本地仓库 在想要建立的目录下输入命令 git init 我们可以看一下 .git目录下有什么 2. 配置git本地仓库 配置用户的 name 和 email 命令&#xff1a;git config [...] 配置完后&#xff0c;我们像查看一下 刚才的配置 2.1 查看配置命令 git config -l 2.2 删除…
阅读更多...
【CS144-2021】Stanford 计算机网络课程学习

【CS144-2021】Stanford 计算机网络课程学习

CS144 2019 Fall&#xff1a;https://kangyupl.gitee.io/cs144.github.io/2020 Fall&#xff1a;https://github.com/lawliet9712/Stanford-CS144-2021【推荐】2021 Fall&#xff1a;https://github.com/Kiprey/sponge 前前后后弄了半个月&#xff0c;终于啃完 CS144 了&#…
阅读更多...
VLAN基础知识3_VLAN间三层通信（单臂路由）

VLAN基础知识3_VLAN间三层通信（单臂路由）

目录 1.VLAN单臂路由简介 2.基于单臂路由VLAN间三层通信原理 3.VLAN间三层通信单臂路由实验 3.1 常用配置命令 3.2 实验配置步骤 3.3实验效果 1.VLAN单臂路由简介 单臂路由&#xff08;One-Arm Router&#xff09;是一种网络拓扑结构&#xff0c;其中一个路由器的一个接…
阅读更多...
动手写一个 Java JWT Token 生成组件

动手写一个 Java JWT Token 生成组件

OAuth2 中默认使用 Bearer Tokens (一般用 UUID 值)作为 token 的数据格式&#xff0c;但也支持升级使用 JSON Web Token(JWT) 来作为 token 的数据格式。实际来说&#xff0c;OAuth 规范中并无限制 Token 采取何种格式。今天我们就采用 JWT 来作为 Token&#xff0c;它的一个好…
阅读更多...
四种缓存的避坑总结

四种缓存的避坑总结

背景 分布式、缓存、异步和多线程被称为互联网开发的四大法宝。今天我总结一下项目开发中常接触的四种缓存实际项目中遇到过的问题。 JVM堆内缓存 JVM堆内缓存因为可以避免memcache、redis等集中式缓存网络通信故障问题&#xff0c;目前还在项目中广泛使用。 堆内缓存需要注…
阅读更多...
FFmpeg5.0源码阅读——avformat_find_stream_info

FFmpeg5.0源码阅读——avformat_find_stream_info

摘要&#xff1a;在使用FFmpeg库时通常使用avformat_find_stream_info相关函数来探测流的基本信息&#xff0c;为了更加深入理解FFmpeg的基本流程&#xff0c;本文根据FFmpeg 5.0的源码详细描述了该函数的具体实现。   关键字&#xff1a;FFmpeg   读者须知&#xff1a;读者…
阅读更多...
数学之美：神奇的杨辉三角形，比帕斯卡早了近600年，致敬中国古代数学家(63)

数学之美：神奇的杨辉三角形，比帕斯卡早了近600年，致敬中国古代数学家(63)

小朋友们好&#xff0c;大朋友们好&#xff01; 我是猫妹&#xff0c;一名爱上Python编程的小学生。 和猫妹学Python&#xff0c;一起趣味学编程。 今日主题 什么是杨辉三角形&#xff1f; 杨辉三角形有什么规律&#xff1f; 中国古代数学家杨辉。 西方科学家帕斯卡。 杨…
阅读更多...
权限管理设计方案

权限管理设计方案

阅读更多...
【开源与项目实战：开源实战】81 | 开源实战三（上）：借Google Guava学习发现和开发通用功能模块

【开源与项目实战：开源实战】81 | 开源实战三（上）：借Google Guava学习发现和开发通用功能模块

上几节课&#xff0c;我们拿 Unix 这个超级大型开源软件的开发作为引子&#xff0c;从代码设计编写和研发管理两个角度&#xff0c;讲了如何应对大型复杂项目的开发。接下来&#xff0c;我们再讲一下 Google 开源的 Java 开发库 Google Guava。 Google Guava 是一个非常成功、…
阅读更多...
智能指针类模板：auto_ptr、unique_ptr、shared_ptr的原理与使用

智能指针类模板：auto_ptr、unique_ptr、shared_ptr的原理与使用

1. 什么是智能指针 智能指针是行为类似于指针的类对象&#xff0c;通常用于管理动态内存分配。C程序通常手动动态分配堆内存&#xff0c;但如果动态分配的内存没有释放&#xff0c;则会发生内存泄漏。 例如代码段1.1。 // 代码段1.1 void demo() {double *pd new double;*pd…
阅读更多...
使用STM32F103的串口实现IAP程序升级功能

使用STM32F103的串口实现IAP程序升级功能

使用STM32F103的串口实现IAP程序升级功能 &#x1f3ac;IAP程序烧录全过程演示&#xff1a; ✨这几天折腾IAP升级功能&#xff0c;狂补了很多相关BootLoader相关的知识。本来最想实现IAP升级程序的方式是&#xff0c;基于SPI通讯的SD卡&#xff0c;借助挂载的FatFS文件系统&am…
阅读更多...
C++中的内存分区

C++中的内存分区

目录 操作系统的内存区域 C内存分区模型 1. 程序运行前 2. 程序运行后 3. new 操作符的使用 操作系统的内存区域 text段&#xff1a;存储程序的二进制指令&#xff0c;即程序源码编译后的二进制代码data段&#xff1a;存储已被初始化的全局变量、常量bss段&#xff1a;存储…
阅读更多...
ES-工作原理

ES-工作原理

前言 ​ 搜索引擎是对数据的检索&#xff0c;而数据总体分为两种&#xff1a;结构化数据和非结构化数据。而对于结构化数据&#xff0c;因为他们具有特定的结构&#xff0c;所以一般都是可以通过关系型数据库MySQL/oracle的二维表的方式存储和搜索&#xff0c;也可以建立索引。…
阅读更多...
20230624作业

20230624作业

阅读更多...
Redis的简单使用 (实现Session持久化)

Redis的简单使用 (实现Session持久化)

&#x1f389;&#x1f389;&#x1f389;点进来你就是我的人了博主主页&#xff1a;&#x1f648;&#x1f648;&#x1f648;戳一戳,欢迎大佬指点! 欢迎志同道合的朋友一起加油喔&#x1f93a;&#x1f93a;&#x1f93a; 目录 一、Redis数据类型的使用 1. 字符串&#xff…
阅读更多...
Redis【入门篇】---- Redis的Java客户端-Jedis

Redis【入门篇】---- Redis的Java客户端-Jedis

Redis【入门篇】---- Redis的Java客户端-Jedis 1. Jedis快速入门2. Jedis连接池1. 创建Jedis连接池2. 改造原始代码 在Redis官网中提供了各种语言的客户端&#xff0c;地址&#xff1a;https://redis.io/docs/clients/ 其中Java客户端也包含很多&#xff1a; 标记为❤的就是推荐…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023