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

HTML基础知识点总结

news 2026/2/9 17:15:44

目录

1.HTML简介

2.HTML基础结构

主要字符：

3.基础知识 

（一）p标签

（二）hr标签

（三）尖角号

（四）版权号

  (五)div和span

div

span

  (六)列表

（1）无序列表

（2）有序列表

（3）自定义列表

（七）img

（八）超链接

（九） table表格

（2）tr和td属性

（3）合并表格

（十）表单标签

总结                                                                                                                                                                                                                                                                          

1.HTML简介

  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。
  • HTML是一种标记语言，而不是编程语言

2.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></body>
</html>

主要字符：

<!DOCTYPE html> 特殊且固定的文档声明标签
<html lang="en">告诉浏览器写的代码是英文的，也可改为别的语言
<meta charset="UTF-8">字符集
<head>和<body>头部信息和主题部分
<title></title> 标题用于更改名字

3.基础知识 

p标签

<p>

 p 标签是段落标签可以主动换行

<hr>换行标签，可以用于任何地方
<strong>加粗文本
<del>文本删除线
<u>下划线
<sub>和<sup>sub为下标签  sup为上标签

hr标签

        可以用于画线

<hr color="green">
<hr color="green" width="300" align="left">

1.第一句是设置线条颜色为绿色2

2.第二句不仅设置了颜色，并且可以支持修改宽度 ，align可将该线条左对齐

尖角号

左尖角号：&lt;
右尖角号：&gt;
空格：第一种是&nbsp;该空格所占宽度受字体影响明显，宽度较随机第二种是&emsp;该空格所占宽度正好是一个中文宽度，基本不受字体影响，更推荐
<p>hello  &lt;world&gt;</p>
<p>&emsp13;&emsp13;hello</p>

版权号

版权©：&copy;
商标：已申请商标TM为&trade;法定注册商标®为&reg;<p>&copy;</p>    ©<p>&trade;</p>    ™<p>&reg;<p>    ®

div和span

div

<div> 可定义文档中的分区或节（division/section）。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

span

HTML 中的<span>标签被视为内联元素,它类似于 div 标记，但 div 标记特意用于块级元素，而 span 用于内联元素.

它适用于 <i>, <b>, <u>, <color>, <font family>, <background-color> 等等.

也可以使用 span 标记更改文本的字体。它将有助于负责更改字体大小，颜色，背景颜色，字体样式等

<center><h3>hello world<span style="color:aqua">sports</span></h3></center> 
<!-- 文本独立修饰作用 -->

列表

列表有3种：有序列表、无序列表和定义列表。

有序列表和无序列表都比较常用，而定义列表比较少用。在实际应用中，最常用的是无序列表

（1）无序列表

<ul  type="列表项符号"><li>无序列表项</li><li>无序列表项</li><li>无序列表项</li></ul>

注意：

1. ul里面只能放li

2.前面是实心圆

3.type中可以写disc（实心圆）,circle（空心圆）,square（实体正方行）,none

（2）有序列表

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

注意：

1.ol 后面只能跟 li 不能跟其他的标签

2.数字是自动生成的

3.type中可以写：1,a,A,I,i 可以修改前面序号的类型

        start:取值只能是一个数字

ype属性值列表项的序号类型
1数字1、2、3……
a小写英文字母a、b、c……
A大写英文字母A、B、C……
i小写罗马数字i、ii、iii……
I大写罗马数字I、II、III……
<ol type="a" start="3"><li>11111</li><li>22222</li><li>33333</li></ol>

（3）自定义列表

可用于图文混排的情况，css对此处有优化，所以用的不多

<dl><dt>我是图片</dt><dd>我是文字</dd> </dl>

img

<img src="图片路径">

同级目录

        1. code.jpg

        2. ./code.jpg

    例：<img src="code.jpg" >

 不同级目录

   <img src="img/code.jpg">

  上级目录,先跳出当前文件夹再找到图片

src文件路径
alt无法显示图片时出现的提示文字
title将鼠标移至图片上会出现提示信息

    

相对路径：指的是同一个网站下，不同文件之间的的位置定位。引用的文件位置是相对当前文件的位置而言，从而得到相对路径。（多数用相对路径）

绝对路径：指的是文件的完整路径。

超链接

1.HTML用<a>来设置超文本链接

2.在标签 <a>中使用了href属性来描述链接的地址。

<a href="https://www.baidu.com/" target="_blank" title="百度查询">百度</a>

此时页面会跳转到浏览器，并出现“百度”的字样，点击此字段会跳转到百度官网

<a href="https://www.baidu.com/"><img src="图片地址" width="300" height="300">

 通过设置图片也可进行超链接操作，更加的直观明了

target属性值说明
_self默认方式，即在当前窗口打开链接
_blank在一个全新的空白窗口中打开链接

table表格

<body><table  border="1" width="50%" height="500" align="center"bordercolor="red" bgcolor="yellow" cellspacing="0"cellpadding="10"><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>
border设置边框宽度
bgcolor背景色

cellspacing="0"

单元缝隙

cellpadding

单元格与内容的缝隙  

                                                                                                                                                                                                                     

tr和td属性

trtable row（表格行）行
tdtable data cell（表格单元格）

单元格

合并表格

<!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 border="1" width="200" height="200"><tr><td>1</td><td colspan="2">2</td><td>3</td></tr><tr><td rowspan="2">4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr></table>
</body>
</html>

 <td rowspan="跨度的行数">

<td colspan="跨度的列数">

表单标签

<!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><!-- get 方法从服务器获取数据 post方法向服务器发送数据--><form action="https://www.baidu.com/" method="GET">用户信息:<input type="text" placeholder="请输入用户名" name="uesrname" ><br>密码：<input type="password" placeholder="请输入密码" name="password"><br><input type="submit" value="登录"><br><!-- 提交action信息到指定的地址--><input type="reset" value="重置"></form>
</body>
</html>

 （1）input标签

大部分表单都是用input标签完成的。

语法：<input type="表单类型"/>

（2）botton标签可以和input标签互换

（3）placeholder

        placeholder 是HTML5 中新增的一个属性。placeholder可以用来描述输入字段预期值的简短的提示信息。提示信息会在用户输入值之前显示，一旦用户输入信息该提示就会自动消失。比如：我们在登录时需要输入用户名和密码，它会提示你什么地方输入用户名，什么地方输入密码。

总结

由于 HTML 文档属于文本文件，所以我们可以使用任何文本编辑器来创建和修改 HTML 文件，例如 Notepad++、Sublime Text、VS Code 等。                       

相关文章：

HTML基础知识点总结

目录 1.HTML简介 2.HTML基础结构 主要字符&#xff1a; 3.基础知识 &#xff08;一&#xff09;p标签 &#xff08;二&#xff09;hr标签 &#xff08;三&#xff09;尖角号 &#xff08;四&#xff09;版权号 (五)div和span div span (六)列表 &#xff08;1&…...

编程日记 2023/8/1 4:43:49

VS附加到进程调试

操作&#xff1a; 要附加到进程中调试外部可执行文件&#xff0c;您需要使用Visual Studio的“调试附加”功能。以下是附加到进程中调试外部可执行文件的步骤&#xff1a; 打开您要调试的源代码文件或可执行文件。打开Visual Studio。选择“调试”菜单&#xff0c;然后选择“…...

编程日记 2023/8/1 4:42:47

基于深度学习的高精度狗狗检测识别系统（PyTorch+Pyside6+YOLOv5模型）

摘要&#xff1a;基于深度学习的高精度狗狗检测识别系统可用于日常生活中检测与定位120类狗狗目标&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的狗狗目标检测识别&#xff0c;另外支持结果可视化与图片或视频检测结果的导出。本系统采用YOLOv5目标检测模型训练…...

编程日记 2023/8/1 4:41:46

从互联网到云时代，Apache RocketMQ 是如何演进的？

作者&#xff1a;隆基 2022 年&#xff0c;RocketMQ 5.0 的正式版发布。相对于 4.0 版本而言&#xff0c;架构走向云原生化&#xff0c;并且覆盖了更多业务场景。 消息队列演进史 操作系统、数据库、中间件是基础软件的三驾马车&#xff0c;而消息队列属于最经典的中间件之一…...

编程日记 2023/8/1 4:40:44

XML （可扩展标记语言）

目录 一、概念 二. 使用&#xff1a; 1. 基本语法&#xff1a; 2. 组成部分&#xff1a; &#xff08;1&#xff09;文档声明 &#xff08;2&#xff09; 指令(了解)&#xff1a;结合css &#xff08;3&#xff09; 标签&#xff1a;标签名称自定义 &#xff08;4&#xff09…...

编程日记 2023/8/1 4:39:43

socket()、bind（）、listen()、htons（）

socket() socket() 是一个系统调用函数&#xff0c;用于创建一个套接字&#xff08;socket&#xff09;&#xff0c;通过该套接字进行网络通信。在这段代码中&#xff0c;socket() 函数被用于创建一个本地套接字。 具体来说&#xff0c;这是 socket() 在代码中的使用方式&…...

编程日记 2023/8/1 4:38:42

提升开发效率,Lombok的链式编程和构建模式

目录 链式编程 定义 代码示例 ​编辑 Accessors(chaintrue) 开启链式编程 ​编辑 Accessors(chain true,fluent true) 去除set和get 构建模式 定义 代码示例 ​编辑 踩坑 Singular 定义 代码示例 踩坑默认值情况 ​编辑 With 定义 代码示例 链式编程 定义 链…...

编程日记 2023/8/1 4:37:41

DuDuTalk：AI语音工牌如何帮助教培公司高效管理课程顾问团队

近年来&#xff0c;随着人工智能的快速发展&#xff0c;越来越多的公司开始利用AI技术来提高工作效率和管理效果。在教育培训行业中&#xff0c;课程顾问团队的管理对于公司的运营和发展至关重要。 而在实际管理中&#xff0c;受教培人员素质参差不齐&#xff0c;能力差异大&a…...

编程日记 2023/8/1 4:36:37

C语言——静态库和动态库的创建和使用

使用库函数是源码的一种保护 库函数其实不是新鲜的东西,我们一直都在用,比如C库。我们执行pringf() 这个函数的时候,就是调用C库的函数. 下面记录静态库和动态库的生成和使用. 静态库:libxxx.a 动态库:libxxx.so 静态库: 在程序编译的时候,将库编译进可执行程序中, 运行的…...

编程日记 2023/8/1 4:35:36

数学学习——最优化问题引入、凸集、凸函数、凸优化、梯度、Jacobi矩阵、Hessian矩阵

文章目录 最优化问题引入凸集凸函数凸优化梯度Jacobi矩阵Hessian矩阵 最优化问题引入 例如&#xff1a;有一根绳子&#xff0c;长度一定的情况下&#xff0c;需要如何围成一个面积最大的图像&#xff1f;这就是一个最优化的问题。就是我们高中数学中最常见的最值问题。 最优化…...

编程日记 2023/8/1 4:34:34

HCIP期中实验

考试需求 1 、该拓扑为公司网络&#xff0c;其中包括公司总部、公司分部以及公司骨干网&#xff0c;不包含运营商公网部分。 2 、设备名称均使用拓扑上名称改名&#xff0c;并且区分大小写。 3 、整张拓扑均使用私网地址进行配置。 4 、整张网络中&#xff0c;运行 OSPF 协议…...

编程日记 2023/8/1 4:33:33

【Git系列】IDEA集成Git

&#x1f433;IDEA集成Git &#x1f9ca;1. idea配置git&#x1f9ca;2. idea添加暂存区和提交&#x1fa9f;创建文件&#x1fa9f;将整个项目添加到暂存区&#x1fa9f;提交到本地仓库&#x1fa9f;查看控制台&#xff0c;显示提交的信息&#x1fa9f;修改文件&#xff0c;再次…...

编程日记 2023/8/1 4:32:32

短视频矩阵源码开发搭建分享--多账号授权管理

目录 文章目录 前言 一、矩阵号系统是什么&#xff1f; 二、使用步骤 1.创建推广项目 2.多账号授权 3.企业号智能客服系统 总结 前言 短视频多账号矩阵系统&#xff0c;通过多账号一键授权管理的方式&#xff0c;为运营人员打造功能强大及全面的“矩阵式“管理平台。…...

编程日记 2023/8/1 4:31:31

数据中台系列2：rabbitMQ 安装使用之 window 篇

RabbitMQ 是一个开源的消息队列系统&#xff0c;是高级消息队列协议&#xff08;AMQP&#xff09;的标准实现&#xff0c;用 erlang 语言开发。 因此安装 RabbitMQ 之前要先安装好 erlang。 1、安装 erlang 到 这里 下载本机能运行的最新版 erlang 安装包。如果本机没有装过 …...

编程日记 2023/8/1 4:30:30

Windows驱动开发

开发Windows驱动程序时&#xff0c;debug比较困难&#xff0c;并且程序容易导致系统崩溃&#xff0c;这时可以使用Virtual Box进行程序调试&#xff0c;用WinDbg在主机上进行调试。 需要使用的工具&#xff1a; Virtual Box&#xff1a;用于安装虚拟机系统&#xff0c;用于运…...

编程日记 2023/8/1 4:29:27

汽车分析，随时间变化的燃油效率

简述 今天我们来分析一个汽车数据。 数据集由以下列组成&#xff1a; 名称&#xff1a;每辆汽车的唯一标识符。MPG&#xff1a;燃油效率&#xff0c;以英里/加仑为单位。气缸数&#xff1a;发动机中的气缸数。排量&#xff1a;发动机排量&#xff0c;表示其大小或容量。马力&…...

编程日记 2023/8/1 4:28:25

大数据面试题之Elasticsearch:每日三题(六)

大数据面试题之Elasticsearch:每日三题 1. 为什么要使用Elasticsearch&#xff1f;2.Elasticsearch的master选举流程&#xff1f;3.Elasticsearch集群脑裂问题&#xff1f; 1. 为什么要使用Elasticsearch&#xff1f; 系统中的数据&#xff0c;随着业务的发展&#xff0c;时间…...

编程日记 2023/8/1 4:27:24

【管理设计篇】聊聊分布式配置中心

为什么需要配置中心 对于一个软件系统来说&#xff0c;除了数据、代码&#xff0c;还有就是软件配置&#xff0c;比如操作系统、数据库配置、服务配置 端口 ip 、邮箱配置、中间件软件配置、启动参数配置等。如果说是一个小型项目的话&#xff0c;可以使用Spring Boot yml文件…...

编程日记 2023/8/1 4:26:20

远程控制平台简介

写在前面 之所以想自己动手实现一个远程控制平台，很大一部分原因是因为我那糟糕的记性，虽然经常加班到很晚，拖着疲惫的步伐回到家，才想起忘记打卡了，如果我能在家控制在办公室的手机打一下卡就好了… 有人说，市场上有TeamViewer，向日葵，AnyDesk，ToDesk，等等这些老大…...

编程日记 2023/8/1 4:25:20

韦东山Linux驱动入门实验班（5）LED驱动---驱动分层和分离，平台总线模型

前言 &#xff08;1&#xff09;前面已经已经详细介绍了LED驱动如何进行编写的代码。如果韦东山Linux驱动入门实验班&#xff08;4&#xff09;LED驱动已经看懂了&#xff0c;驱动入门实验班后面的那些模块实验&#xff0c;其实和单片机操作差不太多了。我就不再浪费时间进行讲…...

编程日记 2023/8/1 4:24:19

云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

编程新知 2025/12/14 22:32:59

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2026/2/5 4:33:24

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...

编程新知 2026/2/9 1:17:40

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2026/1/23 4:15:03

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

编程新知 2025/10/24 9:13:44

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

编程新知 2026/1/4 5:02:00

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2026/2/6 11:05:22

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/10/26 5:04:25

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

编程新知 2026/2/7 21:32:44