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

发布于：2025-08-13 ⋅ 阅读:(20) ⋅ 点赞:(0)

一、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）及相关元素

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

核心知识点

  1. form 标签属性：

    • action：服务器地址（如https://www.baidu.com）。
    • method：提交方式（GET默认，推荐POST）。
    • enctype：数据格式（application/x-www-form-urlencoded默认，multipart/form-data用于文件上传）。

  2. label 标签：行内元素，用于解释表单元素（可选for属性关联表单元素id）。

  3. 常见表单元素：

    • input：通过type改变类型（文本、密码、单选、复选等）。
    • textarea：多行文本输入框。
    • select：下拉列表（配合option和optgroup）。

代码实例

<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 基础（层叠样式表）

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

核心知识点

  1. 引入方式：

    • 行内样式：标签内style属性（如<p style="color: red;">）。
    • 内联样式：<head>中用<style>标签定义。
    • 外联样式：通过<link>引入外部.css文件。

  2. 选择器：

    • 通用选择器：*（选中所有元素）。
    • 标签选择器：标签名（如p）。
    • ID 选择器：#id值（如#app）。
    • 类选择器：.class值（如.p1）。
    • 后代选择器：选择器1 选择器2（如#app a）。

  3. 常用样式：字体（font-*）、颜色（color）、背景（background-*）等。

代码实例

<!-- 行内样式 -->
<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>

知识点总结

  1. 字体大小：使用font-size属性，单位 px
  2. 字体颜色：使用color属性，支持十六进制值（#333）
  3. 字体家族：font-family可指定多个字体，用逗号分隔，优先级从左到右
  4. 行高：line-height设置行间距，1.5 表示当前字体大小的 1.5 倍
  5. 字体加粗：font-weight可用数值（400 正常，600-700 加粗）或关键词（bold）

二、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>

知识点总结

  1. 类选择器：使用.类名定义样式，可复用在多个元素
  2. 字体声明：带空格的字体名称需要用引号包裹（如 'Times New Roman'）
  3. 字体备选机制：当第一个字体不可用时，自动使用后面的备选字体
  4. 行高单位：未指定单位时，是相对于当前元素的字体大小的倍数

三、注册页面编写

题目要求

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

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

答案分析

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

优点

  1. 使用表格<table>进行布局，使表单元素排列整齐
  2. 正确使用了各种表单控件类型：
    • 文本输入框（用户名、手机号）
    • 密码框（密码、确认密码）
    • 邮箱输入框（type="email"）
    • 日期选择框（type="date"）
    • 文件上传框（type="file"）
    • 单选按钮（性别）
    • 复选框（爱好）
    • 文本域（个人介绍）
  3. 为单选按钮设置了相同的name属性，实现互斥效果
  4. 使用checked属性设置默认选中项

可改进点

  1. 建议使用<form>标签包裹所有表单项，便于数据提交
  2. 可添加required属性实现基本表单验证
  3. 密码框可添加placeholder提示文本
  4. 手机号可使用type="tel"类型
  5. 表格布局在响应式设计中不够灵活，可考虑使用 CSS 布局

四、登录页面编写

题目要求

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

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

答案分析

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

优点

  1. 使用表格布局使表单整齐有序
  2. 正确使用了<caption>标签设置表单标题
  3. 使用colspan="2"使按钮和复选框跨列显示
  4. 包含了登录功能所需的核心元素

可改进点

  1. 建议添加<form>标签，并设置action和method属性
  2. 输入框可添加placeholder提示文本
  3. 登录按钮建议使用type="submit"
  4. "记住我" 复选框可添加关联的<label>标签
  5. 可添加 "忘记密码" 等辅助链接

总结

  1. CSS 基础语法与选择器使用
  2. 字体相关样式属性的应用
  3. 表单元素的正确使用与属性设置
  4. 基本页面布局能力（表格布局）

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布