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

HTML5教程（三）- 常用标签

news 2026/1/2 10:50:45

1 文本标签-h

  • 标题标签（head）：

    • 自带加粗效果，从h1到h6字体大小逐级递减
    • 一个标题独占一行

  • 语法

     <h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>

在这里插入图片描述


2 段落标签-p

  • 介绍

  • 用于定义段落，将整个网页分为若干个段落形式显示。

  • 语法

    <p>段落文本</p>

  • 特点

    1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
    2. 段落和段落之间保有空隙。

  • 使用
    在这里插入图片描述


3 普通文本标签-span

  • 介绍

    • 行内块，用来组合文档中的行内元素。

  • 语法

    <span>行分区标签，用于对特殊文本特殊处理</span>

  • 使用

    在这里插入图片描述


4 格式标签

  • 浏览器会忽略代码中的换行和空格，只显示为一个空格。想要实现页面中的换行，需要借助于换行标签。

    <br>     换行
<b>加粗文本</b>    <!-- bold -->   <strong>加粗文本</strong>
<i>斜体文本</i>       <!-- italic -->   <em>加粗文本</em>
<code>电脑自动输出</code>
<sub>下标</sub> 
<sup>上标</sup>
<strong>加重文字</strong>
<del>删除字<del>    
<u>下划线</u>

在这里插入图片描述

5 字符实体

  • 某些情况下，浏览器会将一些特殊字符按照HTML的方式解析，影响显示结果。此时需要将这类字符转换为其他的形式书写

     使用 &lt; 在页面中呈现 "<"使用 &gt; 在页面中呈现 ">"使用 &nbsp; 在页面中呈现一个空格使用 &copy; 在页面中呈现版权符号"©"使用 &yen; 在页面中呈现人民币符号"￥"

在这里插入图片描述

在这里插入图片描述


6 容器标签-div

  • 常用于页面结构划分，结合CSS实现网页布局

    <div id="top">页面顶部区域</div>
<div id="main">页面主体区域</div>
<div id="bottom">页面底部区域</div>

在这里插入图片描述


7 图片标签-img

  • 图片标签：用于在网页中插入一张图片。

    1. src：用于给出图片的URL【必填】
    2. width/height：用于设置图片尺寸，取像素值，默认按照图片的原始尺寸显示。
    3. title：用于设置图片标题，鼠标悬停在图片上时显示
    4. alt：用于设置图片加载失败后的提示文本

  • 语法

    <img src="" width="" height="" title="" alt="">

    在这里插入图片描述

  • 其他用法

    • 路径
      • 绝对路径
        • 目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
      • 相对路径
        • 以引用文件所在位置为参考基础，而建立出的目录路径。
    相对路径分类符号说明
    同一级路径图像文件位于HTML文件同一级，如：<img src=‘刘亦菲.png’>
    下一级路径/图像文件位于HTML文件下一级，如：<img src=‘image/刘亦菲.png’>
    上一级路径…/图像文件位于HTML文件上一级，如：<img src=‘…/image/刘亦菲.png’>
    <body><!-- 使用 img 标签来加载网络图片(必须要联网) --><!-- src 表示用来加载图像的路径（网络/本地） --><img src="https://img10.360buyimg.com/img/jfs/t1/176863/16/41608/14330/668e3421F64b41094/15c9d9130b980a51.png" alt="京东logo"><!-- alt 当图片加载失败时，在网页中显示的文字信息 --><img src="images/logo.png" alt="天府学院logo"><!-- 使用 img 标签来加载本地图片（常用） --><!-- 图像的路径：绝对路径 --><img src="C:\Users\blning\下载\刘亦菲.jpg" alt=""><!-- 图像的路径：相对路径（推荐） --><img src="./image/刘亦菲.png" alt=""><!-- img 其他的属性 --><img src="./image/刘亦菲.png" alt="图片加载失败显示的信息"title="鼠标放在图像上显示的信息"width="200px"height="150px"border="3px">
</body>

8 超链接标签-a

  • 超链接（anchor，锚）：用户可以点击超链接实现跳转至其他页面

    1. href：用于设置目标文件的URL【必填】
    2. target：用于设置目标文件的打开方式，默认在当前窗口打开（取值：“_self”），设置新建窗口打开目标文本(取值：“_blank”)
    <a href="http://www.taobao.com" target="_self">淘宝</a>
<a href="http://www.baidu.com" target="_blank">百度</a>

    在这里插入图片描述

  • 其他用法

    <body><h1 id="title">标题</h1><!-- 外部链接：已经进行域名备案的网站 --><a href="http://www.taobao.com" target="_self">淘宝</a><a href="http://www.baidu.com" target="_blank">百度</a><!-- 内部链接：本地html文件 --><a href="h_tag.html">a标签</a><!-- 空链接：跳转到自身 --><a href="#">首页</a><!-- 下载链接：href 里面地址是一个文件或者压缩包 --><a href="HTML简介.pptx">PPT</a><!-- 网页元素链接：网页中的各种元素：图片、音频、视频、表格等 --><a href="../Day01/image/刘亦菲.png">刘亦菲</a><!-- 锚点链接：点击链接快速定位到页面中的某个位置 设置标签：id --><a href="#contents">看内容</a><div style="width: 300px; height: 800px; background-color: aquamarine;">块</div><div id="contents">内容</div><a href="#title">回标题</a>
</body>

9 导航标签-nav

  • 介绍

    • 用于定义页面的导航链接部分区域。

  • 示例

    <div><nav><a href="">HTML</a><a href="">CSS</a><a href="">JavaScript</a><a href="">JQuery</a></nav>
</div>

    在这里插入图片描述

相关文章：

HTML5教程（三）- 常用标签

1 文本标签-h 标题标签&#xff08;head&#xff09;&#xff1a; 自带加粗效果&#xff0c;从h1到h6字体大小逐级递减一个标题独占一行 语法 <h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5…...

编程日记 2024/10/22 13:26:30

【HCIE-Datacom考试战报】2024-08-21 深圳 SRv6

8月21日深圳考试战报&#xff08;SRV6&#xff09; 前言 大家好呀&#xff0c;我是来自誉天的学员---&#xff0c;我是今年4月份开始看集训、备考实验的&#xff0c;但是专业课比较多&#xff0c;又还有其他比赛&#xff0c;所以我刚开始的进度很慢&#xff0c;六月底才进入冲…...

编程日记 2024/10/22 13:24:28

【京准电钟】“安全卫士”：卫星时空安全隔离防护装置

【京准电钟】“安全卫士”&#xff1a;卫星时空安全隔离防护装置 【京准电钟】“安全卫士”&#xff1a;卫星时空安全隔离防护装置 当前&#xff0c;我国电力系统普遍采用北斗卫星或者GPS卫星授时来实现时间同步&#xff0c;但不加防护的授时装置存在卫星信号被干扰或欺骗的风险…...

编程日记 2024/10/22 13:23:27

优先级队列(2)_数据流中第k大元素

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 优先级队列(2)_数据流中第k大元素 收录于专栏【经典算法练习】 本专栏旨在分享学习算法的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目…...

编程日记 2024/10/22 13:22:26

【CSS】纯CSS Loading动画组件

<template><div class"ai-loader-box"><!-- AI loader --><div class"ai-loader"><div class"text"><p>AI智能分析中....</p></div><div class"horizontal"><div class&quo…...

编程日记 2024/10/22 13:21:25

rootless模式下istio ambient鉴权策略

环境说明 rootless模式下测试istio Ambient功能 四层鉴权策略 这里四层指的是网络通信模型的第四层&#xff0c;主要的传输协议为TCP和UDP。 用于限制服务间的通信&#xff0c;比如下面的策略应用于带有 app: productpage 标签的 Pod&#xff0c; 并且仅允许来自服务帐户 clus…...

编程日记 2024/10/22 13:18:22

超详细的总结！最新大模型算法岗面试题(含答案)来了！

大模型应该是目前当之无愧的最有影响力的AI技术&#xff0c;它正在革新各个行业&#xff0c;包括自然语言处理、机器翻译、内容创作和客户服务等&#xff0c;正成为未来商业环境的重要组成部分。 截至目前大模型已超过200个&#xff0c;在大模型纵横的时代&#xff0c;不仅大模…...

编程日记 2024/10/22 13:17:21

vmware-17pro全网最细安装教程（图文讲解，不需注册账户）

文章目录 一、下载安装包&#xff1a; 二、安装教程&#xff1a; 三、检查是否安装成功 四、许可证密匙 vmware安装教程 一、下载安装包&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1yC610SU1-O9Jtk7nUrZuSA?pwdsKBy 提取码&#xff1a;sKBy 二、安装教程&…...

编程日记 2024/10/22 13:15:19

C/C++（二）C++入门基础

这一章会介绍C入门必须掌握的一些基础概念。 一、函数重载 1、什么是函数重载&#xff1f; 函数重载是C相比于C语言的一个重大改进。 即C允许在同一作用域内声明多个功能类似的同名函数&#xff0c;这些函数的参数类型 / 个数 / 类型顺序不同。&#xff08;注&#xff1a;返回…...

编程日记 2024/10/22 13:14:18

人工智能发展：一场从“被教导”到“自我成长”的奇妙冒险

说到人工智能&#xff08;AI&#xff09;&#xff0c;大家的第一反应往往是机器人、无人驾驶、或者那个让人害怕的AI会不会取代人类。其实&#xff0c;AI的进化过程简直像一部精彩的电影&#xff0c;有起伏、有高潮、有让人摸不着头脑的时刻。今天&#xff0c;我们就一起来“吃…...

编程日记 2024/10/22 13:11:14

企业级 RAG 全链路优化关键技术

本文根据2024云栖大会实录整理而成&#xff0c;演讲信息如下&#xff1a; 演讲人&#xff1a; 邢少敏 | 阿里云智能集团高级技术专家 活动&#xff1a; 2024 云栖大会 - AI 搜索企业级 RAG 全链路优化关键技术 在2024云栖大会上&#xff0c;阿里云 AI 搜索研发负责人之一的…...

编程日记 2024/10/22 13:10:12

学习文档（5）

Redis应用 目录 Redis应用 Redis 除了做缓存&#xff0c;还能做什么&#xff1f; Redis 可以做消息队列么&#xff1f; Redis 可以做搜索引擎么&#xff1f; 如何基于 Redis 实现延时任务&#xff1f; Redis 除了做缓存&#xff0c;还能做什么&#xff1f; 分布式锁&…...

编程日记 2024/10/22 13:08:10

node.js下载安装以及环境配置超详细教程【Windows版本】

node安装以及环境变量配置 Step1&#xff1a;选择版本进行安装Step2&#xff1a;安装Node.jsStep3&#xff1a;环境配置Step4&#xff1a;检查node.js是否成功安装Step5&#xff1a;npm修改下载镜像 Step1&#xff1a;选择版本进行安装 Node.js 安装包及源码下载地址为 Node.…...

编程日记 2024/10/22 13:06:09

08_实现 reactive

目录 编写 reactive 的函数签名处理对象的其他行为拦截 in 操作符拦截 for...in 循环delete 操作符 处理边界新旧值发生变化时才触发依赖的情况处理从原型上继承属性的情况处理一个对象已经是代理对象的情况处理一个原始对象已经被代理过一次之后的情况 浅响应与深响应代理数组…...

编程日记 2024/10/22 13:05:08

finereport 中台 帆软 编码解码

帆软用的 post 方式编码不是用的 dict&#xff0c;而是二次 url 编码&#xff0c;需要二次解析 import time import urllib.parse import json# 原始字符串 encoded_string data "__parameters__%7B%22MANUFACTURER%22%3A%22%22%2C%22CATEGORY%22%3A%22%22%2C%22HHPN_L…...

编程日记 2024/10/22 13:03:06

Day15-数据库服务全面优化与PT工具应用

Day15-数据库服务全面优化与PT工具应用 1、数据库服务优化讲解1.2 数据库服务系统层面的优化1.3 数据库服务软件版本选择1.4 数据库服务结构参数优化1.4.1 数据库连接层优化1.4.2 数据库服务层优化1.4.3 数据库引擎层优化1.4.4 数据库复制相关优化1.4.5 数据库其他相关优化 1.5…...

编程日记 2024/10/22 13:02:03

开源限流组件分析（二）：uber-go/ratelimit

文章目录 本系列漏桶限流算法uber的漏桶算法使用mutex版本数据结构获取令牌松弛量 atomic版本数据结构获取令牌测试漏桶的松弛量 总结 本系列 开源限流组件分析&#xff08;一&#xff09;&#xff1a;juju/ratelimit开源限流组件分析&#xff08;二&#xff09;&#xff1a;u…...

编程日记 2024/10/22 13:00:00

探索 SVG 创作新维度：svgwrite 库揭秘

文章目录 **探索 SVG 创作新维度&#xff1a;svgwrite 库揭秘**背景介绍库简介安装指南基础函数使用实战场景常见问题与解决方案总结 探索 SVG 创作新维度&#xff1a;svgwrite 库揭秘 背景介绍 在数字艺术和网页设计领域&#xff0c;SVG&#xff08;Scalable Vector Graphic…...

编程日记 2024/10/22 12:56:58

为什么要做PFAS测试?PFAS检测项目详细介绍

PFAS测试之所以重要&#xff0c;主要归因于PFAS&#xff08;全氟和多氟化合物&#xff09;的广泛存在、持久性、生物累积性和潜在的毒性。这些特性使得PFAS在环境和人体中可能长期存在&#xff0c;并对生态系统和人类健康构成威胁。以下是对PFAS检测项目的详细介绍以及进行PFAS…...

编程日记 2024/10/22 12:53:54

稀土阻燃协效剂的应用

稀土阻燃协效剂是一类利用稀土元素&#xff08;如铈、镧、钕、铕等&#xff09;具有的独特性质&#xff0c;来增强材料阻燃性能的化学物质。在聚合物材料燃烧时可催化酯花成碳&#xff0c;迅速在高分子表面形成致密连续的碳层&#xff0c;隔绝聚合物材料内部的可燃性气体与氮气…...

编程日记 2024/10/22 12:50:51

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/10/25 17:23:41

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

编程新知 2026/1/2 4:52:15

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

编程新知 2025/12/31 22:52:44

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

编程新知 2025/12/23 11:12:42

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

编程新知 2025/10/5 8:09:39

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/9/20 4:34:47

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

编程新知 2025/11/25 4:57:19

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/9/17 2:39:21

Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

编程新知 2025/12/31 9:47:54

Redis的发布订阅模式与专业的 MQ（如 Kafka, RabbitMQ）相比，优缺点是什么？适用于哪些场景？

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

编程新知 2025/12/4 2:32:37