摘要大家好这篇是全网最细、最适合零基础、最适合复习的前端 HTMLCSS 完整学习笔记。我把所有知识点100% 整理、扩充、排版内容覆盖网页基础、HTML 语法、常用标签、CSS 基础、选择器、样式、盒子模型、浮动、定位、CSS3、Flex、移动端、响应式、Bootstrap、工程化技巧。不管你是初学前端、备考、面试、复习这一篇完全够用。一、网页与 HTML 核心基础1.1 什么是网页 / 网站网站在互联网上使用 HTML 等规则制作的用于展示内容的网页集合。网页构成网站的基本单元由文字、图片、链接、音频、视频组成。网页文件后缀.html/.htm所以网页也叫 HTML 文件。网页必须通过浏览器才能解析并显示。1.2 什么是 HTMLHTML HyperText Markup Language 超文本标记语言HTML不是编程语言是标记语言。核心用标签描述网页结构。“超文本” 两层含义超越文本可以插入图片、声音、视频、动画。超级链接可以从一个页面跳转到另一个页面。1.3 HTML 基本语法标签由尖括号 包裹如html。绝大多数标签是双标签开始标签 结束标签如div /div。少数是单标签自成闭合如br/img/input/。1.4 标签之间的关系包含关系嵌套head title/title /head并列关系同级head/head body/body1.5 HTML 骨架任何网页都必须有以下 4 组标签标签作用说明html根标签整个页面最大的标签head网页头部存放配置信息title网页标题浏览器标签栏显示body网页主体所有可见内容都写这里!DOCTYPE html html langzh-CN head meta charsetUTF-8 title标题/title /head body 内容 /body /html1.6 VS Code 快速开发技巧新建文件Ctrl N保存Ctrl S→ 必须存为.html快速生成骨架输入!→ 按Tab选中相同单词Ctrl D全局替换Ctrl H视图放大 / 缩小Ctrl / -1.7 网页头部必备配置1.语言设置html langzh-CN 中文 html langen 英文作用帮助浏览器、搜索引擎识别页面语言。2.字符集防乱码meta charsetUTF-8必须写否则会出现中文乱码。统一使用UTF-8万国码。二、HTML 常用标签2.1 标题标签 h1~h6h1一级标题/h1 h2二级标题/h2 ... h6六级标题/h6特点文字加粗独占一行从 h1 到 h6 字号逐渐变小2.2 段落标签 pp这是一个段落/p特点文本自动根据浏览器宽度换行段落之间有默认空隙2.3 换行标签 brbr/强制换行单标签不会产生垂直间距2.4 无语义布局盒子div块级盒子一行只能放一个用来布局。span行内盒子一行可以放多个用来装文字。2.5 图片标签 img重点img src图片路径 alt替换文字 title提示文字 width500属性src必须属性图片路径alt图片加载失败时显示的文字title鼠标放上去显示的提示width宽度height高度border边框2.6 路径必会相对路径同级pic.jpg下一级images/pic.jpg上一级../pic.jpg绝对路径本地完整路径D:\web\pic.jpg网络地址https://xxx.jpg2.7 超链接标签 a重点a href跳转地址 target_blank文字或图片/a属性href必须属性目标地址target_blank新窗口打开target_self当前窗口打开默认链接分类外部链接https://www.baidu.com内部链接index.html空链接#下载链接指向文件 / 压缩包锚点链接跳转到页面指定位置2.8 表格标签 table结构table tr th表头/th /tr tr td单元格/td /tr /table常用属性border边框align对齐cellpadding内容与边框距离cellspacing单元格之间距离border-collapse: collapse合并细线边框单元格合并跨列合并colspan2跨行合并rowspan2口诀目标单元格写合并删除多余单元格2.9 无序列表 ul最常用ul li列表项1/li li列表项2/li /ulul 里面只能放 lili 里面可以放任何标签去掉小圆点list-style: none2.10 表单标签重点表单 收集用户信息 由三部分组成表单域、表单控件、提示文字表单域 formform action提交地址 methodpost/get 所有表单元素 /formaction后台处理地址method提交方式 get /post输入框 input单标签input typexxxtype 属性text文本框password密码框radio单选按钮checkbox复选框submit提交按钮reset重置按钮button普通按钮file文件上传input 其他属性name控件名称后台用value默认值checked默认选中maxlength最大输入长度label 标签增强体验label forman男/label input typeradio idman点击文字自动选中控件。下拉菜单 selectselect option北京/option option selected上海/option /selectselected默认选中文本域 textareatextarea rows5 cols20 默认文字 /textarea多行输入实际开发用 CSS 控制大小2.11 注释与特殊字符注释!-- 注释内容 --快捷键Ctrl /常用特殊字符空格nbsp; 小于号lt;大于号gt;版权copy;人民币yen;三、CSS 基础网页美容师3.1 什么是 CSSCSS Cascading Style Sheets 层叠样式表作用设置文字样式设置图片样式设置布局与外观实现结构 HTML 与样式 CSS 分离3.2 CSS 语法选择器 { 属性: 值; 属性: 值; }选择器选中要改的标签属性与值键值对必须以分号结束3.3 CSS 三种引入方式行内样式不推荐div stylecolor:red文字/div内部样式表head style div { color: red; } /style /head外部样式表开发首选link relstylesheet hrefstyle.css3.4 Chrome 调试工具必会打开F12或 右键检查左侧HTML 结构右侧CSS 样式黄色叹号样式写错无样式类名错误 / 引入失败四、CSS 选择器4.1 基础选择器选择器写法特点权重标签选择器p {}选中所有同类标签1类选择器.red {}可重复使用最常用10id 选择器#nav {}唯一只能用一次100通配符* {}选中所有元素0多类名使用div classred font20文字/div4.2 复合选择器后代选择器ul li {}选中所有后代儿子、孙子…子元素选择器div p {}只选亲儿子并集选择器div, p, span {}同时选中多组标签链接伪类选择器必须按顺序a:link未访问a:visited已访问a:hover鼠标经过最重要a:active鼠标按下focus 伪类input:focus {}选中获得光标的表单4.3 CSS3 新增选择器属性选择器input[typetext] {} div[class^icon] {}结构伪类选择器li:nth-child(2n) {}2n 偶数2n1 奇数伪元素div::before {} div::after {}行内元素必须有content常用作清除浮动、装饰、小图标五、CSS 文字与文本样式5.1 字体样式font-family字体font-size大小font-weight粗细normal 400bold 700font-style斜体复合写法必须掌握font: 样式 粗细 大小/行高 字体;必须保留大小 和 字体5.2 文本样式color颜色text-align对齐 left /center/righttext-indent首行缩进 2emtext-decoration装饰none去掉下划线underline下划线line-height行高六、元素显示模式6.1 三种模式块级元素div p h1 ul li独占一行可设宽高可嵌套任意标签行内元素span a em strong一行多个不能设宽高只能嵌套行内 / 文字行内块元素img input td一行多个可设宽高6.2 模式转换转块级display: block转行内display: inline转行内块display: inline-block七、CSS 背景样式background: 颜色 图片 平铺 滚动 位置;background-color背景色background-image背景图background-repeatno-repeat 不平铺repeat-x 横向平铺background-position位置background-attachment: fixed固定背景background:rgba(0,0,0,0.3)半透明八、CSS 三大特性层叠性样式冲突 →就近原则后面覆盖前面。继承性子元素继承父元素的文字样式。优先级权重从低到高 继承 标签 类 / 伪类 id 行内 !important复合选择器权重会叠加但不会进位。九、盒子模型网页布局核心所有 HTML 标签都是矩形盒子。 盒子 内容 内边距 边框 外边距9.1 边框 borderborder: 1px solid red;单边border-topborder-rightborder-bottomborder-left圆角border-radius: 50%;正方形 → 圆形9.2 内边距 padding内容与边框之间的距离。 简写顺序上 右 下 左⚠️ 注意padding 会撑大盒子。9.3 外边距 margin盒子与盒子之间的距离。块级盒子水平居中width: xxx; margin: 0 auto;9.4 清除默认内外边距* { margin: 0; padding: 0; }9.5 CSS3 盒子模型不会撑大box-sizing: border-box;width 包含 border padding开发必用9.6 盒子阴影box-shadow: 水平 垂直 模糊 大小 颜色 inset;十、浮动 float布局神器10.1 浮动特点脱标脱离标准流不占位置浮动元素贴靠在一起任何元素浮动后都具有行内块特性10.2 浮动布局规则父级标准流排上下子级浮动排左右一个浮动全都浮动10.3 清除浮动解决父级高度塌陷方法额外标签法父级 overflow:hidden伪元素清除浮动推荐.clearfix::after { content: ; display: block; clear: both; height: 0; visibility: hidden; } .clearfix { *zoom: 1; }十一、定位 position精准摆放定位 定位模式 边偏移top/left/bottom/right11.1 四种定位静态定位 static默认无效果。相对定位 relative相对于自己原来位置移动不脱标保留位置做绝对定位的父级绝对定位 absolute相对于最近的有定位的祖先移动脱标不占位置无定位祖先 → 相对浏览器固定定位 fixed相对于浏览器可视区滚动页面不动脱标11.2 子绝父相最重要口诀子绝对定位父相对定位作用子元素自由移动父元素约束范围。11.3 层级 z-indexz-index: 999;数值越大越在上只有定位元素有效十二、元素显示与隐藏display: none隐藏不占位置最常用visibility: hidden隐藏保留位置overflow: hidden隐藏超出盒子的内容十三、CSS3 高级特性13.1 2D 转换 transform移动transform: translate(x, y);百分比相对于自身。旋转transform: rotate(45deg);缩放transform: scale(0.8);中心点transform-origin: center bottom;综合写法位移永远放前面13.2 过渡 transitiontransition: all 0.5s;13.3 动画 animation定义动画keyframes move { 0% { transform: translate(0); } 100% { transform: translate(100px); } }使用动画animation: move 2s infinite;13.4 3D 转换透视perspective3D 呈现transform-style: preserve-3d十四、HTML5 新特性14.1 语义化标签header头部nav导航section区域article文章aside侧边栏footer底部14.2 多媒体视频video srcxxx.mp4 controls muted autoplay音频audio srcxxx.mp3 controls谷歌浏览器视频静音才能自动播放。14.3 新增 input 类型emailurldatenumbersearchcolor14.4 新增表单属性required必填placeholder提示文字autofocus自动聚焦multiple多文件上传十五、移动端开发核心15.1 视口 viewportmeta nameviewport contentwidthdevice-width, user-scalableno, initial-scale1.015.2 适配方案rem 适配rem 相对于 html 字体大小的单位。flexible.js淘宝方案自动把屏幕分为 10 等份。vw 适配1vw 屏幕宽度的 1%。15.3 二倍图高清屏幕使用 2 倍图避免模糊。15.4 移动端常用样式box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-appearance: none;十六、Flex 布局移动端首选16.1 原理给父盒子加display: flex控制子元素排列。16.2 父元素属性flex-direction主轴方向justify-content主轴对齐align-items侧轴对齐单行align-content侧轴对齐多行flex-wrap是否换行16.3 子元素属性flex: 1占满剩余空间align-self单独对齐order调整顺序十七、响应式 Bootstrap17.1 媒体查询media screen and (min-width:768px) { 样式 }17.2 Bootstrap移动优先12 列栅格系统容器.container/.container-fluid列类.col-xs-.col-sm-.col-md-.col-lg-十八、前端工程化实战技巧CSS 初始化清除默认样式精灵图减少 HTTP 请求字体图标不失真、可改色SEO 三要素title / description / keywordsfavicon.ico网站图标十九、完整学习路线HTML 结构 → 会写页面骨架CSS 样式 → 会美化页面浮动 定位 → 会 PC 端布局CSS3 → 会做动效Flex → 会移动端布局响应式 Bootstrap → 会做适配页面这份前端学习内容全面覆盖了 HTML 结构、CSS 样式、布局核心、CSS3 动效、Flex 弹性布局、移动端适配与响应式开发从最基础的网页概念、标签语法、选择器样式到浮动、定位、盒子模型这些布局关键再到移动端与工程化实战是一套完整且能直接落地的前端入门体系。只要你按顺序一步步理解、动手练习不用死记硬背也能快速掌握。前端学习没有那么难坚持写、坚持练、多做页面你很快就能独立做出完整网页越来越自信越学越有成就感继续加油你一定可以稳稳学会、学好
