当前位置：首页 > news >正文

前端开发基础：HTML 与 CSS 入门详解

news 来源：原创 2025/9/2 4:48:59

一、HTML 基础

（一）HTML 概述

（二）HTML 标签

标签分类

常用标签详解

（三）HTML 注释

二、CSS 样式

（一）CSS 概述

（二）CSS 引入方式

（三）CSS 选择器

（四）CSS 属性

三、总结

在前端开发领域，HTML 和 CSS 是至关重要的基础技术。HTML 负责构建网页的基本结构，CSS 则用于美化网页，赋予其独特的视觉风格。接下来，我们就依据笔记内容，深入了解这两项技术。

一、HTML 基础

（一）HTML 概述

HTML，即超文本标记语言，是前端开发的核心技术之一。它通过各种标签来划分网页元素，形成文本布局与格式，进而构建出网页的基本框架。HTML 常与 CSS、JavaScript 搭配使用，CSS 用于美化页面，JavaScript 实现动态数据加载，三者协同工作，实现网页的动静结合，提升用户交互体验。

（二）HTML 标签

标签分类

单标签与双标签：标签分为单标签和双标签。单标签仅由一个标签构成，如<img>标签用于插入图像，语法为<img src="图像URL"/> ；双标签则包含起始标签和结束标签，结束标签需在左尖括号后添加/，例如<p>标签用于定义段落，使用时需<p>段落内容</p> 。
块级标签与行内标签：独占一行的块级标签，如h1~h6（定义标题）、<p>（定义段落）、<div>（常用作布局容器）、<hr>（创建水平分隔线）；在一行显示的行内标签，如<a>（定义链接）、<span>（用于组合行内元素）、<img>（插入图像）、<b>/<i>/<u>/<s>（文本格式化标签）。

常用标签详解

结构标签：<head>标签构成 HTML 文档头部，虽其中大部分数据不在页面显示，但包含的元数据、样式表链接等对页面至关重要；<body>标签为主体标签，网页中显示的文本、超链接、图片、表格和列表等内容都必须置于其中。

文本标签：标题标签<hn>（n取值 1 - 6），默认样式加粗左对齐且字号递减，用于定义标题部分，语法格式为<hn 属性="属性值">标题内容</hn>；段落标签<p>用于定义段落；文本格式化标签能实现文本加粗、倾斜、下划线等效果。

链接标签：<a>标签定义链接部分，实现网页跳转，语法为<a href="链接页面的地址" target="链接打开方式">链接对象名称</a> ，如<a href="../照片.rar">下载压缩包</a>。还可通过 CSS 样式text-decoration: none删除超链接下横线，设置鼠标悬停时的颜色变化。

列表标签：有序列表<ol>，列表项目<li>，项目有先后顺序；无序列表<ul>，列表项目同样为<li>，项目无先后顺序。

图像标签：<img>标签用于插入图像，src属性指定图像的 URL 地址，如<img src="图片地址"/>。

表格标签：每个表格必备<table>（创建表格）、<tr>（定义表格行）、<td>（定义表格单元格）标签。<tr>嵌套在<table>中，<td>嵌套在<tr>中，通过设置border属性可添加表格边框。

表单标签：用于收集用户输入数据，如文本框、按钮、下拉菜单等，但笔记中未详细阐述，实际开发中其应用广泛。

（三）HTML 注释

在编写 HTML 代码时，注释不可或缺。使用ctrl +?快捷键可快速添加注释，注释内容不会在页面显示，主要用于解释代码功能、方便代码维护与他人理解。

二、CSS 样式

（一）CSS 概述

CSS，即层叠样式表语言，用于控制网页的样式和布局，包括字体、颜色、背景、边框等。通过不同的引入方式和选择器，可精准地为 HTML 元素应用样式。

（二）CSS 引入方式

行间样式：直接在 HTML 标签的style属性中设置样式，如<p style="color: red;">红色文本段落</p> ，行间样式优先级最高，但不便于样式统一管理。

内部引入：在 HTML 文档的<head>标签内，使用<style>标签定义样式，需结合选择器使用，例如：

<head><style>#myId {color: blue;}</style>
</head>
<body><div id="myId">蓝色文本的div</div>
</body>

外部引入：创建单独的 CSS 文件，将选择器及样式规则写在其中，然后在 HTML 文档的<head>标签内通过<link>标签引入，这是最常用的方式，便于样式的复用和管理，例如：

<head><link rel="stylesheet" href="styles.css">
</head>

（三）CSS 选择器

类选择器：以.开头，用于选择具有相同类名的 HTML 元素，如.myClass { color: green; } ，可选择<div class="myClass">绿色文本div</div>。

id 选择器：以#开头，用于选择特定 id 的 HTML 元素，一个 HTML 文档中 id 应唯一，如#myId { font-size: 16px; } ，对应<div id="myId">字体大小为16px的div</div>。

元素选择器：直接使用 HTML 元素名称作为选择器，会选中页面中所有该类型的元素，如p { text-align: center; } ，使所有段落文本居中。

组合选择器：包括后代选择器（如div p，选择 div 元素内的所有 p 元素）、子选择器（如div > p，仅选择 div 元素的直接子元素 p）、毗邻选择器（如div + p，选择紧接在 div 元素后的 p 元素）、弟弟选择器（如div ~ p，选择 div 元素之后的所有 p 元素）。

选择器优先级：id 选择器 > 类选择器 > 元素选择器，当多个选择器同时作用于一个元素时，优先级高的样式生效；若优先级相同，则遵循就近原则，后定义的样式覆盖先定义的样式。

（四）CSS 属性

边框属性：可设置边框的样式（如实线、虚线、点线等）、宽度和颜色，如border: 1px solid black; 表示设置 1 像素宽的黑色实线边框。

字体属性：控制文字字体（如font-family: Arial, sans-serif; ）、大小（如font-size: 14px; ）、粗细（如font-weight: bold; ）、颜色（如color: #333; ）。

文字属性：设置文字对齐方式（如text-align: left/center/right; ）、文字装饰（如text-decoration: underline; 添加下划线），常用text-decoration: none去掉 a 标签默认下划线；还可设置首行缩进，如text-indent: 2em; 使段落首行缩进两个字符。

背景属性：定义元素的背景颜色（如background-color: #f0f0f0; ）、背景图像（如background-image: url('bg.jpg'); ）等。

盒子模型属性：

外边距（margin）：控制元素与其他元素之间的距离，方向为上、右、下、左（顺时针），可使用margin: 0 auto;实现元素在其父元素中水平居中。
内填充（padding）：控制元素内容与边框之间的距离，顺序同样是上、右、下、左，有多种简写方式，如padding: 10px;（四边均为 10 像素）、padding: 5px 10px;（上下 5 像素，左右 10 像素）。
元素宽度和高度：通过width和height属性设置，box-sizing: border-box;可将元素的内边距和边框包含在宽度和高度内，方便布局计算。

定位属性：包括相对定位（position: relative; ）、绝对定位（position: absolute; ）、固定定位（position: fixed; ）等，用于精确控制元素在页面中的位置。

浮动属性（float）：float: left使元素向左浮动，float: right使元素向右浮动，float: none取消浮动，常用于实现多列布局。

弹性布局属性：使用display: flex;开启弹性布局，结合justify-content: center;（水平居中）、align-items: center;（垂直居中）等属性，可轻松实现元素在容器内的居中对齐。

三、总结

HTML 和 CSS 是前端开发的基石。HTML 搭建网页结构，定义各种元素，为内容呈现提供框架；CSS 则对网页进行精细美化，控制元素样式与布局。掌握 HTML 和 CSS 的基本概念、标签、选择器及属性，是迈向前端开发领域的关键一步。后续可进一步学习 JavaScript 提升网页交互性，深入研究前端框架，不断提升开发技能，打造出更加美观、实用的网页。

一、HTML 基础

（一）HTML 概述

（二）HTML 标签

标签分类

常用标签详解

（三）HTML 注释

二、CSS 样式

（一）CSS 概述

（二）CSS 引入方式

（三）CSS 选择器

（四）CSS 属性

三、总结

相关文章：