第四节：元素

语义化

什么是语义化

1、每个HTML元素都有具体的含义
a元素：超链接
p元素：段落
h1元素：一级标题

2、所有元素与展示效果无关
并不是为了大的字体，就一定要用h1，来显示，大小、样式、颜色等等应该让css负责。
因为浏览器带有默认的css样式，所以每个元素有一些默认样式，但应该通过我们的控制来确保在各浏览器一致。

为什么需要语义化

1、方便SEO
2、方便浏览器理解网页（部分插件可能会使用，例如阅读模式、屏蔽广告、语音模式等等）

---

接下来我们就开始元素的学习之路

所有支持的元素，可以在HTML5元素周期表进行查阅

h元素

h1~h6：表示1级标题到6级标题,主要级别越高代表标题的权重更大，但不要用字体大小来衡量

    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>

image.png
*在vscode里面有一个小技巧 “6{$级标题}`
**

p元素

表示段落

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

image.png

vscode技巧 可以用p*3>{这是一个段落}直接生成上面的代码
vscode中可以使用lorem可以批量生成一些无意义的文字段落，也叫乱数假文，也可以使用lorem数字来生成指定数量的文字，例如lorem10就是生成10个词组

span元素【无语义，容器标签】

假如我们想实现下面一句话

<p>三原色包含：红、绿、蓝</p>

但是又想让每个字对应上对应的颜色，那么可以使用span标签

    <p>三原色包含：<span style="color:red">红</span>、<span style="color: green;">绿</span>、<span style="color:blue">蓝</span></p>

网页即可显示如下

image.png

某些元素在显示时会独占一行（块级元素），某些元素就不会（行级元素）；

• 块级元素会独占一行
• 行级元素不会
  现在HTML5已经弃用这种说法，更多详细的可以查看MDN说明

pre元素【无语义，容器标签】

预格式化文本元素
空白折叠：在源代码中出现连续空白字符（空格、换行、指标），在页面显示时，会被折叠成一个空格
首先HTML里面会出现空白折叠情况的，直接上例子

    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ipsum eaque deserunt aperiam soluta deleniti doloremque rem eius voluptatum nesciunt, ipsam officiis, perspiciatis laudantium commodi dolore inventore illum. Necessitatibus modi rerum impedit possimus esse? Eum voluptate quia exercitationem qui nam quae aut cum placeat, cupiditate impedit esse ab inventore dignissimos?
    </p>

在页面的显示如下

image.png

现在我们在里面加一些换行

    <p>
        Lorem 
        
        
        
        
        ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ipsum eaque deserunt aperiam soluta deleniti doloremque rem eius voluptatum nesciunt, ipsam officiis, perspiciatis laudantium commodi dolore inventore illum. Necessitatibus modi rerum impedit possimus esse? Eum voluptate quia exercitationem qui nam quae aut cum placeat, cupiditate impedit esse ab inventore dignissimos?
    </p>

再次查看页面，我们会发现页面没有任何变化

image.png

现在我们理解了空白折叠后，在pre元素中的内容不会出现空白折叠，在pre元素中出现的代码会按照源代码样式出现在页面上

    <pre>
        Lorem 
        
        
        
        
        ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ipsum eaque deserunt aperiam soluta deleniti doloremque rem eius voluptatum nesciunt, ipsam officiis, perspiciatis laudantium commodi dolore inventore illum. Necessitatibus modi rerum impedit possimus esse? Eum voluptate quia exercitationem qui nam quae aut cum placeat, cupiditate impedit esse ab inventore dignissimos?
    </pre>

image.png

pre元素通常用于在网页中显示代码、文字表情等
pre元素功能的本质是：它有一个默认的css属性，white-space:pre，其他元素如果有了这个属性，也是可以实现同样的效果。

code元素【无语义，容器标签】

一般用于显示代码，会在外面套上一个code标签，直接给code标签增加white-space:pre样式即可

实体字符（字符编码）

实体字符。HTML Entity
实体字符通常用于在页面上显示一些特殊符号
1、&单词;
2、&#数字;

---

上面2种类都是可以实现的，一些常见的如下

• 小于 <
• 大于 >
• 空格  
• 版权符号 ©
• &符号 &