HTML5标签全览：新特性与功能分类解析

DOCX文件

下载需积分: 23 | 36KB | 更新于2024-07-21 | 187 浏览量 | 举报收藏

立即下载

本文档是关于HTML5新标签的整理，包括按照字母顺序排列和功能类别的分类。HTML5引入了许多新的元素，旨在使网页结构更清晰，内容更语义化，提高网页的可访问性和可编程性。一、新标签 HTML5引入的新标签有以下作用： 1. `<article>` - 用于定义独立的内容，比如博客文章或新闻报道。 2. `<aside>` - 用于定义与主内容相关的辅助内容，如侧边栏或者注解。 3. `<audio>` - 支持音频内容的播放，可以包含多个不同的源以适应不同的浏览器。 4. `<canvas>` - 提供了一个图形绘制区域，通过JavaScript进行动态图形绘制。 5. `<details>` - 用于创建可展开和关闭的详细信息部分。 6. `<figcaption>` - 用于定义`<figure>`元素的图注。 7. `<figure>` - 用于定义一块与主要内容相关的媒体内容，如图片或图表。 8. `<footer>` - 定义页面或区段的底部，通常包含版权信息和导航链接。 9. `<header>` - 定义页面或区段的顶部，通常包含导航元素。 10. `<main>` - 用于定义页面的主要内容，与页面的其他辅助内容区分开。 11. `<mark>` - 用于高亮文本，通常表示重要的或需要用户注意的部分。 12. `<nav>` - 用于定义主要的导航链接集合。 13. `<section>` - 用于定义文档中的一个区段，比如章节或页眉。 14. `<summary>` - 用于定义`<details>`元素的摘要或标题。二、功能类别标签 1. **基础** - 如`<body>`定义文档主体，`<head>`定义元数据。 2. **格式** - 包括`<b>`、`<i>`、`<u>`等用于文本格式化的标签。 3. **表单** - 如`<form>`、`<input>`、`<select>`、`<textarea>`用于创建交互式表单。 4. **框架** - ` frames`相关标签，如`<iframe>`用于嵌入其他网页。 5. **图像** - `<img>`用于插入图像，`<picture>`定义多种源的图像。 6. **音频/视频** - `<audio>`和`<video>`支持多媒体内容。 7. **链接** - `<a>`定义链接，`<link>`定义外部资源的链接。 8. **列表** - `<ul>`、`<ol>`定义无序和有序列表，`<li>`定义列表项。 9. **表格** - `<table>`、`<tr>`、`<td>`等构建表格。 10. **样式/节** - `<style>`定义内联CSS，`<section>`定义文档的区段。 11. **元信息** - `<meta>`定义元信息，如字符编码、描述等。 12. **编程** - `<script>`引入JavaScript代码，`<noscript>`定义在脚本不支持时显示的内容。三、属性 HTML标签可以有各种属性，例如： - **核心属性(CoreAttributes)**：如`class`、`id`、`style`等，几乎所有的HTML元素都支持这些属性。 - **语言属性(LanguageAttributes)**：如`lang`，定义元素的语言。 - **键盘属性(KeyboardAttributes)**：如`accesskey`，定义快捷键。每个标签都有其特定的属性，例如`<a>`标签有`href`定义链接地址，`<img>`有`src`定义图像源，`<video>`有`controls`显示控制条等。总结起来，HTML5的新标签和属性显著增强了网页的结构化和语义化，提高了内容的可读性和可访问性。开发者可以更准确地表达网页内容，同时，这些新特性也为搜索引擎优化（SEO）和无障碍网页设计提供了更好的支持。