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

HTML 常用标签及练习

news 2025/8/30 5:40:54

常用标签

`<head>`中的标签

概述

head中的内容不显示到页面上

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

`<title>` 标签

浏览器标签页的标题

`<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 />

水平线`<hr>`

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

超链接`<a>`

超文本连接，能够实现从一个页面跳转到另外一个页面，也就是URL 跳转
双标签
标签中文字，显示在页面中
标签内部有属性，属性有属性值
href属性

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

说明浏览器是否在新的标签页打开超链接，
- 默认在当前页面打开
```
target=""
```
- 新的页面打开：
```
target="_blank"
```

例

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

默认本页弹出链接页面

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

新页面弹出

`<img>`标签

在HTML 网页中插入图片，可以利用<img> 标签来实现。在引入图片的时候，需要指明图片的来源
<img> 发起的是GET 请求
使用src 属性，指定图片的路径：
- 绝对路径
- 相对路径
图片大小

width 和heigth 指定图片的宽和高，单位是像素（px）。当仅指定图片宽高其中一种属性的时候，图片会等比例缩放。也可以用百分比的形式指定宽高，宽高相对于父元素来说的
当图片获取失败时会显示 alt 中的内容
例
- 相对路径
- url 绝对路径
- 图片丢失

盒模型

了解盒模型概念及其作用
掌握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>

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>

注意

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

常用标签练习

title

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

标题标签

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

p

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

br

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

hr

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

a

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

点击后跳转到 herf 中的网址

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>

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

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>

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>

HTML 常用标签及练习

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

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

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

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

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

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

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

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

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

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

编程日记 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#编程中，字符串操作是不可避免的一部分。无论是拼…...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

成图展示图形出处：J2023-Assessment of agricultural drought based on multi-source remote sensing data in a major grain producing area of Northwest China 实现步骤第一步查看数据信息数据输入到ArcGIS中：包含数据表和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出海起量难？传参安装打开获客增长新途径

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

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

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

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

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

工作中的有效沟通

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

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

1.集合框架

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

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

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

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

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

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

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

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

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

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

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

Scala语言入门

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

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

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式，可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。使用 Xcode 命令行工具打包通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

编程新知 2025/7/8 18:20:22

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

编程新知 2025/8/29 23:17:22

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2025/8/22 2:46:28

Java 8 Stream API 入门到实践详解

一、告别 for 循环！ 传统痛点： Java 8 之前，集合操作离不开冗长的 for 循环和匿名类。例如，过滤列表中的偶数： List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

编程新知 2025/7/7 9:09:17

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速（高性能）的 Web 框架，用于构建 API，支持 Python 3.6。它基于标准 Python 类型提示，易于学习且功能强大。以下是一个完整的 FastAPI 入门教程，涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/7/5 11:09:46

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例，也可以通过实例工厂方法获取bean实例。实例工厂方法步骤如下： 定义实例工厂类（Java代码），定义实例工厂（xml），定义调用实例工厂&#xff…...

编程新知 2025/8/27 18:01:27

Linux云原生安全：零信任架构与机密计算

Linux云原生安全：零信任架构与机密计算构建坚不可摧的云原生防御体系引言：云原生安全的范式革命随着云原生技术的普及，安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测，到2025年，零信任架构将成为超…...

编程新知 2025/8/17 17:11:47

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件，所以得把软件用docker打包起来，大部分功能都没问题，出了一个奇怪的事情。同样的代码，在本机上用vscode可以运行起来，但是打包之后在docker里出现了问题。使用的是dialog组件，…...

编程新知 2025/8/21 7:56:36

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

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

编程新知 2025/8/21 20:41:27

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题，无需引入，直接可…...

编程新知 2025/8/5 18:55:17

常用标签

<head>中的标签

概述

<title> 标签

<meta> 标签

<body>中的标签

标题<h>

段落<p>

换行<br>

水平线<hr>

超链接<a>

<img>标签

盒模型

概述