这篇博客全面总结了Web前端开发中的重要知识点，包括HTML的基础标签、CSS的引入方式、选择器、布局和动画，以及JavaScript的基础、事件处理、DOM操作、移动端适配等内容。还介绍了Vue.js的组件化开发、路由、状态管理和API使用，以及前端优化和适配方案。文章深入浅出，适合前端开发者巩固和提升技能。
HTML
学习HTML 排版、媒体、链接 等基础标签，完成 基础网页 的开发
1. 排版标签：
• 标题h系列、段落p、换行br、水平线hr
2. 文本格式化标签：
• 加粗strong、下划线ins、倾斜em、删除线del
3. 图片标签：
• img标签 + src属性 + alt属性 + title属性 + width属性 + height属性
4. 路径：
• 相对路径：同级目录 + 下级目录 + 上级目录
5. 音频标签、视频标签：
• audio标签、 video标签 + src属性 + controls属性
6. 链接标签：
• a标签 + href属性 + target属性
能够使用 表单相关标签和属性，实现网页中表单类网页结构搭建
1. input系列标签
( value属性是给button命名)
(单选功能默认选中 并且提交需要name属性)
常用的属性
placeholder 提示用户输入的文本类型
checked 默认选中
select下拉菜单标签( option属性就是下拉的每个内容 selected下拉默认选中)
Textarea 文本域标签 ( cols文本域可见宽度 rows本文与可见行数 )
lable 标签 可以使单选框点字也可以选中 需要写在lable里面
2. button按钮标签
3. select下拉菜单标签
4. textarea文本域标签
5. label标签
包裹单选框实现点文字选中
有语义的布局标签（了解）
列表标签
无序列表
有序列表
自定义列表
表格标签
标题与表头
单元格合并
常见字符实体
HTML的空格合并现象
如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格
场景：在网页中展示特殊符号效果时，需要使用字符实体替代
<!DOCTYPE html>文档类型声明 告诉浏览器网页的HTML版本
<html lang=’en’>标识网页使用的语言 en代表英文
Utf-8 代表的是网页的编码
css
CSS引入方式
基础选择器
字体和文本样式
字体样式和文本样式
字体样式
字体大小: font-size (取值px)
字体粗细: font-weight (取值400正常 取值700 加粗)
字体样式: font-style (em 斜体 i 也是斜体 italic倾斜)
字体类型: font-family ( 宋体)
字体类型: font属性连写(复合属性)
文本样式
文本缩进: text-indent (取值em或 px 一般用em 一个字为1em)
文本水平对齐: text-align (取值 左对齐:left 右对齐:right 居中对齐:center)
文本修饰a标签: text-decoration (underine 下划线 line-through 删除线 none去掉)
标签水平居中: margin: 0 auto (标签水平居中)
line-height 行高
让单行文字垂直居中可以设置line-height:文字父元素高度
网页精准布局的时候,会设置line-height: 1 取消上下的间距
选择器进阶
后代选择器: 空格 (所有的孩子)
div p {
color:red
}
子代选择器: > (只选中孩子,不会选孙子)
div > a{
color:red
}
并集选择器: , (多组的标签 设置相同,选择多个标签,设置不同的样式)
P , h1 , div ,span {
color:red
}
交集选择器: 紧挨着
p.box{
color:red
}
伪类选择器: :hover
a:hover{
color:red
}
背景的相关属性
背景颜色: background-color (bgc)
背景图片: background-image (bgi)
背景平铺: background-repeat (bgr) [取值有:repeat 默认值 水平垂直都平铺 no-repeat 不平铺 repeat-x X轴平铺 repeat-Y Y轴平铺 ]
背景位置: background-position (bgp) (水平方向位置,垂直方向位置)
背景图片大小: background-size: 宽度, 高度 取值:[1.数字+px 2.百分比 3.contain背景图片比例缩放 4. cover 覆盖,将背景图片等比例缩放 填满盒子 ]
背景相关属性连写: 这几个属性连着写
元素的显示模式
块级元素:宽度是父元素的宽度,高度内容撑开,独占一行,可以设置宽高.例div, p, h
行内元素: 内容撑开,一行显示多个,不可以设置宽高. 例: a, span, b ,u ,i
行内块元素: 一行显示多个 可以设置宽高 例:input button select
显示模式转换
display: block 转换成块级元素
display: inine-block 转换成行内块元素
display:inine 转换成行内元素
HTML嵌套规范
块级元素一般作为大容器 可以嵌套文本 块级元素 行内元素 行内块等
但是 p 标签不可嵌套 div p h 块级元素
a标签可以嵌套任意元素
但是不能嵌套a 标签
css优先级
CSS 三大特性: 继承性 层叠性 优先级
优先级的排列: 继承 < 通配符 < 标签选择器 < 类选择器< id选择器 < 行内样式 < !important
!important写在属性的后面 分号前面
!important不能提升继承的优先级 只要是继承优先级最低
实际开发不建议使用!important
盒子模型border
border-width 边框粗细
border-style 边框样式 实线solid 虚线dashed 点线dotted
border-color 边框颜色 颜色取值
复合属性: border: 1px solid #000
1.加了border的盒子会把盒子模型变大 需要使用css3的特性 內减 box-sizing : border-box
2.清除默认的内外边距
* {
margin: 0
padding: 0
}
去掉列表小圆点
ul {
list-style: none
}
盒子模型的塌陷问题
场景 :互相嵌套的两个块级元素 子元素的margin-top会作用在父元素上
结果 :导致父元素一起往下移动
解决办法 :
1.给父元素设置overflow-hidden(解决外边距塌陷：父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距塌陷。)
2.转成行内块元素
3.设置浮动float-left
4.给父元素添加boeder属性
5. 调用clearfix
行内标签
如果想要通过margin或 padding 改变行内标签的垂直位置无法生效
行内标签的margin-top和bottom不生效
padding-top 或bottom不生效
就需要加行高了 line-height: 100px
哪些情况需要清除浮动？
父级无高度（带来高度塌陷问题）；
子盒子浮动了（因为脱标问题）；
影响下面的布局（因为脱标问题）；
什么是高度塌陷？
父元素高度自适应，子元素添加浮动后，造成父元素高度为0，称为高度塌陷问题。
最低0.47元/天 解锁文章
扫一扫
930
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
