HTML常用标签（上）

最新推荐文章于 2024-06-15 20:00:56 发布

Sunny_冰姬月

最新推荐文章于 2024-06-15 20:00:56 发布

阅读量101

点赞数

分类专栏： web前端学习文章标签： html html5

本文链接：https://blog.csdn.net/weixin_44293567/article/details/116795497

版权

web前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、标签语义

根据标签的语义（也就是标签的含义），在合适的地方添加合适的标签，可以让页面结构更清晰。

二、常用标签

1、标题标签 <h1>-<h6> 自带加粗效果

从<h1>-<h6>字体逐渐减小，重要性逐渐减弱。

标签书写：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标题标签</title>
    </head>
    <body>
        <h1>我最大</h1>
        <h2>我第二</h2>
        <h3>我第三</h3>
        <h4>我第四</h4>
        <h5>我第五</h5>
        <h6>我最小</h6>
    </body>
</html>

显示效果如下:

2、段落标签和换行标签

⚪段落标签：<p></p>，用于定义段落。

1、文本在一个段落中会根据浏览器窗口的大小自动换行。

2、段落与段落之间保有空隙。

⚪换行标签：<br />，用于强制换行。

1、<br />是个单标签。

2、<br />只是起到换行的作用，但是没有向两个段落标签<p>中间一样出现空隙。

3、文本格式化标签

加粗	<strong></strong>或<b></b>	<strong>标签语义更强烈
倾斜	<em></em>或<i></i>	<em>标签语义更强烈
删除线	<del></del>或<s></s>	<del>标签语义更强烈
下划线	<ins></ins>或<u></u>	<ins>标签语义更强烈

4、<div>和<span>标签

<div></div>	用于页面分割、分区	一行只能有一个div盒子，是大盒子
<span></span>	多用于字符，属于字符字节标签	一行可以有多个span标签，是小盒子

5、图像标签和路径

src=" "	图像的路径(必须属性)	用于指定图像文件的路径和文件名
alt=" "	替换文本	用于在图片显示不出来的时候用文字替换
title=" "	提示文本	用于鼠标放在图像上显示的提示信息
width=" "	宽度(px)	用于设置图像的宽度
height=" "	高度(px)	用于设置图像的高度
border=" "	边框(px)	用于设置图像的边框(粗细、线条种类、颜色)

注意：

① 图像标签可以拥有多个属性，但是属性必须写在标签名后面。

② 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

③ 属性采取键值对的格式，即key="value"的格式，属性="属性值"。

路径：

页面中图片非常多的时候，通常我们会选择新建一个文件夹用于存放图像文件。此时，src="图像的路径"中的路径就是图像文件所在的位置。

路径可以分为“相对路径”和“绝对路径”。

⚪相对路径：

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

简单来说就是：图片相对于html文件的位置。

同一级路径

图像文件位置与HTML文件同一级

下一级路径

图像文件位置位于html文件的下一级

上一级路径

../

图像文件位置位于html文件的上一级

例如：假设html.html文件放在html文件夹里，img.jpg文件放在img文件夹里，则img文件相对于html文件生成的相对路径为：src="../img/img.jpg"

※在这里，返回上一级目录方式为："../"。如果要返回到上两级目录，则为"../../"。返回级数越多，则写的"../"越多。

⚪绝对路径：

是指目录下的绝对位置，通常是从盘符开始的。

例如：图片img.jpg放在D盘下的img文件夹里，则该图片的绝对路径为 src="D:/img/img.jpg"

图片的绝对位置可以是网络中的图片地址。

6、超链接

⚪在HTML页面中，标签<a></a>用于定义超链接，作用是从一个页面链接到另一个页面。

⚪超链接标签的语法格式：

<a href="链接地址" target="目标窗口的弹出方式">文本或图像</a>

href(必须属性)	用于指定链接目标的url地址
target	用于指定链接页面的打开方式，其中，_self（默认值）为“在本页面中打开”，_blank为“在新窗口中打开”

⚪链接地址分类

外部链接	链接到外部网址，网址地址必须以http或https开头： <a href="https://www.baidu.com"></a>
内部链接	指的是网站内部页面之间的相互链接，直接链接到内部页面的名称即可： <a href="index.html"></a>
空连接	如果没有链接目标时，可以用#代替： <a href="#"></a>
下载链接	如果href里面的地址是一个文件或者压缩包，点击链接会出现下载提示： <a href="zip/zip.rar"></a>
网页元素链接	在网页中的各种网页元素，如文本、图片、音视频等都可以添加超链接。
锚点链接	点击锚点链接，可以快速定位到页面中的某个位置。 ·在设置链接的href属性时，设置属性值为“#属性名”的形式，如：<a href="#two">第2集</a> ·找到目标位置标签，在里面添加一个id属性，令id="属性名"=href的属性名，如：<h3 id="two">第2集</h3>

Sunny_冰姬月

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML常用标签（上）

一、标签语义根据标签的语义（也就是标签的含义），在合适的地方添加合适的标签，可以让页面结构更清晰。二、常用标签1、标题标签 <h1>-<h6> 自带加粗效果从<h1>-<h6>字体逐渐减小，重要性逐渐减弱。标签书写：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>标
复制链接

扫一扫