前言

这里只是简单列出html的知识点

一、基础结构

1.1 文档基本结构

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

1.2 基本组成部分

部分 说明
<!DOCTYPE> 文档类型声明
<html> 根元素
<head> 头部（元数据）
<body> 主体内容

二、常用元素

2.1 文本元素

1
2
3
4
5
6
7
<h1>到<h6>标题</h1>
<p>段落文本</p>
<span>行内文本</span>
<br>换行
<hr>水平线
<strong>强调文本</strong>
<em>斜体强调</em>

2.2 列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 无序列表 -->
<ul>
    <li>项目1</li>
    <li>项目2</li>
</ul>

<!-- 有序列表 -->
<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

<!-- 定义列表 -->
<dl>
    <dt>术语</dt>
    <dd>描述</dd>
</dl>

2.3 表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>数据1</td>
            <td>数据2</td>
        </tr>
    </tbody>
</table>

三、表单元素

3.1 基本表单

1
2
3
4
5
6
7
8
9
<form action="/submit" method="POST">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="username">
    
    <label for="pass">密码：</label>
    <input type="password" id="pass" name="password">
    
    <input type="submit" value="提交">
</form>

3.2 输入类型

1
2
3
4
5
6
7
8
9
<input type="text">     <!-- 文本 -->
<input type="password"> <!-- 密码 -->
<input type="email">    <!-- 邮箱 -->
<input type="number">   <!-- 数字 -->
<input type="date">     <!-- 日期 -->
<input type="checkbox"> <!-- 复选框 -->
<input type="radio">    <!-- 单选按钮 -->
<input type="file">     <!-- 文件上传 -->
<input type="hidden">   <!-- 隐藏字段 -->

3.3 其他表单元素

1
2
3
4
5
6
7
8
<select>
    <option value="1">选项1</option>
    <option value="2">选项2</option>
</select>

<textarea rows="4" cols="50">多行文本</textarea>

<button type="button">按钮</button>

四、多媒体元素

4.1 图片

1
<img src="image.jpg" alt="图片描述" width="200" height="100">

4.2 音视频

1
2
3
4
5
6
7
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
</audio>

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
</video>

五、语义化元素

5.1 HTML5 语义标签

1
2
3
4
5
6
7
<header>页眉</header>
<nav>导航栏</nav>
<main>主要内容</main>
<article>独立内容</article>
<section>文档章节</section>
<aside>侧边内容</aside>
<footer>页脚</footer>

5.2 其他语义元素

1
2
3
4
5
6
7
8
<figure>
    <img src="image.jpg" alt="示例">
    <figcaption>图片说明</figcaption>
</figure>

<time datetime="2023-10-01">10月1日</time>

<mark>高亮文本</mark>

六、元数据与链接

6.1 头部元数据

1
2
3
4
5
<meta name="description" content="页面描述">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">

6.2 链接与锚点

1
2
3
4
<a href="https://example.com">外部链接</a>
<a href="#section1">页面锚点</a>
<a href="mailto:contact@example.com">邮件链接</a>
<a href="tel:+123456789">电话链接</a>

七、全局属性

7.1 常用全局属性

属性 说明
id 唯一标识
class 类名
style 内联样式
title 提示文本
data-* 自定义数据
hidden 隐藏元素
tabindex 键盘导航顺序
contenteditable 可编辑内容

八、字符实体

8.1 常用字符实体

1
2
3
4
5
6
&nbsp;   <!-- 空格 -->
&lt;     <!-- < -->
&gt;     <!-- > -->
&amp;    <!-- & -->
&copy;   <!-- © -->
&reg;    <!-- ® -->

九、最佳实践

  1. 使用语义化标签
  2. 为图片添加alt属性
  3. 表单元素关联label
  4. 合理使用div和span
  5. 遵循W3C标准
  6. 保持代码缩进
  7. 属性值使用双引号
  8. 注释复杂结构
  9. 考虑无障碍访问
  10. 使用HTML验证器检查

十、HTML5新特性

10.1 新表单元素

1
2
3
<input type="color">
<input type="range">
<input type="search">

10.2 新API支持

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 画布 -->
<canvas id="myCanvas" width="200" height="100"></canvas>

<!-- 本地存储 -->
<script>
localStorage.setItem('key', 'value');
</script>

<!-- 地理定位 -->
<script>
navigator.geolocation.getCurrentPosition(showPosition);
</script>

注：HTML是网页的基础结构语言，通常与CSS和JavaScript配合使用构建现代网页应用。