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

【JavaWeb】HTML+CSS 零基础入门详解

news 2026/6/1 1:52:11

前言

一、HTML

1.1 什么是HTML？

1.2 HTML 核心语法规则

1.3 标准HTML基础结构

1.4 标签三大分类

1、块级元素 block

2、行内元素 inline

3、行内块元素 inline-block

1.5 常用HTML标签

1、标题标签 h1-h6

2、文本段落标签 p + span

3、文本常用修饰标签

4、标签 img/video（单标签）

5、超链接标签 a

6、列表标签

7、表单标签

8、表格标签

9、盒子模型

1.6 HTML5 语义化标签

二、CSS

2.1 什么是CSS？

2.2 CSS 基础语法

2.3 CSS 三种引入方式

优先级规则

1、行内样式（直接写在标签上）

2、内部样式（写在head中）

3、外部样式（独立CSS文件，工作常用）

2.4 CSS基础选择器

1、标签选择器

2、类选择器（最常用）

3、ID选择器

2.5 CSS 所有单位详解

2.6 浮动布局 Float

浮动特性

清除浮动

2.7 Flex弹性布局

核心优势

常用Flex属性

2.8 常用CSS样式属性

1、文本样式大全

2、盒子尺寸与边框圆角

3、边距排版核心

4、网页居中

三、HTML+CSS 小案例

四、总结

前言

结构层 —— HTML：负责页面「骨架与内容」，决定页面有什么，纯静态结构，无样式无交互
样式层 —— CSS：负责页面「美化与布局」，决定页面长什么样，颜色、大小、位置、间距、排版全部由它控制
行为层 —— JavaScript：负责页面「交互与动态效果」（本文不涉及，是后续学习内容）
核心铁律：结构、样式、行为三者分离，是前端开发唯一标准规范。

一、HTML

1.1 什么是HTML？

HTML 全称超文本标记语言（HyperText Markup Language）
核心定义：用于构建网页结构的标记语言，非编程语言，无逻辑、无运算、无判断，仅用于标记页面内容类型。
超文本含义：超越纯文本，支持图片、视频、音频、链接、表单、按钮等所有多媒体元素。

1.2 HTML 核心语法规则

HTML 所有内容都由标签组成，核心规则：

标签分双标签、单标签
1. 双标签（闭合标签）：<标签>内容</标签>，如 p、div、h2、a
2. 单标签（自闭合）：无内容，无需闭合，如 img、br、hr、meta
标签只能嵌套，不能交叉正确：<div><p>内容</p></div>错误：<div><p>内容</div></p>（交叉嵌套，浏览器解析错乱）
全部小写书写：HTML不区分大小写，但行业强制小写，规范统一
属性必须写在开始标签内，属性值双引号包裹
禁止所有中文标点：括号、引号、分号、逗号必须为英文半角符号

1.3 标准HTML基础结构

每一个HTML文件，都必须有一套固定的基础骨架。（！+enter快速生成）

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的第一个网页</title> </head> <body> <!-- 所有网页可见内容，都写在这里 --> 你好，前端入门！ </body> </html>

逐行通俗解释：

<!DOCTYPE html>：文档声明，告诉浏览器当前是HTML5标准页面，缺失会触发浏览器怪异模式，排版错乱
<html lang="zh-CN">：页面根标签，唯一根节点；lang声明页面语言，利于SEO和浏览器翻译
<head>：网页配置区，内容不可见，仅用于给浏览器、搜索引擎提供配置信息
<meta charset="UTF-8">：全局UTF-8编码，彻底解决中文乱码问题，必写
viewport视口标签：移动端适配核心，让网页自适应手机屏幕，禁止默认缩放
<title>：浏览器标签栏标题，影响网站搜索权重
<body>：可视区域，用户看到的所有内容全部放入此处

1.4 标签三大分类

所有HTML标签仅分为三类，掌握特性就掌握了一半网页布局：

1、块级元素 block

核心特性：独占一行、自动换行、支持宽高、支持内外边距、默认沾满父级宽度

常用标签：h1-h6、p、div、ul、ol、li、section、header、footer、hr

使用场景：页面大区块、标题、段落、列表、整体布局

2、行内元素 inline

核心特性：同行并排显示、不独占一行、不支持宽高、边距仅左右生效、高度自适应内容

常用标签：span、a、b、i、u、strong、em、s

使用场景：文本局部修饰、小字链接、文字强调

3、行内块元素 inline-block

核心特性：集两者优点，同行显示 + 支持宽高、边距、边框

常用标签：img、input、button

使用场景：图片、按钮、输入框等需要同行排列且设置尺寸的元素

1.5 常用HTML标签

不用死记所有标签，掌握以下高频标签即可。

1、标题标签 h1-h6

用于页面标题，h1最大最粗，h6最小最细，一个页面只能有一个h1（SEO规范）

<h1>一级标题（页面主标题）</h1> <h2>二级标题（栏目标题）</h2> <h3>三级标题（子标题）</h3>

2、文本段落标签 p + span

p：专属正文段落，自带上下默认边距，用于大段文字排版；

span：无默认样式的行内容器，专门用于局部文字单独修饰

<p>我是完整正文段落，适合文章内容排版</p> <p>今天学习<span style="color:red">HTML+CSS</span>前端基础</p>

3、文本常用修饰标签

<strong>文字加粗（语义强调）</strong> <em>文字斜体（语义强调）</em> <u>文字下划线</u> <s>文字删除线</s>

4、标签 img/video（单标签）

<!-- 网络图片 --> <img src="https://xxx.png" alt="风景图片"> <!-- 本地同级图片 --> <img src="banner.jpg" alt="首页横幅">

易错点：路径错误、文件名中文、后缀大小写错误、文件夹层级写错

5、超链接标签 a

<!-- 普通跳转（当前页面打开） --> <a href="https://www.baidu.com">百度首页</a> <!-- 新窗口打开（最常用） --> <a href="https://www.baidu.com" target="_blank">新窗口打开百度</a> <!-- 空链接（占位，暂无跳转地址） --> <a href="#">空链接按钮</a>

6、列表标签

无序列表、有序列表，常用于导航、清单、图文列表

<!-- 无序列表（默认小圆点） --> <ul> <li>列表内容1</li> <li>列表内容2</li> </ul> <!-- 有序列表（默认数字序号） --> <ol> <li>第一步</li> <li>第二步</li> </ol>

7、表单标签

<form> <p>用户名：<input type="text" placeholder="请输入用户名"></p> <p>密码：<input type="password" placeholder="请输入密码"></p> <p>单选：<input type="radio" name="sex">男 <input type="radio" name="sex">女</p> <p>复选：<input type="checkbox">听歌 <input type="checkbox">看书</p> <p><input type="button" value="普通按钮"></p> <p><input type="submit" value="提交表单"></p> </form>

8、表格标签

9、盒子模型

盒子真实尺寸公式：

真实宽度 = width + 左右padding + 左右border

万能解决适配问题：box-sizing: border-box;让宽高包含边距和边框，布局永不溢出

<div class="header">页面头部</div> <div class="main">页面主体内容</div> <div class="footer">页面底部</div>

1.6 HTML5 语义化标签

替代普通div，让页面结构清晰、利于SEO、适配移动端，企业开发标准

<header> 页面头部区域
<nav> 导航栏区域
<main> 页面主体内容（唯一）
<section> 分区块内容
<article> 文章内容区块
<footer> 页面底部区域

二、CSS

2.1 什么是CSS？

CSS 全称层叠样式表（Cascading Style Sheets）
核心作用：专门用于美化HTML结构，统一控制页面所有元素的颜色、字体、大小、间距、边框、背景、布局位置，实现结构与样式完全分离。
层叠含义：多个样式可叠加作用于同一元素，优先级高的样式覆盖低优先级样式。

2.2 CSS 基础语法

CSS 语法极其简单，由选择器 + 样式声明组成

选择器 { 样式属性: 属性值; 样式属性: 属性值; }

选择器：选中需要美化的HTML元素（精准定位「改谁」）
大括号：包裹所有样式代码
样式属性：需要修改的样式类型
属性值：样式具体参数
分号：单条样式结束标记，规范要求每条必写

2.3 CSS 三种引入方式

CSS 有三种写法，优先级、使用场景各不相同，重点掌握！

优先级规则

行内样式 > 内部样式 > 外部样式

1、行内样式（直接写在标签上）

直接在HTML标签中添加 style 属性，优先级最高，适合临时修改少量样式，不推荐大量使用（代码杂乱）

<p style="color: red; font-size: 16px;"&gt;红色的文字段落&lt;/p&gt;

2、内部样式（写在head中）

在HTML的head标签中，用 style 标签编写CSS，适合单页面样式，新手练习首选

<head> <meta charset="UTF-8"> <title>内部样式示例</title> <style> /* 这里写CSS代码 */ p { color: blue; font-size: 18px; } </style> </head>

3、外部样式（独立CSS文件，工作常用）

单独创建.css后缀文件，通过link引入HTML，适合多页面网站，代码整洁、统一管理样式（企业开发标准写法）

第一步：新建 style.css 文件，写入CSS代码

p { color: green; font-size: 18px; line-height: 1.8; }

第二步：在HTML head中引入文件

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

2.4 CSS基础选择器

选择器的作用：精准选中需要美化的标签，3种最常用基础选择器：

1、标签选择器

直接以HTML标签名作为选择器，选中页面所有同名标签

/* 选中所有p标签，统一设置样式 */ p { color: #333; font-size: 16px; }

2、类选择器（最常用）

自定义类名，自由选中任意标签，灵活度最高，工作使用最多

用法：标签加 class 类名，CSS用.类名选中

<p class="red-text">我是红色文字</p> <p>我是默认文字</p>

.red-text { color: red; font-weight: bold; }