html基本结构和常见元素

html5文档基本结构

<!DOCTYPE html>

<head>

</head>

<body>

文档正文部分

</body>

</html>

html文档可分为文档头和文档体两部分，文档头包括网页语言、关键字、字符集的定义等信息，文档体当中的内容就是页面里面要显示的信息

html文档的基本结构由三对标签负责，这三对标签分别是<html>,<head>,<body>

title的内容会显示在导航栏里

标签分为单标签与多标签

元素可分为三类：元信息元素、语义元素和无语义元素------元信息元素用来描述文档自身信息，meta元素定义元信息，其常用属性如下：

charset：定义文档的字符编码，常用UTF-8
content：定义name和http-equiv相关的元信息
name：关联content的名称（常用的有keywords关键字、author作者名、description页面描述）

其中，name的参数格式：

例子：

<!DOCTYPE html>

<head>

<title>前端开发教程</title>

</head>

<body>

<h1>欢迎来到前端开发教程</h1>

<p>这里将介绍HTML、CSS和JavaScript的基础知识。</p>

</body>

</html>

语义元素又可分为块级元素、行内（内联）元素、行内块元素等等..

块级元素指的是本身属性为display：block的元素。通常用于：大结构布局的搭建。

特点：

1.独占一行

2.可以直接控制相关元素

3.在不设置宽度的情况下，其宽度为其父级宽度

4.在不设置高度的情况下，其高度为其本身的内容高度

行内元素也称内联元素，是指本身属性为display：inline元素行内元素可以与相邻的行内元素在同一行，对宽、高属性不生效，通常使用块级元素来进行文字、小图标（小结构）的搭建。

1.与其他内联元素从左到右在同一行显示

2.无法控制竖直的margin和padding

3.行内元素的行高，由本身内容（文字、图片）的大小决定

4.不能在行内嵌套块级元素

常见的css有：

display：block---块级元素

display：inline---内联元素

display：inline-block---内联块元素，表现为同行显示并且可以修改宽、高、内外边距等属性

行内块元素：（就是内联块元素）

HTML5新增结构语义元素

HTML5引入了许多新的语义结构元素，这些元素的主要作用是为网页的结构提供更清晰、更明确的语义化标记。语义化标记不仅有助于开发者更好地理解代码结构，还能提升网页的可访问性、搜索引擎优化（SEO）以及维护性。以下是HTML5新增的一些主要语义结构元素及其用途：

<header>

• 用途：表示页面或文章的头部区域，通常包含网站的标志、导航栏、标题等内容。

• 示例：

<nav>

<ul>

</ul>

</nav>

</header>

• 优点：明确标识页面的头部区域，便于屏幕阅读器识别，提升可访问性。

<nav>

• 用途：表示页面的导航链接部分，通常用于网站的菜单栏或导航栏。

• 示例：

<nav>

<ul>

</ul>

</nav>

• 优点：明确标识导航区域，便于搜索引擎识别导航结构，提升SEO效果。

<main>

• 用途：表示页面的主要内容区域，一个页面中只能有一个<main>元素。

• 示例：

<main>

</article>

<aside>

<ul>

</ul>

</aside>

</main>

• 优点：明确标识页面的核心内容，便于屏幕阅读器和搜索引擎识别主要内容区域。

<article>

• 用途：表示一个独立的、可独立分发的内容单元，如博客文章、新闻报道、论坛帖子等。

• 示例：

</header>

<p>文章引言部分...</p>

</section>

<p>文章正文内容...</p>

</section>

</article>

• 优点：明确标识独立的内容单元，便于内容的复用和分发。

<section>

• 用途：表示文档中的一个独立的章节或逻辑部分，通常包含标题。

• 示例：

</section>

• 优点：将内容划分为逻辑部分，便于结构化阅读和搜索引擎索引。

<aside>

• 用途：表示与页面主要内容相关的辅助信息，如侧边栏、广告、相关链接等。

• 示例：

<aside>

</aside>

• 优点：明确标识辅助信息，便于区分主要内容和辅助内容。

<footer>

• 用途：表示页面或文章的底部区域，通常包含版权信息、联系方式、网站地图等。

• 示例：

</address>

</footer>

• 优点：明确标识页面的底部区域，便于屏幕阅读器识别。

<figure> 和 <figcaption>

• 用途：<figure>用于包含图像、图表、代码片段等独立内容，<figcaption>用于为<figure>提供标题或说明。

• 示例：

</figure>

• 优点：明确标识图像和其他媒体内容及其说明，便于语义化标记。

<details> 和 <summary>

• 用途：<details>用于创建可折叠的内容区域，<summary>用于提供折叠区域的标题。

• 示例：

<p>这里是隐藏的内容。</p>

</details>

• 优点：提供交互式内容区域，增强用户体验。

总结

HTML5新增的语义结构元素的主要作用是：

提高可读性和可维护性：通过语义化的标记，代码结构更清晰，便于开发者阅读和维护。
提升可访问性：屏幕阅读器可以更好地理解页面结构，帮助视障用户更好地访问网页内容。
优化搜索引擎排名（SEO）：搜索引擎可以更准确地识别页面的主要内容和结构，从而提高网页的搜索排名。
增强用户体验：通过语义化的标记，可以更好地利用CSS和JavaScript实现更丰富的交互效果。

总之，语义结构元素是HTML5的重要进步，它们不仅让代码更加规范，还为网页的可访问性和SEO带来了显著的提升。

无语义元素

确实，无语义元素（如<div>和<span>）和语义元素都可以用来包裹内容，从功能上来说，它们都可以实现布局和展示内容的目的。然而，它们之间存在本质的区别，主要体现在语义化和可访问性上，而不仅仅是功能实现。

功能实现的相似性

从功能上来说，无语义元素和语义元素都可以用来包裹内容，并且可以通过CSS和JavaScript进行样式和行为的控制。例如：

使用<div>（无语义元素）

<div>

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

</div>

使用<section>（语义元素）

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

</section>

在上面的两个例子中，<div>和<section>都可以包裹内容，并且可以通过CSS进行样式控制。从功能上来说，它们确实可以实现相同的效果。

语义化的重要性

尽管功能上相似，但语义元素和无语义元素在语义化和可访问性上有本质的区别。

（1）语义化

• 语义元素：语义元素（如<header>、<nav>、<main>、<section>等）自带语义含义，能够明确表达其内容的性质和用途。例如：

• <header>表示页面的头部区域。

• <nav>表示导航链接部分。

• <main>表示页面的主要内容区域。

• <section>表示文档中的一个独立章节。

• <article>表示一个独立的内容单元，如博客文章。

• <aside>表示与主要内容相关的辅助信息。

• <footer>表示页面的底部区域。

• 无语义元素：无语义元素（如<div>和<span>）本身没有语义含义，它们只是通用的容器，用于布局和样式控制。例如：

• <div>是一个块级容器，用于包裹内容。

• <span>是一个行内容器，用于对文本进行样式控制。

（2）可访问性

• 语义元素：语义元素能够被屏幕阅读器等辅助工具更好地理解，从而为视障用户和其他有特殊需求的用户提供更友好的体验。例如，屏幕阅读器可以识别<header>、<nav>、<main>等元素，帮助用户快速导航到页面的不同部分。

• 无语义元素：无语义元素（如<div>和<span>）本身没有语义含义，屏幕阅读器无法理解其内容的结构和层次，只能逐个元素读取内容。这会导致视障用户难以理解页面的结构和内容。

搜索引擎优化（SEO）

• 语义元素：搜索引擎（如Google、Bing等）能够更好地理解页面的结构和内容，从而提高页面的搜索排名。例如，搜索引擎可以识别<header>、<main>、<footer>等元素，从而更准确地提取页面的主要内容和结构。

• 无语义元素：搜索引擎无法准确理解页面的结构和内容，可能导致搜索排名下降。

代码的可读性和可维护性

• 语义元素：使用语义元素的代码结构更清晰，易于理解。开发者可以快速定位和修改代码，提高开发效率。例如：

<nav>

<ul>

</ul>

</nav>

</header>

<main>

</header>

<p>文章引言部分...</p>

</section>

<p>文章正文内容...</p>

</section>

</article>

<aside>

<ul>

</ul>

</aside>

</main>

</address>

</footer>

这种方式更直观，易于理解和维护。

• 无语义元素：使用无语义元素的代码结构较为模糊，需要通过类名或ID来理解代码的结构和用途。例如：

<ul>

</ul>

</div>

</div>

<p>文章引言部分...</p>

</div>

<p>文章正文内容...</p>

</div>

<ul>

</ul>

</div>

</div>

这种方式需要开发者查看类名来理解代码的结构，增加了理解和维护的难度。

总结

虽然无语义元素和语义元素都可以用来包裹内容并实现布局，但它们在语义化、可访问性、搜索引擎优化（SEO）以及代码的可读性和可维护性上有本质的区别。语义元素通过明确的语义含义，帮助开发者、辅助工具和搜索引擎更好地理解页面结构和内容，从而实现更高效、更友好的用户体验。因此，建议在开发中优先使用语义元素，以提升网页的整体质量和用户体验。