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

HTML 常用标签及练习

news 2026/2/10 16:35:33

常用标签

<head>中的标签

概述

  • head中的内容不显示到页面上
标签说明
<title>定义网页的标题
<meta>定义网页的基本信息（供搜索引擎）
<style>定义CSS样式
<link>链接外部CSS文件或脚本文件
<script>定义脚本语言
<base>定义页面所有链接的基础定位（用得很少）

<title> 标签

  • 浏览器标签页的标题

    image-20231017112544453

<meta> 标签

  • <meta> 是对文档起到解释和说明的作用

    <meta name = "" content = "" />

  • meta 是标签的名字，name 和 content 是 meta 标签的属性。

    不同的属性值代表不同的含义：

    • keywords 是 name 属性的属性值，代表整个页面的关键字，搜索引擎会收录这些关键词。
    • description 是 name 属性的属性值，代表页面的描述性信息。

  • 乱码问题，因为浏览器查看 HTML 文档时候所使用的编码与 HTML 文档原来的编码不一致造成的。

    <meta charset = "utf-8" />

<body>中的标签

  • body中的内容显示到页面上

标题<h>

  • 标题标签，定义文档标题

  • <h1>~<h6>

    <h1>一级标题</h1>
<h2>二级标题</h2>

段落<p>

  • 段落标签，定义了一个单独的段落（自动换行，两段隔行）

  • 多行 HTML 内容浏览器解析时会忽略换行

    <p>段落1</p>
<p>段落2</p>

换行<br>

  • HTML 中，换行回车符在代码中有效，但是浏览器中无效。想在浏览器中实现换行效果需要使用<br />

    image-20231017112758596

水平线<hr>

  • 利用标签<hr /> 来实现水平线的效果

    image-20231017112837389

超链接<a>

  • 超文本连接，能够实现从一个页面跳转到另外一个页面，也就是URL 跳转

  • 双标签

  • 标签中文字，显示在页面中

  • 标签内部有属性，属性有属性值

  • href属性

    使用 href 属性指定页面跳转的地址

  • target 属性

    说明浏览器是否在新的标签页打开超链接，

    • 默认在当前页面打开

      target=""

    • 新的页面打开：

      target="_blank"

  • 例

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

    image-20231017113044949

    默认本页弹出链接页面

    image-20231017113125761

    <a href="http://4399.com" target="_blank">百度</a>

    新页面弹出

    image-20231017113220517

<img>标签

  • 在HTML 网页中插入图片，可以利用<img> 标签来实现。在引入图片的时候，需要指明图片的来源

  • <img> 发起的是GET 请求

  • 使用src 属性，指定图片的路径：

    • 绝对路径
    • 相对路径

  • 图片大小

    width 和heigth 指定图片的宽和高，单位是像素（px）。当仅指定图片宽高其中一种属性的时候，图片会等比例缩放。也可以用百分比的形式指定宽高，宽高相对于父元素来说的

  • 当图片获取失败时会显示 alt 中的内容

  • 例

    • 相对路径

      image-20231017114924625

    • url 绝对路径

      image-20231017115015166

    • 图片丢失

      image-20231017115059463

盒模型

  • 了解盒模型概念及其作用
  • 掌握div 和span 标签用法

概述

盒模型是HTML 中，重要的一种模型，所有的元素（标签）都可以看做是一个盒子，拥有外边距，边框，内边距，内容。

margin
border
padding
content

居中，相对于父元素居中，是相对的概念。在父元素中设置居中属性，作用于子元素。

div 标签

<div> 块级元素，与父元素同宽。

<html><head><meta charset="utf-8"></head><body><h1>引入图片</h1><h1>hello world</h1><div style = "text-align: center;"><img src="./img/bd_logo.png" border="0"></div></body>
</html>

image-20231017115311275

span 标签

<span> 内联元素，与子元素同宽。

<html><head><meta charset="utf-8"></head><body><h1>My Name is <span style = "color:pink;background-color: aqua;">GJL</span>!</h1></body>
</html>

image-20231017115426649

注意

  • 块级元素、内联元素
  • 外边距、边框、内边距、内容
  • 层级嵌套

常用标签练习

title

<head><title>test</title>
</head>

image-20231017105405877

meta

  • 解决乱码问题

  • 设置前

    image-20231017105639987

  • 设置后

    <html>
<head><meta charset="utf8"><title>test</title>
</head>
<body>乱码
</body>
</html>

    image-20231017105741719

标题标签

<html>
<head><meta charset="utf8"><title>test</title>
</head>
<body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>无级标题</h5><h6>六级标题</h6>
</body>
</html>

image-20231017105947381

p

<html>
<head><meta charset="utf8"><title>test</title>
</head>
<body><p>第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段</p><p>第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段</p><p>第三段第三段第三段第三段第三段第三段</p>
</body>
</html

image-20231017110202749

br

<html>
<head><meta charset="utf8"><title>test</title>
</head>
<body>第一行<br>第二行<br />第三行
</body>
</html>

image-20231017110323878

hr

<html>
<head><meta charset="utf8"><title>test</title>
</head>
<body>第一行<hr>第二行<hr />第三行
</body>
</html>

image-20231017110437893

a

<html>
<head><meta charset="utf8"><title>test</title>
</head>
<body><a href="http://www.4399.com">百度</a>
</body>
</html>

image-20231017110613723

点击后跳转到 herf 中的网址

image-20231017110649666

img

<html>
<head><meta charset="utf8"><title>test</title>
</head>
<body><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.0M2zkDUGABaYNcg0NICwrwHaHT?pid=ImgDet&rs=1" alt="图片丢失">
</body>
</html>

image-20231017110900960

当图片链接的图片无法访问时，会显示 alt 中的内容

image-20231017111020742

div

<html>
<head><meta charset="utf8"><title>test</title>
</head>
<body><div style="background-color: pink;color: blue;">粉底蓝字<br>第二行</div><div style="background-color: black;color: white;">黑底白字</div>
</body>
</html>

image-20231017111419541

span

<html>
<head><meta charset="utf8"><title>test</title>
</head>
<body><span style="background-color: pink;color: blue;">粉底蓝字<br>第二行</span><span style="background-color: black;color: white;">黑底白字</span>
</body>
</html>

image-20231017111608506

相关文章：

HTML 常用标签及练习

常用标签 <head>中的标签 概述 head中的内容不显示到页面上 标签说明<title>定义网页的标题<meta>定义网页的基本信息&#xff08;供搜索引擎&#xff09;<style>定义CSS样式<link>链接外部CSS文件或脚本文件<script>定义脚本语言<…...

编程日记 2023/10/19 16:47:40

Python 编程基础 | 第六章-包与模块管理 | 1、包与模块简介

一、模块 在程序开发过程中&#xff0c;文件代码越来越长&#xff0c;维护越来越不容易。可以把很多不同的功能编写成函数&#xff0c;放到不同的文件里&#xff0c;方便管理和调用。在Python中&#xff0c;一个.py文件就称之为一个模块&#xff08;Module&#xff09;。 1、简…...

编程日记 2023/10/19 16:46:39

为中小企业的网络推广策略解析：扩大品牌知名度和曝光度

目前网络推广已经成为企业获取潜在客户和提升品牌知名度的重要手段。对于中小企业而言&#xff0c;网络推广是一个具有巨大潜力和可行性的营销策略。在本文中&#xff0c;我们将探讨中小企业为什么有必要进行网络推广&#xff0c;并分享一些实用的网络推广策略。 一、扩大品牌知…...

编程日记 2023/10/19 16:45:39

资源受限MCU Flash空间占用优化

资源受限MCU Flash空间占用优化步骤&#xff1a; 避免重复功能&#xff0c;排查软件工程中&#xff0c;重复功能的代码片段&#xff0c;抽象出来&#xff0c;重新进行封装&#xff1b;减少内联函数inline&#xff0c;内联函数过大且过多的调用无疑会增加代码量&#xff0c;占用…...

编程日记 2023/10/19 16:44:37

冰蝎默认加密的流量解密

破解冰蝎的默认加密 流量包分析 上传的冰蝎流量包 POST /web-zh/DVWA/vulnerabilities/upload/ HTTP/1.1 Host: 192.168.197.111 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/118.0 Accept: text/html,application/xhtmlxml,a…...

编程日记 2023/10/19 16:42:35

C#字符串操作：拼接、截取、分割等高效处理方法

目录 1.前言2. 字符串拼接 (String Concatenation)3. 字符串截取 (String Substring)4. 字符串分割 (String Split)5. 字符串替换 (String Replace)6. 字符串大小写转换 (String Case Conversion)7. 结论 1.前言 在C#编程中&#xff0c;字符串操作是不可避免的一部分。无论是拼…...

编程日记 2023/10/19 16:41:34

垃圾邮件(短信)分类算法实现 机器学习 深度学习 计算机竞赛

文章目录 0 前言2 垃圾短信/邮件 分类算法 原理2.1 常用的分类器 - 贝叶斯分类器 3 数据集介绍4 数据预处理5 特征提取6 训练分类器7 综合测试结果8 其他模型方法9 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 垃圾邮件(短信)分类算…...

编程日记 2023/10/19 16:40:32

每日一题 1726. 同积元组（中等，计数）

直接统计数组中的数字两两组合可以得到的乘积求将相同乘积的组合再两两组合的数量最后由于abcd的值可以互换&#xff0c;每一个组合通过呼唤位置可以得到8种不同的组合&#xff0c;所以最后乘以8 class Solution:def tupleSameProduct(self, nums: List[int]) -> int:d de…...

编程日记 2023/10/19 16:39:31

LeetCode 2894. 分类求和并作差【数学,容斥原理】1140

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…...

编程日记 2023/10/19 16:38:30

100天掌握网络安全知识点！

1.网络安全是什么 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 2.网络安全市场 一、是市场需求量高&#xff1b; 二、则是发展相对成熟…...

编程日记 2023/10/19 16:37:29

【ArcGIS绘图系列1】在ArcGIS中制作柱状图与饼状图

成图展示 图形出处&#xff1a;J2023-Assessment of agricultural drought based on multi-source remote sensing data in a major grain producing area of Northwest China 实现步骤 第一步 查看数据信息 数据输入到ArcGIS中&#xff1a;包含数据表和shp文件 1、shp文件…...

编程日记 2023/10/19 16:36:28

【c++】跟webrtc学std array 1： 混音的多维数组

对于固定大小的数组，非常适合用std的array 实现。静态赋初值 static constexpr std::array<int, 5> kInputValues = {0, 1, 2, 1, 0}...

编程日记 2023/10/19 16:35:26

App出海起量难？传参安装打开获客增长新途径

近年来&#xff0c;在App出海潮越发热烈的背景下&#xff0c;如何适应海外市场并实现“用户增长”与“提高转化”&#xff0c;已成为出海团队需要面临的重大挑战之一。 如何在海外市场短时间内快速起量&#xff1f;这个问题难倒了不少出海创业者&#xff0c;毕竟目前互联网环境…...

编程日记 2023/10/19 16:33:24

当AI遇上3D建模：一场创意与技术的完美碰撞！

在这个充满无限可能的时代&#xff0c;科技的发展日新月异&#xff0c;让我们见证了一场创意与技术的完美碰撞——AI与3D建模的结合。这种结合为我们开辟了一个全新的领域&#xff0c;让我们在虚拟世界中自由挥洒创意&#xff0c;为现实世界创造更多的可能性。 3D建模AI生成是…...

编程日记 2023/10/19 16:31:22

工作中的有效沟通

工作中的有效沟通 发现问题并解决问题发现问题解决问题 发现问题并解决问题 发现问题 清楚问题痛点。 注意与三方沟通时&#xff0c;一方沟通不明确时&#xff0c;则更需要想办法. 引导或者特别注意语句限制词汇&#xff0c;弄清楚意思。比如&#xff1a; 信息科要求5分钟无…...

编程日记 2023/10/19 16:30:21

1.集合框架

一、JDK版本之间的关系 1.1、Oracle JDK与OpenJDK的区别 1.Oracle JDK是基于OpenJDK源代码构建的&#xff0c;因此Oracle JDK和OpenJDK之间没有重大的技术差异。 2.Oracle JDK将更多地关注稳定性&#xff0c;它重视更多的企业级用户&#xff0c;而OpenJDK经常发布以支持其他性能…...

编程日记 2023/10/19 16:29:20

2023年下半年软考考试重磅消息

重磅消息一&#xff1a;科目连考&#xff0c;分批考试 2023年下半年软考考试&#xff0c;采取科目连考、分批次考试的方式。 什么是科目连考&#xff1f; 连考就是第一个科目作答结束交卷完成后&#xff0c;自动进入第二个科目的考试&#xff0c;第一个科目剩余的时长可为第二…...

编程日记 2023/10/19 16:28:19

Spring Boot如何优雅实现动态灵活可配置的高性能数据脱敏功能

1.背景 在当下互联网高速发展的时代下&#xff0c;涉及到用户的隐私数据安全越发重要&#xff0c;一旦泄露将造成不可估量的后果。所以现在的业务系统开发中都会对用户隐私数据加密之后存储落库&#xff0c;同时还要求后端返回数据给前台之前进行数据脱敏。所谓脱敏处理其实就…...

编程日记 2023/10/19 16:27:18

九月 Web3 游戏报告：数量增长，巨头入场，用户获取和留存仍存挑战

作者: stellafootprint.network 9 月份&#xff0c;比特币价格窄幅波动&#xff0c;小幅上涨 3.7%。Web3 游戏行业正在增长&#xff0c;但月活跃用户超过 1,000 人的游戏仍不足 10%。不同公链上的游戏分布相对稳定&#xff0c;其中 BNB 以 30.9% 的份额领先。 随着 Web3 游戏…...

编程日记 2023/10/19 16:26:16

Scala语言入门

学习了这么久让我们来回顾一下之前的内容吧 Hadoop生态体系知识串讲 Scala编程语言 一、概述 http://scala-lang.org 专门为计算而生的语言&#xff0c;Scala将(Java后者C)面向对象设计和函数式编程结合在一起的简洁的高级编程语言。而函数式编程强调的是通过传递算子&…...

编程日记 2023/10/19 16:25:15

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

编程新知 2026/2/8 6:37:43

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

编程新知 2026/2/8 20:42:48

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2026/2/8 12:24:34

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

编程新知 2026/1/31 6:18:08

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

编程新知 2025/8/1 10:20:23

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/9/6 16:47:17

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

编程新知 2026/2/2 22:06:13

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/11/18 21:31:41

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

编程新知 2025/6/11 3:07:32

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

编程新知 2026/1/26 14:15:48