怎么HTML和CSS_HTML与CSS基础结构与样式编写入门教程

絕刀狂花

发布时间：2025-08-30 10:06:01

266人浏览过

来源于php中文网

原创

HTML和CSS是网页开发的基础，HTML负责结构，CSS负责样式，二者结合通过语义化标签和选择器实现内容与表现分离，利用盒模型进行布局，并通过模块化文件管理提升开发效率。

怎么html和css_html与css基础结构与样式编写入门教程

要开始构建任何网页，HTML和CSS是你的左膀右臂。简单来说，HTML负责搭建页面的骨架和内容，就像你盖房子先搭框架、砌墙一样；而CSS则负责给这个骨架穿上衣服、涂上颜色、摆放家具，让它看起来美观、有风格，并能根据需要灵活调整布局。它们俩缺一不可，共同决定了用户最终看到的网页是什么样子。

解决方案

理解HTML和CSS的基础，首先要明白它们各自的职责边界，以及如何协同工作。HTML（超文本标记语言）是用来定义网页内容的结构和语义的，比如哪些是标题，哪些是段落，哪里是图片，哪里是链接。它通过一系列预定义的“标签”（tags）来标记这些内容。而CSS（层叠样式表）则专门用于描述HTML文档的呈现样式，比如字体大小、颜色、背景、边距，甚至是复杂的布局。

它们结合起来，最常见的做法就是将CSS代码独立存储在一个

.css

文件中，然后通过HTML的

<link>

标签将其引入到HTML文档中。这样，内容和样式就能有效分离，便于管理和维护。举个例子，一个最简单的HTML文件可能长这样：

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网页</title>
    <link rel="stylesheet" href="style.css"> <!-- 引入外部CSS文件 -->
</head>
<body>
    <header>
        <h1>欢迎来到我的世界</h1>
    </header>
    <main>
        <p>这是一段关于HTML和CSS的介绍。</p>
        <button>点我了解更多</button>
    </main>
    <footer>
        <p>&copy; 2023 我的网站</p>
    </footer>
</body>
</html>

而对应的

style.css

文件可能包含：

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

main {
    padding: 20px;
    max-width: 800px;
    margin: 20px auto;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

p {
    line-height: 1.6;
}

button {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}

footer {
    text-align: center;
    padding: 20px;
    background-color: #333;
    color: #fff;
    margin-top: 30px;
}

通过这种方式，我们既定义了页面的结构，又赋予了它独特的外观。

HTML网页骨架：常用标签与语义化布局实践

构建一个网页，就像搭建一座房子，首先得有框架和不同的功能区域。HTML的核心就是这些“框架”——各种标签。从最基础的

<!DOCTYPE html>

声明开始，它告诉浏览器这是一个HTML5文档。接着是

<html>

根元素，所有内容都在它里面。

<html>

又分为

<head>

和

<body>

两大部分。

<head>

里放的是页面的元信息，比如字符集（

<meta charset="UTF-8">

）、视口设置（

<meta name="viewport">

），还有最重要的页面标题（

<title>

），以及引入外部CSS文件（

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

）。这些内容用户通常看不到，但对浏览器解析和搜索引擎优化至关重要。

而所有用户可见的内容，都放在

<body>

标签里。这里面才是我们真正“写”页面的地方。我们用各种标签来组织内容，比如：

标题：
```
<h1>
```
到
```
<h6>
```
，数字越小，标题级别越高，字体越大。这不仅仅是视觉上的大小，更是语义上的重要性。
段落：
```
<p>
```
用于包裹普通文本段落。
链接：
```
<a>
```
（anchor）标签，通过
```
href
```
属性指定跳转目标。
图片：
```
<img>
```
标签，通过
```
src
```
属性指定图片路径，
```
alt
```
属性提供图片描述，对SEO和无障碍访问非常重要。
列表： 无序列表
```
<ul>
```
和有序列表
```
<ol>
```
，每个列表项用
```
<li>
```
表示。
容器：
```
<div>
```
是一个通用的块级容器，常用于布局。
```
<span>
```
是一个通用的行内容器。它们本身没有语义，但通过CSS可以赋予它们任何样式。

随着HTML5的出现，我们有了更多语义化的标签，这让我们的代码更具可读性，也对搜索引擎更友好。比如：

```
<header>
```
：通常用于页面的顶部，包含网站Logo、导航等。
```
<nav>
```
：包含导航链接。
```
<main>
```
：页面的主要内容，一个页面通常只有一个
```
<main>
```
。
```
<article>
```
：独立的、可分发的内容，比如一篇文章或博客帖子。
```
<section>
```
：页面中一个独立的通用内容区块。
```
<footer>
```
：页面的底部，通常包含版权信息、联系方式等。

使用这些语义化标签，不仅让我们的代码结构更清晰，也帮助辅助阅读设备更好地理解页面内容。这不仅仅是写给浏览器看的，更是写给未来维护者和搜索引擎看的。比如，一个博客文章的结构可能会是这样：

<article>
    <header>
        <h1>我的第一篇博客文章</h1>
        <p>作者：张三，发布日期：2023年10月27日</p>
    </header>
    <section>
        <h2>引言</h2>
        <p>这是文章的引言部分，介绍文章的主题。</p>
    </section>
    <section>
        <h2>正文</h2>
        <p>这里是文章的主要内容。</p>
        <ul>
            <li>要点一</li>
            <li>要点二</li>
        </ul>
    </section>
    <footer>
        <p>标签：HTML, CSS, 入门</p>
    </footer>
</article>

这样的结构，即使没有CSS样式，也能清晰地表达出内容的层级和关系。

CSS选择器：精准定位与样式应用之道

CSS之所以强大，很大程度上在于其选择器机制。选择器就像是CSS的“瞄准镜”，它能让我们精确地找到HTML文档中的特定元素，然后把样式应用上去。如果不理解选择器，你的样式可能会作用到不该作用的地方，或者根本不生效。

最基础的选择器有几种：

元素选择器 (Type Selector)： 直接用HTML标签名来选择。比如
```
p { color: blue; }
```
会把所有
```
<p>
```
标签的文字变成蓝色。
类选择器 (Class Selector)： 通过元素的
```
class
```
属性来选择。HTML元素可以有多个类。在CSS中使用
```
.
```
前缀。比如
```
<p class="highlight">
```
对应的CSS是
```
.highlight { background-color: yellow; }
```
。这种方式非常灵活，可以复用。
ID选择器 (ID Selector)： 通过元素的
```
id
```
属性来选择。
```
id
```
在一个HTML文档中必须是唯一的。在CSS中使用
```
#
```
前缀。比如
```
<div id="main-header">
```
对应的CSS是
```
#main-header { font-size: 3em; }
```
。ID选择器的优先级很高，但因为它唯一性，通常用于JavaScript操作或特定布局区域。

除了这些，还有更高级、更复杂的组合：

后代选择器 (Descendant Selector)： 选中某个元素内部的所有特定后代元素。例如
```
div p { margin-bottom: 10px; }
```
会选中所有
```
<div>
```
内部的
```
<p>
```
标签。
子选择器 (Child Selector)： 只选中某个元素的直接子元素。例如
```
ul > li { list-style-type: square; }
```
只会选中
```
<ul>
```
的直接子
```
<li>
```
。
相邻兄弟选择器 (Adjacent Sibling Selector)： 选中紧接在某个元素后面的兄弟元素。例如
```
h1 + p { text-indent: 2em; }
```
会选中紧跟在
```
<h1>
```
后面的第一个
```
<p>
```
。
通用兄弟选择器 (General Sibling Selector)： 选中某个元素之后的所有兄弟元素。例如
```
h1 ~ p { color: gray; }
```
会选中
```
<h1>
```
之后的所有
```
<p>
```
。
属性选择器 (Attribute Selector)： 根据元素的属性和属性值来选择。例如
```
a[target="_blank"] { color: red; }
```
会选中所有
```
target
```
属性值为
```
_blank
```
的
```
<a>
```
标签。
伪类 (Pseudo-classes)： 选中处于特定状态的元素。例如
```
a:hover { text-decoration: underline; }
```
会在鼠标悬停在链接上时添加下划线。其他常见的有
```
:focus
```
,
```
:active
```
,
```
:nth-child()
```
,
```
:first-child
```
,
```
:last-child
```
等。
伪元素 (Pseudo-elements)： 选中元素的特定部分。例如
```
p::first-letter { font-size: 2em; }
```
会选中段落的第一个字母。其他有
```
::before
```
,
```
::after
```
，常用于创建装饰性内容。

理解这些选择器，特别是它们的优先级（specificity），是写好CSS的关键。简单来说，ID选择器优先级高于类选择器，类选择器高于元素选择器。当多个规则作用于同一个元素时，优先级高的规则会生效。如果优先级相同，则后定义的规则会覆盖先定义的。有时候，你可能会看到

!important

，它能强制提升某个声明的优先级，但通常建议避免滥用，因为它会破坏CSS的层叠机制，让调试变得困难。

无限画

千库网旗下AI绘画创作平台

下载

来看个例子：

/* 元素选择器 */
p {
    font-size: 16px;
}

/* 类选择器 */
.intro-text {
    color: #444;
}

/* ID选择器 */
#main-title {
    text-align: center;
    font-weight: bold;
}

/* 后代选择器 */
.card h2 {
    color: #0056b3;
    border-bottom: 1px solid #eee;
}

/* 伪类 */
button:hover {
    opacity: 0.9;
}

/* 伪元素 */
.quote::before {
    content: "“";
    font-size: 2em;
    vertical-align: middle;
    margin-right: 5px;
}

通过这些选择器，我们能精确地控制页面上每一个元素的样式，实现复杂的视觉效果。

CSS盒模型：布局的基石与尺寸计算逻辑

CSS盒模型，这是前端布局里一个绕不开的核心概念，也是很多新手容易感到困惑的地方。但一旦你真正理解了它，你就会发现，所有元素的布局、尺寸计算都围绕着它展开。你可以把HTML页面上的每个元素都想象成一个矩形的“盒子”，这个盒子由四个部分组成：内容区（Content）、内边距（Padding）、边框（Border）、外边距（Margin）。

内容区 (Content)： 这是盒子最核心的部分，比如文本、图片等实际内容占据的空间。它的尺寸由
```
width
```
和
```
height
```
属性决定。
内边距 (Padding)： 内容区和边框之间的空间。它用于增加内容与边框之间的距离，让内容不至于“贴”在边框上。
```
padding
```
会增加元素的总尺寸。
边框 (Border)： 围绕在内边距外面的线。你可以设置它的宽度、样式和颜色。
```
border
```
同样会增加元素的总尺寸。
外边距 (Margin)： 边框外面的空间，用于控制元素与其他元素之间的距离。
```
margin
```
不会增加元素的实际尺寸，但会影响它在页面上的位置和与其他元素的间距。

默认情况下，CSS盒模型是

content-box

。这意味着当你设置一个元素的

width

和

height

时，它们只应用于内容区。如果你再添加

padding

和

border

，元素的总宽度和总高度就会是：

总宽度 =
width
+
padding-left
+
padding-right
+
border-left-width
+
border-right-width

总高度 =
height
+
padding-top
+
padding-bottom
+
border-top-width
+
border-bottom-width

这在进行精确布局时，常常会让人感到头疼，因为每次计算元素总尺寸都要考虑这些额外的部分。

为了解决这个问题，CSS3引入了

box-sizing

属性，其中最常用的值是

border-box

。当你设置

box-sizing: border-box;

时，

width

和

height

属性将包括内容区、内边距和边框。也就是说：

总宽度 =
width
总高度 =
height

在这种模式下，你设置的

width

和

height

就是元素在页面上占据的实际可见空间，

padding

和

border

会“挤压”内容区的空间，而不是向外扩展。这使得布局计算变得直观得多，特别是在响应式设计和网格布局中，

border-box

几乎成了标准实践。通常，我们会在CSS的开头加上：

/* 让所有元素的盒模型都采用 border-box */
html {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}

这段代码会确保所有元素都继承

border-box

的盒模型行为，极大简化了布局计算。

理解盒模型对于处理元素之间的间距、对齐以及响应式设计至关重要。比如，当两个垂直方向的元素都有

margin

时，它们的

margin

可能会发生“外边距合并”（margin collapsing），即取两者中较大的那个值作为最终的间距，而不是简单相加。这些都是你在实践中会遇到的细节，掌握盒模型能让你更好地预测和控制元素的行为。

<div class="box content-box-example">
    内容区
</div>
<div class="box border-box-example">
    内容区 (border-box)
</div>

.box {
    width: 100px;
    height: 100px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
    background-color: lightblue;
    text-align: center;
    line-height: 100px; /* 垂直居中文本 */
}

.content-box-example {
    /* 默认行为，总宽度 = 100 + 2*20 + 2*5 = 150px */
    box-sizing: content-box;
}

.border-box-example {
    /* 总宽度 = 100px，内容区会被压缩 */
    box-sizing: border-box;
    background-color: lightcoral;
}

通过这个例子，你可以直观地看到两种盒模型下，即使

width

和

height

设置相同，元素最终占据的空间却是不同的。

高效组织与管理HTML和CSS文件，提升开发效率

在小型项目甚至是一些个人页面中，我们可能习惯于把所有CSS都写在一个

style.css

文件里，或者干脆直接写在HTML的

<style>

标签中。但这在稍大一点的项目中，很快就会变得难以管理和维护。想象一下，一个上千行的CSS文件，你要找一个特定按钮的样式，那简直是噩梦。因此，一套清晰的文件组织和管理策略是提升开发效率的关键。

外部样式表优先： 始终优先使用外部CSS文件（通过
```
<link rel="stylesheet" href="path/to/style.css">
```
引入）。这不仅实现了内容与样式的分离，让HTML文件更干净，也让CSS文件可以被多个HTML页面复用，减少了代码冗余。浏览器还会缓存外部CSS文件，提升页面加载速度。
模块化CSS： 不要把所有CSS都堆在一个文件里。根据功能、组件或页面区域进行拆分。例如：
- ```
base.css
```
  ：定义全局样式，如字体、颜色变量、重置样式（reset.css 或 normalize.css）。
- ```
layout.css
```
  ：定义页面整体布局，如header、footer、main、sidebar等。
- ```
components/button.css
```
  ：针对特定组件的样式，如按钮、卡片、表单。
- ```
pages/home.css
```
  ：针对特定页面的特殊样式。
- ```
utilities.css
```
  ：一些常用的工具类，如清除浮动、隐藏元素等。然后，你可以在主CSS文件（比如
```
style.css
```
  ）中，使用
```
@import
```
  规则将这些模块化的文件导入进来，或者在HTML中引入多个
```
<link>
```
  标签。
```
/* style.css */
@import 'base.css';
@import 'layout.css';
@import 'components/button.css';
/* ... 更多模块 */
```

文件夹结构： 一个清晰的项目文件夹结构，能让你一眼就知道什么文件放在哪里。一个常见的结构是：

my-project/
├── index.html
├── about.html
├── css/
│   ├── base.css
│   ├── layout.css
│   ├── components/
│   │   ├── button.css
│   │   └── card.css
│   └── pages/
│       └── home.css
├── js/
│   ├── main.js
│   └── modules/
│       └── carousel.js
└── img/
    ├── logo.png
    └── background.jpg

这种结构让文件各司其职，查找和修改都非常方便。

命名规范： 遵循一致的命名规范，如BEM（Block Element Modifier）、SMACSS或OOCSS等，能让CSS类名更具语义化，减少冲突，提高可读性。例如，BEM会将一个按钮命名为
```
.button
```
，它的变体是
```
.button--primary
```
，按钮内的文本是
```
.button__text
```
。
注释： 在复杂的CSS文件中，添加清晰的注释说明代码块的功能、目的或任何特殊注意事项，对于团队协作和未来维护至关重要。
预处理器（Preprocessors）： 对于大型项目，Sass、Less或Stylus等CSS预处理器能极大地提升开发效率。它们引入了变量、嵌套、混合（mixins）、函数等编程特性，让CSS更具动态性和可维护性。例如，你可以定义颜色变量，在多处复用，一旦需要修改，只需改一个地方。
```
/* _variables.scss (Sass示例) */
$primary-color: #007bff;
$font-stack: 'Arial', sans-serif;

/* button.scss */
.button {
    background-color: $primary-color;
    font-family: $font-stack;
    /* ... */
}
```
预处理器代码最终会被编译成标准的CSS文件。