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

HTML 常用标签及练习

news 2026/4/1 8:58:51

常用标签

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