HTML常用的标签：

秃头少年小阮

已于 2022-01-29 20:05:57 修改

阅读量2.2k

点赞数

分类专栏： html学习笔记文章标签： html css 前端

于 2022-01-29 12:39:20 首次发布

本文链接：https://blog.csdn.net/rihjyy/article/details/122741659

版权

html学习笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

常用的标签：

1.标题标签h1-h6(重要)

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

<h1>这是一级标题</h1>

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

标签语义：

作为标题使用，并且根据重要性递减。

	<h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>

标签特点：

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

2.一个标题独占一行。

2.段落标签(重要)

在网页中，要把文字有条理的显示出来，就需要这个文字分段显示，在HTML标签中，p标签用于定义段落，它可以将整个网页分为若干个段落。

<p>这是一个段落</p>

单词paragraphs的缩写，意为段落。

标签语义：可以把文本分成不同的段落。

特点：

1.文本在一个短路中根据浏览器窗口的大小自动换行。

2.段落和段落之间保有空隙。

3换行标签

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

这里句尾换行<br />

单词break的缩写，意为打断，换行的意思。

标签语义：强制换行。

特点：

1.<br />是个单标签
2.<br />标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

4.文本格式化标签

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

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

<strong>这是加粗文本</strong>strong>或者<b>这是加粗文本</b><br />
<em>这是倾斜文本</em>或者<i>这是倾斜文本</i><br />
<del>这是删除线文本</del>或者<s>这是删除线文本</s><br />
<ins>这是下划线文本</ins>或者<u>这是下划线文本</u><br />
<sub>这是下标文本</sub>和<sup>这是上标文本</sup><br />

其中加粗和倾斜是重点

5.div和span标签

<div>和<span>是没有语义的，他就是一个盒子，用来存放内容的。
<div>这是div</div>
<span>这是span</span>

其中div是division的缩写，表示分割，span意为跨度，跨距。

特点：

<div>标签用来布局，但是现在一行只能放一个<div>。大盒子
<span>标签用来布局，一行上可以多个<span>。小盒子

6.图像标签和路径(重点)

1.图像标签

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

<img src="图像URL" />

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

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

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

图像标签的其他属性：

src:图片的路径，是图片的必须属性。
 <img src="https://lol.qq.com/act/export/artbook/content/champion/11_missfortune/missfortune_02.jpg" alt ="好运姐" title="这个漂亮的妹子是好运姐" height="675" border="15" /><br />
alt:替换文本，是图像不能显示时显示的文本。
title:提示本文，是当鼠标放到图像上显示的文本。
width：像素属性，用来设置图像的宽度。
height:像素属性，用来设置图像的高度
border：像素属性，用来设置

图像标签属性注意点：

1.图像标签可以拥有多个属性，必须在标签名的后面。
2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3.属性采取键值对的格式，即key="value"的格式，属性="属性值"。

2.路径

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

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

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

路径可以分为：

1.相对路径：以引用文件所在位置为参考基础，而建立出的目录路径，这里简单来说，就是图片相对于HTML页面的位置。
	1.同一级路径		图像等文件和html页面在同一级目录下。
		<img src="1.jpg" />
	2.下一级路径		图像等文件在html页面的下一级目录(这里是images)下。
		<img src="images/1.jpg" />   <!--符号为 "/" -->
	3.上一级路径		图像等文件在html页面的上一级目录下。
		<img src="../1.jpg" />		<!--符号为 "../" -->
相对路径是从代码所在的文件出发，去寻找目标文件的，而我们这里所说的上一级、下一级和同一级就是图片相对于HTML页面的位置。

2.绝对路径：是指目录下的绝对位置，直接到达目标位置，通常时从盘符开始的路径。
例如，"D:\HTML练习\HTMLtest\1.jpg"或者完整的网络地址"https://cn.bing.com/th?id=OHR.WinteringFowl_ZH-CN8158075445_1920x1080.jpg&rf=LaDigue_1920x1080.jpg"
	1.本地绝对路径
		<img src="D:\HTML练习\HTMLtest\1.jpg" alt="" />
	2.网络绝对路径
		 <img src="https://lol.qq.com/act/export/artbook/content/champion/11_missfortune/missfortune_02.jpg" alt =""/><br />

7.完整页面代码总结：

<!DOCTYPE html>
<html lang="en">
<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>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>
    <p>这是一个段落
        这个段落没有换行符号
    </p>
    <p>这是一个段落<br />
        这个段落有换行符号
    </p>
    <p>
    <strong>这是加粗文本</strong>或者<b>这是加粗文本</b><br />
    <em>这是倾斜文本</em>或者<i>这是倾斜文本</i><br />
    <del>这是删除线文本</del>或者<s>这是删除线文本</s><br />
    <ins>这是下划线文本</ins>或者<u>这是下划线文本</u><br />
    <sub>这是下标文本</sub>和<sup>这是上标文本</sup><br />
    </p>
    <div>标签用来布局，但是现在一行只能放一个</div>
    <span>标签用来布局，一行上可以多个。</span>
    <span>标签用来布局，一行上可以多个。</span>
    <span>标签用来布局，一行上可以多个。</span>
    <!--只设定图片的地址-->
    <img src="https://lol.qq.com/act/export/artbook/content/champion/11_missfortune/missfortune_02.jpg"/><br />
    <!--这里故意打错图片地址，才能看到alt属性的内容-->
    <img src="https://lol.qq.com/act/export/rtbook/content/champion/11_missfortune/missfortune_02.jpg" alt ="好运姐"  /><br />
    <!--有了title属性，在鼠标移动到第三章图片之后就可以看到上面的文本了-->
    <img src="https://lol.qq.com/act/export/artbook/content/champion/11_missfortune/missfortune_02.jpg" alt ="好运姐" title="这个漂亮的妹子是好运姐"  /><br />
    <!--设置图片的宽度为675-->
    <img src="https://lol.qq.com/act/export/artbook/content/champion/11_missfortune/missfortune_02.jpg" alt ="好运姐" title="这个漂亮的妹子是好运姐" width="675" /><br />
    <!--设置图片的高度为675-->
    <img src="https://lol.qq.com/act/export/artbook/content/champion/11_missfortune/missfortune_02.jpg" alt ="好运姐" title="这个漂亮的妹子是好运姐" height="675" /><br />
    <!--一般我们只设定图片高度和宽度其中一个，图片会根据高度或者宽度自动缩放，这里高度和宽度同时设定为675，就会导致图片被异常拉伸-->
    <img src="https://lol.qq.com/act/export/artbook/content/champion/11_missfortune/missfortune_02.jpg" alt ="好运姐" title="这个漂亮的妹子是好运姐" width="675" height="675" /><br />
    <!--给图片加上一个边框属性-->
    <img src="https://lol.qq.com/act/export/artbook/content/champion/11_missfortune/missfortune_02.jpg" alt ="好运姐" title="这个漂亮的妹子是好运姐" height="675" border="15" /><br />
</body>
</html>

秃头少年小阮

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
HTML常用的标签：

常用的标签：1.标题标签h1-h6(重要)为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的网页标题，即h1-h6。<h1>这是一级标题</h1>单词head的缩写，意为头部，标题。标签语义：作为标题使用，并且根据重要性递减。 <h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3> <h4>这
复制链接

扫一扫