HTML标签速查手册-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_53977993/article/details/127077110

本文介绍了HTML中的常用标签，包括标题、段落、强调、高亮、换行、分割线等，以及图片标签的使用，如src、alt、width、height属性，并探讨了不同图片格式的适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小妙招

HTML规范也有快捷键哦！鼠标右击格式化文档或者敲击（Shift+Alt+F）。

标题标签

    <!-- 一级标题 -->
    <h1>今天天气不错</h1>
    <!-- 二级标题 -->
    <h2>这是我的页面</h2>
    <!-- 三级标题 -->
    <h3>同学们你们好</h3>

标题标签,例如：h1,h2,h3,h4,h5,h6。默认样式：字体放大、字体加粗、独占一行。语义：就是个标题，h1==>h6，语义是逐步降低的，h1的语义是最重的，一般情况一个页面只有1个h1，常用的就是h1-h3。

段落标签

<p>今晚星空真美。</p>

段落标签p，默认样式：段落与段落之间有空白的间距、独占一行。语义：用于表示网页内容中的一个自然段。段落标签p是特殊的块元素一般只用来包裹文字或图片，它里面不能放块元素。

强调标签

<p>同学们,你们可<em>真帅</em></p>
<p>同学们,你们可<i>真帅</i></p>

<p>同学们,你们可<strong>真帅</strong></p>
<p>同学们,你们可<b>真帅</b></p>

<p>同学们,你们可<em>真</em><strong>帅</strong></p>
<p>同学们,你们可<i>真</i><b>帅</b></p>

强调标签em、i,强调语音语调。默认样式：有一点斜体，没有独占一行。

强调标签strong、b,强调内容的重要性。默认样式：有加粗的效果，没有独占一行。

em(i)标签和strong(b)标签都是强调标签，那它们有什么区别？

首先默认样式，然后强调的重点不一样，其实在实际的开发过程中，不会做这么细致的区分。

高亮标签

<p>您可以使用HTML来建立自己的<mark>WEB</mark>站点，由浏览器来解析。</p>

mark标签的主要功能是高亮显示文本或字符，以引起用户注意。

换行标签

野火烧不尽, <br>    第一种写法
春风吹又生。<br />  第二种写法

换行标签br是一个自结束标签。语义：用来换行。

分割标签

<hr>

分割标签hr是一个自结束标签。语义：画一条分割线。

标题分组标签

<hgroup>
  <h1>古诗一首</h1>
    <h3>杜甫</h3>
</hgroup>

标题分组标签hgroup用来为标题分组，可以将一组相关的标题同时放入到hgroup标签里。

<figure>
 <figcaption>秋天来了</figcaption>
 <p>拍摄时间2022年11月</p>
 <img src="453.png" alt="秋枫落叶图">
</figure>

标题分组标签figure用来为标题分组，figcaption元素用于为figure元素组添加标题，figcaption只能作为figure元素的子元素，一个figure元素内最多允许使用一个figcaption元素。

引用标签

<blockquote>要散布阳光到别人心里，先得自己心里有阳光。</blockquote>

长引用标签blockquote可以引用别人说的话，会换行是块元素

孔子曰: <q>学而时习之</q>

短引用标签q可以用来给名人名言添加引号。

<cite>--马云--</cite>

cite标签用来表示它所包含的文本对某个参考文献的引用，比如书籍、杂志的标题和人名......被引用的文本将以斜体显示，以和其他内容区分。

居中标签

<center>
  <hgroup>
   <h1>古诗一首</h1>
    <h3>杜甫</h3>
  </hgroup>
 离离原上草, <br>
 一岁一枯荣, <br />
 野火烧不尽, <br>
 春风吹又生。<br />
</center>

居中标签center可以使文字居中。

删除标签

原价:<del>19999元</del><br>
现价:1.9元

原价:<s>19999元</s><br>
现价:1.9元

删除标签del、s可以在文字中间加一道横线，代表删除文字。

无语义标签

<div>对见张见人肯人国仄在措智报我洪娇训洪落。</div> 
<span>哥留到乐圣如承太人廿，吾胜德。</span>

div标签：没有任何语义的块元素,会独占一行。

span标签：没有任何语义的行内元素,一般只用来包裹文字。

图片标签

<img src="./跳动的小人.gif" alt="跳动的小人" width="300" height="" title="跳动的小人">
<img src="https://m.360buyimg.com/babel/jfs/t1/180803/14/28260/248559/
632325b2E1e98c1d0/17305e54b0bdd0bd.jpg.webp" alt="斯凯奇品牌代言" width="300" height="">

图片标签img是自结束标签，可以在页面中插入图片。一般有四个属性：

src属性是引入图片的路径，可以引入绝对路径、相对路径，规则与超链接相同。
alt属性是对图片的描述，在图片引入不成功的时候，会显示出来。但是它更重要的意义，是帮助浏览器快速的定位图片。
width属性用来设置图片的宽度。
height属性用来设置图片的高度。
title属性是鼠标悬停在图片上显示的文字。

注意： width属性和height属性，一般情况不会同时设置，防止图片变形；只设置一个,另一个浏览器会自适应缩放。

图片格式

不同的图片格式特性不一样，使用场合也有所不同。

图片的格式：
				JPEG(JPG)
					- JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明
					- 一般用来保存照片等颜色丰富的图片
					
				GIF
					- GIF支持的颜色少，只支持简单的透明，支持动态图
					- 图片颜色单一或者是动态图时可以使用gif
				
				PNG
					- PNG支持的颜色多，并且支持复杂的透明，不支持动图，而且内存比较大
					- 可以用来显示颜色复杂的透明的图片
					  专为网页而生的

			    webp
				   -谷歌新推出的专门用来表示网页的一种格式
				   -它具有其他图片格式的所有优点，而且文件格式还很小
				   -缺点：兼容性不好
				   
				base64 
				   -讲图片使用base64编码，这样可以将图片转换为字符，通过字符形式来引入
				   -一般都是需要和网页一起加载的图片才会使用base64

图片的使用原则：1.效果不一致，使用效果好的。2.效果一致，使用小的。

三大类

<!-- 
        元素/标签分为三大类
        1.块元素 主要是用来布局
        特点：
           (1).块元素会独占一行
           (2).常用的块元素：
           h1-h6、p、div、center

        2.行内元素 主要用来包裹文字
        特点：
           (1).不会独占一行
           (2).常用的行内元素：
            span、em、strong、del

        3.行内块元素
        特点：兼具块元素和行内元素的特点，不会独占一行，但也有块元素的其他特点
            常用的行内块元素：img图片标签
        三种元素之间是可以进行相互转化，但尽量少用
 -->

注意： 1.块元素里面什么都能放，能放块元素、行内元素、行内块元素。2.行内元素里面不能放块元素，一般只用来包裹文字。如果你放了块元素，也不会报错，但不符合规范要求。3.块元素里面有一个特殊的p标签，p标签里面只能放文字。 4.行内元素有一个特殊的a标签，a标签里面什么都能放，除了它自己。