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

HTML世界之第一重天

news 2026/2/7 19:52:08

一、HTML 元素

注：HTML 文档由 HTML 元素定义。

1.HTML 元素

开始标签 *

元素内容

结束标签 *

<p>

这是一个段落

</p>

<a href="default.htm">

这是一个链接

</a>

<br>

换行

开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。

2.HTML 元素语法

1.HTML 元素以开始标签起始，以结束标签终止；

2.元素的内容是开始标签与结束标签之间的内容；

3.某些 HTML 元素具有空内容（empty content）；

4.空元素在开始标签中进行关闭（以开始标签的结束而结束）；

5.大多数 HTML 元素可拥有属性；

3.嵌套的 HTML 元素

大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。

HTML 文档由相互嵌套的 HTML 元素构成。

4.HTML 文档实例

<!DOCTYPE html>

<html>

<body>

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

</body>

</html>

5.HTML 实例解析

①<p> 元素：

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

<p> 元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>。元素内容是: 这是第一个段落。

②<body> 元素：

<body>

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

</body>

<body> 元素定义了 HTML 文档的主体。这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。元素内容是另一个 HTML 元素（p元素）。

③<html> 元素：

<html>

<body>

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

</body>

</html>

<html> 元素定义了整个 HTML 文档。这个元素拥有一个开始标签 <html> ，以及一个结束标签 </html>。元素内容是另一个 HTML 元素（body元素）。

6.HTML 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

注：千万不要忘记使用结束标签，要统一使用小写字母。虽然忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来。但是为了避免不必要的麻烦，还是要写结束标签。

二、HTML 属性

注：属性是 HTML 元素提供的附加信息。

1.HTML 属性

1.HTML 元素可以设置属性；

2.属性可以在元素中添加附加信息；

3.属性一般描述于开始标签；

4.属性总是以名称/值对的形式出现，比如：name="value"。

2.属性实例

<a href="http://www.runoob.com">这是一个链接</a>

HTML 链接由 <a> 标签定义，链接的地址在 href 属性中指定。

3.HTML 属性常用引用属性值

属性值应该始终被包括在引号内。

双引号是最常用的，不过使用单引号也没有问题。

注：在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='John "ShotGun" Nelson'

HTML 元素的属性：

属性

描述

class

为html元素定义一个或多个类名（classname）(类名从样式文件引入)

id

定义元素的唯一id

style

规定元素的行内样式（inline style）

title

描述了元素的额外信息 (作为工具条使用)

三、HTML 标题

注：在 HTML 文档中，标题很重要。

1.HTML 标题

标题（Heading）是通过 <h1>-<h6> 标签进行定义的。

<h1> 定义最大的标题。 <h6> 定义最小的标题。

<h1>这是一个标题。</h1>

<h2>这是一个标题。</h2>

<h3>这是一个标题。</h3>

注释: 浏览器会自动地在标题的前后添加空行。

2.HTML 水平线

<hr> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

在写的时候使用<hr />最为正确。

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

<hr />

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

<hr />

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

3.HTML 注释

将注释插入HTML代码中，可以提高可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

注释写法如下:

<!-- 这是一个注释 -->

注：开始括号之后（左边的括号）需要紧跟一个叹号 ! (英文标点符号)，结束括号之前（右边的括号）不需要。

标签

描述

<html>

定义 HTML 文档

<body>

定义文档的主体

<h1> - <h6>

定义HTML标题

<hr>

定义水平线

<!--...-->

定义注释

四、HTML 段落

1.HTML 段落

段落是通过 <p> 标签定义的。（</p> 是块级元素）

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

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

注意：浏览器会自动地在段落的前后添加空行。

2.HTML 折行

在不产生一个新段落的情况下进行换行（新行），使用 <br> 标签：

<p>这个<br>段落<br>演示了分行的效果</p>

注：<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

3.HTML 输出

无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。

对于 HTML，无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

相关文章：

HTML世界之第一重天

一、HTML 元素 注&#xff1a;HTML 文档由 HTML 元素定义。 1.HTML 元素 开始标签 * 元素内容 结束标签 * <p> 这是一个段落 </p> <a href"default.htm"> 这是一个链接 </a> <br> 换行 开始标签常被称为起始标签&…...

编程日记 2024/2/12 12:25:33

docker run报 docker: Error response from daemon: no command specified.

docker run报 docker: Error response from daemon: no command specified. 1. export出mysql的container为tar, 拷贝到另一台虚拟机, import该tar为image, docker run该image时报 docker: Error response from daemon: no command specified. 时间240211 export出mysql的con…...

编程日记 2024/2/12 12:22:29

vue3 之 商城项目—详情页

整体认识 路由配置 准备组件模版 <script setup></script><template><div class"xtx-goods-page"><div class"container"><div class"bread-container"><el-breadcrumb separator">">&…...

编程日记 2024/2/12 12:20:26

Linux笔记之Docker进行镜像备份与迁移

Linux笔记之Docker进行镜像备份与迁移 ——2024-02-11 code review! 文章目录 Linux笔记之Docker进行镜像备份与迁移1. 导出容器文件系统为 tar 归档文件2. 将 tar 归档文件导入为新的 Docker 镜像3. 运行新的 Docker 镜像并创建容器 1. 导出容器文件系统为 tar 归档文件 要导…...

编程日记 2024/2/12 12:15:20

C#，欧拉常数（Euler Constant）的算法与源代码

1 欧拉常数 欧拉常数最先由瑞士数学家莱昂哈德 欧拉 (Leonhard Euler) 在1735年发表的文章《De Progressionibus harmonicus observationes》中定义。欧拉曾经使用γ作为它的符号&#xff0c;并计算出了它的前6位&#xff0c;1761年他又将该值计算到了16位 。 欧拉常数最先由瑞…...

编程日记 2024/2/12 12:14:19

asio监听eventfd

c - Does BOOST asio supports eventfd? like epoll - Stack Overflow asio的官方example并没有asio监听eventfd的例子&#xff0c;但asio支持posix::stream_descriptor&#xff0c; 如果将eventfd包装成posix::stream_descriptor&#xff0c;并注册到io_context里&#xf…...

编程日记 2024/2/12 12:11:16

《统计学简易速速上手小册》第9章：统计学在现代科技中的应用（2024 最新版）

文章目录 9.1 统计学与大数据9.1.1 基础知识9.1.2 主要案例&#xff1a;社交媒体情感分析9.1.3 拓展案例 1&#xff1a;电商销售预测9.1.4 拓展案例 2&#xff1a;实时交通流量分析 9.2 统计学在机器学习和人工智能中的应用9.2.1 基础知识9.2.2 主要案例&#xff1a;预测客户流…...

编程日记 2024/2/12 12:07:12

问题排查利器 - 分布式 trace

在分布式系统开发中&#xff0c;系统间的调用往往会横跨多个应用之间的接口。负责的调用链路也导致了&#xff0c;当线上环境出现问题时&#xff0c;例如请求失败、延迟增加或错误发生&#xff0c;我们无法第一时间确定是哪个环节出了问题&#xff0c;这给故障排查和修复带来了…...

编程日记 2024/2/12 12:05:10

C++进阶（十四）智能指针

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、为什么需要智能指针&#xff1f;二、内存泄漏1、 什么是内存泄漏&#xff0c;内存泄漏的危…...

编程日记 2024/2/12 12:04:07

GPT最新进展：推出视频功能！迭代即将来临！

随着人工智能的不断进步&#xff0c;ChatGPT正准备以其全新的视频功能大跃进&#xff0c;同时&#xff0c;备受期待的GPT-5也即将在今年露面&#xff0c;预示着AI领域即将迎来一场变革。 在最近一期充满激情的Unconfuse Me播客中&#xff0c;OpenAI的首席执行官Sam Altman与技…...

编程日记 2024/2/12 12:02:04

各款Excel、word在线预览工具对比分析以及onlyoffice预览Excel加载时间长的解决方案

对于onlyoffice插件预览慢的问题分析&#xff1a; 研究了一下onlyoffice&#xff0c;得出以下结论&#xff01; 对于预览慢的问题&#xff0c;原因出在文件类型上&#xff0c;文件类型为低版本xls而非新版xlsx文件&#xff0c;onlyoffice服务器会自动将该文件转换为xlsx文件再…...

编程日记 2024/2/12 12:01:00

【课程作业_01】国科大2023模式识别与机器学习实践作业

国科大2023模式识别与机器学习实践作业 作业内容 从四类方法中选三类方法&#xff0c;从选定的每类方法中 &#xff0c;各选一种具体的方法&#xff0c;从给定的数据集中选一 个数据集&#xff08;MNIST&#xff0c;CIFAR-10&#xff0c;电信用户流失数据集 &#xff09;对这…...

编程日记 2024/2/12 11:57:57

LeetCode374. Guess Number Higher or Lower——二分查找

文章目录 一、题目二、题解 一、题目 We are playing the Guess Game. The game is as follows: I pick a number from 1 to n. You have to guess which number I picked. Every time you guess wrong, I will tell you whether the number I picked is higher or lower th…...

编程日记 2024/2/12 11:56:56

继承

1.继承的作用 有些类与类之间存在特殊关系&#xff0c;下级别的成员除了拥有上一级别的共性&#xff0c;还有自己的特性。 这个时候我们就可以考虑利用继承技术&#xff0c;减少重复代码。 总结&#xff1a; 继承的好处&#xff1a;可以减少重复的代码 class A : public B;…...

编程日记 2024/2/12 11:51:50

北斗卫星在物联网时代的应用探索

北斗卫星在物联网时代的应用探索 在当今数字化时代&#xff0c;物联网的应用已经深入到人们的生活中的方方面面&#xff0c;让我们的生活更加智能便捷。而北斗卫星系统作为我国自主研发的卫星导航系统&#xff0c;正为物联网的发展提供了强有力的支撑和保障。本文将全面介绍北…...

编程日记 2024/2/12 11:46:45

SQL注入 - 利用报错函数 floor 带回回显

环境准备：构建完善的安全渗透测试环境：推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客 一、原理 利用COUNT(), FLOOR(), RAND(), 和 GROUP BY来生成主键重复错误 函数解释 count(): 这个函数用于计算满足某一条件下的行数，是SQL中的一个聚合函数，常用于统计查询结…...

编程日记 2024/2/12 11:42:42

NLP_Bag-Of-Words(词袋模型)

文章目录 词袋模型用词袋模型计算文本相似度1.构建实验语料库2.给句子分词3.创建词汇表4.生成词袋表示5.计算余弦相似度6.可视化余弦相似度 词袋模型小结 词袋模型 词袋模型是一种简单的文本表示方法&#xff0c;也是自然语言处理的一个经典模型。它将文本中的词看作一个个独立…...

编程日记 2024/2/12 11:40:40

C语言rand随机数知识解析和猜数字小游戏

rand随机数 rand C语言中提供了一个可以随机生成一个随机数的函数&#xff1a;rand&#xff08;&#xff09; 函数原型&#xff1a; int rand(void);rand函数返回的值的区间是&#xff1a;0~RAND_MAX(32767)之间。大部分编译器都是32767。 #include<stdlib.h> int ma…...

编程日记 2024/2/12 11:35:35

django中的缓存功能

一&#xff1a;介绍 Django中的缓存功能是一个重要的性能优化手段&#xff0c;它可以将某些耗时的操作&#xff08;如数据库查询、复杂的计算等&#xff09;的结果存储起来&#xff0c;以便在后续的请求中直接使用这些缓存的结果&#xff0c;而不是重新执行耗时的操作。Django…...

编程日记 2024/2/12 11:28:27

三、搜索与图论

DFS 排列数字 #include<iostream> using namespace std; const int N 10; int a[N], b[N]; int n;void dfs(int u){if(u > n){for(int i 1; i < n; i)cout<<a[i]<<" ";cout<<endl;return;}for(int i 1; i < n; i){if(!b[i]){b[…...

编程日记 2024/2/12 11:27:26

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/12/9 0:22:01

Mac软件卸载指南，简单易懂！

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2026/2/7 0:48:56

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

编程新知 2026/1/31 6:53:51

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/7/25 1:21:53

IP如何挑？2025年海外专线IP如何购买？

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

编程新知 2026/1/28 3:04:35

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

编程新知 2025/8/21 23:03:46

【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

编程新知 2026/1/31 6:12:22

OD 算法题 B卷【正整数到Excel编号之间的转换】

文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的&#xff1a;a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...

编程新知 2025/8/31 2:33:30

ui框架-文件列表展示

ui框架-文件列表展示 介绍 UI框架的文件列表展示组件&#xff0c;可以展示文件夹&#xff0c;支持列表展示和图标展示模式。组件提供了丰富的功能和可配置选项&#xff0c;适用于文件管理、文件上传等场景。 功能特性 支持列表模式和网格模式的切换展示支持文件和文件夹的层…...

编程新知 2026/2/4 17:34:02

边缘计算网关提升水产养殖尾水处理的远程运维效率

一、项目背景 随着水产养殖行业的快速发展&#xff0c;养殖尾水的处理成为了一个亟待解决的环保问题。传统的尾水处理方式不仅效率低下&#xff0c;而且难以实现精准监控和管理。为了提升尾水处理的效果和效率&#xff0c;同时降低人力成本&#xff0c;某大型水产养殖企业决定…...

编程新知 2026/2/1 16:16:37