HTML(超文本标记语言,HyperText Markup Language)是构建网页的基础语言。以下是一些重要的HTML知识点:
1. HTML 文档结构
<!DOCTYPE html>
: 声明文档类型,告诉浏览器使用哪种HTML版本渲染页面。<html>
: 根元素,包含整个HTML文档。<head>
: 头部元素,包含元数据(如标题、字符集、样式、链接等)。<title>
: 页面标题,在浏览器标签中显示。<meta>
: 元数据标签,用于指定字符集、作者、描述等信息。<link>
: 用于链接外部资源,如CSS文件。<style>
: 内嵌样式表。<script>
: 用于包含或链接JavaScript代码。
<body>
: 包含页面的主要内容。
2. 常用HTML标签
-
文本相关标签:
<h1>
到<h6>
: 标题标签,<h1>
是最高级标题,<h6>
是最低级标题。<p>
: 段落标签,用于定义文本段落。<a>
: 超链接标签,使用href
属性指定链接目标。<br>
: 换行符,不需要闭合标签。<strong>
和<b>
: 粗体文本。<em>
和<i>
: 斜体文本。<ul>
和<ol>
: 无序列表和有序列表。<li>
: 列表项,用于定义列表中的每个条目。
-
多媒体标签:
<img>
: 图片标签,使用src
属性指定图片路径,alt
属性提供替代文本。<audio>
: 音频标签,用于嵌入音频文件。<video>
: 视频标签,用于嵌入视频文件。
-
表格标签:
<table>
: 表格容器。<tr>
: 表格行。<th>
: 表头单元格。<td>
: 表格单元格。
-
表单标签:
<form>
: 表单容器,用于收集用户输入。<input>
: 表单输入控件,如文本框、复选框、单选按钮等。<label>
: 表单标签,用于描述输入控件。<button>
: 按钮控件,用于提交表单或执行脚本。<select>
: 下拉选择框。<textarea>
: 多行文本输入框。
3. 属性与全局属性
- 常见属性: 如
id
、class
、style
、src
、alt
、href
等。 - 全局属性: 可以应用于所有HTML标签,如
id
、class
、style
、data-*
、title
。
4. HTML5 新特性
- 语义化标签: 如
<header>
、<footer>
、<nav>
、<article>
、<section>
、<aside>
等,有助于更好地组织和理解页面结构。 - 多媒体支持:
<audio>
和<video>
标签。 - 图形绘制:
<canvas>
标签用于绘制图形,结合JavaScript使用。 - 本地存储:
localStorage
和sessionStorage
API 提供了在客户端存储数据的方法。
5. 响应式设计与媒体查询
- 使用
<meta name="viewport" content="width=device-width, initial-scale=1.0">
使页面适应不同设备宽度。 - 使用 CSS媒体查询 来调整页面在不同设备上的显示效果