HTML基础

完整的HTML标签体系

单标签（自闭合标签）

这些标签不需要闭合标签，直接在开始标签后加斜杠或省略斜杠

<br> - 换行标签

在文本中插入换行符

<p>这是第一行<br>这是第二行</p>

<img> - 图片标签

在网页中插入图片

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

<hr> - 水平线

创建水平分割线

<p>上面内容</p>
<hr>
<p>下面内容</p>

<input> - 输入框

创建各种输入控件

<input type="text" placeholder="请输入姓名">
<input type="password" placeholder="请输入密码">

<meta> - 元数据

提供页面元信息

<meta charset="UTF-8">
<meta name="description" content="页面描述">

<link> - 链接外部资源

链接CSS样式表等外部资源

<link rel="stylesheet" href="styles.css">

文本格式化标签

标题标签

<h1> - 一级标题（最大）
<h2> - 二级标题
<h3> - 三级标题
<h4> - 四级标题
<h5> - 五级标题
<h6> - 六级标题（最小）

段落和换行

<p> - 段落标签
<br> - 换行标签
<hr> - 水平线
<pre> - 预格式化文本

文本样式

<strong> - 重要文本（加粗）
<em> - 强调文本（斜体）
<mark> - 标记文本（高亮）
<small> - 小号文本
<del> - 删除文本
<ins> - 插入文本

列表标签

无序列表 <ul>

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

有序列表 <ol>

<ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

定义列表 <dl>

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
</dl>

链接和媒体标签

超链接 <a>

<a href="https://example.com">外部链接</a>
<a href="page.html">内部链接</a>
<a href="#section1">锚点链接</a>
<a href="mailto:email@example.com">邮件链接</a>

图片 <img>

<img src="photo.jpg" alt="图片描述" 
     width="300" height="200" 
     title="鼠标悬停提示">

表格标签

<table border="1">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>城市</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>北京</td>
        </tr>
    </tbody>
</table>

<table> - 表格容器
<tr> - 表格行
<th> - 表头单元格
<td> - 普通单元格
<thead> - 表头
<tbody> - 表体

表单标签

基础表单结构

<form action="submit.php" method="post">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" required>
    
    <button type="submit">提交</button>
</form>

输入类型大全

text - 文本输入
password - 密码输入
email - 邮箱输入
number - 数字输入
date - 日期选择
checkbox - 复选框
radio - 单选框
file - 文件上传

HTML5语义化标签

<header>
页面或区域的头部

<nav>
导航链接区域

<main>
主要内容区域

<section>
文档中的节

<article>
独立文章内容

<aside>
侧边内容

<footer>
页面或区域底部

<figure>
独立的流内容

<figcaption>
figure的标题

HTML标签速查表

标签	类型	描述	示例
<html>	双标签	HTML文档根元素	<html>内容</html>
<head>	双标签	文档头部	<head>元数据</head>
<body>	双标签	文档主体	<body>可见内容</body>
<title>	双标签	页面标题	<title>我的网页</title>
<meta>	单标签	元数据	<meta charset="UTF-8">
<link>	单标签	链接外部资源	<link rel="stylesheet" href="style.css">
<script>	双标签	JavaScript代码	<script>代码</script>

标签使用注意事项

1. 标签嵌套规则：块级元素可以包含内联元素，但内联元素不能包含块级元素
2. 标签闭合：所有双标签必须正确闭合，单标签可以省略结尾的斜杠
3. 语义化：尽量使用具有语义的标签，如<header>、<nav>等
4. 属性规范：属性值要用引号包裹，如class="container"
5. 结构清晰：合理使用缩进和换行，让代码更易读

练习题（每个知识点10+）

练习1：基础网页结构

创建一个简单的个人介绍页面，包含标题、段落和列表。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的个人介绍</title>
</head>
<body>
    <h1>张三的个人主页</h1>
    <p>大家好，我是一名前端开发工程师。</p>
    
    <h2>我的技能</h2>
    <ul>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
    </ul>
    
    <h2>联系方式</h2>
    <p>邮箱：zhangsan@example.com</p>
</body>
</html>

练习2：图片和链接

创建一个包含图片和超链接的页面。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图片和链接</title>
</head>
<body>
    <h1>我的照片集</h1>
    
    <img src="profile.jpg" alt="我的头像" width="200">
    
    <p>访问我的社交媒体：</p>
    <ul>
        <li><a href="https://github.com/username">GitHub</a></li>
        <li><a href="https://twitter.com/username">Twitter</a></li>
        <li><a href="mailto:contact@example.com">联系我</a></li>
    </ul>
</body>
</html>

练习3：表格创建

创建一个学生成绩表格。

<table border="1">
    <thead>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>85</td>
            <td>92</td>
            <td>78</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>90</td>
            <td>88</td>
            <td>95</td>
        </tr>
    </tbody>
</table>

练习4：表单设计

创建一个用户注册表单。

<form action="/register" method="post">
    <fieldset>
        <legend>用户注册</legend>
        
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" required><br>
        
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email" required><br>
        
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" required><br>
        
        <label for="gender">性别：</label>
        <select id="gender" name="gender">
            <option value="male">男</option>
            <option value="female">女</option>
            <option value="other">其他</option>
        </select><br>
        
        <button type="submit">注册</button>
    </fieldset>
</form>
                        

练习5：语义化HTML5

使用HTML5语义化标签重构一个博客文章页面。

<article>
    <header>
        <h1>HTML5新特性介绍</h1>
        <time datetime="2024-01-15">2024年1月15日</time>
        <address>作者：技术博主</address>
    </header>
    
    <section>
        <h2>什么是语义化标签？</h2>
        <p>语义化标签让HTML结构更加清晰...</p>
    </section>
    
    <figure>
        <img src="html5-logo.png" alt="HTML5标志">
        <figcaption>HTML5官方标志</figcaption>
    </figure>
    
    <aside>
        <h3>相关文章</h3>
        <ul>
            <li><a href="css3-guide.html">CSS3完全指南</a></li>
            <li><a href="js-es6.html">ES6新特性</a></li>
        </ul>
    </aside>
    
    <footer>
        <p>标签：HTML5, 前端开发, Web标准</p>
    </footer>
</article>
                        

练习6-10：列表练习

• 创建有序列表和无序列表
• 嵌套列表结构
• 定义列表（dl, dt, dd）
• 任务清单（复选框列表）
• 导航菜单列表

练习11-15：多媒体标签

• 图片优化和响应式
• 视频播放器（video）
• 音频播放器（audio）
• 嵌入地图（iframe）
• 嵌入YouTube视频

核心概念

什么是HTML？

基本结构