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

HTML基础知识点总结

news 文章来源：https://blog.csdn.net/weixin_64704029/article/details/130587455 2025/5/19 14:27:28

目录

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

【雕爷学编程】MicroPython动手做（02）——尝试搭建K210开发板的IDE环境

知识点&#xff1a;简单了解K210芯片 2018年9月6日,嘉楠科技推出自主设计研发的全球首款基于RISC-V的量产商用边缘智能计算芯片勘智K210。该芯片依托于完全自主研发的AI神经网络加速器KPU,具备自主IP、视听兼具与可编程能力三大特点,能够充分适配多个业务场景的需求。作为嘉楠科…...

编程日记 2023/8/1 4:23:17

C#——Thread与Task的差异比较及使用环境

C#——Thread与Task的差异比较及使用环境 前言一、差异1. 创建和管理&#xff1a;2. 异步编程&#xff1a;3. 返回值&#xff1a;4. 异常处理&#xff1a;5. 线程复用&#xff1a; 总结 前言 前面两篇文章&#xff0c;分别通过各自的实例讲了关于Task以及Thread的相关的使用特…...

编程日记 2023/8/1 4:22:16

刷题 31-35

三十一、 747. 至少是其他数字两倍的最大数 给你一个整数数组 nums &#xff0c;其中总是存在 唯一的 一个最大整数 。 请你找出数组中的最大元素并检查它是否 至少是数组中每个其他数字的两倍 。如果是&#xff0c;则返回 最大元素的下标 &#xff0c;否则返回 -1 。 示例 1&a…...

编程日记 2023/8/1 4:21:14

【mysql】—— 数据类型详解

序言&#xff1a; 本期我将大家认识关于 mysql 数据库中的基本数据类型的学习。通过本篇文章&#xff0c;我相信大家对mysql 数据类型的理解都会更加深刻。 目录 &#xff08;一&#xff09;数据类型分类 &#xff08;二&#xff09;数值类型 1、tinyint类型 2、bit类型 …...

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

kafka常用命令

查看主题 ./kafka-topics.sh --list --bootstrap-server 10.1.1.2:9092 创建主题 ./kafka-topics.sh --bootstrap-server 10.1.1.2:9092 --create --topic test_topic --partitions 1 查看消费者列表--list ./kafka-consumer-groups.sh --bootstrap-server 10.1.1.2:9092 -…...

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

数字图像处理（番外）图像增强

图像增强 图像增强的方法是通过一定手段对原图像附加一些信息或变换数据&#xff0c;有选择地突出图像中感兴趣的特征或者抑制(掩盖)图像中某些不需要的特征&#xff0c;使图像与视觉响应特性相匹配。 图像对比度 图像对比度计算方式如下&#xff1a; C ∑ δ δ ( i , j …...

编程日记 2023/8/1 4:18:10

flutter：轮播

前言 介绍几个比较有不错的轮播库 swipe_deck 与轮播沾边&#xff0c;但是更多的是一种卡片式的交互式界面设计。它的主要概念是用户可以通过左右滑动手势浏览不同的卡片&#xff0c;每张卡片上都有不同的信息或功能。 Swipe deck通常用于展示图片、产品信息、新闻文章、社…...

编程日记 2023/8/1 4:17:09

高忆管理：股票投资策略是什么？有哪些？

在进行股票买卖过程中&#xff0c;出资者需求有自己的方案和出资战略&#xff0c;并且主张严格遵从出资战略买卖&#xff0c;不要跟风操作。那么股票出资战略是什么&#xff1f;有哪些&#xff1f;下面就由高忆管理为我们剖析&#xff1a; 股票出资战略简略来说便是能够协助出资…...

编程日记 2023/8/1 4:16:08

为公网SSH远程Ubuntu配置固定的公网TCP端口地址主图

文章目录 为公网SSH远程Ubuntu配置固定的公网TCP端口地址 为公网SSH远程Ubuntu配置固定的公网TCP端口地址 在上篇文章中&#xff0c;我们通过cpolar建立的临时TCP数据隧道&#xff0c;成功连接了位于其他局域网下的Ubuntu系统&#xff0c;实现了不同操作系统、不同网络下的系统…...

编程日记 2023/8/1 4:15:07

【前端知识】React 基础巩固(四十一)——手动路由跳转、参数传递及路由配置

React 基础巩固(四十一)——手动路由跳转、参数传递及路由配置 一、实现手动跳转路由 利用 useNavigate 封装一个 withRouter&#xff08;hoc/with_router.js&#xff09; import { useNavigate } from "react-router-dom"; // 封装一个高阶组件 function withRou…...

编程日记 2023/8/1 4:14:05