HTML页面基本结构及语义化对比 | 豆包MarsCode AI刷题一、HTML页面基本结构二语义化标签 vs 非语义

一、HTML页面基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

`1.<!DOCTYPE html>`文档

用来告诉浏览器接下来所有的内容是HTML代码，需要使用HTML解析器来识别。

`2.<html>`

用来告诉浏览器，这对html标签里面的内容就是网页内容。

是HTML文档的根标签，页面中的所有内容都必须包含在<html>与</html>之间。

`3.<head>`

一个网页文档从总体上可以分为头和主体两部分。< head>和< /head>定义HTML文档的头部部分。用来告诉浏览器，这是html网页的头部信息，例如：网页标题，编码类型，网页关键字等....

`3.1<meta charset="UTF-8" />`

<meta>标签: 使用该标签描述网页的具体摘要信息，包括文档内容类型，字符编码信息，搜索关键字，网站提供的功能和服务的相关描述等。

charset="UTF-8": 用来告诉浏览器，这是一个utf-8编码的网页。

name属性和content属性

name属性用于描述设置内容的名称，其值所描述的内容通过content属性表示，便于搜索引擎查找，分类。

<meta name="Description" content="这是一个网页"/>

`3.2<title>`

    <title>这是网页标题</title>

属于head的子标签，告诉浏览器，这是html网页的网页标题。

`4.<body>`

<body>与</body>标签定义了文档的主体部分，用于设置页面实际需要呈现给用户的内容，如文字，图片，视频等。

二、语义化标签与非语义化标签

1.语义化标签（Semantic Tags）

语义化标签指的是那些具有明确含义的HTML标签，它们不仅仅是结构上的标记，还能够传达其内容的意义。例如，<header>, <footer>, <article>, <section>, <nav> 等。

特点：

含义明确：每个标签的名字都能准确描述它所包围的内容。例如，<article> 用来表示一篇独立的文章内容，<header> 用于页面或部分内容的头部区域。
提高可访问性：对于屏幕阅读器等辅助技术，语义化标签能够提供更多的信息，帮助用户更好地理解页面结构。
有助于SEO：搜索引擎能够更好地理解和索引页面内容。语义化标签能帮助搜索引擎识别页面结构，提高页面的排名。

例子：

<header>
  <h1>网站标题</h1>
  <nav>
    <ul>
      <li><a href="/home">主页</a></li>
      <li><a href="/about">关于我们</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>文章标题</h2>
    <p>这是文章的内容。</p>
  </article>
</main>
<footer>
  <p>&copy; 2024 公司名称</p>
</footer>

2.非语义化标签（Non-semantic Tags）

非语义化标签是指那些没有明确含义的HTML标签，它们本身没有描述页面内容的功能，通常只是用来定义布局和结构。例如，<div>, <span> 等。

特点：

没有内在含义：<div> 和 <span> 本身并不传达任何具体的内容或结构信息。它们只是容器标签，用于布局或分组。
依赖CSS和JavaScript：这些标签的样式和行为通常由CSS和JavaScript控制，而不是通过HTML语义化。
对SEO不直接有帮助：搜索引擎无法从这些标签中获取页面内容的语义信息，因此对SEO的优化作用较弱。

例子：

<div class="header">
  <div class="title">网站标题</div>
  <div class="nav">
    <a href="/home">主页</a>
    <a href="/about">关于我们</a>
  </div>
</div>
<div class="main">
  <div class="article">
    <h2>文章标题</h2>
    <p>这是文章的内容。</p>
  </div>
</div>
<div class="footer">
  <p>&copy; 2024 公司名称</p>
</div>

3.对比：语义化标签 vs 非语义化标签

特性	语义化标签	非语义化标签
含义	标签具有明确的语义，能描述其内容的目的和功能。	标签本身没有内在含义，只用于布局和结构。
SEO优化	有助于搜索引擎识别内容结构，提高页面的索引效果。	不直接帮助SEO，搜索引擎无法理解页面的结构和内容。
可访问性	提高可访问性，辅助技术可以更好地识别和读取页面结构。	较差，屏幕阅读器等辅助工具无法从中获取有用信息。
代码可读性	代码更易于理解和维护，开发者可以通过标签名字理解内容。	代码可读性差，开发者需要依赖其他技术（如CSS、JS）来理解页面结构。
使用场景	适用于内容明确、需要传达语义的网页结构。	适用于需要灵活布局和样式控制的场景，通常配合CSS使用。

4.总结：

语义化标签有助于增强网页的可访问性、SEO效果和代码可读性，应尽量使用它们来明确页面的内容和结构。
非语义化标签更适合用于布局和样式控制，但对于页面结构和内容传达的作用较弱，可能会影响搜索引擎对页面的理解。

HTML页面基本结构及语义化对比 | 豆包MarsCode AI刷题

一、HTML页面基本结构

1.<!DOCTYPE html>文档

2.<html>

3.<head>

3.1<meta charset="UTF-8" />

3.2<title>

4.<body>