怎么HTML和CSS_HTML与CSS基础结构与样式编写入门教程-css教程-PHP中文网

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>

登录后复制

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

<ul> <li> 标题：

<h1>

登录后复制

到

<h6>

登录后复制

，数字越小，标题级别越高，字体越大。这不仅仅是视觉上的大小，更是语义上的重要性。 <li> 段落：

<p>

登录后复制

用于包裹普通文本段落。 <li> 链接：

<a>

登录后复制

（anchor）标签，通过

href

登录后复制

属性指定跳转目标。 <li> 图片：

@@##@@

登录后复制

标签，通过

src

登录后复制

属性指定图片路径，

alt

登录后复制

属性提供图片描述，对SEO和无障碍访问非常重要。 <li> 列表： 无序列表

<ul>

登录后复制

和有序列表

<ol>

登录后复制

，每个列表项用

<li>

登录后复制

表示。 <li> 容器：

<div>

登录后复制

是一个通用的块级容器，常用于布局。

<span>

登录后复制

是一个通用的行内容器。它们本身没有语义，但通过CSS可以赋予它们任何样式。 随着HTML5的出现，我们有了更多语义化的标签，这让我们的代码更具可读性，也对搜索引擎更友好。比如：

<header>

登录后复制

：通常用于页面的顶部，包含网站Logo、导航等。 <li>

<nav>

登录后复制

：包含导航链接。 <li>

<main>

登录后复制

：页面的主要内容，一个页面通常只有一个

<main>

登录后复制

。 <li>

<article>

登录后复制

：独立的、可分发的内容，比如一篇文章或博客帖子。 <li>

<section>

登录后复制

：页面中一个独立的通用内容区块。 <li>

<footer>

登录后复制

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

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

登录后复制

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

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

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

因赛AIGC 因赛AIGC解决营销全链路应用场景

280

查看详情因赛AIGC

最基础的选择器有几种：

<ul> <li> 元素选择器 (Type Selector)： 直接用HTML标签名来选择。比如

p { color: blue; }

登录后复制

会把所有

<p>

登录后复制

标签的文字变成蓝色。 <li> 类选择器 (Class Selector)： 通过元素的

class

登录后复制

属性来选择。HTML元素可以有多个类。在CSS中使用

登录后复制

前缀。比如

<p class="highlight">

登录后复制

对应的CSS是

.highlight { background-color: yellow; }

登录后复制

。这种方式非常灵活，可以复用。 <li> ID选择器 (ID Selector)： 通过元素的

id

登录后复制

属性来选择。

id

登录后复制

在一个HTML文档中必须是唯一的。在CSS中使用

登录后复制

前缀。比如

<div id="main-header">

登录后复制

对应的CSS是

#main-header { font-size: 3em; }

登录后复制

。ID选择器的优先级很高，但因为它唯一性，通常用于JavaScript操作或特定布局区域。 除了这些，还有更高级、更复杂的组合：

<ul> <li> 后代选择器 (Descendant Selector)： 选中某个元素内部的所有特定后代元素。例如

div p { margin-bottom: 10px; }

登录后复制

会选中所有

<div>

登录后复制

内部的

<p>

登录后复制

标签。 <li> 子选择器 (Child Selector)： 只选中某个元素的直接子元素。例如

ul > li { list-style-type: square; }

登录后复制

只会选中

<ul>

登录后复制

的直接子

<li>

登录后复制

。 <li> 相邻兄弟选择器 (Adjacent Sibling Selector)： 选中紧接在某个元素后面的兄弟元素。例如

h1 + p { text-indent: 2em; }

登录后复制

会选中紧跟在

<h1>

登录后复制

后面的第一个

<p>

登录后复制

。 <li> 通用兄弟选择器 (General Sibling Selector)： 选中某个元素之后的所有兄弟元素。例如

h1 ~ p { color: gray; }

登录后复制

会选中

<h1>

登录后复制

之后的所有

<p>

登录后复制

。 <li> 属性选择器 (Attribute Selector)： 根据元素的属性和属性值来选择。例如

a[target="_blank"] { color: red; }

登录后复制

会选中所有

target

登录后复制

属性值为

_blank

登录后复制

的

<a>

登录后复制

标签。 <li> 伪类 (Pseudo-classes)： 选中处于特定状态的元素。例如

a:hover { text-decoration: underline; }

登录后复制

会在鼠标悬停在链接上时添加下划线。其他常见的有

:focus

登录后复制

:active

登录后复制

:nth-child()

登录后复制

:first-child

登录后复制

:last-child

登录后复制

等。 <li> 伪元素 (Pseudo-elements)： 选中元素的特定部分。例如

p::first-letter { font-size: 2em; }

登录后复制

会选中段落的第一个字母。其他有

::before

登录后复制

::after

登录后复制

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

!important

登录后复制

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

来看个例子：

/* 元素选择器 */
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）。

<ol> <li> 内容区 (Content)： 这是盒子最核心的部分，比如文本、图片等实际内容占据的空间。它的尺寸由

width

登录后复制

和

height

登录后复制

属性决定。 <li> 内边距 (Padding)： 内容区和边框之间的空间。它用于增加内容与边框之间的距离，让内容不至于“贴”在边框上。

padding

登录后复制

会增加元素的总尺寸。 <li> 边框 (Border)： 围绕在内边距外面的线。你可以设置它的宽度、样式和颜色。

border

登录后复制

同样会增加元素的总尺寸。 <li> 外边距 (Margin)： 边框外面的空间，用于控制元素与其他元素之间的距离。

margin

登录后复制

不会增加元素的实际尺寸，但会影响它在页面上的位置和与其他元素的间距。 默认情况下，CSS盒模型是

content-box

登录后复制

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

width

登录后复制

和

height

登录后复制

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

padding

登录后复制

和

border

登录后复制

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

<ul> <li>总宽度 =
width
登录后复制
+
padding-left
登录后复制
+
padding-right
登录后复制
+
border-left-width
登录后复制
+
border-right-width
登录后复制
<li>总高度 =
height
登录后复制
+
padding-top
登录后复制
+
padding-bottom
登录后复制
+
border-top-width
登录后复制
+
border-bottom-width
登录后复制
这在进行精确布局时，常常会让人感到头疼，因为每次计算元素总尺寸都要考虑这些额外的部分。

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

box-sizing

登录后复制

属性，其中最常用的值是

border-box

登录后复制

。当你设置

box-sizing: border-box;

登录后复制

时，

width

登录后复制

和

height

登录后复制

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

<ul> <li>总宽度 =
width
登录后复制
<li>总高度 =
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文件，你要找一个特定按钮的样式，那简直是噩梦。因此，一套清晰的文件组织和管理策略是提升开发效率的关键。

<ol> <li>外部样式表优先： 始终优先使用外部CSS文件（通过

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

登录后复制

引入）。这不仅实现了内容与样式的分离，让HTML文件更干净，也让CSS文件可以被多个HTML页面复用，减少了代码冗余。浏览器还会缓存外部CSS文件，提升页面加载速度。

<li> 模块化CSS： 不要把所有CSS都堆在一个文件里。根据功能、组件或页面区域进行拆分。例如：

base.css

登录后复制

：定义全局样式，如字体、颜色变量、重置样式（reset.css 或 normalize.css）。 <li>

layout.css

登录后复制

：定义页面整体布局，如header、footer、main、sidebar等。 <li>

components/button.css

登录后复制

：针对特定组件的样式，如按钮、卡片、表单。 <li>

pages/home.css

登录后复制

：针对特定页面的特殊样式。 <li>

utilities.css

登录后复制

：一些常用的工具类，如清除浮动、隐藏元素等。然后，你可以在主CSS文件（比如

style.css

登录后复制

）中，使用

@import

登录后复制

规则将这些模块化的文件导入进来，或者在HTML中引入多个

<link>

登录后复制

标签。

/* style.css */
@import 'base.css';
@import 'layout.css';
@import 'components/button.css';
/* ... 更多模块 */

登录后复制

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

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

登录后复制

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

<li>命名规范： 遵循一致的命名规范，如BEM（Block Element Modifier）、SMACSS或OOCSS等，能让CSS类名更具语义化，减少冲突，提高可读性。例如，BEM会将一个按钮命名为

.button

登录后复制

，它的变体是

.button--primary

登录后复制

，按钮内的文本是

.button__text

登录后复制

。

<li>注释： 在复杂的CSS文件中，添加清晰的注释说明代码块的功能、目的或任何特殊注意事项，对于团队协作和未来维护至关重要。

<li> 预处理器（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文件。

通过这些策略，我们不仅能写出功能正常的代码，更能写出

以上就是怎么HTML和CSS_HTML与CSS基础结构与样式编写入门教程的详细内容，更多请关注php中文网其它相关文章！