Python 零基础100天—Day67 HTML 基础
- 2026-08-18 23:11:08
Python 零基础100天—Day67 HTML 基础
轻松时刻：
HTML 基础 — 网页的骨架
🕐 预计用时：2-3 小时 ｜ 🎯 目标：掌握 HTML 标签、表单、语义化标签和 SEO 基础
📖 今日目录
HTML 是什么？ 基本结构 常用标签 列表 链接与图片 表格 表单 语义化标签 今日练习 今日小结
1. HTML 是什么？
HTML（HyperText Markup Language） 是网页的骨架。浏览器读取 HTML，把它渲染成你看到的网页。
# 网页三件套：
# HTML → 骨架（结构）
# CSS → 皮肤（样式）
# JS → 肌肉（交互）
# 类比：
# HTML = 房子的框架（墙、门、窗）
# CSS = 装修（颜色、布局、装饰）
# JS = 电器（开关灯、空调遥控）2. 基本结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的网页</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello, HTML!</h1>
<p>这是我的第一个网页。</p>
</body>
</html><!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset> | |
<meta viewport> | |
<title> | |
<body> |
3. 常用标签
📝 文本标签
<h1>一级标题</h1> <!-- 最大 -->
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6> <!-- 最小 -->
<p>这是一个段落。段落之间有间距。</p>
<p>另一个段落。</p>
<strong>加粗（语义：重要内容）</strong>
<b>加粗（仅样式）</b>
<em>斜体（语义：强调）</em>
<i>斜体（仅样式）</i>
<br> <!-- 换行 -->
<hr> <!-- 水平线 -->
<span>行内容器（用于包裹小段文字）</span>
<div>块级容器（用于布局分组）</div>📝 特殊字符
< → < 小于号
> → > 大于号
& → & 和号
→ 空格
© → © 版权符号4. 列表
<!-- 无序列表 -->
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>第一步：安装 Python</li>
<li>第二步：写 Hello World</li>
<li>第三步：学 Flask</li>
</ol>
<!-- 描述列表 -->
<dl>
<dt>Python</dt>
<dd>一种优雅的编程语言</dd>
<dt>Flask</dt>
<dd>轻量级 Web 框架</dd>
</dl>5. 链接与图片
<!-- 超链接 -->
<a href="https://python.org">Python 官网</a>
<a href="/about">关于我们</a>
<a href="#section2">跳转到第二节</a>
<a href="mailto:hi@example.com">发邮件</a>
<a href="https://python.org" target="_blank">新窗口打开</a>
<!-- 图片 -->
<img src="photo.jpg" alt="风景照片" width="600" height="400">
<img src="/static/images/logo.png" alt="Logo">
<!-- 图片链接 -->
<a href="https://python.org">
<img src="python-logo.png" alt="Python">
</a>💡 alt 属性非常重要！
• 图片加载失败时显示替代文字
• 屏幕阅读器为视障用户朗读 alt 内容
• 搜索引擎用 alt 理解图片内容（SEO）<img src="cat.jpg" alt=""> ❌ 空 alt<img src="cat.jpg" alt="一只橘色猫咪坐在沙发上"> ✅ 描述性 alt
6. 表格
<table border="1" cellpadding="8">
<caption>学生成绩表</caption>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>90</td>
<td>95</td>
<td>88</td>
</tr>
<tr>
<td>小红</td>
<td colspan="2">暂缺</td> <!-- 跨 2 列 -->
<td>92</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均</td>
<td>90</td>
<td>95</td>
<td>90</td>
</tr>
</tfoot>
</table>7. 表单
<form action="/register" method="POST">
<!-- 文本输入 -->
<label for="username">用户名：</label>
<input type="text" id="username" name="username" placeholder="请输入用户名" required>
<!-- 邮箱 -->
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>
<!-- 密码 -->
<label for="pwd">密码：</label>
<input type="password" id="pwd" name="password" minlength="6">
<!-- 数字 -->
<label for="age">年龄：</label>
<input type="number" id="age" name="age" min="1" max="150">
<!-- 单选 -->
<p>性别：</p>
<input type="radio" name="gender" value="male" id="male">
<label for="male">男</label>
<input type="radio" name="gender" value="female" id="female">
<label for="female">女</label>
<!-- 复选 -->
<p>爱好：</p>
<input type="checkbox" name="hobby" value="python" id="h1">
<label for="h1">Python</label>
<input type="checkbox" name="hobby" value="flask" id="h2">
<label for="h2">Flask</label>
<!-- 下拉 -->
<label for="city">城市：</label>
<select id="city" name="city">
<option value="">请选择</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
<!-- 多行文本 -->
<label for="bio">简介：</label>
<textarea id="bio" name="bio" rows="5" placeholder="介绍一下自己..."></textarea>
<!-- 文件 -->
<label for="avatar">头像：</label>
<input type="file" id="avatar" name="avatar" accept="image/*">
<!-- 隐藏字段 -->
<input type="hidden" name="csrf_token" value="abc123">
<!-- 提交 -->
<button type="submit">注册</button>
<button type="reset">重置</button>
</form>📋 Input 类型速查
text | ||
email | ||
password | ||
number | ||
tel | ||
url | ||
date | ||
color | ||
range | ||
search | ||
file |
8. 语义化标签
HTML5 引入了语义化标签——让标签名表达内容的含义，而非仅仅是样式。
<!-- 语义化页面结构 -->
<header>
<nav>
<a href="/">首页</a>
<a href="/about">关于</a>
</nav>
</header>
<main>
<article>
<h1>文章标题</h1>
<time datetime="2026-05-12">2026年5月12日</time>
<p>文章内容...</p>
<section>
<h2>第一节</h2>
<p>...</p>
</section>
<section>
<h2>第二节</h2>
<p>...</p>
</section>
</article>
<aside>
<h3>侧边栏</h3>
<p>相关链接...</p>
</aside>
</main>
<footer>
<p>© 2026 我的网站</p>
</footer><header> | <div id="header"> | |
<nav> | <div id="nav"> | |
<main> | <div id="main"> | |
<article> | <div class="article"> | |
<section> | <div class="section"> | |
<aside> | <div id="sidebar"> | |
<footer> | <div id="footer"> | |
<figure> | <div class="figure"> | |
<figcaption> | <p class="caption"> | |
<mark> | <span class="highlight"> |
💡 语义化的好处：
• SEO：搜索引擎能更好地理解页面结构
• 可访问性：屏幕阅读器能正确导航
• 可维护性：代码更易读，一看就知道哪里是什么
• 标准：HTML5 推荐的最佳实践
9. 今日练习
🏋️ 练习 1：个人主页
# 用语义化标签创建一个个人主页：
# - header：导航栏
# - main：自我介绍 + 技能列表 + 项目展示
# - aside：联系方式侧边栏
# - footer：版权信息🏋️ 练习 2：注册表单
# 创建一个完整的注册表单：
# - 用户名（必填，3-20字符）
# - 邮箱（必填，email 类型验证）
# - 密码（必填，至少6位）
# - 性别（单选）
# - 兴趣（复选）
# - 个人简介（多行文本）
# - 头像（文件上传）🏋️ 练习 3：课程表
# 用表格创建一个课程表：
# - 5行（周一到周五）× 8列（第1-8节课）
# - 有些课需要合并单元格（如体育课连上2节）
# - 表头用 thead，内容用 tbody10. 今日小结
🚀 明日预告：Day 68 — CSS 基础
HTML 定义了骨架，但页面还很"朴素"。明天学 CSS——给网页穿上衣服：颜色、字体、间距、布局。从盒模型到 Flexbox/Grid，让你的页面从"能看"变成"好看"！
请在微信客户端打开
本文来自网友投稿或网络内容，如有侵犯您的权益请联系我们删除，联系邮箱：wyl860211@qq.com 。
