HTML基础——各种常用标签_html常用标签-CSDN博客

本文链接：https://blog.csdn.net/NCU_tanghulu/article/details/107736960

HTML基础——各种常用标签

一、标题标签`<h1>-<h6>`

为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML 提供了6个等级的网页标题.即<h1>--<h6> .
h:单词head的缩写,意为头部、标题。
标签语义:作为标题使用,并且依据重要性递减。
特点:
1.加了标题的文字会变的加粗,字号也会依次变大。
2. 一个标题独占一行。

<!DOCTYPE html>
<html lang="en">
<!--zh-CN-->
<head>
    <meta charset="UTF-8">
    <title>HTML 基础</title>
</head>
<body>
不同的标题效果
<h1>HTML</h1>
<h2>HTML</h2>
<h3>HTML</h3>
<h4>HTML</h4>
<h5>HTML</h5>
<h6>HTML</h6>
</body>
</html>

结果:
在这里插入图片描述

二、段落标签

在网页中,要把文字有条理地显示出来,就需要将这些文字分段显示在HTML标签中, <p>标签用于定义段落，它可以将整个网页分为若干个段落。
p: 单词paragraph的缩写,意为段落。.
标签语义: 可以把HTML文档分割为若干段落。
特点:
1.文本在一个段落中会根据浏览器窗口的大小自动换行。
2.段落和段落之间保有空隙。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML基础</title>
</head>
<body>
<p>
    据《今日美国》报道，在准备比赛之前，美国男子职业篮球联赛（NBA）的球员、教练和裁判员做出一番表态，强调他们的愿望不仅仅是在新冠疫情期间恢复赛季比赛。
</p>
<p>
    新奥尔良鹈鹕队和犹他爵士队的所有球员和教练都穿着印有“黑人的命也是命”(Black Lives Matter)字样的球衣，手挽着手，而NBA则在播放有关系统性种族歧视的公共服务通告。在周四的比赛前，他们都在国歌中跪了下来，以抗议美国系统性的种族歧视。团队工作人员和官员也加入了他们的行列。
</p>
</body>
</html>

结果：
在这里插入图片描述

三、换行标签

在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行。如果希望某段文本强制换行显示,就需要使用换行标签<br/>.
br:单词break的缩写,意为打断、换行。
标签语义:强制换行。
特点:
1.<br/>是个单标签。
2. <br/>标签只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML基础</title>
</head>
<body>
    据《今日美国》报道，在准备比赛之前，美国男子职业篮球联赛（NBA）的球员、教练和裁判员做出一番表态，强调他们的愿望不仅仅是在新冠疫情期间恢复赛季比赛。<br/>
    新奥尔良鹈鹕队和犹他爵士队的所有球员和教练都穿着印有“黑人的命也是命”(Black Lives Matter)字样的球衣，手挽着手，而NBA则在播放有关系统性种族歧视的公共服务通告。在周四的比赛前，他们都在国歌中跪了下来，以抗议美国系统性的种族歧视。团队工作人员和官员也加入了他们的行列。
</body>
</html>

结果·：
在这里插入图片描述

四、盒子标签

<div>和<span>是没有语义的,它们就是一个盒子,用来装内容的。
div是division的缩写,表示分割，分区。span 意为跨度、跨距
特点:

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML基础</title>
</head>
<body>
<div>
    我是一个div标签，我独占一行
</div>
<div>
    我是一个div标签，我独占一行
</div>
<span>百度</span>
<span>新浪</span>
<span>搜狗</span>
</body>
</html>

结果：
在这里插入图片描述

五、图像标签

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

<img src="图像URL" />

img：单词image的缩写,意为图像。
src是<img>标签的必须属性,它用于指定图像文件的路径和文件名。
所谓属性:简单理解就是属于这个图像标签的特性。
图像标签属性注意点:
①图像标签可以拥有多个属性,必须写在标签名的后面。
②属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
③属性采取键值对的格式,即key= “value” 的格式，属性= "属性值”。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML基础</title>
</head>
<body>
<img src="26.png" title="HTML" width="148" height="148" border="8"/><br/>
<img src="27.jpg" alt="hello"/>
</body>
</html>

结果：
在这里插入图片描述

图像标签的其他属性：
在这里插入图片描述

六、超链接标签

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

a：单词anchor的缩写,意为:锚。.
两个属性:
href：用于指定链接目标的url地址，(必须属性) 当为标签应用href属性时,它就具有了超链接的功能
target：用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。_self 当前窗口打开页面,_blank 新窗口打开页面.
链接分类:
1.外部链接:例如< a href= "http:// www.baidu.com">百度</a>.
2.内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可,例如< a href="index.html">首页</a>.
3.空链接:如果当时没有确定链接目标时, <a href="#">首页</a>。
4.下载链接:如果href里面地址是一个文件或者压缩包 ,会下载这个文件。
5.网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接.
6.锚点链接:点我们点击链接，可以快速定位到页面中的某个位置。
●在链接文本的href属性中,设置属性值为#名字的形式，如<a href=”#two">第2集
●找到目标位置标签。里面添加-个id属性=刚才的名字.如: <h3 id= *two">第2集介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML基础</title>
</head>
<body>
<h4 id="one">1.外部链接</h4>
<a href="http://www.baidu.com" target="_self">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
<h4>2.内部链接</h4>
<a href="Example_02.html">内部链接</a>
<h4>3.空链接</h4>
<a href="#">空链接</a>
<h4>4.下载链接</h4>
<a href="image.zip">下载链接</a>
<h4>5.网页元素链接</h4>
<a href="http://www.baidu.com">
    <img src="26.png">
</a>
<h4>6.描点标签</h4>
<a href="#one">描点标签</a>
</body>
</html>

结果：
在这里插入图片描述

七、特殊标签

在HTML页面中, 一些特殊的符号很难或者不方便直接使用,此时我们就可以使用下面的字符来替代。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML基础</title>
</head>
<body>
你&nbsp;&nbsp;&nbsp;&nbsp;好<br/>
大于号:&gt;<br/>
小于号:&lt;
</body>
</html>