编程教程

　　 编程问答　 ACM与蓝桥杯竞赛入门　 C语言教程　 C++教程　 数据结构教程　 单片机教程　 Python教程　 JAVA教程　 编译器教程　 C语言函数库　 更多教程

Dotcpp > 编程教程 > HTML语法 > HTML常用标签

HTML常用标签

点击打开在线编译器，边学边练

HTML 中的标签就像关键字一样，每个标签都有自己的语义（含义），例如<p>标签代表段落，<b>标签代表加粗。根据标签的不同，浏览器会使用不同的方式展示标签中的内容。

在实际开发中，有时我们也将 HTML 标签称为 HTML 元素。

属性

↓

↑ ↑ ↑

开始标签内容结束标签

除了class属性外，开始标签中还可以包含其它属性信息，比如 id、title 等，这些我们会在后面进行讲解。

注意：虽然 HTML 标签在语法上不区分大小写，但是为了规范和专业，强烈建议在定义标签时一律采用小写

（一）标签语义

学习标签是有技巧的，重点是记住每个标签的语义。简单理解就是指标签的含义，即这个标签是用来干嘛的。根据标签的语义。在合适的地方给一个最为合理的标签,可以让页面结构更清晰。

（二）标题标签h1-h6

为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题，即<h1> - <h6>

<h1> 我是一级标签 </h1>

h是单词head的缩写，意为头部标题。

标签语义：作为标题使用，并且依据重要性递减。

● 特点：

1. 加了标题的文字会变的加粗，字号也会依次变大。

2. 一个标题独占一行。

（三）段落标签和换行标签

网页中想让文字分段显示. <p>标签用于定义段落样式

<p> 我是一个段落标签 </p>

p就是paragraph，段落的意思；可以将html分割为若干段落, 根据浏览器窗口大小自动换行, 段落与段落之间保有空隙.

在HIML中, 一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签<br/>.

break 强制换行单标签行间距不大。

新闻案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>国际新闻</title>
</head>
<body>
    <h1>国际新闻</h1>
    <h4>乌克兰当天早上派出无人机攻击了位于俄罗斯梁赞州和萨拉托夫州的军用机场</h4>
    <p>当地时间12月5日，俄罗斯国防部发表声明说，乌克兰当天早上派出无人机攻击了位于俄罗斯梁赞州和萨拉托夫州的军用机场，但是被俄军防空系统拦截。攻击中有3名俄军士兵死亡，另有4人受伤。</p>
    <p>此外，由于乌克兰无人机在军用机场上方的坠落，导致俄军两架战机的机体受损。数小时后，乌克兰方面报告俄方发动了新一轮导弹袭击。</p>
    <h4>俄方不可能交出扎波罗热核电站控制权</h4>
    <p>俄罗斯外交部发言人扎哈罗娃向卫星通讯社表示，俄方不可能交出扎波罗热核电站控制权。</p>
    <h4>拜登不会考虑使用俄罗斯石油来补充战略石油储备</h4>
    <p>美国白宫称，对俄罗斯对价格上限的反应并不感到惊讶。拜登不会考虑使用俄罗斯石油来补充战略石油储备。美国能源安全特使Hochstein表示，美国仍然有足够的战略石油储备（SPR）来应对紧急情况。拜登政府将于12月8日与美国石油业高管召开线上会议，讨论如何支持乌克兰的能源基础设施。美国能源部长将于14日会见众多石油公司高管。</p>
    <p>C语言网<br/>        2022-12-6</p>

</body>
</html>

显示如下：

段落标签和换行标签

（四）文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签。使文字以特殊的方式显示。

标签语义：突出重要性比普通文字更重要。

    <strong>加粗</strong>
    <b>加粗</b>
    <em>倾斜</em>
    <i>倾斜</i>
    <del>删除线</del>
    <s>删除线</s>
    <ins>下划线</ins>
    <u>下划线</u>

展示如下：

文本格式化标签

（五）div和span标签

<div>和<span>是没有语义的,他们就是一个盒子,用来装内容的。

division 分割分区 span 跨度跨距

● 特点：

<div>标签用来布局,但是现在一行只能放一个<div>. 大盒子独占一行。

<span>标签用来布局，一行上可以多个<span>. 小盒子一行可以多个。

（六）图像标签和路径

1. 图像标签

在HTML标签中，<img>标签用于定义HTML页面中的图像。

单词image的缩写。意为图像。

src是<img>标签的必须属性.它用于指定图像文件的路径和文件名。

所谓属性:简单理解就是属于这个图像标签的特性。

<img src="bg.png" alt=""/>

图像标签的其他属性

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示的文字。
title	文本	提示文本，鼠标放到图像上，显示的文字。
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

图像标签使用注意点

（1）图像标签可以拥有多个属性,必须写在标签名的后面。

（2）属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。

（3）属性采取键值对的格式,即key= “value” 的格式，属性= "属性值”

2. 路径

实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们。

目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如html文件、图片等。

根目录：打开目录文件夹的第一层就是根目录。

(2) VSCode打开目录文件夹

文件——打开文件夹.选择目录文件夹后期非常方便管理文件. 或者直接拖进来

页面中的图片会非常多，通常我们会新建一个文件夹来存放这些图像文件 ( images) , 这时再查找图像,就需要采用“路径”的方式来指定图像文件的位置。

路径可以分为：

（1）相对路径，以引用文件所在位置为参考基础,而建立出的目录路径。

（2）绝对路径，是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。

（七）超链接标签

1. 链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

单词anchor的缩写：锚

两个属性作用如下

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能。
target	用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。

2. 链接分类

（1）外部链接，例如<a href="http://www.baidu.com">baidu<a>。

（2）内部链接，网站内部页面之间的相互链接，直接链接内部页面名称即可，例如<a href="index.html">首页<a>。

（3）空链接，当没有确定链接目标时，<a href="#">首页<a>。

（4）下载链接，如果href里面地址是一个文件或者压缩包，会下载这个文件。

（5）网页元素链接在网页中的各种网页元素,如文本图像、表格、音频、视频等都可以添加超链接。

本文固定URL：https://www.dotcpp.com/course/1100

上一课：