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

【HTML】HTML页面和常见标签

news 2026/2/8 23:38:35

文章目录

  • 什么是前端
  • HTML 页面编写
  • 如何快速生成代码框架
  • 常见标签
    • 注释标签
    • 标题标签
    • 段落标签
    • 换行标签
    • 格式化标签

什么是前端

Web 前端，用来直接给以用户呈现的一个一个的网页。一个软件通常是由 后端+前端 完成的

  • 后端：通过 Java/C++等语言，完成相关的逻辑处理，将数据返回给前端

  • 前端：把后端返回过来的数据进行一系列的拼装之后，把完美的页面呈现给用户

  • Web 页面

  • PC 端应用程序页面

  • 移动端 APP 页面

HTML 页面编写

HTML 是超文本标记语言

  • 超文本：支持文本、声音、图片、视频、表格、链接
  • 标记：由许许多多的标签组成

HTML 是运行到浏览器上面的，就是说当你写完一个 HTML 代码之后，需要一个浏览器才能让它跑起来

双标签：标签有开始有结束

<html><head><title>这是页面标题</title></head><body>这是页面内容</body>
</html>
  • html：html 文件的跟标签
  • head：编写页面相关的属性
  • title：页面标题
  • body：页面的内容展示信息

每一个标签相当于是一个节点，这么多的标签（节点）构成了一个 DOM 树。树就有一些子节点，head、title、body… 就相当于是 html 的一个子标签

  • 所有的标签都是 html 的子标签
  • head 和 body 是兄弟标签
  • head 和 title 是父子标签
    DOM 树中的每一个标签就相当与是一个对象，程序猿就可以通过代码拿到这些标签（拿到这些对象），之后就可以对这些对象进行“增删查改”
    image.png|615

如何快速生成代码框架

直接在 vscode 中输入 ! + enter，生成：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>
  • <!DOCTYPE html>：这里是在指定 html 的版本。这里指定当前 html 版本为 5。现在我们日常看到的网页基本上都是 html5
  • <html lang="en">：这里是在指定语言。lang 代表语言，en 代表 English。这是给浏览器看的，里面仍然什么语言都可以输入image.png|307
  • <meta charset="UTF-8">：UTF-8 是文件解码方式。如果加码和解码的方式不一样，就会显示乱码
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">：移动端适配（不做过多研究）

常见标签

注释标签

注释不会显示在界面上，目的是提高代码的可读性

<!-- 这是注释 -->
  • 快捷键：Ctrl + / 可以快速的进行注释/取消注释

标题标签

有六个，从 h1 - h6，数字越大，字体越小

<html><head><title>这是页面标题</title></head><body><!-- 这是注释 --><h1>这是 h1 标题</h1><h2>这是 h2 标题</h2><h3>这是 h3 标题</h3><h4>这是 h4 标题</h4><h5>这是 h5 标题</h5><h6>这是 h6 标题</h6></body>
</html>

image.png|289

段落标签

p 标签表示一个段落

<html><head><title>这是页面标题</title></head><body><!-- 这是注释 --><p>今天是非常痛苦的,明天也是非常痛苦的</p><p>但后天是非常令人高兴的,因为大部分人都会倒在明天晚上</p></body>
</html>

image.png|544
注意：

  • 使用 p 标签，段落之间存在一个空隙
  • 当前的 p 标签描述的段落, 前面还没有缩进（未来 CSS 会学）
  • 自动根据浏览器宽度来决定排版
  • html 内容首尾处的换行，空格均无效
  • 在 html 中文字之间输入的多个空格只相当于一个空格
  • html 中直接输入换行不会真的换行，而是相当于一个空格.

换行标签

br 是 break 的缩写，表示换行

<html><head><title>这是页面标题</title></head><body><!-- 这是注释 --><p>今天是非常痛苦的,<br/>明天也是非常痛苦的</p><p>但后天是非常令人高兴的,<br/>因为大部分人都会倒在明天晚上</p></body>
</html>

image.png|533
注意：

  • br 是一个单标签(不需要结束标签)
  • br 标签不像 p 标签那样，两行间带有一个很大的空隙
  • <br/> 是规范写法，不建议写成<br>

格式化标签

  • 删除：strong 标签和 b 标签
  • 倾斜：em 标签和 i 标签
  • 删除线：del 标签和 s 标签
  • 下划线：ins 标签和 u 标签
<html><head><title>这是页面标题</title></head><body><!-- 这是注释 --><p><strong>今天</strong>是非常痛苦的，<br/><em>明天</em>也是非常痛苦的</p><p>但<del>后天</del>是非常令人高兴的，<br/>因为大部分人都会倒在<ins>明天晚上</ins></p></body>
</html>

两种标签都能达到效果，但前者不仅能达到效果，还都有强调的作用，它们向搜索引擎、屏幕阅读器等辅助技术传达了文本的重要性，而不仅仅是视觉上的加粗

相关文章：

【HTML】HTML页面和常见标签

文章目录 什么是前端HTML 页面编写如何快速生成代码框架常见标签注释标签标题标签段落标签换行标签格式化标签 什么是前端 Web 前端&#xff0c;用来直接给以用户呈现的一个一个的网页。一个软件通常是由 后端前端 完成的 后端&#xff1a;通过 Java/C等语言&#xff0c;完成相…...

编程日记 2024/9/18 3:27:08

鸿蒙 ArkUI组件二

ArkUI组件&#xff08;续&#xff09; 文本组件 在HarmonyOS中&#xff0c;Text/Span组件是文本控件中的一个关键部分。Text控件可以用来显示文本内容&#xff0c;而Span只能作为Text组件的子组件显示文本内容。 Text/Span组件的用法非常简单和直观。我们可以通过Text组件来显…...

编程日记 2024/9/18 3:26:07

PHP 实现 redis 分布式锁

分布式锁 如果是强一致性保证&#xff0c;在获取锁或者失败后引入数据库存储扫表、mq 等方式进行补偿 如果可以容忍少量异常就不需要考虑了 像这里的代码&#xff0c;没吃建立一个链接铺货&#xff0c;性能损耗时间延迟也是很大的&#xff0c;也可在一块代码中进行服务&…...

编程日记 2024/9/18 3:24:37

vue3 自定义el-tree树形结构样式

这里样式设置主要用到了 windcss 实现效果 模拟数据 这里也可以用模拟的数据，下面用的是后端请求的真实数据 [{"id": 5,"rule_id": 0,"status": 1,"create_time": "2019-08-11 13:36:09","update_time": "…...

编程日记 2024/9/18 3:23:33

【网络安全】分享4个高危业务逻辑漏洞

未经许可，不得转载。 文章目录 正文逻辑漏洞1逻辑漏洞2逻辑漏洞3逻辑漏洞4其它正文 该目标程序是一家提供浏览器服务的公司，其核心功能是网页抓取和多账户登录操作，类似于浏览器中的隐身模式，但更加强大和高效。通过该平台，用户可以轻松管理并同时运行数百个隐身浏览器实…...

编程日记 2024/9/18 3:21:19

【装机教程】Visual Studio Community 2019离线安装

Visual Studio 2019离线安装 由于现在 官网只支持在线安装最新版的Visual Studio 2022&#xff0c;因此 Visual Studio Community 2019需要离线安装。 下载离线安装镜像&#xff0c;并解压。点击vs_setup.exe运行。 选择安装位置&#xff0c;四处位置需要确定。 选择语言包&…...

编程日记 2024/9/18 3:19:16

NumPy 线性代数

NumPy 线性代数 NumPy 是 Python 中用于科学计算的核心库之一&#xff0c;它提供了一个强大的数学函数库&#xff0c;特别是在处理大型多维数组和矩阵时表现出色。线性代数是 NumPy 的一个重要组成部分&#xff0c;它包含了大量的函数和运算符&#xff0c;用于执行矩阵和向量的…...

编程日记 2024/9/18 3:17:14

家装材料之水泥，最容易被忽视的基础材料！

由于水泥在装修中扮演辅料的角色&#xff0c;很多业主往往会忽视它们的质量。事实上&#xff0c;装修无小事&#xff0c;不能抱有抓大放小的态度。 　　 　　更何况水泥是装修工程的基础材料&#xff0c;在家居装修中&#xff0c;地面、墙面的找平以及瓷砖、大理石的铺贴&#…...

编程日记 2024/9/18 3:15:12

openstack之keystone介绍

功能 keystone在OpenStack中负责&#xff1a; 管理&#xff1a;用户、租户和权限&#xff1b; 认证&#xff1a;组件相互访问的身份认证&#xff1b; 鉴权&#xff1a;提供 RBAC&#xff08;Role Based Access Control&#xff09; 权限体系&#xff1b; 服务注册与发现&#…...

编程日记 2024/9/18 3:14:11

【图像拼接】基于SIFT/SURF特征算法的图像拼接，matlab实现

博主简介&#xff1a;matlab图像代码项目合作&#xff08;扣扣&#xff1a;3249726188&#xff09; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 本次案例是基于SIFT/SURF特征算法的图像拼接&#xff0c;用matlab实现。 一、案例背景和算法介…...

编程日记 2024/9/18 3:09:04

《微信小程序实战（2） · 组件封装》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; CSDN入驻不久&#xff0c;希望大家多多支持&#xff0c;后续会继续提升文章质量&#xff0c;绝不滥竽充数…...

编程日记 2024/9/18 3:08:03

LaTex2024 下载安装运行HelloWorld—全流程笔记

LaTex安装教程&#x1f680; 这是读博之后写的第一篇文章&#xff0c;来到新课题组之后&#xff0c;新课题组主要是用Latex&#xff0c;在之前的课题组&#xff0c;还是比较常用world&#xff0c;所以就研究了一下Latex的下载和安装&#xff0c;虽然网上已经有了不少教程&#…...

编程日记 2024/9/18 3:04:59

Golang | Leetcode Golang题解之第404题左叶子之和

题目&#xff1a; 题解&#xff1a; func isLeafNode(node *TreeNode) bool {return node.Left nil && node.Right nil }func sumOfLeftLeaves(root *TreeNode) (ans int) {if root nil {return}q : []*TreeNode{root}for len(q) > 0 {node : q[0]q q[1:]if no…...

编程日记 2024/9/18 3:02:57

基于yolov8+lprnet的中文车牌识别系统python源码+pytorch模型+精美GUI界面

【算法介绍】 基于YOLOv8和LPRNet的中文车牌识别系统是一种高效且准确的解决方案&#xff0c;结合了目标检测与字符识别的先进技术。YOLOv8作为最新的实时目标检测算法&#xff0c;以其高速度和精确度著称&#xff0c;能够迅速在图像或视频中定位车牌位置。LPRNet则是一种专为…...

编程日记 2024/9/18 3:01:56

电信创维光猫DT741超级密码

正常的D740系是创维系列光猫如&#xff1a;SK-D740 之类的超密获取办法-光猫/adsl/cable无线一体机-恩山无线论坛 但是我这个固件是DT741v1.0 我只能说很S -B&#xff0c;这个版本如果是1.02那就可以很轻松的去用通用办法解决&#xff0c;但是呢&#xff01;还有办法就是用最传…...

编程日记 2024/9/18 3:00:54

PostgreSQL的流复制断点续传

PostgreSQL的流复制断点续传 PostgreSQL的流复制&#xff08;Streaming Replication&#xff09;具有断点续传的能力&#xff0c;这意味着当主节点和备用节点之间的连接由于网络故障等原因中断后&#xff0c;备用节点会自动从中断点继续接收WAL&#xff08;Write-Ahead Loggin…...

编程日记 2024/9/18 2:59:53

【bug】通过lora方式微调sdxl inpainting踩坑

报错内容 ValueError: Attempting to unscale FP16 gradients. 报错位置 if accelerator.sync_gradients:params_to_clip (itertools.chain(unet_lora_parameters, text_lora_parameters_one, text_lora_parameters_two)if args.train_text_encoderelse unet_lora_parameters…...

编程日记 2024/9/18 2:57:52

[Python可视化]数据可视化在医疗领域应用：提高诊断准确性和治疗效果

随着医疗数据的增长&#xff0c;如何从庞大的数据集中快速提取出有用的信息&#xff0c;成为了医疗研究和实践中的一大挑战。数据可视化在这一过程中扮演了至关重要的角色&#xff0c;它能够通过图形的方式直观展现复杂的数据关系&#xff0c;从而帮助医生和研究人员做出更好的…...

编程日记 2024/9/18 2:56:51

css ＜样式一＞

1. 盒子模型 1.1>boarder 在这里插入图片描述 boarder 相邻框合并问题 boarder-classpse 相同的边框会合并在一起 text-alicn center 文字居中对齐 ########### boarder 会撑大盒子的实际大小 一个盒子加了boarder之后会变大的我可以把我的盒子内容进行修改, 减少像素内…...

编程日记 2024/9/18 2:54:49

Linux 文件 IO 管理（第一讲）

Linux 文件 IO 管理&#xff08;第一讲&#xff09; 回顾 C 语言文件操作&#xff0c;提炼理解新创建的文件为什么被放在可执行文件的同级目录下&#xff1f;上述 log.txt 何时被创建&#xff1f;又是谁在打开它&#xff1f;那文件没有被打开的时候在哪里&#xff1f;一个进程可…...

编程日记 2024/9/18 2:53:47

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

编程新知 2025/9/15 5:56:53

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2026/2/8 4:08:40

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

编程新知 2025/7/23 3:55:49

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

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

WordPress插件：AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

编程新知 2026/1/30 17:24:20

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2026/1/30 16:24:23

如何在网页里填写 PDF 表格？

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

编程新知 2026/2/6 22:20:51

使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

编程新知 2026/1/28 8:25:28

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

编程新知 2026/1/24 6:30:25

MySQL 知识小结（一）

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

编程新知 2026/1/26 13:29:47