【JavaWeb】HTML+CSS 零基础入门详解
目录
前言
结构层 —— HTML：负责页面「骨架与内容」，决定页面有什么，纯静态结构，无样式无交互
样式层 —— CSS：负责页面「美化与布局」，决定页面长什么样，颜色、大小、位置、间距、排版全部由它控制
行为层 —— JavaScript：负责页面「交互与动态效果」（本文不涉及，是后续学习内容）
核心铁律：结构、样式、行为三者分离，是前端开发唯一标准规范。
一、HTML
1.1 什么是HTML？
HTML 全称 超文本标记语言（HyperText Markup Language）
核心定义：用于构建网页结构的标记语言，非编程语言，无逻辑、无运算、无判断，仅用于标记页面内容类型。
超文本含义：超越纯文本，支持图片、视频、音频、链接、表单、按钮等所有多媒体元素。
1.2 HTML 核心语法规则
HTML 所有内容都由标签组成，核心规则：
-
标签分双标签、单标签
-
双标签（闭合标签）：<标签>内容</标签>，如 p、div、h2、a
-
单标签（自闭合）：无内容，无需闭合，如 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;">红色的文字段落</p>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;
}3、ID选择器
页面唯一标识，一个页面只能有一个相同ID，CSS用 #id名 选中，适合单独设置某个唯一模块样式
<div id="box">唯一的盒子模块</div>#box { width: 200px; height: 100px; background-color: #f5f5f5; }2.5 CSS 所有单位详解
-
px 像素：固定单位，网页开发主流单位，精准固定尺寸
-
em：相对父级字体大小，自适应文字
-
rem：相对根字体大小，移动端适配核心单位
-
%：相对父元素尺寸，自适应布局常用
2.6 浮动布局 Float
用于实现多个块级元素同行排列，是传统网页布局核心
浮动特性
-
元素脱离标准文档流
-
块级元素可同行排列
-
支持宽高，排版灵活
清除浮动
浮动子元素会导致父元素高度塌陷，必须清除浮动，万能清除代码：
.clearfix::after{
content: "";
display: block;
clear: both;
}2.7 Flex弹性布局
Flex 是目前网页布局首选，完美解决浮动弊端，轻松实现居中、等分、自适应排列
核心优势
无需清除浮动、自动自适应、一键居中、排列灵活、适配所有屏幕
常用Flex属性
/* 父容器开启弹性布局 */
.box{
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
justify-content: space-between; /* 两端对齐 */
flex-wrap: wrap; /* 自动换行 */
}2.8 常用CSS样式属性
1、文本样式大全
color: #333; /* 文字颜色 */
font-size: 16px; /* 字体大小 */
font-weight: bold; /* 字体加粗 bold/normal */
font-family: "微软雅黑"; /* 字体类型 */
text-align: center; /* 水平对齐 center/left/right */
line-height: 1.8; /* 行高（行间距） */
text-indent: 2em; /* 首行缩进 */
text-decoration: none; /* 去除下划线（a标签常用） */2、盒子尺寸与边框圆角
width: 100%; /* 宽度 */
height: 200px; /* 高度 */
background-color: #f5f5f5; /* 背景色 */
border: 1px solid #eee; /* 边框：粗细 样式 颜色 */
border-radius: 8px; /* 圆角 */
box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 阴影 */3、边距排版核心
/* 外边距 margin：元素与元素之间的距离 */
margin: 10px; /* 上下左右 */
margin: 10px 20px; /* 上下、左右 */
margin: 0 auto; /* 块级元素水平居中万能代码 */
/* 内边距 padding：内容与边框的距离 */
padding: 15px;
padding: 10px 20px 5px 30px; /* 上右下左顺时针赋值 */4、网页居中
/* 1、文字水平居中 */
text-align: center;
/* 2、块级元素水平居中 */
margin: 0 auto;
/* 3、Flex一键水平垂直居中（万能居中） */
display: flex;
justify-content: center;
align-items: center;三、HTML+CSS 小案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML+CSS 终极实战案例</title>
<style>
/* 全局初始化 清除默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f0f7ff;
font-family: "微软雅黑", sans-serif;
}
/* 卡片容器 */
.card {
width: 800px;
margin: 60px auto;
padding: 40px;
background: #fff;
border-radius: 16px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
/* 标题样式 */
.card h2 {
text-align: center;
color: #1f2937;
font-size: 24px;
margin-bottom: 30px;
}
/* 段落样式 */
.card p {
color: #4b5563;
font-size: 16px;
line-height: 2;
text-indent: 2em;
margin-bottom: 20px;
}
/* 高亮文字 */
.card .text-key {
color: #1677ff;
font-weight: bold;
}
/* 鼠标悬浮效果 */
.card:hover {
box-shadow: 0 8px 30px rgba(22, 119, 255, 0.15);
transition: all 0.3s ease;
}
</style>
</head>
<body>
<div class="card">
<h2>HTML+CSS 零基础完整入门总结</h2>
<p>网页开发的基础核心由<span class="text-key">HTML结构层</span>和<span class="text-key">CSS样式层</span>组成，二者各司其职、相互配合，是所有网站、H5页面、小程序页面的底层基础。</p>
<p>HTML专注于搭建网页骨架，通过各类标签定义页面的标题、段落、图片、链接、列表、表单等所有内容结构，决定了网页的内容组成和层级关系。HTML无样式、无交互，仅负责内容的搭建与展示。</p>
<p>CSS专注于网页的美化与布局，通过丰富的样式属性，修改文字颜色、字体大小、行间距、背景、边框、圆角、阴影，同时通过浮动、弹性布局实现页面的整齐排版，让原生单调的网页变得美观、整洁、适配性强。</p>
<p>零基础学习前端，只需吃透标签特性、选择器权重、盒子模型、基础布局四大核心，坚持多敲多练，即可独立完成所有静态网页的开发制作。</p>
</div>
</body>
</html>四、总结
-
HTML = 结构、内容、骨架、语义、标签嵌套
-
CSS = 美化、布局、样式、权重、盒子模型、弹性布局
-
核心思维：结构样式分离、先搭骨架、后做美化、布局优先、细节优化
-
所有标签、属性、样式全部英文小写，不要中文标点
-
CSS 每句样式末尾必须加 分号
-
文件名、路径不要用中文和空格
-
优先练习内部样式，熟练后再用外部独立CSS文件
更多推荐
5
0- 0
已为社区贡献2条内容
所有评论(0)