HTML5 基础入门课堂笔记整理（HTML结构 + CSS三种引入方式 + 头部标签）

一、HTML5 基础页面核心知识点

  1. 标准HTML5页面基础9行骨架代码

一份规范的HTML5文档，有着固定的基础结构，也是我们写网页的起点，标准基础结构共9行核心代码：

网页标题 2. 基础结构5组标签嵌套关系

HTML文档是层级嵌套结构，5组核心标签层级关系：

（文档声明，不属于html标签）

└── 根标签
　　├── 头部区域（存放配置、标题、样式、元信息）
　　└── 主体区域（页面所有可见内容都写在这里）

  1. HTML、CSS、JS 文件规范存放与命名规范

目录规范（前端通用工程结构）
项目文件夹/
├─ index.html # 首页HTML文件
├─ css/ # 专门存放所有样式文件
│ └─ style.css
├─ js/ # 专门存放JavaScript脚本文件
│ └─ main.js
└─ images/ # 图片资源文件夹
文件命名规则

  1. 全部使用英文小写字母、数字、下划线，禁止中文、空格、特殊符号

  2. 语义化命名：比如首页用index.html，公共样式common.css

  3. 后缀严格区分：网页.html、样式.css、脚本.js

二、CSS 三种样式引入方式 & 优先级规则

网页给元素加样式，一共三种写法，冲突时遵循就近原则，优先级权重从高到低：
行内样式 > 内部样式表 > 外部样式表

  1. 外部样式表（开发最常用，解耦分离）

单独新建.css文件，在HTML的中用标签引入

• 优点：结构与样式完全分离，多页面可复用同一个CSS文件，便于后期维护

• 适用：正式项目、多页面网站开发

  1. 内部样式表（内嵌样式，单页面临时使用）

写在HTML页面内部的

• 优点：无需额外新建文件，当前页面快速调试样式

• 缺点：仅当前页面生效，无法复用，页面代码冗余

  1. 行内样式（内联样式，优先级最高，不推荐大量使用）

直接在HTML标签的style属性里书写CSS样式

我是标题一

• 特点：精准作用于当前单个标签，优先级最高

• 弊端：混杂在结构标签内，代码混乱，不利于统一管理

补充：HTML属性 和 CSS样式 的区别与联系

课堂总结要点：

  1. HTML原生属性（比如width、align）是标签自带的旧版控制方式；CSS样式是专门用来美化布局的标准方案

  2. 能力边界：CSS样式能实现的效果，HTML属性不一定能做到；但HTML属性能实现的效果，CSS样式都可以等效实现

  3. 现代前端开发原则：尽量用CSS样式代替HTML原生属性，遵循「结构、样式分离」思想。

三、HTML头部（head）常用标签详解

<head>区域用来配置网页元数据、标题、字符编码、外部资源引入，不会直接显示在页面可视区域。 学习标签统一按照三个维度记忆：标签名称 / 单标签or双标签 / 核心功能 / 使用注意事项
  1. title 网页标题标签

• 标签类型：双标签（开始+结束成对出现）

• 核心功能：定义浏览器标签栏展示的网页标题，同时是搜索引擎抓取网页标题的核心内容

• 示例：

<title>我的HTML学习笔记</title> • 注意：一个HTML页面只能有一个title标签，放在head内部。
posted @ 2026-07-07 09:36  这几年  阅读(5)  评论(0)    收藏  举报