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

HTML5教程（三）- 常用标签

news 2025/11/11 1:34:49

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

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2025/11/10 15:25:48

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2025/11/9 4:20:50

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2025/11/8 1:03:22

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2025/6/16 23:36:50

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

编程新知 2025/11/4 20:56:54

多种风格导航菜单 HTML 实现（附源码）

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

编程新知 2025/11/8 10:46:11

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/8/25 19:12:45

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

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

编程新知 2025/11/7 20:03:47

html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

编程新知 2025/11/7 20:30:51

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

编程新知 2025/10/16 16:03:09