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

HTML5教程（三）- 常用标签

news 文章来源：https://blog.csdn.net/qq_19394437/article/details/143057935 2025/5/9 6:18:35

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

Java的异常处理

常见异常 ① 运行时异常 a、ClassNotFoundException b、FileNotFoundException c、IOException ② 编译时异常 a、ArrayIndexOutOfBoundsException b、NullPointerException c、ClassCastException d、InputFormatException e、InputMismatchException f、ArithmeticException …...

编程日记 2024/10/22 12:48:49

免费域名邮箱申请和使用教程：有哪些步骤？

免费域名邮箱设置指南&#xff1f;如何免费注册烽火域名邮箱&#xff1f; 对于个人和企业而言&#xff0c;拥有一个专属的域名邮箱不仅能提升专业形象&#xff0c;还能增强品牌识别度。烽火将详细介绍如何申请和使用免费域名邮箱&#xff0c;帮助您轻松拥有一个专属的电子邮件…...

编程日记 2024/10/22 12:47:48

Linux之实战命令45：swapon应用实例(七十九)

简介&#xff1a; CSDN博客专家、《Android系统多媒体进阶实战》一书作者 新书发布&#xff1a;《Android系统多媒体进阶实战》&#x1f680; 优质专栏&#xff1a; Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a; 多媒体系统工程师系列【…...

编程日记 2024/10/22 12:46:47

提升数据处理效率：TDengine S3 的最佳实践与应用

在当今数据驱动的时代&#xff0c;如何高效地存储与处理海量数据成为了企业面临的一大挑战。为了解决这一问题&#xff0c;我们在 TDengine 3.2.2.0 首次发布了企业级功能 S3 存储。这一功能经历多个版本的迭代与完善后&#xff0c;逐渐发展成为一个全面和高效的解决方案。 S3…...

编程日记 2024/10/22 12:45:46

高级算法设计与分析 学习笔记13 线性规划

注意是线性规划不是动态规划哦 好家伙&#xff0c;这不是凸优化吗&#xff1f; 凸优化标准形式&#xff1a; 先改成统一最大化&#xff08;凸优化那边怎么是统一最小化&#xff1f;&#xff09; 原来的x2正负无所谓&#xff0c;但我希望每个x都是有限制的&#xff0c;所以把它改…...

编程日记 2024/10/22 12:41:43

2024年11月软考中项应试技巧与机考注意事项！

软考中项的备考技巧 重点来了&#xff01;这部分是我辛苦总结出来的备考技巧&#xff0c;都是我当年备考时逐渐整合出来的&#xff0c;绝对够用&#xff0c;赶紧跟我一起掌握吧&#xff01; 1.基础知识 在学习时建议大家先跟着班课老师结合教材过一遍基础知识。强调跟着班课…...

编程日记 2024/10/22 12:40:41

网络编程中容易踩的坑罗列，谨记！

1、TCP没考虑粘包分包 TCP是面向连接的可靠协议&#xff0c;TCP是流式协议&#xff0c;创建TCP套接字的类型为SOCK_STREAM int sockfd socket(AF_INET, SOCK_STREAM, 0);很多同学面试时对书上的话背诵如流&#xff0c;在实际TCP编程中却没有处理粘包和分包的代码&#xff0c;以…...

编程日记 2024/10/22 12:39:40

SD-WAN：推动企业网络优化与发展

近年来&#xff0c;软件定义广域网&#xff08;SD-WAN&#xff09;逐渐成为众多企业的首选网络解决方案。这背后的原因是什么&#xff1f;接下来我们将深入探讨这一趋势。 在快速发展的通信技术领域&#xff0c;企业对高效、灵活且可扩展的网络架构需求愈发迫切。随着数据流量的…...

编程日记 2024/10/22 12:38:40

[MyBatis-Plus]扩展功能详解

代码生成 使用MP的步骤是非常固定的几步操作 基于插件, 可以快速的生成基础性的代码 安装插件安装完成后重启IEDA连接数据库 mp是数据库的名字?serverTimezoneUTC 是修复mysql时区, 不加会报错 生成代码 TablePrefix选项是用于去除表名的前缀, 比如根据tb_user表生成实体类U…...

编程日记 2024/10/22 12:37:39

循序渐进丨MogDB 5.0 远程访问 MogDB/Oracle 数据库的简便方法(使用@符号)

概述 早期的 MogDB 就提供了Postgres_fdw、Oracle_fdw、MySQL_fdw3个插件&#xff0c;用于远程访问 MogDB/Oracle/MySQL数据库。 旧的版本中&#xff0c;访问远程数据库的表&#xff0c;需要显式创建外部表&#xff0c;而在 MogDB 5.0当中&#xff0c;这种用法得到了简化&…...

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