Python Day28 HTML 与 CSS 核心知识点 及例题分析

一、HTML 布局标签（含 H5 语义化标签）

传统布局多使用div标签，H5 新增语义化标签增强可读性：

核心知识点

• header：替代div#header，用于页面头部（如标题、导航）。
• footer：替代div#footer，用于页面底部（如版权信息）。
• main：替代div#main，用于主要内容区域。
• nav：替代div#nav，用于导航区域（如菜单）。
• section：替代普通div，用于独立区块（如章节）。
• article：替代普通div，用于独立内容（如文章）。
• aside：替代普通div，多用于侧边栏或广告位。

代码实例

<!– 传统div布局 –>
<div id="header">网站标题</div>
<div id="nav">导航菜单</div>
<div id="main">主要内容</div>
<div id="aside">侧边广告</div>
<div id="footer">©2024 版权所有</div>

<!– H5语义化布局 –>
<header>网站标题</header>
<nav>导航菜单</nav>
<main>主要内容</main>
<aside>侧边广告</aside>
<footer>©2024 版权所有</footer>

二、表单（form）及相关元素

表单用于向服务器提交数据，包含核心标签和属性：

核心知识点

代码实例

<form action="https://www.baidu.com" method="post" enctype="multipart/form-data">
<!– 文本输入框 –>
<p>
<label for="username">用户名:</label>
<input type="text" id="username" name="username" placeholder="请输入用户名" required>
</p>

<!– 密码框 –>
<p>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
</p>

<!– 单选框（互斥需相同name） –>
<p>
<label>性别:</label>
<input type="radio" name="gender" value="m" checked>男
<input type="radio" name="gender" value="w">女
</p>

<!– 下拉列表 –>
<p>
<label>学历:</label>
<select name="xl">
<option value="高中">高中</option>
<option value="本科" selected>本科</option>
</select>
</p>

<!– 复选框 –>
<p>
<label>爱好:</label>
<input type="checkbox" name="hobby" value="游泳">游泳
<input type="checkbox" name="hobby" value="吃饭" checked>吃饭
</p>

<!– 文件上传（需配合post和multipart/form-data） –>
<p>
<label>上传头像:</label>
<input type="file" name="head_png" accept="image/jpeg/png">
</p>

<!– 多行文本 –>
<p>
<label>个人简介:</label>
<textarea name="intro" rows="3" cols="30"></textarea>
</p>

<!– 按钮 –>
<p>
<input type="submit" value="注册">
<input type="reset" value="重置">
</p>
</form>

三、多媒体标签

用于在网页中嵌入音频和视频：

核心知识点

• audio：音频播放器，属性包括src（路径）、controls（显示控制栏）、loop（循环）。
• video：视频播放器，属性类似audio，额外支持width/height设置尺寸。

代码实例

<!– 音频播放器 –>
<audio src="music.mp3" controls loop>
您的浏览器不支持音频播放
</audio>

<!– 视频播放器 –>
<video src="video.mp4" controls width="500" height="300">
您的浏览器不支持视频播放
</video>

四、CSS 基础（层叠样式表）

用于美化网页，包括引入方式、选择器和样式属性：

核心知识点

代码实例

<!– 行内样式 –>
<p style="color: white; background-color: red; font-size: 20px;">行内样式示例</p>

<!– 内联样式 –>
<style>
/* 通用选择器：初始化样式 */
* {
margin: 0;
padding: 0;
}

/* 类选择器：复用样式 */
.p1 {
width: 500px;
height: 50px;
background-color: red;
color: white;
}

/* 后代选择器：选中#app内的a标签 */
#app a {
color: blue;
text-decoration: none; /* 去掉下划线 */
}
</style>

<!– 应用内联样式 –>
<p class="p1">类选择器示例1</p>
<p class="p1">类选择器示例2</p>

<div id="app">
<a href="#">后代选择器示例</a>
</div>

<!– 外联样式引入（需提前创建style.css文件） –>
<link rel="stylesheet" href="style.css" type="text/css">

五、其他实用细节

• 超链接<a>：默认带下划线，可通过text-decoration: none去除。
• 列表（ul/ol）：默认带符号，可通过list-style: none去除。
• 单选框 / 复选框：需设置name属性（单选框name相同实现互斥）。
• 文件上传：必须设置form的method="POST"和enctype="multipart/form-data"。

一、CSS 样式设置题（h1 标签样式）

题目要求

为标题<h1>设置以下样式：

• 字体大小：32px
• 字体颜色：#333
• 字体家族：Arial，sans-serif
• 行高：1.5
• 字体加粗

答案分析

<style>
h1{
font-size: 32px;
color: #333;
font-family: Arial, sans-serif;
line-height: 1.5;
font-weight:600;
}
</style>

知识点总结

二、CSS 类选择器样式设置

题目要求

为.text-example类设置：

• 字体：Times New Roman（优先），其次 Georgia
• 字体大小：18px
• 行高：1.8

答案分析

<style>
.text-example{
font-family: 'Times New Roman',Georgia;
font-size: 18px;
line-height: 1.8;
}
</style>

知识点总结

三、注册页面编写

题目要求

创建包含以下信息的注册页面：

• 用户名、密码、确认密码
• 邮箱、手机号、出生日期
• 用户头像（文件上传）
• 性别（单选）、爱好（多选）
• 个人介绍（多行文本）

答案分析

<table cellspacing="0">
<caption>注册</caption>
<!– 表单项内容 –>
</table>

优点

可改进点

四、登录页面编写

题目要求

创建包含以下元素的登录页面：

• 用户名输入框
• 密码输入框
• "记住我" 复选框
• 登录按钮

答案分析

<table>
<caption>登录</caption>
<!– 表单项内容 –>
</table>

优点

可改进点

总结