HTML世界之第一重天
一、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 元素 注:HTML 文档由 HTML 元素定义。 1.HTML 元素 开始标签 * 元素内容 结束标签 * <p> 这是一个段落 </p> <a href"default.htm"> 这是一个链接 </a> <br> 换行 开始标签常被称为起始标签&…...
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…...
vue3 之 商城项目—详情页
整体认识 路由配置 准备组件模版 <script setup></script><template><div class"xtx-goods-page"><div class"container"><div class"bread-container"><el-breadcrumb separator">">&…...
Linux笔记之Docker进行镜像备份与迁移
Linux笔记之Docker进行镜像备份与迁移 ——2024-02-11 code review! 文章目录 Linux笔记之Docker进行镜像备份与迁移1. 导出容器文件系统为 tar 归档文件2. 将 tar 归档文件导入为新的 Docker 镜像3. 运行新的 Docker 镜像并创建容器 1. 导出容器文件系统为 tar 归档文件 要导…...
C#,欧拉常数(Euler Constant)的算法与源代码
1 欧拉常数 欧拉常数最先由瑞士数学家莱昂哈德 欧拉 (Leonhard Euler) 在1735年发表的文章《De Progressionibus harmonicus observationes》中定义。欧拉曾经使用γ作为它的符号,并计算出了它的前6位,1761年他又将该值计算到了16位 。 欧拉常数最先由瑞…...
asio监听eventfd
c - Does BOOST asio supports eventfd? like epoll - Stack Overflow asio的官方example并没有asio监听eventfd的例子,但asio支持posix::stream_descriptor, 如果将eventfd包装成posix::stream_descriptor,并注册到io_context里…...
《统计学简易速速上手小册》第9章:统计学在现代科技中的应用(2024 最新版)
文章目录 9.1 统计学与大数据9.1.1 基础知识9.1.2 主要案例:社交媒体情感分析9.1.3 拓展案例 1:电商销售预测9.1.4 拓展案例 2:实时交通流量分析 9.2 统计学在机器学习和人工智能中的应用9.2.1 基础知识9.2.2 主要案例:预测客户流…...
问题排查利器 - 分布式 trace
在分布式系统开发中,系统间的调用往往会横跨多个应用之间的接口。负责的调用链路也导致了,当线上环境出现问题时,例如请求失败、延迟增加或错误发生,我们无法第一时间确定是哪个环节出了问题,这给故障排查和修复带来了…...
C++进阶(十四)智能指针
📘北尘_:个人主页 🌎个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上,不忘来时的初心 文章目录 一、为什么需要智能指针?二、内存泄漏1、 什么是内存泄漏,内存泄漏的危…...
GPT最新进展:推出视频功能!迭代即将来临!
随着人工智能的不断进步,ChatGPT正准备以其全新的视频功能大跃进,同时,备受期待的GPT-5也即将在今年露面,预示着AI领域即将迎来一场变革。 在最近一期充满激情的Unconfuse Me播客中,OpenAI的首席执行官Sam Altman与技…...
各款Excel、word在线预览工具对比分析以及onlyoffice预览Excel加载时间长的解决方案
对于onlyoffice插件预览慢的问题分析: 研究了一下onlyoffice,得出以下结论! 对于预览慢的问题,原因出在文件类型上,文件类型为低版本xls而非新版xlsx文件,onlyoffice服务器会自动将该文件转换为xlsx文件再…...
【课程作业_01】国科大2023模式识别与机器学习实践作业
国科大2023模式识别与机器学习实践作业 作业内容 从四类方法中选三类方法,从选定的每类方法中 ,各选一种具体的方法,从给定的数据集中选一 个数据集(MNIST,CIFAR-10,电信用户流失数据集 )对这…...
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…...
继承
1.继承的作用 有些类与类之间存在特殊关系,下级别的成员除了拥有上一级别的共性,还有自己的特性。 这个时候我们就可以考虑利用继承技术,减少重复代码。 总结: 继承的好处:可以减少重复的代码 class A : public B;…...
北斗卫星在物联网时代的应用探索
北斗卫星在物联网时代的应用探索 在当今数字化时代,物联网的应用已经深入到人们的生活中的方方面面,让我们的生活更加智能便捷。而北斗卫星系统作为我国自主研发的卫星导航系统,正为物联网的发展提供了强有力的支撑和保障。本文将全面介绍北…...
SQL注入 - 利用报错函数 floor 带回回显
环境准备:构建完善的安全渗透测试环境:推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客 一、原理 利用COUNT(), FLOOR(), RAND(), 和 GROUP BY来生成主键重复错误 函数解释 count(): 这个函数用于计算满足某一条件下的行数,是SQL中的一个聚合函数,常用于统计查询结…...
NLP_Bag-Of-Words(词袋模型)
文章目录 词袋模型用词袋模型计算文本相似度1.构建实验语料库2.给句子分词3.创建词汇表4.生成词袋表示5.计算余弦相似度6.可视化余弦相似度 词袋模型小结 词袋模型 词袋模型是一种简单的文本表示方法,也是自然语言处理的一个经典模型。它将文本中的词看作一个个独立…...
C语言rand随机数知识解析和猜数字小游戏
rand随机数 rand C语言中提供了一个可以随机生成一个随机数的函数:rand() 函数原型: int rand(void);rand函数返回的值的区间是:0~RAND_MAX(32767)之间。大部分编译器都是32767。 #include<stdlib.h> int ma…...
django中的缓存功能
一:介绍 Django中的缓存功能是一个重要的性能优化手段,它可以将某些耗时的操作(如数据库查询、复杂的计算等)的结果存储起来,以便在后续的请求中直接使用这些缓存的结果,而不是重新执行耗时的操作。Django…...
三、搜索与图论
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[…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站,会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后,网站没有变化的情况。 不熟悉siteground主机的新手,遇到这个问题,就很抓狂,明明是哪都没操作错误&#x…...
Java 语言特性(面试系列2)
一、SQL 基础 1. 复杂查询 (1)连接查询(JOIN) 内连接(INNER JOIN):返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...
Spark 之 入门讲解详细版(1)
1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室(Algorithms, Machines, and People Lab)开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目,8个月后成为Apache顶级项目,速度之快足见过人之处&…...
DockerHub与私有镜像仓库在容器化中的应用与管理
哈喽,大家好,我是左手python! Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库,用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
django filter 统计数量 按属性去重
在Django中,如果你想要根据某个属性对查询集进行去重并统计数量,你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求: 方法1:使用annotate()和Count 假设你有一个模型Item,并且你想…...
Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!
一、引言 在数据驱动的背景下,知识图谱凭借其高效的信息组织能力,正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合,探讨知识图谱开发的实现细节,帮助读者掌握该技术栈在实际项目中的落地方法。 …...
大模型多显卡多服务器并行计算方法与实践指南
一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具
第2章 虚拟机性能监控,故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令:jps [options] [hostid] 功能:本地虚拟机进程显示进程ID(与ps相同),可同时显示主类&#x…...
Xen Server服务器释放磁盘空间
disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...
