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

HTML基础知识点总结

news 2026/2/9 16:54:04

目录

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

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

编程新知 2026/1/31 7:23:48

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...

编程新知 2026/2/8 2:27:29

HarmonyOS运动开发：如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

编程新知 2026/2/2 7:49:59

【p2p、分布式，区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制

目录 节点的功能承载层&#xff08;GATT/Adv&#xff09;局限性&#xff1a; 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能&#xff0c;如 Configuration …...

编程新知 2026/2/4 22:41:52

Leetcode33（ 搜索旋转排序数组）

题目表述 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...

编程新知 2026/1/17 19:18:25

对象回调初步研究

_OBJECT_TYPE结构分析 在介绍什么是对象回调前&#xff0c;首先要熟悉下结构 以我们上篇线程回调介绍过的导出的PsProcessType 结构为例&#xff0c;用_OBJECT_TYPE这个结构来解析它&#xff0c;0x80处就是今天要介绍的回调链表&#xff0c;但是先不着急&#xff0c;先把目光…...

编程新知 2026/1/26 18:44:47

Docker、Wsl 打包迁移环境

电脑需要开启wsl2 可以使用wsl -v 查看当前的版本 wsl -v WSL 版本&#xff1a; 2.2.4.0 内核版本&#xff1a; 5.15.153.1-2 WSLg 版本&#xff1a; 1.0.61 MSRDC 版本&#xff1a; 1.2.5326 Direct3D 版本&#xff1a; 1.611.1-81528511 DXCore 版本&#xff1a; 10.0.2609…...

编程新知 2025/10/14 5:08:48

el-amap-bezier-curve运用及线弧度设置

文章目录 简介示例线弧度属性主要弧度相关属性其他相关样式属性完整示例链接简介 ‌el-amap-bezier-curve 是 Vue-Amap 组件库中的一个组件，用于在 高德地图 上绘制贝塞尔曲线。‌ 基本用法属性path定义曲线的路径，可以是多个弧线段的组合。stroke-weight线条的宽度。stroke…...

编程新知 2025/11/5 3:45:37

day51 python CBAM注意力

目录 一、CBAM 模块简介 二、CBAM 模块的实现 &#xff08;一&#xff09;通道注意力模块 &#xff08;二&#xff09;空间注意力模块 &#xff08;三&#xff09;CBAM 模块的组合 三、CBAM 模块的特性 四、CBAM 模块在 CNN 中的应用 一、CBAM 模块简介 在之前的探索中…...

编程新知 2026/1/21 20:27:19