HTML 与 CSS 基础入门笔记

原创于 2025-12-19 18:53:20 发布 · 641 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #笔记

一、HTML语言概述

HTML（超文本标记语言）是构建网页的基础语言，负责组织和定义网页中的所有内容元素，包括文字、图片、链接和视频等。它与CSS（负责样式）协同工作，共同构成完整的网页。

HTML文档基本结构

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 内容区域 -->
  </body>
</html>

<!DOCTYPE html>：声明文档使用HTML5标准
<html>：文档根元素
<head>：包含网页元信息（编码、标题、样式等）
<body>：网页主体内容（浏览器可见部分）

二、CSS基础

CSS（层叠样式表）用于控制HTML元素的视觉呈现，为网页结构添加美观的样式效果。

三、CSS引入方式

1. 内联样式（行内样式）

<p style="width:200px; height:200px; background-color:green; color:red;">
  示例文字
</p>

特点：

直接写在标签style属性中
优点：修改简单，无需选择器，不用额外选中标签，哪里需要，就直接在哪里添加style属性
缺点：结构和样式耦合了，导致标签冗余，不清晰，不优雅，不方便复用(复制并不是复用),不方便修改，样式的优先级太高，后期结合js或者其他框架去修改，不好修改
建议：仅适用于简单、不常修改的样式，不推荐使用，只有少部分不常修改的，很简单的样式，可以使用

2. 内部样式表

<style>
  p {
    width: 200px;
    height: 200px;
    background-color: green;
    color: pink;
  }
</style>

特点：

写在<head>的<style>标签内
优点：结构样式分开了，代码清晰了、方便修改了
缺点：仅当前文件有效，html结构和css样式写在同一个文件内，会导致这个文件后期不好维护
建议：如果当前样式，不存在别的文件复用，可以使用
如果当前样式较少，也可以使用

3. 外部样式表

<link rel="stylesheet" href="./style.css" />

特点：

独立CSS文件通过<link>引入
优点：完全分离，可复用
建议：推荐使用

link与@import对比

对比项	link	@import
语法	HTML	CSS
引入方式	HTML中引入	CSS中引入
效率	高	低
推荐度	✅	⚠️

四、CSS语法

<style>
选择器 {
  样式名：样式值；
  样式名：样式值；
}


       width:100px; 设置宽度
       height:100px;   设置高度
       background-color:red; 设置背景色
       color:green; 设置字体颜色
       font-size:30px; 设置字体大小，默认值是16px

</style>

注释：/* 注释内容 */（快捷键：Ctrl+/）

五、CSS选择器

1. 标签选择器（Tag Selector）

h1 {
  color: red;
}

特点： 直接根据标签名选中所有相同类型的元素，例如所有的 <h1> 都会被设置为红色。
提示： 使用时要注意范围，避免影响到不该修改的同类标签。

2. ID 选择器（ID Selector）

#p1 {
  color: green;
}

特点： 通过元素的 id 属性进行选中，一个页面中每个 id 必须是唯一的。
注意： id 值不要以数字开头，也不要使用中文。
用途： 常用于唯一的结构块或页面中的独立模块。

3. 类选择器（Class Selector）

.p2 {
  color: orange;
}

特点： 根据元素的 class 属性选中，可以被多个元素共享和复用。(可重复)
建议： 在项目中多使用 class 选择器，它比 id 更灵活；配合层级选择器一起使用，可以减少样式冲突，提高代码可维护性。

4. 通配选择器（Universal Selector）

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

特点： 可以选中页面中所有标签，包括 html、body、div 等。
用途： 常用于设置全局基础样式或清除浏览器默认样式，使不同浏览器的显示效果更一致。

六、图片格式

格式	特点	适用场景
JPEG	色彩丰富，可压缩	照片
GIF	支持简单透明/动画	动态图
PNG	透明效果好	LOGO/透明图
WebP	体积小质量好	综合应用
Base64	内嵌编码	小图标
SVG	矢量不失真	图标/标识

选择原则：效果优先时选质量好的，效果相同时选体积小的

七、结构示例

<div>
  <h3>标题内容</h3>
  <ul>
    <li>
      <a href="#">
        <span>文本</span>
        <p>段落内容</p>
      </a>
    </li>
  </ul>
</div>

八、清除默认样式

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

目的：统一浏览器默认样式（CSS Reset）