1.标签总览

标签名标签含义单/双标签
h1 ~ h6标题双
p段落双
div没有任何含义，用于整体布局双
em要着重阅读的内容双
strong十分重要的内容（语气比 em 要强）双
span没有语义，用于包裹短语的通用容器双
cite作品标题(书籍、歌曲、电影、电视节目、绘画、雕塑)双
dfn特殊术语、或专属名词双
del 与 ins删除的文本【与】插入的文本双
sub 与 sup下标文字【与】上标文字双
code一段代码双
samp从正常的上下文中，将某些内容提取出来，例如：标识设备输出双
kbd键盘文本，表示文本是通过键盘输入的，经常用在与计算机相关的手册中双
abbr缩写，最好配合上 title 属性双
bdo更改文本方向，要配合 dir 属性，可选值：ltr(默认值)、rtl双
var标记变量，可用与 code 标签一起使用双
small附属细则，例如：包括版权、法律文本。—-很少使用双
b摘要中的关键字、评论中的产品名称。—-很少使用双
i本意是：人物的思想活动、所说的话等等。
现在多用于：呈现字体图标。		双
u与正常内容有反差的文本，例如：错的单词，不合适的描述。—-很少使用双
q短引用—-很少使用双
blockquote长引用—-很少使用，块元素双
address地址信息，块元素双
img表示图片单

2.HTML 排版标签

2.1 标题标签-h 标签

一共有六级标题标签

  • <h1></h1>: 一级标题，最重要的标签，一般一个网页只有一个
  • <h2></h2>: 二级标题
  • <h3></h3>: 三级标题
  • <h4></h4>: 四级标题
  • <h5></h5>: 五级标题
  • <h6></h6>: 六级标题
    <h1>~<h3>：用的较多，<h1>~<h6>不允许不能嵌套。

2.2 段落标签-p 标签

展示段落内容

2.3 div 标签

用来限定 p 标签的。

p 标签中不能出现 h 标签、div 标签，同时不能嵌套 p 标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>

<html lang="zh-CN">
     
  <head>
           
    <meta charset="UTF-8" />
           
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
           
    <title>Document</title>
       
  </head>

     
  <body>
           
    <h1>我爱你</h1>
           
    <h2>我爱你</h2>
           
    <h3>我爱你</h3>
           
    <h4>我爱你</h4>
           
    <h5>我爱你</h5>
           
    <h6>我爱你</h6>
           
    <div>
                 
      <p>我爱你</p>
                 
      <p>我爱你</p>
                 
      <p>我爱你</p>
             
    </div>
       
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>

<html lang="zh-CN">
     
  <head>
           
    <meta charset="UTF-8" />
           
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
           
    <title>Document</title>
       
  </head>

     
  <body>
           
    <h1>第一观察｜总书记从五方面阐述进一步健全全面从严治党体系</h1>
           
    <h4>2024-06-29 21:14·新华社</h4>
           
    <div>
                 
      <p>
        6月27日，习近平总书记在主持中共中央政治局第十五次集体学习时强调，要“进一步健全要素齐全、功能完备、科学规范、运行高效的全面从严治党体系”。
      </p>
                 
      <p>
        党的十八大以来，以习近平同志为核心的党中央坚定不移推进全面从严治党，构建起全面从严治党体系，开辟了百年大党自我革命新境界。为不断把新时代党的建设新的伟大工程推向前进，党的二十大首次提出“健全全面从严治党体系”的重大举措。这次中央政治局集体学习，在深刻分析新征程上党面临的风险挑战的基础上，又明确提出“进一步健全全面从严治党体系”。
      </p>
                 
      <p>
        新时代党的建设是一项系统工程。从“构建全面从严治党体系”到“健全全面从严治党体系”，再到“进一步健全全面从严治党体系”，充分体现了以习近平同志为核心的党中央与时俱进管党治党的系统思维、科学方法。
      </p>
             
    </div>
       
  </body>
</html>

3.语义化标签

语义即含义
语义化：标签默认的效果不重要，语义最重要！用特定的标签去表达特定的含义，虽然可以通过 css 对标签的表现效果进行调整，但是对于特定含义的内容，还是要选择对应的标签来呈现。
用特定的标签去表达特定的内容。
语义化的好处：

  • 代码的可读性强，代码清晰。
  • 有利于 SEO(搜索引擎优化)。
  • 方便设备(屏幕阅读器、盲人阅读器)解析

4.块级元素与行内元素

块级元素：独占一行的元素，如：h1、p、div 标签等。
行内元素：不独占一行，如：input、span 标签等。

使用规则

  • 块级元素中能写：行内元素、块级元素（几乎什么都能写），要避免特殊规则：h1~h6 不能相互嵌套，p 标签中不能写块级元素。
  • 行内元素中能写：行内元素，但是不能写块级元素。
    避免因为违规使用块级元素与行内元素，导致后续网页样式不好调整。
    marquee 元素设计的初衷是：让文字有动画效果，但是如今可以通过 CSS 来实现了，而且还可以实现的更加炫酷的效果，所以 marquee 标签已经过时了，废弃了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>

<html lang="zh-CN">
     
  <head>
           
    <meta charset="UTF-8" />
           
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
           
    <title>HTML块级元素与行内元素</title>
       
  </head>

     
  <body>
           
    <!-- 块级元素 -->
           
    <!-- <marquee>i love you </marquee>
        <marquee>i love you </marquee>
        <h1>this is a title</h1>
        <h1>this is a title</h1>
        <p>i love the world</p>
        <p>i love the world</p>
        <div>love</div>
        <div>love</div> -->
           
    <!-- 行内元素 -->
           
    <!-- <input type="text">
        <input type="text">
        <span>i love you</span> -->
           
    <div>
                  <span>请输入：</span>             <input type="text" />      
       
    </div>
       
  </body>
</html>

5.文本标签

文本标签一般常用于词汇、短语的包裹，通常写在排版标签里面，排版标签更加宏观（大段文字的处理），文本标签更微观（词汇、短语），文本标签通常都是行内元素。

5.1 常用文本标签

em：要着重阅读的内容。
strong: 十分重要的内容（语气比 em 要强）
span:没有语义，用于包裹短语的通用容器

5.2 不常用的文本标签

标签名标签含义单/双标签
cite作品标题(书籍、歌曲、电影、电视节目、绘画、雕塑)双
dfn特殊术语、或专属名词双
del 与 ins删除的文本【与】插入的文本双
sub 与 sup下标文字【与】上标文字双
code一段代码双
samp从正常的上下文中，将某些内容提取出来，例如：标识设备输出双
kbd键盘文本，表示文本是通过键盘输入的，经常用在与计算机相关的手册中双
abbr缩写，最好配合上 title 属性双
bdo更改文本方向，要配合 dir 属性，可选值：ltr(默认值)、rtl双
var标记变量，可用与 code 标签一起使用双
small附属细则，例如：包括版权、法律文本。—-很少使用双
b摘要中的关键字、评论中的产品名称。—-很少使用双
i本意是：人物的思想活动、所说的话等等。
现在多用于：呈现字体图标。		双
u与正常内容有反差的文本，例如：错的单词，不合适的描述。—-很少使用双
q短引用—-很少使用双
blockquote长引用—-很少使用，块元素双
address地址信息，块元素双

备注：

  • 这些不常用的文本标签，编码时不用过于纠结(酌情而定，不用也没有关系)。
  • blockquote与address是块级元素，其他文本标签，都是行内元素。
  • 有些语义感不强的标签，我们很少使用，例如：
    small、b、u、q、blockquote
  • HTML 标签太多了，只需要记住重要的标签即可，截止目前，有这些标签:
    h1 ~ h6、p、div、em、strong、span

6.图片标签

标签名标签含义常用属性单/双标签
img表示图片src:图片路径—-图片的具体位置
alt:图片描述
width:图片宽度，单位是像素，例如：200px 或 200
height:图片高度，单位是像素，例如：200px 或 200		单

总结

  • 尽量不要同时去修改图片的宽和高，这样做可能会造成比例失调。
  • 暂且认为img标签是行内元素
  • alt属性的作用：
    搜索引擎通过 alt 属性，可以得知图片的内容。
    当图片无法展示时，有些浏览器可以呈现 alt 属性的值。
    盲人阅读器可以朗读 alt 属性的值。

6.1 相对路径与绝对路径

6.1.1 相对路径

符号含义举例
./同级./xiaoyu01.jpg
/下一级/xiaoyu01.jpg
../上一级../img/xiaoyu01.jpg

../img/xiaoyu01.jpg:这样的写法，以当前位置作为参考点，去建立路径。
相对路径中的./可以省略不写
相对路径依赖的是当前位置，后期若调整了文件位置，那么文件中的路径也要修改。
实际开发中用的比较多。

6.1.2 绝对路径

6.1.2.1 本地绝对路径

E:/demo1/demo2/picture.jpg
不推荐使用此方法来引入图片。
局限性较大

6.1.2.2 网络绝对路径

<img width="200" src="https://p3-sign.toutiaoimg.com/tos-cn-i-axegupay5k/4c88153c81d24c95a7ba4eaaf1c8900a~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1720406007&x-signature=b5uy%2FGhT3LgK5w3RFCew8Ls2JCQ%3D" alt="网络图片">：这样的写法
实际开发中用的也比较多

注意

  • 使用网络绝对路径要注意：如果对象存储服务器开启了防盗链，会造成图片引入失败。

7.常见的图片格式

格式名概述主要特点使用场景
.jpg是一种有损的压缩格式支持的颜色丰富，占用空间小对图片细节没有极高要求的场景，如：网站的产品宣传图。
.png是一种无损的压缩格式，能够更高质量的保存图片支持的颜色丰富、占用空间略大、支持背景透明，不支持动态图想让图片有透明背景、想更高质量呈现图片，例如：公司 logo 图、重要配图等。
.bmp不进行压缩的一种格式，在最大程度上保留图片的更多细节支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图对图片细节要求极高的场景，例如：一些大型游戏中的图片。（网页中很少使用）
.gif仅支持 256 种颜色，色彩呈现不是很完整支持的颜色较少、支持简单透明背景、支持动态图网页中的动态图片
.webp谷歌推出的一种格式，专门用来在网页中呈现图片具备上述几种格式的有点，但兼容性不太好，一旦使用务必要解决兼容性问题。网页中的各种图片
base64一串特殊的文本，要通过浏览器打开，传统看图应用无法打开原理：把图片进行 base64 编码，形成一段文本
如何生成：靠一些工具或网站
如何使用：直接作为img标签的src属性的值即可，并且不收文件位置的影响		一些较小的图片，或者需要和网页一起加载的图片(即不需要浏览器去重新请求的图片)

8.超链接

标签名标签含义常用属性单双标签
<a href=""></a>超链接herf：要跳转的具体位置
target：跳转时如何打开页面，常用值如下：
_self:在本页面中打开
_blank:在新页面中打开		双

8.1 跳转页面

代码中敲的多个回车与多个空格，浏览器统一解析为一个空格
a 标签虽然是一个行内元素，但是他能包裹除自身外的块元素与行内元素
a 标签里不能包裹a标签

8.2 跳转文件

浏览器可以打开文件，但是我想强制触发下载应该如何编写
<a href="../img/girl.jpg" download="girl.jpg">下载图片</a>

8.3 跳转锚点

锚点，又称标记点。通过a标签来实现，一种没有标签体，标签属性用的是name的一种a标签。
name 属性区分大小写，重复出现，只有第一个生效，后面的就无效了

1
2
3
4
5
6
7
8
9
10
11
12
<a href="#fourthClass">看第四课</a>
<a href="#fifthClass">看第五课</a>

<a name="fourthClass"></a>
<img width="200px" src="../img/xiaoyu04.jpg" alt="咸鱼第四课" />
<!--现在更加推荐下面这种写法来写锚点-->
<p id="fifthClass">这是咸鱼第五课</p>
<img width="200px" src="../img/xiaoyu05.jpg" alt="咸鱼第五课" />
<a href="#">回到顶部</a>
<a href="">刷新页面</a>
<!--执行JS脚本-->
<a href="javascript:alert(666)">点我弹框</a>

8.4 唤起应用

通过a标签，可以唤起设备应用程序

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 唤起指定应用 -->
<!-- 唤起设备拨号 -->
<div>
  <a href="tel:1008611">拨打中国移动客服电话</a>
</div>
<!-- 唤起设备发送邮件 -->
<div>
  <a href="mailto:850940826@qq.com">邮件联系</a>
</div>
<!-- 唤起设备发送短信 -->
<div>
  <a href="sms:18980614724">发送短信</a>
</div>

9.超文本的真正定义

超文本是指连接单个网站内或多个网站间的网页链接。链接是网络的一个基本方面，只要将内容上传到互联网，并将其与他人创建的页面相链接，就成为了万维网的积极参与者。
超文本是一种组织信息的方式，通过超链接将不同 空间的文字、图片等各种信息组织在一起，能从当前阅读的内容，跳转到超链接所指向的内容（页面、文件、锚点、应用）。

10.几个常用标签

标签名标签含义常用属性单双标签
<br>换行标签无单
<hr>分隔符标签单
<pre>按原文显示标签，一般用于在网页中嵌入大段代码双

10.1 换行标签

<br>：不要用此标签来增加文件之间的行间隔，应使用后面学到的 CSS margin 属性来实现。

10.2 分割线标签

<hr>：如果想要实现分隔的效果，才写这个标签，如果只是为了产生一条水平线，请使用 CSS。

10.3 按原文显示

<pre>：因为如果使用div标签，不论写多少空格或换行，浏览器都只会解析为一个空格与换行，故如果需要原文显示内容，则使用这个标签。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
       
    <meta charset="UTF-8" />
       
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       
    <title>几个常用标签</title>
  </head>
  <body>
       
    <!-- 换行标签 -->
        <a href="https://www.baidu.com">去百度</a>     <br />
        <a href="https://www.jd.com">去京东</a>    
    <!-- 分割线标签 -->
       
    <div>第一章</div>
       
    <p>陨落的天才，莫欺少年穷</p>
       
    <hr />
       
    <div>第二章</div>
       
    <p>天才持续陨落，莫欺中年穷</p>
       
    <!-- 按原文显示 -->
       
    <pre>
        I      love     you
           I   love  you
               love
    </pre
    >
  </body>
</html>

11.框架标签

标签名功能和语义属性单/双标签
iframe框架（在网页中嵌入其他文件）name:框架名字，可以与target属性配合。
width:框架的宽。
height:框架的高。
frameborder:是否显示边框，值：0 或 1。		双

实际应用：

  • 在网页中嵌入广告。
  • 与超链接或表单的target配合，展示不同的内容。