HTML 基础 - HTML & CSS

01. HTML 文档结构——网页的骨架

HTML 就是搭网页的积木，每个网页背后都是一堆标签拼起来的。就跟盖房先打地基一样，每个 HTML 页面有个标准框架。一个标准 HTML5 页面包含： DOCTYPE 声明——告诉浏览器「按 HTML5 规矩来」 html 根元素——整个页面装这个大盒子里 head 头部——放幕后信息：元数据、标题、样式链接等 body 主体——用户能看到的所有东西

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到 HTML 世界</h1>
<p>这是一个段落。</p>
</body>
</html>

02. 常用标签速览——搭积木的基本块

HTML 标签说白了就是你搭网页的积木块。最常用的：标题标签 h1~h6——数字越小字越大，h1 一般一个页面只有一个段落标签 p——文字都要包在 p 或别的标签里链接标签 a——href 是点它要跳转的地址图片标签 img——src 指图片在哪，alt 是加载不出时显示的替代文字列表——ul 无序列表带圆点，ol 有序列表带数字，li 是每行容器——div 块级占一行，span 行内不换行

html

<h1>最大的标题</h1>
<h2>二级标题</h2>

<p>这是一段文字，可以有<strong>加粗</strong>和<em>斜体</em>。</p>

<a href="https://example.com" target="_blank">点我跳转</a>

<img src="photo.jpg" alt="一张风景照" width="600">

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

<ol>
<li>第一步：安装</li>
<li>第二步：配置</li>
<li>第三步：运行</li>
</ol>

用语义化标签（header、nav、main、article、footer）替代纯 div，代码更清晰还能提升 SEO 和无障碍体验。

03. 表格与表单——跟用户打交道

网页不光展示内容还得跟用户互动。表格（table）展示结构化数据：table 包裹，tr 是一行，th 是表头加粗，td 是普通格。表单（form）收集用户输入：input 最常用，type 决定样子，textarea 多行输入，select 下拉框。

html

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

<form action="/submit" method="POST">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>

<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>

<label for="role">角色：</label>
<select id="role" name="role">
    <option value="user">普通用户</option>
    <option value="admin">管理员</option>
</select>

<button type="submit">提交</button>
</form>

知识测验

第 1/5 题正确 0

HTML5 的 DOCTYPE 怎么写？

CSS 基础