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

前端HTML基础笔记

news 2026/5/25 18:41:30

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

基于PIC32单片机实现Android USB音频转SPDIF输出的DIY方案

1. 项目概述&#xff1a;为Android设备打造一个高保真SPDIF音频接口作为一名长期折腾嵌入式音频和家庭影院的玩家&#xff0c;我经常遇到一个痛点&#xff1a;手头那些性能不错的Android手机或平板&#xff0c;其内置的3.5mm耳机孔或者USB-C口的音频输出质量&#xff0c;在连接…...

编程新知 2026/5/25 17:41:53

地理空间机器学习库全解析：从TorchGeo到Raster Vision的实战指南

1. 项目概述&#xff1a;为什么我们需要专门的地理空间机器学习库&#xff1f;如果你尝试过用标准的PyTorch或TensorFlow去处理一张卫星影像&#xff0c;大概率会在第一步就卡住。不是模型写不出来&#xff0c;而是数据根本读不进去&#xff0c;或者读进去了却对不上位置。一张…...

编程新知 2026/5/25 15:47:50

Actor Framework里的“多米诺骨牌”：一个错误如何让整个嵌套操作者链崩溃？

Actor Framework中的“多米诺效应”&#xff1a;如何避免嵌套操作者链的崩溃 在分布式系统设计中&#xff0c;Actor模型因其天然的并发处理能力而备受青睐。LabVIEW的Actor Framework(AF)通过操作者(actor)的嵌套结构&#xff0c;为复杂系统提供了模块化解决方案。然而&#x…...

编程新知 2026/5/25 15:30:12

开发者在构建多模态AI应用时如何借助TaoToken简化模型集成

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 开发者在构建多模态AI应用时如何借助TaoToken简化模型集成 构建一个集成了文本、图像等多模态能力的AI应用&#xff0c;开发者常常…...

编程新知 2026/5/25 14:27:48

PlayAI实时翻译如何重构跨国协作效率？揭秘2024企业级应用的3个关键转折点

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;PlayAI实时翻译如何重构跨国协作效率&#xff1f;揭秘2024企业级应用的3个关键转折点 在远程办公常态化与全球供应链深度耦合的背景下&#xff0c;PlayAI 实时翻译已从辅助工具跃升为协同基础设施。其核心突破…...

编程新知 2026/5/25 14:21:40

Monkey测试进阶：黑白名单搭配这些隐藏参数，让你的安卓稳定性测试效率翻倍

Monkey测试进阶&#xff1a;黑白名单搭配这些隐藏参数&#xff0c;让你的安卓稳定性测试效率翻倍在持续集成和自动化测试成为标配的今天&#xff0c;Monkey测试早已不再是简单的随机事件生成工具。当你的测试场景从单次手动执行升级到夜间批量测试或CI流水线时&#xff0c;如何…...

编程新知 2026/5/25 12:53:11

别再死记硬背了！用‘重复局面’这道CSP真题，带你彻底搞懂C++中map容器的使用场景与底层逻辑

从国际象棋到红黑树&#xff1a;用CSP真题解锁C map的底层力量 国际象棋大师卡斯帕罗夫曾说&#xff1a;"棋局如同程序&#xff0c;每一步都是对数据结构的选择。"当我们面对CSP考试中那道看似简单的"重复局面"题时&#xff0c;表面上是考察字符串处理能力…...

编程新知 2026/5/25 12:33:19

ZYNQ PS-SPI驱动W25Q80 Flash避坑指南：从寄存器配置到逻辑分析仪抓包全流程

ZYNQ PS-SPI驱动W25Q80 Flash实战避坑手册&#xff1a;从寄存器配置到信号抓包全解析 当你在Vitis Standalone环境下调试ZYNQ的PS-SPI与W25Q80 Flash通信时&#xff0c;是否遇到过这些场景&#xff1a;SPI时钟信号看似正常但数据始终对不上、擦除操作耗时远超预期、FIFO缓冲区莫…...

编程新知 2026/5/25 11:50:40

Unity Find Reference2 2.5.2版本深度解析与正确接入指南

1. 这不是普通插件下载&#xff1a;Find Reference2 的真实价值与误用重灾区“Unity Find Reference2 2.5.2版本资源下载”——看到这个标题&#xff0c;很多Unity开发者第一反应是点开就找网盘链接、GitHub Release页面或某论坛的打包附件。我试过不下二十次&#xff1a;复制标…...

编程新知 2026/5/25 10:32:39

Beyond Compare 5完整激活教程：3种方法快速生成永久授权密钥

Beyond Compare 5完整激活教程&#xff1a;3种方法快速生成永久授权密钥 【免费下载链接】BCompare_Keygen Keygen for BCompare 5 项目地址: https://gitcode.com/gh_mirrors/bc/BCompare_Keygen 还在为Beyond Compare 5的30天试用期结束后无法继续使用而烦恼吗&#x…...

编程新知 2026/5/25 10:30:37