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

前端HTML基础笔记

news 2025/11/7 3:43:27

HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它通过一系列的元素（或称为标签）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素可以包含文本、图片、链接、表格、列表等。
教程学习网站推荐：

  1. https://www.w3.org/
  2. https://developer.mozilla.org/zh-CN/docs/Web/HTML

在这里插入图片描述3. https://www.w3cschool.cn/tutorial
在这里插入图片描述

HTML的基本结构通常包括以下几个部分：

<!DOCTYPE html>：文档类型声明，告诉浏览器这是一个HTML5文档。
<html>：根元素，所有其他HTML元素都包含在其中。
<head>：包含了文档的元数据，如<title>（页面标题）、<link>（链接外部CSS文件）、<script>（嵌入或引用外部JavaScript文件）等。
<body>：包含了网页的可见内容，如文本、图片、视频等。
一个简单的HTML页面示例如下：

<!DOCTYPE html> <!--html版本 当先这个是html5的版本，为最新版本，简单，大小写不敏感-->
<html lang="en"><!--语言-->
<head><meta charset="UTF-8">  <!--编码格式 对应的浏览器的解码格式，编码错误数据丢失，解码错误数据丢失--><meta name="viewport" content="width=device-width, initial-scale=1.0"><!--浏览器的设置--><title>My First Web Page</title><!--标题，就是显示在浏览器标签页上的内容-->
</head>
<body>
<!--浏览器页面真正显示的内容--><h1>Hello, World!</h1><!--一级标题，总共有6个对应的是h1~h6,前面三个常用后面三个不常用--><p>This is my first HTML page.</p><!--段落标签-->
</body>
</html>

在这个示例中，<h1> 标签定义了一个标题，<p> 标签定义了一个段落。
HTML是构建网页的基础，但它通常需要与CSS（层叠样式表）和JavaScript一起使用，以创建具有丰富样式和交互性的网页。
在HTML中，块级元素（block-level elements）和行内元素（inline elements）是两种不同的元素类型，它们在页面上的表现和布局方式有所不同。

块级元素（Block-level elements）：通常用于创建一个“块”或区域，它们会在页面上占据一整行，并且可以设置宽度、高度、对齐方式等属性。常见的块级元素包括<div>、<section>、<article>、<header>、<footer>、<aside>、<ul>、<ol>、<li>、<table>、<p>等。

行内元素（Inline elements）：通常用于文本内容，并且不会创建新的块区域。它们的大小仅由其内容决定，不能设置宽度和高度。常见的行内元素包括<span>、<a>、<img>、<strong>、<em>、<input>等。

块级标签包裹行级标签
块级元素可以包裹行内元素，。实际上，大多数HTML结构都是由块级元素作为容器，里面包含行内元素或其他块级元素。例如：

<div><a href="#">这是一个链接</a><img src="image.jpg" alt="示例图片"><strong>这是加粗文本</strong>
</div>

在这个例子中，

是一个块级元素，它包裹了三个行内元素： <a>、 <img>和 <strong>。
理论上，行内元素可以包含块级元素，但这种行为在HTML规范中并不推荐，因为它可能会导致不符合预期的布局效果。在某些情况下，浏览器可能会将行内元素内的块级元素视为非法内容，并对其进行特殊处理，这可能导致不一致的渲染结果。

为什么这样做？这么做有什么好处？
结构化和语义化：使用块级元素作为容器可以帮助你更好地组织和结构化你的HTML文档，使其更易于维护和理解。语义化很重要，这里关乎浏览器对于你网站的理解，也就是影响到你最终你网站的呈现
样式化：块级元素可以更容易地应用CSS样式，如宽度、高度、边距、填充等，这使得它们成为控制布局的理想选择。
嵌套和布局：块级元素可以嵌套其他块级或行内元素，这为创建复杂的页面布局提供了灵活性。
注意事项
不要滥用块级元素：虽然块级元素可以包裹行内元素，但过度使用块级元素可能会导致不必要的布局问题和性能问题。合理使用行内元素和块级元素，根据内容和布局需求选择合适的元素。
语义化HTML：尽量使用具有明确语义的HTML标签，这不仅有助于搜索引擎优化（SEO,想成为一个优秀的前端，SEO优化是必须要了解和掌握的技能之一），也使得代码更易于理解和维护。
总之，块级元素包裹行内元素是HTML中常见的做法，它有助于创建结构化、语义化和可维护的网页。

相关文章：

前端HTML基础笔记

HTML&#xff08;HyperText Markup Language&#xff0c;超文本标记语言&#xff09;是一种用于创建网页的标准标记语言。它通过一系列的元素&#xff08;或称为标签&#xff09;来定义网页的结构和内容。HTML文档由一系列的元素组成&#xff0c;这些元素可以包含文本、图片、链…...

编程日记 2024/9/8 20:18:53

用三极管搭建简易电流源

目录 一、三极管搭建电流源设计思路二、实例及搭建仿真1.电阻分压偏置 2.齐纳二极管偏置 3.串联二极管偏置 一、三极管搭建电流源设计思路 设计思路&#xff1a;利用分压电路&#xff0c;可用多种方式给基极提供偏压&#xff0c;使三极管处于放大区&#xff0c;VB保持稳定电压&…...

编程日记 2024/9/8 20:17:53

MiniGPT-3D, 首个高效的3D点云大语言模型，仅需一张RTX3090显卡，训练一天时间，已开源

项目主页&#xff1a;https://tangyuan96.github.io/minigpt_3d_project_page/ 代码&#xff1a;https://github.com/TangYuan96/MiniGPT-3D 论文&#xff1a;https://arxiv.org/pdf/2405.01413 MiniGPT-3D在多个任务上取得了SoTA&#xff0c;被ACM MM2024接收&#xff0c;只拥…...

编程日记 2024/9/8 20:15:51

Android Google Maps

Android 谷歌地图 前言正文一、设置Google Cloud 项目二、项目配置① 设置SDK② 配置API密钥③ 配置AndroidManifest.xml 三、添加地图四、定位当前① 请求定位权限② 我的位置控件③ 获取当前位置 五、配置地图① xml配置地图② 代码配置地图③ 地图点击事件④ 管理Marker 六、…...

编程日记 2024/9/8 20:13:49

Linux——进程概念

什么是操作系统 操作系统管理各种计算机硬件、为应用程序提供基础、并且充当计算机硬件与用户之间的中介。 冯诺依曼体系 这里的存储器指的是内存不考虑缓存情况&#xff0c;这里的CPU能且只能对内存进行读写&#xff0c;不能访问外设(输入或输出设备)外设(输入或输出设备)要…...

编程日记 2024/9/8 20:12:48

【H2O2|全栈】关于HTML（1）认识HTML

HTML相关知识 目录 前言 准备工作 WEB前端是什么&#xff1f; HTML是什么&#xff1f; 如何运行HTML文件&#xff1f; 标签 概念 分类 双标签和单标签 行内标签和块标签 HTML文档结构 预告和回顾 UI设计相关 Markdown | Md文档相关 项目合作管理相关 后话 前…...

编程日记 2024/9/8 20:11:47

Oracle（111） 如何使用RMAN备份数据库？

使用 RMAN&#xff08;Recovery Manager&#xff09;备份 Oracle 数据库是确保数据安全和可恢复性的关键步骤。下面是详细的指导和代码示例&#xff0c;展示如何使用 RMAN 进行数据库备份。 1. 准备工作 在开始备份之前&#xff0c;需要确保以下几点&#xff1a; 已安装并配…...

编程日记 2024/9/8 20:05:40

linux字符设备驱动程序

字符设备驱动程序简介  linux系统中万物皆文件&#xff0c;驱动程序加载后会在/dev目录下生成一 个对应的文件&#xff0c;如/dev/led。应用程序就是先用open打开该文件&#xff0c; 用write控制led的亮灭&#xff0c;用read读取led的亮灭&#xff0c;用完之后用close 关闭该…...

编程日记 2024/9/8 20:01:36

【pyhton】python如何实现将word等文档中的文字转换成语音

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…...

编程日记 2024/9/8 19:58:33

Claude Enterprise推出计划

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

编程日记 2024/9/8 19:57:32

【前端】CSS控制style样式失效

在CSS中&#xff0c;可以通过几种方式控制或禁用特定的style样式。 使用all: unset来重置所有可继承的属性&#xff0c;并清除所有的样式&#xff1a; .element {all: unset;} 使用inherit值来使属性获取其父元素的值&#xff1a; .element {color: inherit;font-size: inh…...

编程日记 2024/9/8 19:55:30

How can I load the openai api configuration through js in html?

题意&#xff1a;怎样在HTML中通过JavaScript加载OpenAI API配置 问题背景&#xff1a; I am trying to send a request through js in my html so that openai analyzes it and sends a response, but if in the js I put the following: 我正在尝试通过HTML中的JavaScript发…...

编程日记 2024/9/8 19:54:29

Pipeline流水线通过git拉取Jenkinsfile报错 error: RPC failed； result=22, HTTP code = 404

Pipeline流水线通过git拉取Jenkinsfile报错 error: RPC failed; result22, HTTP code 404 在学习共享库时使用通过git拉取jenkinsfile时&#xff0c;报错在排查gitlab服务状态&#xff0c;网络通讯&#xff0c;防火墙规则以及Jenkins凭据均可以正常使用&#xff0c;最后发现的…...

编程日记 2024/9/8 19:53:28

【与C++的邂逅】--- string容器使用

Welcome to 9ilks Code World (๑•́ ₃ •̀๑) 个人主页: 9ilk (๑•́ ₃ •̀๑) 文章专栏&#xff1a; 与C的邂逅 本篇博客我们将来了解string容器本身以及接口的使用。 string是串&#xff0c;本质是一个字符数组&#xff0c;可以对其进行增删查改。 &am…...

编程日记 2024/9/8 19:51:26

1-18 平滑处理——高斯滤波 opencv树莓派4B 入门系列笔记

目录 一、提前准备 二、代码详解 cv2.GaussianBlur函数用于对图像进行高斯滤波。高斯滤波是一种平滑图像的技术&#xff0c;用于减少噪声和细节。函数的三个参数如下&#xff1a; 三、运行结果 四、完整工程贴出 一、提前准备 1、树莓派4B 及 64位系统 2、提前安装opencv库…...

编程日记 2024/9/8 19:49:23

小爱打工，你躺平！让「微信AI小助理」接管你的文件处理，一个字：爽！

前两天&#xff0c;搞了个微信 AI 小助理-小爱(AI)&#xff0c;爸妈玩的不亦乐乎。 零风险&#xff01;零费用&#xff01;我把AI接入微信群&#xff0c;爸妈玩嗨了&#xff0c;附教程&#xff08;下&#xff09; 最近一直在迭代中&#xff0c;挖掘小爱的无限潜力: 链接丢给…...

编程日记 2024/9/8 19:45:20

管理学习（一）马云《赢在中国》创业演讲整理

目录 一、小公司也需要制度二、不要害怕冒险三、创业者要的不是技术&#xff0c;而是胆识四、不要惧怕和大企业竞争五、理念不一样&#xff0c;老板永远是对的六、要真实地为客户创造价值七、跟风险投资谈判&#xff0c;说到要做到八、风险投资&#xff0c;只能帮你不能救你九、…...

编程日记 2024/9/8 19:44:18

Opencv中的直方图(2)计算图像的直方图函数calcHist()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 计算一组数组的直方图。 函数 cv::calcHist 计算一个或多个数组的直方图。用于递增直方图bin的元组的元素是从相同位置的相应输入数组中获取的。…...

编程日记 2024/9/8 19:41:16

Buzzer：一款针对eBPF的安全检测与模糊测试工具

关于Buzzer Buzzer是一款功能强大的模糊测试工具链&#xff0c;该工具基于Go语言开发&#xff0c;可以帮助广大研究人员简单高效地开发针对eBPF的模糊测试策略。 功能介绍 下面给出的是当前版本的Buzzer整体架构&#xff1a; 元素解析&#xff1a; 1、ControlUnit&#xff1a…...

编程日记 2024/9/8 19:39:14

若依框架登录鉴权详解（动态路由）

若依框架登录鉴权&#xff1a;1.获取token&#xff08;过期在响应拦截器中实现&#xff09;,2.基于RBAC模型获取用户、角色和权限信息&#xff08;在路由前置守卫&#xff09;&#xff0c;3.根据用户权限动态生成&#xff08;从字符串->组件&#xff0c;根据permission添加动…...

编程日记 2024/9/8 19:35:09

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2025/11/6 20:28:03

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2025/11/5 23:05:21

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

编程新知 2025/10/31 8:43:16

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2025/10/30 15:52:04

云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

编程新知 2025/10/31 14:20:25

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

编程新知 2025/8/16 7:00:37

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

编程新知 2025/11/3 20:05:00

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2025/11/1 4:42:14

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

编程新知 2025/10/27 12:32:57

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

编程新知 2025/10/29 9:58:23