HTML5结构标签

简介: HTML5结构标签

1、<section></section>:

定义文档中的节(section、区段),比如章节,页眉,页脚或文档中的其他部分。


基本语法:

<section>
        <h1>基础语法</h1>
        <p>就像这样,可能内容太简短不能很好的展示</p>
</section>


2、<article></article>:

规定独立的自包含内容


潜在来源:

  1. 论坛贴子
  2. 报纸文章
  3. 博客条目
  4. 用户评论
<article>
        <h1>基础语法</h1>
        <p>就像这样,可能内容太简短不能很好的展示</p>
</article>


3、<article></article>:

标签定义文档的页眉(介绍信息)


基础语法:

<header>
        <h1>基础语法</h1>
        <p>就像这样,可能内容太简短不能很好的展示</p>
</header>


4、<footer></footer>:

定义文档或节的页脚,应当包含有其包含元素的信息。


页脚通常包含文档的作者,版权信息,使用条款链接、联系信息等等。可以在一个文档中使用多个元素。

<footer>
        <h1>基础语法</h1>
        <p>就像这样,可能内容太简短不能很好的展示</p>
 </footer>


5、<nav></nav>:

定义导航链接的部分。


如果文档中有“前后”按钮,则应把它放到元素中。

<nav>
    <a href="#">导航</a>
</nav>


6、<aside></aside> :

定义其所处内容之外的内容。


aside的内容应该与附近的内容相关,可以作用于文章的侧栏

<aside>
        <h1>基础语法</h1>
        <p>就像这样,可能内容太简短不能很好的展示</p>
 </aside>


以上的元素,得放到项目中才能体现出来他们的效果,后期我会做一个项目来单独研究他们。


我突然想到了一本书里面有一段文字来说元素选用原则的,并且找到了就记录下:


用来标记内容的元素应该选择最为具体的那个。如果已经有元素能够很好的表明内容类型,就不要使用通用元素。同一个元素的使用在整个页面、网站都要保持一致。对内容进行标记时,只能将元素用于他们原定的用途(按照标准来),不要自创。如果找不到合适的,可以考虑通用元素(span,div),并且用全局属性class表明其含义。亦少可为多,标记只应该应内容对语义的需要使用。


在语义方面要求严格不为过,只要有条件,尽量避用那些具有浓重呈现意味或纯粹起呈现作用的元素。


目录
相关文章
|
26天前
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
30 0
|
18天前
|
数据采集 存储 JavaScript
如何使用Cheerio与jsdom解析复杂的HTML结构进行数据提取
在现代网页开发中,复杂的HTML结构给爬虫技术带来挑战。传统的解析库难以应对,而Cheerio和jsdom在Node.js环境下提供了强大工具。本文探讨如何在复杂HTML结构中精确提取数据,结合代理IP、cookie、user-agent设置及多线程技术,提升数据采集的效率和准确性。通过具体示例代码,展示如何使用Cheerio和jsdom解析HTML,并进行数据归类和统计。这种方法适用于处理大量分类数据的爬虫任务,帮助开发者轻松实现高效的数据提取。
如何使用Cheerio与jsdom解析复杂的HTML结构进行数据提取
|
11天前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
28 13
|
10天前
|
搜索推荐 SEO
HTML中各种标题标签的正确使用方法及其特点
在HTML中,标题标签(`&lt;h1&gt;`至`&lt;h6&gt;`)用于定义文档的标题结构。`&lt;h1&gt;`表示主标题,每个页面应只有一个;`&lt;h2&gt;`至`&lt;h6&gt;`分别表示不同层级的子标题,可用于细分内容。正确使用这些标签不仅有助于文档的层次分明和可读性提升,还能优化SEO。使用时需注意保持层级结构连续、内容描述清晰。
|
11天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
24天前
|
移动开发 数据安全/隐私保护 UED
HTML表单标签详解:如何用HTML标签打造互动网页?
通过合理使用HTML表单标签,可以构建功能丰富、用户友好的互动网页。HTML表单的元素和属性提供了丰富的输入选项和验证功能,使得收集和处理用户输入成为可能。随着HTML5的发展,表单元素的功能性和用户体验将继续得到提升。开发者应充分利用这些工具,为用户打造流畅、互动性强的网页体验。
33 4
|
3天前
|
移动开发 HTML5
这些年没来得及学习的一些 HTML5 标签
【9月更文挑战第16天】HTML5 引入了许多新标签,增强了网页的功能与便利性。这些标签包括结构标签如 `&lt;header&gt;`(定义页眉)、`&lt;footer&gt;`(定义页脚)、`&lt;nav&gt;`(定义导航链接)、`&lt;section&gt;`(定义文档节)和 `&lt;article&gt;`(定义独立内容),以及多媒体标签 `&lt;audio&gt;` 和 `&lt;video&gt;`,用于播放音频和视频。此外,还有表单相关标签,如 `&lt;datalist&gt。
HTML中font标签用法
这篇文章详细介绍了HTML中`<font>`标签的用法,包括如何分别设置字体风格(`font-style`)、字体粗细(`font-weight`)、字体大小(`font-size`)和字体类型(`font-family`),并通过实例代码演示了如何综合使用这些属性来定义文本的字体样式。
HTML中font标签用法
|
27天前
|
移动开发 前端开发 开发者
从 HTML4 到 HTML5 的迁移标签
【8月更文挑战第24天】
29 0
|
27天前
|
移动开发 搜索推荐 索引
HTML5 中 article 标签的含义与作用
【8月更文挑战第24天】
365 0