目录
前言:
1.标签的进阶:
1.1单标签:功能标签
1.2双标签: 内容标签
1.3元标签（Meta Tags）：
1.3.1标题（Title）：
1.3.2描述（Description）：
1.3.3关键词（Keywords）：
1.3.4其他元标签：
1.4链接标签：
1.4.1锚文本（Anchor Text）：
1.4.1Nofollow属性：
1.5图片标签：
1.5.1Alt属性：
1.5.1Title属性：
1.6结构化数据标记（Schema Markup）：
1.7列表和表格标签：
1.8其他语义标签：
2. HTML的标签属性:
2.1属性的分类:
2.1.1全局属性：
2.1.2特定属性：
2.1.3自定义数据属性：
2.2属性的使用规则:
2.2.1属性值应该始终包含在引号内，可以是双引号或单引号，但必须保持一致。
2.2.2属性名与元素名之间、属性与属性之间都应该用空格隔开。
2.2.3同一个元素内不能出现同名的属性，否则可能会导致不可预测的行为。
2.2.4对于包含特殊字符的属性值，应使用HTML实体或转义字符进行转义。
2.3属性的作用:
3.再提一下上面说到的那个超链接标签(a):
3.1跳转到一个指定的网站:
3.2. 跳转到网页指定的位置:
3.3 跳转到一个指定的文件:
前言:
昨天我们已经学习了初级关于学习前端的一点知识今天我们继续去学习前端中的html标签的进阶与标签属性。这些都是我个人的关于html的一些学习,或许还会有点遗漏欢迎大家的指正和在评论区和谐讨论。
1.标签的进阶:
标签分为单标签和双标签
1.1单标签:功能标签
<br> 换行
<hr> 分割线
1.2双标签: 内容标签
h1 - h6: 标题标签,h1最大,h6最小. 主要用h1-h3
p: 文本标签,独占一行
span: 文本标签,不会换行.比较单纯--适合配合css使用
1.3元标签（Meta Tags）：
1.3.1标题（Title）：
显示在浏览器标签页上，是搜索引擎结果页（SERP）中显示的链接文本。它应准确描述页面内容。
1.3.2描述（Description）：
提供页面内容的简短描述，虽然不直接影响排名，但可以在SERP中吸引用户点击。
1.3.3关键词（Keywords）：
曾经用于指定页面关键词，但现在大多数搜索引擎不再考虑此标签。因此，其重要性已大大降低。
1.3.4其他元标签：
如robots（控制搜索引擎爬虫行为）、canonical（指定首选URL以避免重复内容问题）等。
1.4链接标签：
1.4.1锚文本（Anchor Text）：
链接的可点击文本部分。在内部链接中，使用描述性锚文本有助于搜索引擎理解页面之间的关系和页面内容。
1.4.1Nofollow属性：
用于指示搜索引擎不要跟踪特定链接或不要将链接目标页面的权重传递给源页面。这有助于管理页面权重和避免与低质量网站的关联。
1.5图片标签：
1.5.1Alt属性：
为图像提供替代文本描述，当图像无法加载时显示。这对于搜索引擎理解图像内容至关重要，因为搜索引擎无法直接“读取”图像。
1.5.1Title属性：
提供图像的额外信息，通常作为工具提示显示。虽然不如alt属性重要，但它可以增强用户体验。
1.6结构化数据标记（Schema Markup）：
结构化数据是一种标准化的格式，用于提供关于页面内容的额外信息。通过使用如JSON-LD、Microdata或RDFa等格式的结构化数据标记，网站可以提供更丰富的搜索结果片段（如星级评价、价格、事件日期等），从而提高点击率。
1.7列表和表格标签：
有序列表（<ol>）和无序列表（<ul>）以及列表项（<li>）标签有助于组织和呈现信息列表。搜索引擎可以识别这些列表结构，并可能在搜索结果中特别展示它们。虽然搜索引擎可以解析表格内容，但过度使用表格进行布局可能会影响页面加载速度和可访问性。
ul,li --> 无序列表,ul是容器标签.li是内容标签.两者是包含关系
无序列表的默认样式为小黑点,嵌套无序列表为小白点
ol,li --> 有序列表,ol是容器标签.li是内容标签.两者是包含关系
dl,dt,dd --> 自定义列表,dl是容器标签 dt是标题标签 dd是内容标签
1.8其他语义标签：
HTML5引入了一系列语义标签，如<article>、<section>、<nav>、<header>、<footer>等，用于更清晰地描述页面结构和内容类型。这些标签有助于搜索引擎理解页面布局和主要内容区域。
例子:
<标签名 属性名='属性值' 属性名='属性值'>
2. HTML的标签属性:
HTML标签属性是HTML元素的一部分，它们为HTML元素提供了额外的信息，这些信息定义了元素的行为、外观、内容来源等。属性总是包含在HTML元素的开始标签中，并通过“属性名=属性值”的格式来设置。属性对于网页的交互性、可访问性、样式化以及动态内容的展示都至关重要。
2.1属性的分类:
2.1.1全局属性：
这些属性是大多数HTML元素都可以使用的。例如，id属性用于为元素提供一个唯一的标识符，class属性用于为元素指定一个或多个类名（用于CSS样式和JavaScript操作），style属性用于直接为元素应用内联CSS样式
2.1.2特定属性：
某些属性仅适用于特定的HTML元素。例如，<a>元素的href属性定义了链接的目标URL，<img>元素的src属性指定了图像的源文件路径，<input>元素的type属性定义了输入字段的类型（如文本、密码、复选框等）。
2.1.3自定义数据属性：
HTML5引入了以“data-”为前缀的自定义数据属性，允许开发者在HTML元素上存储额外的信息。这些信息可以通过JavaScript进行读取和操作，为网页添加更复杂的功能和交互性。
2.2属性的使用规则:
2.2.1属性值应该始终包含在引号内，可以是双引号或单引号，但必须保持一致。
2.2.2属性名与元素名之间、属性与属性之间都应该用空格隔开。
2.2.3同一个元素内不能出现同名的属性，否则可能会导致不可预测的行为。
2.2.4对于包含特殊字符的属性值，应使用HTML实体或转义字符进行转义。
2.3属性的作用:
HTML标签属性在网页开发中起着至关重要的作用。它们不仅定义了元素的基本特性和行为，还使得开发者能够通过JavaScript和CSS对元素进行更精细的控制和操作。例如，通过改变元素的class属性，可以动态地改变元素的样式；通过设置<input>元素的value属性，可以获取或修改用户输入的数据；通过自定义数据属性，可以在元素上存储额外的信息，以实现更复杂的功能和交互效果。
3.再提一下上面说到的那个超链接标签(a):
3.1跳转到一个指定的网站:
当你想让用户能够点击链接后跳转到另一个网站时，你可以在href属性中指定那个网站的URL。
<a href="https://www.example.com">访问Example网站</a>3.2. 跳转到网页指定的位置:
如果你想让用户点击链接后跳转到当前网页的某个特定位置（通常称为“锚点”），你可以使用ID选择器来标记那个位置，并在href属性中使用#加上ID名来指定跳转位置。
<!-- 先给位置做个id标记 -->
<div id="section1">这里是第一部分内容</div>
<!-- 通过标记跳转 -->
<a href="#section1">跳转到第一部分</a>3.3 跳转到一个指定的文件:
你也可以使用<a>标签来链接到本地或服务器上的文件，这样用户就可以点击链接来下载或打开那个文件。
<!-- 链接到一个PDF文件 -->
<a href="/path/to/file.pdf">下载PDF文件</a>
<!-- 链接到一个图片文件（通常图片会用<img>标签来显示，但这里只是作为下载链接） -->
<a href="/path/to/image.jpg">下载图片</a>结语:
好了,今天关于web前端的标签的进阶和标签的属性我就先分享到这里了,这些都是我个人在学习过程中整理出来的内容,难免会有所遗漏,欢迎大家对我的博客进行指导,也欢迎大家在评论区留言和讨论。