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

HTML 常用标签及练习

news 2025/12/12 7:58:36

常用标签

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

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽，大家好，我是左手python！ Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库，用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/10/8 10:56:25

使用分级同态加密防御梯度泄漏

抽象联邦学习 （FL） 支持跨分布式客户端进行协作模型训练，而无需共享原始数据，这使其成为在互联和自动驾驶汽车 （CAV） 等领域保护隐私的机器学习的一种很有前途的方法。然而，最近的研究表明&…...

编程新知 2025/12/8 9:25:09

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代，情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现，消费者对内容的“有感”程度，正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

编程新知 2025/12/9 1:42:55

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下，江苏艾立泰以一场跨国资源接力的创新实践，重新定义了绿色供应链的边界。跨国回收网络：废料变黄金的全球棋局艾立泰在欧洲、东南亚建立再生塑料回收点，将海外废弃包装箱通过标准…...

编程新知 2025/12/8 6:35:33

c#开发AI模型对话

AI模型前面已经介绍了一般AI模型本地部署，直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。微软提供了ML.NET来开发和使用AI模型，但是目前国内可能使用不多，至少实践例子很少看见。开发训练模型就不介绍了&am…...

编程新知 2025/12/3 16:01:41

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案，如果正确地操作，重启Eureka集群中的节点，对已经注册的服务影响非常小，甚至可以做到无感知。但如果操作不当，可能会引发短暂的服务发现问题。下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/9/24 3:38:34

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

编程新知 2025/11/30 16:22:54

WebRTC从入门到实践 - 零基础教程

WebRTC从入门到实践 - 零基础教程目录 WebRTC简介基础概念工作原理开发环境搭建基础实践三个实战案例常见问题解答 1. WebRTC简介 1.1 什么是WebRTC？ WebRTC（Web Real-Time Communication）是一个支持网页浏览器进行实时语音…...

编程新知 2025/8/9 9:56:56

数据结构第5章：树和二叉树完全指南（自整理详细图文笔记）

名人说：莫道桑榆晚，为霞尚满天。——刘禹锡（刘梦得，诗豪） 原创笔记：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 上一篇：《数据结构第4章数组和广义表》…...

编程新知 2025/12/6 21:11:16

基于Uniapp的HarmonyOS 5.0体育应用开发攻略

一、技术架构设计 1.混合开发框架选型 （1）使用Uniapp 3.8版本支持ArkTS编译 （2）通过uni-harmony插件调用原生能力 （3）分层架构设计： graph TDA[UI层] -->|Vue语法| B(Uniapp框架)B --&g…...

编程新知 2025/11/28 10:34:06

常用标签

<head>中的标签

概述

<title> 标签

<meta> 标签

<body>中的标签

标题<h>

段落<p>

换行<br>

水平线<hr>

超链接<a>

<img>标签

盒模型

概述