语义化标签

   前引：

    写这篇文章的原因是在问al我目前的技术栈还差什么时，al提了一嘴语义化标签，然后简单查了查。

    语义化标签目前可以提升SEO以及增强代码的可维护性。

1、知识补充：

    1：SEO：

    SEO（Search Engine Optimization）即搜索引擎优化，是指通过优化网站结构、内容及外部链接等，提升网站在搜索引擎自然搜索结果中的排名，从而增加网站流量、提高品牌曝光度的一系列技术和策略。

    常见的提升SEO的方法有：

    （1）使用语义化标签和清晰的层级结构，帮助搜索引擎理解页面内容。

    （2） 移动端适配，Google引擎会优先索引移动端的内容。

    （3） 页面加载速度，Google引擎会优先将速度列为排名因素，常见的方式有：压缩图片，减少HTTP请求，使用CDN。

     SEO目标：

   （1）提高排名：让网站在搜索引擎结果页中更靠前，尤其是页面前几位（因为用户最常点击的就是这几位）。

    （2）增强可信度：排名靠前的网站一般里面都有你想要的东西（除了小时和动漫，目前是这样的）。

    （3）增加流量：    通过自然搜索吸引更多目标用户访问网站。

    2：代码可维护性：

    就是方便你修改代码，哪部分代码错了，就改哪部分代码，先优化哪部分，就找哪部分代码。

2、语义化标签：

    其实我感觉除了结构话标签之外，其他的标签就是常用的html标签。

    html语义化标签可以分为5种。

    1：结构标签：

    该类标签的作用是定义布局结构。

    这类结构标签组成的页面布局可以去看element plus，因为他们都类似。

    Container 布局容器 | Element Plus看里面的Container 布局容器这一部分。

• header    页面或区块的头部                   网站导航栏、文章标题区域
• nav         主导航链接集合                       网站菜单、侧边栏导航
• mian       页面的核心内容                       博客文章主体、商品详情区    （唯一）
• section    独立的内容区块                      文章章节、产品特性展示区
• article      独立的、可复用的内容单元    博客文章、评论、论坛帖子
• aside       侧边栏或辅助信息                   广告、相关推荐、作者简介    （与主内容间接相关）
• footer      页面或区块的页脚                   版权信息、联系方式、站点地图

    2：文本标签：

     该类标签的作用是增加内容含义。

1. h1-h6     标题层级（1-6依次层级降低，大小变小） <h1>文章标题</h1> <h2>章节标题</h2>
2. p            段落           <p>这是一个段落</p>
3. strong    重要文本（粗体）    <strong>必须阅读</strong>
4. em       强调文本（斜体）         <em>特别注意这个细节</em>
5. blockquote       块级引用        <blockquote>爱因斯坦说：”...“</blockquote>
6. q           行内引用          他说：<q>明天见</q>
7. cite       作品引用（书名、电影名等）    <cite>《HTML5权威指南》</cite>

    3：表单标签：

    该标签作用是用户输入信息

<form>	表单容器	<form action="/submit" method="post">...</form>
<label>	表单字段的标签	<label for="name">姓名:</label>
<input>	输入字段（需 type 属性指定类型）	<input type="text" id="name">
<select>	下拉选择框	<select><option>选项1</option></select>
<textarea>	多行文本输入	<textarea rows="4" cols="50"></textarea>
<button>	按钮	<button type="submit">提交</button>
<fieldset>	表单字段分组	<fieldset><legend>个人信息</legend>...</fieldset>

    4：媒体标签：

该类标签作用是和音视频、图片等方面有关。

标签	语义	示例代码
<form>	表单容器	<form action="/submit" method="post">...</form>
<label>	表单字段的标签	<label for="name">姓名:</label>
<input>	输入字段（需 type 属性指定类型）	<input type="text" id="name">
<select>	下拉选择框	<select><option>选项1</option></select>
<textarea>	多行文本输入	<textarea rows="4" cols="50"></textarea>
<button>	按钮	<button type="submit">提交</button>
<fieldset>	表单字段分组	<fieldset><legend>个人信息</legend>...</fieldset>

    5：其他标签：

标签	语义	示例代码
<a>	超链接	<a href="https://example.com">链接</a>
<ul>	无序列表	<ul><li>项目1</li></ul>
<ol>	有序列表	<ol><li>第一步</li></ol>
<li>	列表项	<li>列表项</li>
<dl>	定义列表（术语和描述）	<dl><dt>HTML</dt><dd>超文本标记语言</dd></dl>
<dt>	定义术语	<dt>术语</dt>
<dd>	术语描述	<dd>描述内容</dd>
<table>	表格	<table><tr><td>单元格</td></tr></table>

注意：

1. 语义化标签 ≠ 样式标签：

   • <h1> 的语义是 “页面主标题”，而不是 “大号字体”
   • <strong> 的语义是 “重要文本”，而不是 “粗体文本”

2. 语义化与无障碍性密切相关：

   • 屏幕阅读器依赖 <header>、<nav> 等标签来帮助视障用户理解页面结构
   • 正确的 <label> 和 <input> 关联能提升表单的可访问性

无障碍性是指对于视障人群来说的，这个我也搞不明白，你们可以自己去了解。

3、可以与element plus结合：

前引：

    其实我在了解这个语义化标签后，我就在想它能不能和element plus结合在一起使用，毕竟lz还只是个大学生，目标还是就业为主，如果这个和element plus不能结合使用的话，我感觉目前阶段的它对我作用不大。

    写这一块的目的是提一嘴，element plus中也是有语义标签的。

<el-container>：外层容器。 

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

具体用法看Container 布局容器 | Element Plus中的Container 布局容器这一部分。