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

HTML5教程（三）- 常用标签

news 2026/5/18 13:50:02

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

SolidWorks二次开发踩坑记：Python调用SaveAs函数时，那些让人头疼的Errors和Warnings详解

SolidWorks二次开发实战&#xff1a;Python调用SaveAs函数时的错误码解析与解决方案 当你在深夜加班调试SolidWorks二次开发脚本时&#xff0c;SaveAs函数突然返回False&#xff0c;错误码像摩尔斯电码一样难以解读——这种经历恐怕每个工业软件开发者都深有体会。本文将深入剖…...

编程新知 2026/5/18 13:38:55

构建个人数字生活数据中心：从数据采集到可视化的全栈实践

1. 项目概述&#xff1a;一个全自动化的个人数字生活记录器 最近在GitHub上看到一个挺有意思的项目&#xff0c;叫 nex-life-logger 。光看名字&#xff0c;你可能会觉得这又是一个花里胡哨的“量化自我”工具&#xff0c;无非是记录一下步数、睡眠时间。但当我深入研究了它…...

编程新知 2026/5/18 11:00:52

终极指南：Windows平台APK安装器如何让安卓应用无缝运行

终极指南&#xff1a;Windows平台APK安装器如何让安卓应用无缝运行 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 在Windows电脑上运行安卓应用曾经是一个技术难题&am…...

编程新知 2026/5/18 11:04:21

从零到一：基于HappyBase的HBase Python应用实战指南

1. 环境准备与基础配置 第一次接触HBase和HappyBase时&#xff0c;环境配置往往是最让人头疼的部分。记得我刚开始搭建环境时&#xff0c;花了整整两天时间才把所有服务调通。为了让各位少走弯路&#xff0c;我把这些年积累的经验都整理在这里。 首先需要明确的是&#xff0c…...

编程新知 2026/5/17 9:46:54

基于PIR传感器与LIFX智能灯泡的物联网运动感应照明系统实战

1. 项目概述与核心价值如果你对智能家居自动化感兴趣&#xff0c;并且想亲手打造一个既实用又有趣的照明项目&#xff0c;那么这个基于Adafruit FunHouse和LIFX智能灯泡的运动感应照明系统&#xff0c;绝对是一个绝佳的起点。它不仅仅是一个“开灯关灯”的简单触发器&#xff0…...

编程新知 2026/5/18 10:45:04

OpenClaw 小龙虾智能体联动 DeepSeek 大模型部署实操攻略

前置准备 获取小龙虾open claw一键安装包&#xff08;www.totom.top&#xff09;并安装电脑端已成功安装并正常启动OpenClaw&#xff0c;右上角 Gateway 状态显示在线设备网络通畅&#xff0c;可正常访问 DeepSeek 开放平台拥有可接收验证码的手机号 / 微信&#xff0c;用于平…...

编程新知 2026/5/17 6:57:20

怎么判断一家工厂还在不在正常生产？6 类活跃度信号，从纸面到现场

跑工厂的销售员都遇到过这种事&#xff1a;手机里存着一份名单&#xff0c;导航开两小时&#xff0c;到门口才发现卷帘门焊死、车间长草、保安说"厂子去年就搬了"。 问题出在哪&#xff1f;大多数人判断"这家工厂在不在"&#xff0c;靠的是工商登记——执照…...

编程新知 2026/5/18 6:58:16

药物发现自动化：FEP计算工作流引擎faah的设计原理与实战

1. 项目概述&#xff1a;一个面向药物发现的自动化工作流引擎 最近在药物研发的自动化工具领域&#xff0c;一个名为 kiron0/faah 的项目引起了我的注意。这并非一个简单的脚本集合&#xff0c;而是一个设计精巧、旨在为药物发现中的自由能微扰计算提供端到端自动化解决方案的…...

编程新知 2026/5/17 6:08:25

有向无环图（DAG）在Multi-Agent系统中的应用（图编排、动态DAG、Dynamic DAG）动态Agent Graph

文章目录有向无环图&#xff08;DAG&#xff09;在 Multi-Agent 系统中的应用一、什么是 DAG&#xff08;有向无环图&#xff09;二、为什么 Multi-Agent 需要 DAG三、Multi-Agent 的本质&#xff1a;任务图四、DAG 在 Multi-Agent 中的核心作用五、一个典型 Multi-Agent DAG六…...

编程新知 2026/5/17 4:04:51

6000万美元拿下世界杯：FIFA终于清醒了？

5月15号下午&#xff0c;央视和国际足联官宣了新周期的版权合作。朋友圈里炸开了锅&#xff0c;大家都在讨论那个数字&#xff1a;6000万美元。这是2026年美加墨世界杯的中国区转播权价格。说实话&#xff0c;看到这个价格我有点意外。上一届卡塔尔世界杯&#xff0c;传闻中的版…...

编程新知 2026/5/18 13:44:30