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

前端基础 | HTML基础：HTML结构，HTML常见标签

news 2026/2/10 14:00:39

文章目录

  • HTML
    • 1、HTML结构
      • 1.1HTML标签
        • 1.1.1标签
        • 1.1.2标签含义
      • 1.2HTML文件基本结构
      • 1.3标签层次结构
      • 1.4 快速生成代码框架
    • 2、HTML常见标签
      • 2.1注释标签
      • 2.2标题标签：h1–h6
      • 2.3段落标签：p
      • 2.4 换行标签：br
      • 2.5格式化标签
      • 2.6 图片标签：img
      • 2.7超链接标签：a
        • 2.7.1 链接的几种形式

HTML

1、HTML结构

1.1HTML标签

1.1.1标签

HTML代码是由“标签”构成的，<>中的就是标签。

形如等是双标签，双标签有开始有结束

例如：

<body>hello</body>

  • 标签名body放在<>中

  • 大部分标签成对出现，为开始标签，为结束标签

  • 少数标签只有开始标签，称为“单标签“

  • 开始标签和结束标签之间，写的是标签的内容hello

  • 开始标签可能会带有”属性“ id属性相当于给这个标签设置了一个唯一的标识符（身份证号码），例如：

    <body id = "myID">helloc</body>
1.1.2标签含义
  • html：html文件的根标签
  • head：编写页面相关的属性
  • title：页面标题
  • body： 页面内容展示信息

每一个标签相当于一个节点，所有标签构成一个DOM树，所有的标签都是html子标签，head和body是兄弟标签，head和title是父子标签。

1.2HTML文件基本结构

<html><head><title>第一个页面</title></head><body>hello world</body>
</html>
  • html 标签是整个 html 文件的根标签(最顶层标签)
  • head 标签中写页面的属性
  • body 标签中写的是页面上显示的内容
  • title 标签中写的是页面的标题.

1.3标签层次结构

  • 父子关系

  • 兄弟关系

    <html><head><title>第一个页面</title></head><body>hello world</body>
</html>
    • head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)
    • title 是 head 的子标签
    • head 是 title 的父标签. head 和 body 之间是兄弟关系

1.4 快速生成代码框架

在IDRA中创建文件xxx.html，直接输入！，按Tab键或者回车键，此时能够自动生成代码的主体框架。

一些细节：

  • <!DOCTYPE html>称为DTD（文档类型定义），描述当前的文件是一个HTML5的文件
  • <html lang="en">其中lang属性表示当前页面是一个“英语页面”，有些浏览器会提示是否进行自动翻译
  • <meta charset="UTF-8">描述页面的字符编码方式，没有这一行可能会导致中文乱码
  • <meta name="viewport" content = "width=device-width, initial-scale=1.0">
    • name = "viewprot"其中viewport指的是设备的屏幕上能用来显示我们的网页的那一块区域
    • content = "width = device-width, initial-scale=1.0"在设置可视区和设备宽度等宽，并设置初始缩放为不缩放（对于移动端开发较为常见）

2、HTML常见标签

2.1注释标签

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

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

CTRL + / 快捷键可以快速进行注释和取消注释

2.2标题标签：h1–h6

有六个标签，h1–h6，数字越大，字体越小

<h1>这是标题</h1>
<h2>这是标题</h2>
.....
<h6>这是标题</h6>

可以看到不同标题的效果如下

2.3段落标签：p

将一段较长的文本粘贴导html中，会发现并没有分成段落

  • p标签表示一个段落

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

例子：

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

可以看到下面的段落效果：外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.4 换行标签：br

br是break的缩写，表示换行

  • br是一个单标签（不需要结束标签）
  • br标签不想p标签那样带有一个很大的空袭
  • <br/>是规范写法，不建议写成

举例：

    这是第一行<br/>这是第二行

可见下面的效果示意图，会发现两行中的间隙会比换段落的间距要窄一点：

2.5格式化标签

  • 加粗: strong 标签 和 b 标签
  • 倾斜: em 标签 和 i 标签
  • 删除线: del 标签 和 s 标签
  • 下划线: ins 标签 和 u 标签

举例：

<strong>keep coding</strong>  keep coding  <b>keep coding</b>

效果如图：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<u>keep coding</u>  或  <isn>keep coding</isn>

效果如图：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<i>keep coding</i>  或  <em>keep coding</em>

效果如图：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<s>keep coding</s>  或  <del>keep coding</del>

效果如下：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.6 图片标签：img

img标签必须带有src属性，表示图片的路径，可以是绝对路径，也可以是相对路径

<img src="rose.jpg">

img标签的其他属性：

  • alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字
  • title: 提示文本. 鼠标放到图片上, 就会有提示
  • width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡
  • border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定

关于目录结构：

对于一个复杂的网站, 页面资源很多, 这种情况可以使用目录把这些文件整理好.

  • 相对路径: 以 html 所在位置为基准, 找到图片的位置.
    • 同级路径: 直接写文件名即可 (或者 ./)
    • 下一级路径: image/1.jpg
    • 上一级路径: …/image/1.jpg
  • 绝对路径: 一个完整的磁盘路径, 或者网络路径. 例如
    • 磁盘路径 D:\rose.jpg
    • 网络路径 https://images0.cnblogs.com/blog/130623/201407/300958470402077.png

2.7超链接标签：a

  • href: 必须具备, 表示点击后会跳转到哪个页面.
  • target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开
2.7.1 链接的几种形式

  • 外部链接：href引用其他网站的地址

    <a href="http://www.baidu.com">百度</a>

  • 内部链接：网站内部页面之间的连接，写相对路径即可

    在一个目录中，先创建一个 1.html，再建一个 2.html

    <!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>

  • 空链接: 使用 # 在 href 中占位

    <a href="#">空链接</a>

  • 下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)

    <a href="test.zip">下载文件</a>

  • 网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中

    <a href="http://www.sogou.com"><img src="rose.jpg" alt="">
</a>

  • 锚点链接: 可以快速定位到页面中的某个位置

    <a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">第一集剧情 <br>第一集剧情 <br>...
</p>
<p id="two">第二集剧情 <br>第二集剧情 <br>...
</p>
<p id="three">第三集剧情 <br>第三集剧情 <br>...
</p>

相关文章：

前端基础 | HTML基础：HTML结构，HTML常见标签

文章目录 HTML1、HTML结构1.1HTML标签1.1.1标签1.1.2标签含义 1.2HTML文件基本结构1.3标签层次结构1.4 快速生成代码框架 2、HTML常见标签2.1注释标签2.2标题标签&#xff1a;h1–h62.3段落标签&#xff1a;p2.4 换行标签&#xff1a;br2.5格式化标签2.6 图片标签&#xff1a;i…...

编程日记 2024/9/12 5:54:06

宏任务和微任务+超全面试真题

概念 微任务和宏任务是在异步编程中经常使用的概念&#xff0c;用于管理任务的执行顺序和优先级。 宏任务&#xff1a;setTimeout, setInterval&#xff0c;I/O 操作和 UI 渲染等。微任务&#xff1a; Promise 回调、async/await等 微任务通常比宏任务具有更高的优先级。 执…...

编程日记 2024/9/12 5:53:04

针对SVM算法初步研究

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd;心态决定高度&#xff0c;细节决定成败…...

编程日记 2024/9/12 5:52:03

Java中的`String`不可变性详解

在Java中&#xff0c;String类具有不可变性&#xff08;immutable&#xff09;&#xff0c;这意味着一旦String对象被创建&#xff0c;它的值将无法更改。所有对字符串的修改操作&#xff08;如拼接、替换等&#xff09;实际上都会生成一个新的字符串对象&#xff0c;而不会修改…...

编程日记 2024/9/12 5:51:02

c# SMTP发送邮件

string from ""; string fromAlias "MIS-TC"; string[] to { "" }; string subject "问题提交"; string body sb.ToString(); string ipaddr "smtp.email.qq.com"; int port 25; string credit ""; strin…...

编程日记 2024/9/12 5:50:01

GPU基础 -- 并行化与阿姆达尔定律

并行化与阿姆达尔定律 并行化是将计算任务分割成多个部分&#xff0c;使这些部分能够在多个处理器或核心上同时运行&#xff0c;从而加速任务的完成时间。阿姆达尔定律&#xff08;Amdahl’s Law&#xff09;则揭示了并行化所能带来的加速效果的限制。 阿姆达尔定律公式 阿姆…...

编程日记 2024/9/12 5:49:00

Lua热更

Lua 热更 前提 Lua是轻量级&#xff0c;可以解释执行的编程语言、性能好 基本原则 1.场景空 代码控制物体加载释放 2.场景一个 3.节点不手动挂代码 4.AssetsBundle资源管理 5.Lua开发框架 6.调试模式、发布模式 XLua 热更框架 XLua是C#环境下Lua的解决方案 1.Lua虚拟…...

编程日记 2024/9/12 5:47:59

提升汽车行业软件质量：ASPICE培训的关键实践方法

ASPICE&#xff08;汽车行业软件过程改进和能力确定&#xff09;培训是一种针对汽车行业软件开发和维护过程的标准化培训。 该培训旨在帮助组织提高其软件开发和维护过程的质量和效率。以下是ASPICE培训的一些最佳实践方法&#xff1a; 1. 理解ASPICE框架&#xff1a;首先&…...

编程日记 2024/9/12 5:46:58

2024 全新智能识别 API 接口震撼登场

近年来&#xff0c;随着人工智能技术的快速发展&#xff0c;智能识别技术逐渐成为了各个领域的热门应用。在这个大背景下&#xff0c;2024 年的全新智能识别 API 接口横空出世&#xff0c;为我们的生活带来了更多的便利。本文将为大家详细介绍这个全新智能识别 API 接口&#x…...

编程日记 2024/9/12 5:45:57

《UniVS: Unified and Universal Video Segmentation with Prompts as Queries》要点提炼

论文来源&#xff1a;https://arxiv.org/abs/2402.18115 《UniVS: Unified and Universal Video Segmentation with Prompts as Queries》是2024CVPR中的一篇关于视频分割的论文&#xff0c; 主要内容&#xff1a; 论文提出了一个名为UniVS的新型统一视频分割架构&#xff0c…...

编程日记 2024/9/12 5:44:55

计算机毕业设计选题推荐-推拿知识互动平台-Java/Python项目实战

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…...

编程日记 2024/9/12 5:43:53

基于SpringBoot+Vue+MySQL的瑜伽馆管理系统

系统展示 用户前台界面 管理员后台界面 系统背景 本系统采用SpringBoot作为后端框架&#xff0c;Vue.js构建前端用户界面&#xff0c;MySQL作为数据库存储系统&#xff0c;实现了瑜伽馆的全面数字化管理。系统涵盖会员管理、课程预约、教练排班、收入统计等功能模块&#xff0c…...

编程日记 2024/9/12 5:42:52

【MySQL】EXPLAIN（执行计划）关键字是什么？

简介&#xff1a; explain是一个强大的 SQL 命令&#xff0c;用于分析和优化查询性能。通过查看数据库执行计划&#xff0c;我们可以理解查询是如何被处理的&#xff0c;包括表的访问顺序、使用的索引、连接类型等。这对于找到潜在的性能瓶颈非常重要。 目录 一、基本含义 二…...

编程日记 2024/9/12 5:41:51

Mybatis两种方式来调用sql语句

使用Mybatis时&#xff0c;有两种方式来调用sql语句&#xff1a; 方式一&#xff08;直接通过Session对象调用sql语句&#xff09;&#xff1a; SqlSession sqlSession sqlSessionFactory.openSession(); User user sqlSession.selectOne("userTest.selectUser"…...

编程日记 2024/9/12 5:40:50

第十八节：学习统一异常处理（自学Spring boot 3.x的第五天）

这节记录下如何通过AOP方式统一处理异常拦截。 第一步&#xff1a; 新建一个exception包&#xff0c;创建一个ExcetionHandler.java&#xff08;名字随意取&#xff09; package cn.wcyf.wcai.exception;import cn.wcyf.wcai.common.Result; import org.springframework.web…...

编程日记 2024/9/12 5:39:48

flink中slotSharingGroup() 的详解

在 Apache Flink 中&#xff0c;slotSharingGroup() 是一个用于控制算子&#xff08;operator&#xff09;之间资源共享的机制。它允许多个算子共享相同的 slot&#xff08;即资源容器&#xff09;。Slot 是 Flink 中的资源单位&#xff0c;slot 共享可以提高资源利用率&#x…...

编程日记 2024/9/12 5:37:46

ASPF 技术介绍

...

编程日记 2024/9/12 5:36:45

77-java 装饰器模式和适配器模式区别

‌Java中的装饰器模式和适配器模式虽然都涉及到对象的组合和包装&#xff0c;但它们的应用场景和目的有所不同。‌ ‌装饰器模式的目的是在不修改原始对象的基础上&#xff0c;动态地添加功能或行为。‌它允许用户通过创建一个包含原始对象的包装类&#xff08;装饰器&#xff…...

编程日记 2024/9/12 5:35:43

5. Fabric 设置画布大小

1. 设置宽度 canvas.setWidth(width)2. 设置高度 canvas.setHeight(height)3. 设置大小 canvas.setDimensions({width,height })4. 画布的缩放 canvas.on(mouse:wheel, (opt) > {const delta opt.e.deltaY // 滚轮&#xff0c;向上滚一下是 -100&#xff0c;向下滚一下…...

编程日记 2024/9/12 5:33:41

240912-通过Ollama实现网站知识总结

A. 最终效果 B. 准备工作 报错: USER_AGENT environment variable not set, consider setting it to identify your requests.-CSDN博客 C. 完整代码 # https://coreyclip.github.io/Ollama-Web-Summaries/import os os.environ[USER_AGENT] Mozilla/5.0 (Windows NT 10.…...

编程日记 2024/9/12 5:32:40

突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

编程新知 2026/2/5 4:17:42

MVC 数据库

MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/10/30 4:58:11

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

编程新知 2025/10/25 7:51:48

如何在最短时间内提升打ctf（web)的水平？

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

编程新知 2026/1/28 5:55:15

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2026/2/5 4:21:48

C# 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2026/2/8 9:34:11

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

编程新知 2026/1/27 18:13:23

Angular微前端架构：Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

编程新知 2025/12/3 10:52:37

NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

编程新知 2026/1/24 14:43:35

安宝特案例丨Vuzix AR智能眼镜集成专业软件，助力卢森堡医院药房转型，赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

编程新知 2026/2/9 2:41:28