HTML(HyperText Markup Language)是构建网页的基础语言。以下是全面的 HTML 知识点:
一、HTML 基础概念
-
定义:HTML 是一种用于描述网页结构的标记语言,通过各种标签来定义网页的内容和布局。
-
版本历史:从 HTML 的早期版本发展到现在的 HTML5,功能不断增强,支持更多的多媒体和交互特性。
二、HTML 文档结构
<!DOCTYPE html>
声明:用于告诉浏览器文档类型是 HTML5。<html>
标签:整个 HTML 文档的根元素。<head>
部分:<title>
标签:定义网页的标题,显示在浏览器标签栏上。<meta>
标签:提供关于文档的元数据,如字符编码、视口设置、搜索引擎优化信息等。<link>
标签:用于链接外部样式表、图标等资源。<script>
标签:可以包含 JavaScript 代码或链接外部脚本文件。
<body>
部分:包含网页的可见内容。
三、HTML 标签分类
- 标题标签(
<h1>
-<h6>
):用于定义不同级别的标题。 - 段落标签(
<p>
):定义段落文本。 - 文本格式标签:
<strong>
和<b>
:用于加粗文本。<em>
和<i>
:用于斜体文本。<u>
:用于添加下划线。<sup>
和<sub>
:用于上标和下标。<del>
和<ins>
:用于删除线和下划线表示插入内容。
- 列表标签:
- 无序列表(
<ul>
)和有序列表(<ol>
),分别使用<li>
标签定义列表项。 - 定义列表(
<dl>
)、定义术语(<dt>
)和定义描述(<dd>
)用于创建术语和描述的列表。
- 无序列表(
- 链接标签(
<a>
):用于创建超链接,属性href
指定链接目标。 - 图像标签(
<img>
):用于在网页中插入图像,属性src
指定图像路径,alt
提供替代文本。 - 表格标签:
<table>
:定义表格。<tr>
:定义表格行。<th>
:定义表头单元格。<td>
:定义表格数据单元格。
- 表单标签:
<form>
:创建表单,可包含各种输入元素。<input>
:用于输入文本、密码、复选框、单选按钮等。<textarea>
:用于输入多行文本。<select>
和<option>
:用于创建下拉列表。<button>
:创建按钮。
- 语义化标签(HTML5 新增):
<header>
:定义文档或章节的头部。<nav>
:定义导航链接部分。<section>
:定义文档中的节。<article>
:定义独立的内容块,如文章、博客帖子等。<aside>
:定义与页面主要内容相关的侧边栏内容。<footer>
:定义文档或章节的底部。
四、HTML 属性
- 通用属性:
id
:为元素提供唯一的标识符,可用于在 CSS 和 JavaScript 中定位元素。class
:为元素指定一个或多个类名,用于样式化和脚本操作。style
:用于直接为元素应用内联 CSS 样式。title
:为元素提供提示信息,当鼠标悬停在元素上时显示。
- 特定元素属性:不同的 HTML 元素有特定的属性,如
<img>
的src
、alt
、width
、height
,<a>
的href
、target
等。
五、HTML 多媒体
- 音频(
<audio>
标签):用于在网页中播放音频文件。 - 视频(
<video>
标签):用于在网页中播放视频文件。
六、HTML 表单
- 表单元素类型:
- 文本输入框(
<input type="text">
)。 - 密码输入框(
<input type="password">
)。 - 复选框(
<input type="checkbox">
)。 - 单选按钮(
<input type="radio">
)。 - 提交按钮(
<input type="submit">
)。 - 重置按钮(
<input type="reset">
)。 - 文件上传(
<input type="file">
)。
- 文本输入框(
- 表单属性:
action
:指定表单提交的目标 URL。method
:指定表单提交的方法,如GET
或POST
。enctype
:指定表单数据的编码类型,用于文件上传等情况。
七、HTML5 新特性
- 本地存储(
localStorage
和sessionStorage
):用于在浏览器中存储数据。 - 拖放(
draggable
属性和相关事件):允许元素被拖动和放置。 - 画布(
<canvas>
标签):用于使用 JavaScript 绘制图形。 - 地理定位(
geolocation
API):获取用户的地理位置信息。 - Web Workers:在后台运行 JavaScript 代码,不影响页面的性能。
- 响应式设计:使用媒体查询和弹性布局实现适应不同设备的网页设计。
八、HTML 最佳实践
- 语义化标记:使用语义化标签提高网页的可访问性和可维护性。
- 结构清晰:保持 HTML 结构清晰,易于理解和维护。
- 代码规范:遵循 HTML 代码规范,包括缩进、标签闭合等。
- 可访问性:确保网页对所有用户都可访问,包括使用适当的替代文本、标题等。
- 性能优化:优化 HTML 代码以提高页面加载速度,如减少不必要的标签、压缩图像等。