当前位置：首页 > news >正文

HTML新手入门笔记整理：HTML基本标签

news 2026/2/15 16:58:47

结构标签

<html> </html>	告诉浏览器这个页面是从<html> 开始，到 </html>结束
<head> </head>	网页的头部，用于定义一些特殊内容，如页面标题、定时刷新、外部文件等。
<body> </body>	是网页的身体，大部分代码，都是在这个标签内编写
<title> </title>	定义浏览器栏目的标题

<head> </head>内部标签（了解即可）

在HTML中，只有一些特殊的标签才能在head标签内，一般有6个。

title标签

在HTML中，title标签唯一的作用就是定义网页的标题。

meta标签（单标签）

在HTML中，meta标签，一般用于定义页面的特殊信息，如页面关键字、页面描述等。这些信息不是提供给用户看的，而是提供给搜索引擎（如百度蜘蛛、谷歌蜘蛛）看的。简单来说，meta就是用来告诉“搜索蜘蛛”这个页面是做什么的。

name属性

keywords	网页搜索关键字，可以是多个
description	网页的描述与介绍
author	网页的作者
copyright	版权信息

<!--网页关键字-->
<meta name="keywords" content="这个网页是干嘛的，科技互联网，设计开发"/><!--网页描述-->
<meta name="description" content="这个网页的作用是什么"/><!--本页作者-->
<meta name="author" content="helicopter"><!--版权声明-->
<meta name="copyright" content="本站所有教程均为原创，版权所有，禁止转载。否则必将追究法律责任。"/>

http-equiv属性

定义网页所使用的编码

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><!--H5中简写-->
<meta  charset=utf-8"/>

定义网页自动刷新跳转

<!--当前页面在6秒后会自动跳转到其他页面-->
<meta http-equiv="refresh" content="6";url="url"/>

style标签

用于定义元素的CSS样式。

语法

<style type="text/css">
/*这里写CSS样式*/
</style>

script标签

用于定义页面Javascript代码，也可引入外部Javascript文件。

语法

<script>
/*这里写JavaScript代码*/
</script>

link标签

用于引入外部样式文件（CSS文件）

语法

<link type="text/css" rel="stylesheet" href="css/index.css

文本标签

标题标签

<h1> 一级标题 </h1>
<h2> 二级标题 </h2>
<h3> 三级标题 </h3>
<h4> 四级标题 </h4>
<h5> 五级标题 </h5>
<h6>六级标题 </h6>

段落标签

<p> </p> 段落标签，用于定义一段文字。（默认字体大小16px）

换行标签

<br/> (单标签）

<p>床前明月光，疑是地上霜。<br/>举头望明月，低头思故乡。</p >

预览效果

格式标签

常用

粗体标签	<strong></strong> / <b></b>
斜体标签	<i></i> / <em></em> / <cite></cite>
上标标签	<sup></sup>
下标标签	<sub></sub>
中划线标签	<s></s>
下滑线标签	<u></u>
大字号标签	<big></big>
小字号标签	<small></small>

其他

定义已经被插入文档中的文本	<ins> </ins>
定义文档中已删除的文本	<del> </del>
表示一个缩写词或者首字母缩略词	<abbr> </abbr>
定义文字方向	<bdo> </bdor>
定义短的引用语	<q> </q>

水平线标签

<hr/> (单标签）

超链接标签

<a href=“url"> </a> （在 href 属性中指定链接的地址。）

属性

href	指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。
target（可选）	指定链接如何在浏览器中打开，值包括： _blank（在新标签或窗口中打开链接） _self（在当前标签或窗口中打开链接） _parent（在父窗口打开链接） _top（在顶层窗口打开链接）
title（可选）	提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。
rel（可选）	指定与链接目标的关系，如 nofollow、noopener 等。

锚点链接

在HTML中，锚点链接其实是内部链接的一种，它的链接地址（也就是href）指向的是当前页面的某个部分。所谓锚点链接，简单地说，就是单击某一个超链接，它就会跳到当前页面的某一部分。

想要实现锚点链接，需要定义以下2个参数。

目标元素的id
a标签的href属性指向该id。

给a标签的href属性赋值时，需要在id前面加上“#”（井号），用来表示这是一个锚点链接。

语法

<a href="#abcd"> </a>

图片标签

<img> (单标签）

<img src="/images/logo.png"  alt="图片提示信息"  width="258" height="39" />

属性

src	src 指 "source"。源属性的值是图像的 URL 地址。
alt	alt 属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
title	title属性也用于图片描述，不过这个描述文字是给用户看的。当鼠标指针移到图片上时，会显示title中的文字。
height	高度
width	宽度

div标签

全称division（分区）用于划分HTML结构，使代码更具有逻辑性。

表格标签

基本结构

表格由三部分组成

表格：table标签
行：tr标签
单元格：tb标签

<table>和</table>表示整个表格的开始和结束，<tr>和</tr>表示行的开始和结束，而<td>和</td>表示单元格的开始和结束。
在表格中，有多少组“<tr></tr>，就表示有多少行

语法

<table><tr><td>单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td><td>单元格4</td></tr>
</table>

默认情况下，表格是没有边框的。

表格标题：caption

一个表格只能有一个标题，也就只能有一个caption标签。默认标题位于表格的第一行。

语法

<table><caption>表格标题</caption><tr><td>单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td><td>单元格4</td></tr>
</table>

表头单元格：th

在HTML中，单元格有两种，一种是“表头单元格”，使用th标签；另外一种是“表行单元格”，使用的是td标签。
th指的是table header cell（表头单元格）。td指的是table data cell（表行单元格）。
列表标签

显示上：浏览器会以“粗体”和“居中”来显示标签中的内容，但td标签不会。
语义上：th标签用于表头，而td标签用于表行。

表头thead、表身tbody、表脚tfoot

thead、tbody和tfoot把表格划分为3部分：表头、表身、表脚。
表脚（tfoot）往往用于统计数据。对于thead、tbody和tfoot标签，不一定需要全部都用上，如tfoot就很少用。一般情况下，我们根据实际需要来使用这些标签。
此外，thead、tbody和tfoot除了可以使代码更具有语义，还有另外一个重要作用：方便分块来控制表格的CSS样式。
可以让你的代码更具有逻辑性，并且还可以很好地结合CSS来分块控制样式。

语法

<table><caption>表格标题</caption><!--表头--><thead><tr><th>表头单元格1</th><th>表头单元格2</th></tr></thead><!--表身--><tbody><tr><td>表行单元格1</td><td>表行单元格2</td></tr><tr><td>表行单元格3</td><td>表行单元格4</td></tr></tbody><!--表脚--><tfoot><tr><td>标准单元格5</td><td>标准单元格6</td></tr></tfoot>
</table>

合并行：rowspan

在HTML中，我们可以使用 rowspan属性来合并行。所谓的合并行，指的是将“纵向的N个单元格”合并。

语法

<td rowspan="跨域的行数"></td>

合并列：colspan

在HTML中，我们可以使用 colspan属性来合并列。所谓的合并列，指的是将“横向的N个单元格”合并。

语法

<td colspan="跨域的列数"></td>

列表标签

有序列表

有序列表各个列表项是有顺序的。从<ol>开始，到</ol>结束。一般采用数字或字母作为顺序。默认采用数字顺序。
ol，即ordered list（有序列表）。li，即list（列表项）。
ol 标签和 li 标签需要配合一起使用，不可以单独使用，而且 <ol> 标签的子标签也只能是li标签，不能是其他标签。

语法

<ol><li>列表项</li><li>列表项</li><li>列表项</li>
</ol>

type属性

属性值	列表项符号
1	阿拉伯数字：1、2、3······
a	小写英文字母：a、b、c······
A	大写英文字母：A、B、C······
i	小写罗马数字：i、ii、iii······
I	大写罗马数字：I、II、III······

不同类型的有序列表

无序列表

无序列表的列表项是没有顺序的。从<ul>开始，到</ul>结束。默认情况下，无需列表的列表项目符号是。
ul，即unordered list（无序列表）。li，即list（列表项）。
ul标签和li标签也需要配合一起使用，不可以单独使用，而且ul标签的子标签也只能是li标签，不能是其他标签。

语法

<ul><li>列表项</li><li>列表项</li><li>列表项</li>
</ul>

type属性

属性值	列表项符号
disc	实心圆
circle	空心圆
square	失信正方形

不同类型的无序列表

自定义列表

定义列表由两部份组成：名词和描述。
dl即definition list（定义列表），dt即definition term（定义名词），而dd即definition description（定义描述）。
在该语法中，<dl>标记和</dl>标记分别定义了定义列表的开始和结束，dt标签用于添加要解释的名词，而dd标签用于添加该名词的具体解释。

<dl><dt>名词</dt><dd>描述</dd>……
</dl>

自定义列表

嵌套列表嵌套列表 2

表单标签

form标签

所有的表单标签必须放在form标签内部才可有效。

属性

属性	值	描述
action	URL	提交地址：规定当提交表单时向何处发送表单数据。
name	text	规定表单的名称。
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	编码方式：规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method="post" 的情况）
method	get post	提交方式：规定用于发送表单数据的 HTTP 方法。
target	_blank _self _parent _top	打开方式：规定在何处打开 action URL。

input标签

input是自闭合标签（单标签），它是没有结束符号的。

语法

<input type="表单类型"/>

type属性

属性值	浏览器效果	说明
text		单行文本框
password		密码文本框
radio		单选框
checkbox		多选框
button/submit/reset		普通/提交/重置按钮
file		文本上传

单行文本

语法

<input type="text" />

属性

属性	属性值	说明
value	text	设置文本框的默认值（占位文字）
size	10	设置文本框的长度
maxlenght	10	设置单行文本框中最多可以输入的字符数

密码文本框

在单行文本框中输入的字符是可见的，而在密码文本框中输入的字符不可见。

语法

<input type="password" />

属性

属性	属性值	说明
value	text	设置文本框的默认值（占位文字）
size	10	设置文本框的长度
maxlenght	10	设置单行文本框中最多可以输入的字符数

单选框

语法

<input type="radio" name="组名" value="取值"/>

属性

属性	属性值	说明
name（必加）	text	选项组名
value（必加）	text	选项取值
checked	空值/checked	默认选中

复选框

语法

<input type="ceckbox" name="组名" value="取值"/>

属性

属性	属性值	说明
name（必加）	text	选项组名
value（必加）	text	选项取值
checked	空值/checked	默认选中

按钮

常见的按钮有3种：普通按钮（button），提交按钮（submit），重置按钮（reset）。

普通按钮

语法

<input type="button" value="取值"/>

提交按钮

用于给服务器提交数据。

语法

<input type="submit" value="取值"/>

重置按钮

用于清除用户在表单中输入的内容。

只能清除当前“所在form标签”内表单中内容，对于外部表单清除是无效的。

语法

<input type="reset" value="取值"/>

按钮标签 button

文件上传

语法

<input type="file" />

多行文本框 textarea

语法

<textarea rows="行数" cols="列数" value="取值" >默认内容</textarea>

下拉列表

语法

<select><option>选项内容</option>……<option>选项内容</option>
</select>

size属性

设置下拉列表可以选择多项
默认情况下，下拉列表只能选择一项。如果想要同时选取多项，首先要设置multiple属性，然后使用“Ctrl+鼠标左键”来选取。
下拉列表multiple属性没有属性值

语法

<select multiple><option>选项内容</option>……<option>选项内容</option>
</select>

size属性

设置下拉列表显示几个列表项，取值为整数。

语法

<select size="5"><option>选项内容</option>……<option>选项内容</option>
</select>

Chrome浏览器要求最低是4个选项，因此我们只能设置4及以上的数字。

option标签属性

属性	属性值	说明
selected	无	是否选中
value	text	选项值

表单元素不一定都要放在form标签内。对于要与服务器进行交互的表单元素，必须放在form标签内才有效。如果表单元素不需要与服务器进行交互，那就没必要放在form标签内。

内嵌框架 iframe

内嵌框架，是指在当前页面再嵌入另外一个网页。

语法

<iframe src="url" width="宽度值" height="高度值"> </iframe>

HTML新手入门笔记整理：HTML基本标签

结构标签 <html> </html> 告诉浏览器这个页面是从<html> 开始，到 </html>结束 <head> </head> 网页的头部，用于定义一些特殊内容，如页面标题、定时刷新、外部文件等。 <body> </body> …...

编程日记 2023/11/23 4:46:55

Redis高级特性和应用(发布订阅、Stream)

目录发布和订阅操作命令发布消息订阅消息查询订阅情况查看活跃的频道查看频道订阅数使用场景和缺点 Redis Stream Stream总述常用操作命令生产端消费端单消费者消费组创建消费组消息消费在Redis中实现消息队列基于pub/sub 基于Stream Re…...

编程日记 2023/11/23 4:44:49

RoCE、IB和TCP等网络的基本知识及差异对比

目前有三种RDMA网络，分别是Infiniband、RoCE(RDMA over Converged Ethernet)、iWARP。其中，Infiniband是一种专为RDMA设计的网络，从硬件级别保证可靠传输 ，技术先进，但是成本高昂。而RoCE 和 iWARP都是基于以太网的…...

编程日记 2023/11/23 4:43:48

c语言-操作符详解（含优先级与结合性）

文章目录了解什么是操作数、操作符操作数：操作符操作符详解：1.算术操作符： 、- 、* 、/ 、%2.移位操作符: << >>3.位操作符: & | ^4. 赋值操作符: 、、 - 、 * 、 / 、% 、<< 、>> 、& 、| 、^5. 单⽬操…...

编程日记 2023/11/23 4:42:47

ubuntu安装nvm

需求在 virtualbox 虚拟机上运行的 ubuntu （22.04.3）里安装 nvm （Node Version Manager） 简述官网文档 （github地址）上有提到两种安装方式，一种是直接 curl | wget 命令安装，一…...

编程日记 2023/11/23 4:38:45

首先创建顶点数组 unsigned int m_uiVaoBufferID; glGenVertexArrays(1, &m_uiVaoBufferID); 然后创建顶点缓冲区 float skyboxVertices[] {// positions-1.0f, 1.0f, -1.0f,-1.0f, -1.0f, -1.0f,1.0f, -1.0f, -1.0f,1.0f, -1.0f, -1.0f,1.0f, 1.0f, -1.0f,-1.0f, 1.…...

编程日记 2023/11/23 4:37:43

单片机和FreeRTOS上跑机器人ROS的应用

机器人的应用越来越广泛了，大家熟知的稚晖君直接创业搞机器人，可想而至，接下来的十年，机器人绝对是热门的行业。目前市面上很多机器人都是基于一套叫做ROS的系统开发的，今天就给大家分享一个跑在MCU上，基…...

编程日记 2023/11/23 4:36:42

Spring Cloud学习（十一）【深入Elasticsearch 分布式搜索引擎03】

文章目录数据聚合聚合的种类DSL实现聚合RestAPI实现聚合自动补全拼音分词器自定义分词器自动补全查询completion suggester查询RestAPI实现自动补全数据同步数据同步思路分析实现elasticsearch与数据库数据同步集群搭建ES集群创建es集群集群状态监控创建索引库1&#xff09…...

编程日记 2023/11/23 4:34:39

【gitlab初始密码登录失败】

gitlab初始密码登录失败修改密码修改密码 [rootlocalhost ~]# gitlab-rake "gitlab:password:reset[root]" Enter password: Confirm password: Password successfully updated for user with username root. # 再重新配置gitlab [rootlocalhost ~]# gitlab-ctl…...

编程日记 2023/11/23 4:33:38

2017年全国硕士研究生入学统一考试管理类专业学位联考数学试题——解析版

文章目录 2017 级考研管理类联考数学真题解析一、问题求解（本大题共 5 小题，每小题 3 分，共 45 分）下列每题给出 5 个选项中，只有一个是符合要求的，请在答题卡上将所选择的字母涂黑。真题（2017-…...

编程日记 2023/11/23 4:32:37

2、基础入门——web应用架构搭建漏洞HTTP数据包代理服务器

Web应用环境架构类开发语言：php、java、python、ASP、ASPX等程序源码：用的人多了，就成CMS了。中间件容器：IIS、Apache、Nginx、Tomcat、Weblogic、Jboos、glasshfish等数据库类型：Access、Mysql、Mssql、Oracle、Red…...

编程日记 2023/11/23 4:31:36

【精选】OpenCV多视角摄像头融合的目标检测系统：全面部署指南＆源代码

1.研究背景与意义随着计算机视觉和图像处理技术的快速发展，人们对于多摄像头拼接行人检测系统的需求日益增加。这种系统可以利用多个摄像头的视角，实时监测和跟踪行人的活动，为公共安全、交通管理、视频监控等领域提供重要的支持和帮助。 …...

编程日记 2023/11/23 4:30:35

力扣算法练习BM45—滑块窗口的最大值

题目给定一个长度为 n 的数组 num 和滑动窗口的大小 size ，找出所有滑动窗口里数值的最大值。例如，如果输入数组{2,3,4,2,6,2,5,1}及滑动窗口的大小3，那么一共存在6个滑动窗口，他们的最大值分别为{4,4,6,6,6,5}； 针…...

编程日记 2023/11/23 4:28:32

最小二乘估计及与极大似然估计的关系

最小二乘估计（Least Squares Estimation）和极大似然估计（Maximum Likelihood Estimation）是统计学中常用的参数估计方法，它们在某些情况下是等价的，但在一般情况下并不总是相同的。最小二乘估计&#xff…...

编程日记 2023/11/23 4:27:30

02房价预测

目录代码评分算法： 代码 import numpy as np from sklearn import datasets from sklearn.linear_model import LinearRegression# 指定版本才有数据集 # C:\Users\14817\PycharmProjects\pythonProject1\venv\Scripts\activate.bat # pip install scikit-le…...

编程日记 2023/11/23 4:26:28

【Springboot】pom.xml中的＜build＞标签详解

默认值及其标签解释 <build><finalName>${artifactId}-${version}</finalName><sourceDirectory>src/main/java</sourceDirectory>&l…...

编程日记 2023/11/23 4:25:27

智能驾驶产品开发中如何贯彻“正向开发”理念

摘要： 基于演绎法的正向开发理念，能够让智能驾驶产品在充分满足用户需求，保证产品质量的同时，确保开发目标合理且得到落实。前段时间，微博CEO吐槽理想L9智能驾驶“行驶轨迹不居中”，在网上引发了热烈讨论…...

编程日记 2023/11/23 4:24:26

【机器学习】038_梯度消失、梯度爆炸

一、原因神经网络梯度假设现在有一个层的神经网络，每层的输出为一个对输入作变换的函数结果用来表示第层的输出，那么有下列公式： 链式法则计算损失关于某一层某个参数的梯度： 注意到， 为向量&am…...

编程日记 2023/11/23 4:23:22

【转】OAK-D双目相机进行标定及标定结果说明

编辑：OAK中国首发：A. hyhCSDN 喜欢的话，请多多👍⭐️✍ 内容来自用户的分享，如有疑问请与原作者交流！ ▌前言 Hello，大家好，这里是OAK中国，我是助手君。近期在CSDN刷…...

编程日记 2023/11/23 4:22:22

whip和whep

原文为runner365.git大佬的文章原文链接：https://blog.csdn.net/sweibd/article/details/124552793 WHIP接口什么是whip 全称: WebRTC-HTTP ingestion protocol (WHIP). rfc地址: rfc-draft-murillo-whip-00 简单说，就是通过HTTP接口能导入webrtc媒…...

编程日记 2023/11/23 4:21:21

rknn优化教程（二）

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK，开始写第二篇的内容了。这篇博客主要能写一下： 如何给一些三方库按照xmake方式进行封装，供调用如何按…...

编程新知 2025/6/11 15:25:30

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型项目截图项目简介社会医疗保险是国家通过立法形式强制实施，由雇主和个人按一定比例缴纳保险费，建立社会医疗保险基金，支付雇员医疗费用的一种医疗保险制度， 它是促进社会文明和进步的…...

编程新知 2026/1/24 14:59:08

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增：通道注意力模块（SE模块） class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2026/2/4 23:29:22