一、HTML5基础页面结构
- 标准9行代码结构
一个最精简、可运行的HTML5页面由以下9行核心代码构成：
页面标题
页面可见内容
2. 核心5对标记的关系
• 根标签 ：包裹整个页面，是所有标签的容器
• 头部标签 ：包含页面元信息（如编码、标题），不直接显示在页面中
◦ ：定义字符编码、视口等元数据
◦
：定义浏览器标签页显示的标题</p>
<p>• 主体标签 <body>：包含所有用户可见的页面内容（文本、图片、按钮等）<br>
二、HTML/CSS/JS 文件规范</p>
<ol>
<li>目录结构规范</li>
</ol>
<p>推荐按功能分类存放文件，便于维护：<br>
项目根目录/<br>
├── index.html # 主页面文件<br>
├── css/ # 样式文件夹<br>
│ └── style01.css # 外部样式表<br>
├── js/ # 脚本文件夹<br>
│ └── main.js # JavaScript文件<br>
└── images/ # 图片资源文件夹<br>
2. 命名规范</p>
<p>• 文件名：使用小写英文字母、数字、短横线，避免中文和特殊字符<br>
✅ 示例：login.html、common-style.css<br>
❌ 反例：登录页面.html、Style 01.css</p>
<p>• 语义化命名：文件名能体现文件功能，便于快速识别<br>
三、CSS样式调用的三种方式</p>
<ol>
<li>外部样式表（推荐）</li>
</ol>
<p>• 写法：在 <head> 中使用 <link> 标签引入独立CSS文件</p>
<link rel="stylesheet" type="text/css" href="css/style01.css"/>
• 优点：样式与结构分离，可复用、便于维护
<p>• 优先级：最低</p>
<ol start="2">
<li>内部样式表</li>
</ol>
<p>• 写法：在 <head> 中使用 <style> 标签编写样式</p>
<style type="text/css">
h1 {
color: red;
font-size: 24px;
}
</style>
<p>• 优点：单页面样式集中管理，无需额外文件</p>
<p>• 优先级：中等</p>
<ol start="3">
<li>行内样式</li>
</ol>
<p>• 写法：直接在HTML标签的 style 属性中编写样式</p>
<h1 style="color: green;">我是标题一</h1>
• 优点：可快速修改单个元素样式
<p>• 优先级：最高</p>
<p>• 缺点：代码冗余，不利于维护，不推荐大量使用</p>
<ol start="4">
<li>样式冲突与优先级</li>
</ol>
<p>当多个样式作用于同一元素时，遵循就近原则，优先级排序：<br>
行内样式 > 内部样式 > 外部样式<br>
四、属性与样式的区别与联系<br>
维度 属性（Attribute） 样式（Style/CSS）<br>
作用对象 HTML标签本身的固有特征（如id、class、src） 控制元素的外观、布局、交互效果<br>
实现范围 功能有限，仅能实现标签基础特性 功能强大，可实现复杂视觉与交互效果<br>
包含关系 样式能实现的效果，属性不一定能实现 属性能实现的效果，样式一定能实现<br>
示例 <img src="pic.jpg" alt="图片"> img { width: 200px; border: 1px solid #ccc; }</p>
<p>五、头部标记 <head> 核心知识点</p>
<ol>
<li>
<title> 标记
</li>
</ol>
<p>• 类型：双标记（<title>）
• 功能：定义网页标题，显示在浏览器标签页、收藏夹、搜索引擎结果中
• 使用注意：
◦ 必须放在 内部
◦ 标题应简洁、语义化，便于用户识别和SEO优化
◦ 每个页面应有唯一的
</p>
<ol start="2">
<li>其他常见头部标记（拓展）</li>
</ol>
<p>• <meta charset="UTF-8">：定义页面字符编码，避免中文乱码</p>
<p>• <meta name="viewport" content="width=device-width, initial-scale=1.0">：适配移动端设备<br>
六、拓展知识：字符编码 UTF-8 与 GB2312</p>
<ol>
<li>
<p>核心区别<br>
对比项 UTF-8 GB2312<br>
覆盖范围 全球通用，支持所有语言（中文、英文、日文等） 仅支持简体中文及部分常用符号<br>
编码长度 可变长度（1-4字节），英文占1字节，中文占3字节 固定长度，中文占2字节<br>
兼容性 现代浏览器、操作系统默认支持 早期中文系统支持，新系统需额外兼容<br>
适用场景 国际化网站、多语言项目 仅面向国内用户的老旧项目</p>
</li>
<li>
<p>实践建议</p>
</li>
</ol>
<p>• 现代Web开发强烈推荐使用 UTF-8，避免跨平台、跨语言乱码问题</p>
<p>• 在HTML中通过 <meta charset="UTF-8"> 声明编码<br>
七、课后实践任务</p>
<ol>
<li>
<p>查看20个以上不同网站的 <title> 内容，总结标题命名规律（如：品牌名+页面名、关键词优化等）</p>
</li>
<li>
<p>分别用三种CSS样式方式实现同一个标题的颜色修改，观察优先级效果</p>
</li>
<li>
<p>按照规范目录结构创建一个简单网页，包含外部样式表和JavaScript文件<br>
💡 笔记总结：本次课核心是掌握HTML5基础结构、CSS三种引入方式及字符编码基础，为后续Web开发打下扎实根基。后续将深入学习更多HTML标签和CSS选择器，逐步实现更复杂的页面效果。</p>
</li>
</ol>
浙公网安备 33010602011771号