- HTML
- 能够说出Web标签三个组成部分
- html + css JavaScript
- web网页的基本组成部分
- 文本 + 图片 + 超链接 + 视频 + 音频
- 五大常用浏览器以及他们的渲染引擎
- ie浏览器 ：trident
- 火狐浏览器：gecko
- 谷歌浏览器：blink
- safari浏览器：webkit
- 欧朋浏览器：blink
- web标准
- 结构：html
- 样式：css
- 行为：js
- HTML标签
- img标签
- 作用：在网页中显示一张图片
- 属性
- src：图片的路径
- alt：替换文本，只有当图片加载失败时才会显示的文字
- title：图片的标题，鼠标悬停到图片上时才会显示的文字
- width宽度/height高度 ：如果只设置了其中的一个，另一个会等比例缩放
- 注意点：一般只会设置width或者height中的一个，如果同时设置了两个，图片可能会拉伸变形
- 音视频标签（audio和video）
- 作用：在网页中插入音频视频
- 属性
- src：音视频的路径
- controls：播放的控件
- autoplay：自动播放（浏览器一般禁止自动播放音频，视频静音播放）
- loop：循环播放
- 链接标签
- href：告诉浏览器点击后去哪一个网页
- 取值：就是一个路径
- 外部链接：直接写网址即可（需要写完整网址）
- 本地网页：直接写路径
- target：设置跳转方式
- _self：在当前窗口进行跳转，原网页会被关闭（默认值）
- _blank：在新窗口跳转，原网页不会被关闭
- href：告诉浏览器点击后去哪一个网页
- 1. 列表
- 无序列表
- img标签
- 能够说出Web标签三个组成部分
-
-
-
-
-
特点：独占一行; 默认前边有小圆点
-
- 有序列表
-
-
-
-
-
-
-
- 特点： 独占一行;前边默认序号
- 自定义列表
-
-
-
-
-
-
-
- 特点： 独占一行
-
- 2. 表格
- 代码示例
- 代码示例
-
-
-
-
-
- caption：大标题
- th：表头单元格
- cellspacing：单元格与单元格之间的间隙
- cellpadding：边框与内容的间隙
- 合并单元格
- 先确定合并那几个单元格
- 遵循左上原则,确定删除那个,保留
- 跨行(rowspan) 跨列(colspan)
- cellspacing和 cellpadding
- 表单
- 文本框 <input type="text" placeholder="账户">
- 密码框 <input type="password" placeholder="密码">
- 单选框 男 <input type="radio" name="sex" checked> 男
- 多选框 敲代码<input type="checkbox" checked>敲代码
- 文件上传 <input type="file" multiple>
- 按钮
- <input type="submit">
- <input type="reset">
- <input type="button" >
- <button type="submit"></button>
- 下拉菜单
- 代码示例
- 代码示例
-
-
-
-
-
- 文本域
- <texteare></texteare>
- label标签
- 第一种
- <input type="radio" name="sex" checked id="nan"> <label for="nan">男</label>
- 第二种
- <label>
- <input type="radio" name="sex" checked> 男
- <label>
- 第一种
- 文本域
- 无语义标签
- div 独占一行
- span 一行可以显示多个
- 字符实体
-
-
- CSS：层叠样式表（主要美化页面）
- 引入方式：
- 内嵌：
- 内嵌：
- 引入方式：
-
-
-
- 作用范围：当前页面
- 外链式：
- 创建一个后缀为.css的文件
- 通过link标签引入到html文件
- 作用范围：多个页面
- 行内式：
- 在标签内部写入style
- 作用范围：当前标签有效果
-
- 基础选择器：
- 标签选择器：（以标签名作为选择器名称）
- 优点：一次性会选中同一类所有标签，不能差异化设置
- 类选择器：
- 点来定义。class来调用
- 优点： 可以差异化设置;一个标签可以有多个类名;一个类名可以重复使用;
- id选择器：
- #来定义 id属性调用
- 优缺点：一个标签只能有一个id属性，id不可以重复使用
- 通配符选择器：
- *作为选择器名称
- 优缺点：一次性选择当前页面所有标签
- 复合选择器：
- 后代选择器：
- 选择器1 选择器2{css属性名：属性值}
- 子代选择器
- 结构：
- 选择器1>选择器2{css}
- 作用：先通过选择器1找到一堆标签，然后在其中找到选择器2
- 结构：
- 并集选择器：
- 结构：
- 选择器1，选择器2{css}
- 作用：找到选择器1和选择器2对应的标签设置样式
- 注意点：
- 并集选择器可以同时写多个选择器，多种选择器，选择器之间用逗号隔开
- 结构：
- 交集选择器：
- 结构：
- 选择器1选择器2{css}
- 作用：
- 找到页面中国既满足选择器1又满足选择器2的标签，设置样式
- 注意点：
- 交集选择器可以同时写多个选择器，多种选择器，选择器着
- 结构：
- 后代选择器：
- 标签选择器：（以标签名作为选择器名称）
- 字体和文本样式：
- 字号：
- font-size：数值+px
- 粗细：
- font-weight：400（正常）700（加粗）
- 样式：
- font-style：normal和italic
- 字体：
- font-family：多个值，值与值之间要有逗号，最后一个值必须是字体系列
- 首行缩进
- text-indent：数值+px或者2em
- 文本水平对齐方式：
- text-align：left，center，right
- 此属性需要加给父元素（不独占一行的小盒子，文本）
- 大盒子居中：
- margin：0 auto；（div ，h， p， 列表）
- text-align：left，center，right
- 文本修饰：
- text-decoration：
- none（去掉a链接下边的下划线）
- undline
- overline
- line-through
- text-decoration：
- 行高：
- line-height：
- 数值+px
- 纯数字（当前文字大小的倍数）
- 垂直居中：line-height="height"（当前文本）
- line-height：
- 颜色：
- 关键字
- rgb
- rgba（0~255，0~255，0~255，0~1）
- 16进制
- 字号：
- 背景相关属性：
- 使用hover伪类选择器设置标签鼠标的悬停状态
- a:hover{css的属性名：属性值}
- 设置标签的背景颜色和图片
- 背景颜色：
- background-color
- 背景图片：
- background-image：url（图片的路径）
- 背景平铺：
- background-repeat：
- 取值：
- repeat平铺
- no-repeat不平铺
- repeat-x水平方向平铺
- repeat-y垂直方向平铺
- 取值：
- background-repeat：
- 背景位置：
- background-position
- 取值：
- 方位名词：（最多九个位置）
- 水平方向：
- left
- center
- right
- 垂直方向
- top
- center
- bottom
- 水平方向：
- 数字+px（坐标）
- 原点（0，0）盒子的左上角
- x轴
- 水平向右
- y轴
- 垂直向下
- 方位名词：（最多九个位置）
- 取值：
- background-position
- 背景颜色：
- 使用hover伪类选择器设置标签鼠标的悬停状态
- 常见元素的显示模式
- 块级元素
- display：block
- 特点：
- 独占一行
- 宽度默认占满父元素的宽度，高度由内容撑开
- 可以设置宽高
- 行内元素：
- display：inline
- 特点：
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高
- 行内块元素
- display：inline-block
- 特点：
- 一行可以显示多个
- 可以设置宽高
- 块级元素
- 三大特性：
- 继承性：
- 子承父业：子元素有默认继承父元素样式的效果
- 可以继承的常见样式
- color
- font相关属性
- text相关属性
- line-height：行高
- 继承的小应用
- ul { list-style：none； }
- 继承失效的特殊情况
- a标签的颜色会继承失效
- 其实已经继承下来了，但是被浏览器默认设置的样式给覆盖掉了
- h系列标签的font-size会继承失效
- 其实已经继承下来了，但是被浏览器默认设置的样式给覆盖掉了
- div的高度不能继承，但是宽度有继承的效果
- a标签的颜色会继承失效
- 层叠性：
- 给同一个标签设置了相同的属性此时属性会被覆盖写在下面的属性会生效
- 给同一个标签设置了不同的样式此时样式会叠加，最后共同作用在标签上
- 前提：只有当优先级相同时才会比较层叠性
- 优先级：
- 不同选择器的优先级公式
- 继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
- 注意点：
- !important不能提升继承的优先级
- 权重叠加方法
- （0,0,0,0）
- 1.行内样式的个数
- 2、id选择器的个数
- 3、类选择器的个数
- 4、标签选择器的个数
- （0,0,0,0）
- 不同选择器的优先级公式
- 继承性：
- 盒子：
- 盒子实际大小的组成部分
- 左border + 左padding + 内容的宽度 + 右padding + 右border
- 计算盒子的实际大小
- 盒子实际大小 = 内容（content）+ 边框（border）+ 内边距 （padding）
- 不会撑大盒子的特殊情况
- 如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度此时给子盒子设置左右的padding或者左右的border此时不会撑大盒子
- CSS3盒模型的代码
- box-sizing:border-box
- 外边距折叠现象-塌陷现象的解决方法
- 1、给父元素设置border-top或者padding-top
- 2、给父元素设置overflow:hidden
- 3、转换成行内块元素
- 4、设置浮动
- border的单方向设置
- 属性名
- border-方位名词
- top
- right
- bottom
- left
- border-方位名词
- 属性名
- 内边距：padding
- 作用：控制边框与内容之间的作用
- 取值：
- 一个值（上右下左）
- 两个值（上下和左右）
- 三个值（上、左右、下）
- 四个值（上、下、左、右）
- padding的单方向赋值
- padding-方位名词
- 外边距：margin
- 作用：控制边框以外盒子与盒子之间的距离
- 取值
- 一个值（上右下左）
- 两个值（上下和左右）
- 三个值（上、左右、下）
- 四个值（上、下、左、右）
- margin的单方向赋值
- margin-方位名词
- margin的单方向应用
- 水平方向
- margin-left
- 让当前盒子往右移动
- margin-right
- 让右边的盒子往右移动
- margin-left
- 垂直方向
- margin-top
- 让当前的盒子往下移动
- margin-bottom
- 让下面的盒子往下移动
- margin-top
- 去除标签默认的margin和padding
- * {margin：0；padding：0；}
- 水平方向
- margin外边距折叠现象
- margin的合并现象
- 垂直布局的盒子，此时上下的margin会合并
- 两者的距离为margin的最大值
- 解决方法
- 避免就好！！！！
- 垂直布局的盒子，此时上下的margin会合并
- margin的塌陷现象
- 互相嵌套的块级元素，父子元素的margin-top会被合并作用在父元素上
- 导致父元素一起往下移动（塌陷）
- 解决方法
- 1、给父元素设置一个border-top或者padding-top
- 分隔父子元素的margin-top
- 2、给父元素设置overflow：hidden
- 3、转换成行内块元素
- 4、设置浮动
- 1、给父元素设置一个border-top或者padding-top
- 互相嵌套的块级元素，父子元素的margin-top会被合并作用在父元素上
- margin的合并现象
- 行内元素的margin和padding无效的特殊情况
- 水平方向的margin和padding布局有效果！
- 垂直方向的margin和padding布局是无效的！
- 盒子实际大小的组成部分
- 浮动：
- Css书写顺序：浏览器执行效率更高
- 1.浮动/display
- 2.盒子模型：margin border padding 宽度高度背景色
- 3.文字样式
- 结构伪类选择器
- 能够使用结构伪类选择器在HTML中选择元素
- 1.作用与优势
- 作用：根据元素在HTML中的结构关系查找元素
- 优势：减少对于HTML中的依赖，有利于保持代码整洁
- 场景：常用于查找某父级选择器中的子元素
- 2.选择器
- E:first-child{} (匹配父元素中的第一个子元素，并且是E元素)
- E:last-child{} (匹配父元素中的最后一个子元素，并且是E元素)
- E:nth-child(n){} (匹配父元素中的第n个子元素，并且是E元素)
- E:nth-last-child(n){} (匹配父元素中的倒数第n个子元素，并且是E元素)
- 3.注意点
- 1.n常为0，1，，2，3，4，5，6，7，8，9
- 2.通过n可以组成常见公式
- 偶数：2n、even
- 奇数：2n+1、2n-1、odd
- 找到前五个：-n+5
- 找到后五个：n+5
- 1.作用与优势
- （了解）nth-of-type结构伪类选择器
- 只在父元素的同类型（E）子元素范围中，匹配第n个
- 区别
- :nth-child → 直接在所有孩子中数个数
- :nth-of-type → 先通过该 类型 找到符合的一堆子元素，然后在这一堆子元素中数个数
- 能够使用结构伪类选择器在HTML中选择元素
- 伪元素：
- 能够使用伪元素在网页创建内容
- 区别
- 1.元素：HTML设置的标签
- 2.伪元素：由css模拟出的标签效果
- 种类
- ：before 在父元素内容的最前添加第一个伪元素
- ：after 在父元素内容的最后添加一个伪元素
- 注意点
- 必须设置content才能生效
- 伪元素默认是行内元素
- 标准流
- 能够认识 标准流 的默认排布方式及其特点
- 定义：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
- 常见标准流排版规则
- 1.块级元素：从上往下，垂直布局，独占一行
- 2.行内元素或行内块元素：从左往右，水平布局，空间不够自动折行
- 浮动
- 目标：能够认识使用浮动的作用，了解浮动的特点
- 学习路径
- 1.浮动的作用
- 早期作用：图文环绕
- 现在的作用：网页布局
- 2.浮动的代码
- 属性名：float
- 属性值：
- left：左浮动
- right：右浮动
- 3.浮动的特点
- 1.浮动元素会脱离标准流(简称：脱标)，在标准流中不占位置相当于从地面飘到了空中
- 2.浮动元素比标准流高半个级别，可以覆盖标准流中的元素
- 3.浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
- 4.浮动元素有特殊的显示效果
- 一行可以显示多个
- 可以设置宽高
- 注意点
- 浮动的元素不能通过text-algin:center 或者margin：0 auto
- 1.浮动的作用
- 清除浮动
- 能够认识清除浮动的目的，并且能够使用清除浮动的方法
- 学习路径
- 清除浮动的介绍
- 清除浮动的方法
- 清除浮动的介绍
- 含义：清除浮动带来的影响
- 影响：如果子元素浮动了，此时子元素不能撑开标准流的父元素
- 原因
- 子元素浮动后脱标，不占位置
- 目的
- 需要父元素有高度，从而不影响其他网页元素的布局
- 含义：清除浮动带来的影响
- 清除浮动的方法
- 1.直接设置父元素高度
- 优点：简单粗暴，方便
- 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块
- 2.额外标签法
- 操作：
- 1. 在父元素内容的最后添加一个块级元素
- 2. 给添加的块级元素设置 clear:both
- 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
- 操作：
- 3.单伪元素清除法
- 操作：用伪元素替代了额外标签
- 优点：项目中使用，直接给标签加类即可清除浮动
- 4.双伪元素清除法
- 优点：项目中使用，直接给标签加类即可清除浮动
- 5.给父元素设置overflow : hidden
- 操作
- 1. 直接给父元素设置 overflow : hidden
- 优点：方便
- 定位：
- 相对定位：
- 相对于自己之前的位置进行定位
- 代码：position：relative
- 特点：
- 需要配合方位属性进行移动
- 相对于自己之前的位置进行移动
- 在页面中没有脱离标准流
- 应用场景：
- 配合绝对定位（子绝父相）
- 用于小范围的移动
- 注意点：
- 如果left和right都在以left为准
- 如果top和bottom都在以top为准
- 绝对定位：
- 先找已经定位的父级，如果有这个父级就以这个父级为参照物，如果没有则以浏览器窗口为参照物进行定位
- 代码：position：absolute
- 特点：
- 脱标不占位
- 需要配合方位属性进行移动
- 默认相对于浏览器可视区域进行移动
- 居中：
- 先让盒子往右移动父盒子的一半
- 普通做法：margin-left:负的盒子的宽度的一半
- 缺点：子盒子宽度变化后需要重新更改代码
- 优化做法：transform：translate（-50%，-50%）
- 优点：表示沿着x轴和y轴始终移动自己宽度的一半，子盒子宽度改变不需要更改代码
- 先让盒子往右移动父盒子的一半
- 相对定位：
-
- 固定定位：
- 相对于浏览器进行定位移动
- 代码：position：fixed
- 特点：
- 需要配合方位属性实现移动
- 相对于浏览器可视区域进行移动
- 在页面不占位置已经脱标
- 默认情况下定位的盒子，后来者居上，若要调整则使用z-index：数值越大显示顺序越靠上。z-index属性必须配合定位使用才能生效
- 固定定位：
- 装饰：
- 基线：浏览器文字类型元素排版中存在用于对齐的
- 垂直对齐方式：
- 属性名：vertical-align
- 属性值：
- baseline：默认基线对齐
- top：顶部对齐
- middle：中部对齐
- bottom：底部对齐
- 项目中vertical-align可以解决的问题
- 1.文本框和表单按钮无法对齐问题
- 2. input和img无法对齐问题
- 3. div中的文本框，文本框无法贴顶问题
- 4. div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
- 5. 使用line-height让img标签垂直居中问题
- 光标类型：
- 场景：设置鼠标光标在元素上时显示的样式
- 属性名：cursor
- 属性值：
- default：默认值，通常是箭头
- pointer：小手效果，提示用户可以点击
- text：工字型，提示用户可以选择文字
- move：十字光标，提示用户可以移动
- 边框圆角：
- 场景：让盒子四个角变得圆润，增加页面细节，提升用户体验
- 属性名：border-radius
- 取值：数字+px、百分比
- 赋值：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角
- overflow:
- visible: 默认值溢出部分可见
- hidden:溢出部分隐藏
- scroll：添加双向滚动条
- auto：添加竖向滚动条有无溢出均添加
- 元素本身隐藏：让某元素本身在屏幕中不可见：
- visibility：
- hidden占位的隐藏
- display：
- none：不占位的隐藏
- visibility：
- 链接伪类选择器：
- a:link：选中a链接未访问过的状态
- a:visited：选中a链接后访问过的状态
- a:hover：选中鼠标悬停的状态
- a:active：选中鼠标按下的状态
- 焦点伪类选择器：
- 场景：用于选中元素获取焦点时状态，常用于表单控件
- 选择器语法：input：focus{background-color：skyblue}
- 效果：表单控件获取焦点时会默认显示外部轮廓线
- 属性选择器：
- 场景：通过元素上的HTML属性来选择元素，常用来选择input标签
- 语法：
- 1.E[attr] :选择具有attr属性的E元素
- 2.E[attr=“val”]：选择具有attr属性并且属性值等于val的E元素
- 精灵图：
- 优点：减少服务器发送次数，减轻服务器压力，提高页面加载速度
- 步骤：
- 1.创建一个盒子，设置盒子的尺寸和小图尺寸相同
- 2.将精灵图设置为盒子的背景图片
- 3.修改背景图片位置：分别取负值设置给background-position：；
- 背景图片大小：
- 作用：设置背景图片的大小
- 语法：background-size：宽度 高度
- 取值：
- 数字+px：简单方便，常用
- 百分比：相对于当前盒子自身的宽高百分比
- contain：包含将背景图片等比例缩放，直到不会超出盒子的最大
- cover：覆盖将背景图片等比例缩放，直到刚好填满整个盒子没有空白
- 文字阴影：
- 作用：给文字添加阴影效果，吸引用户注意
- 属性名：text-shadow
- 取值：
- h-shadow：必须水平偏移量，允许负值
- v-shadow：必须垂直偏移量，允许负值
- blur：可选，模糊度
- color：可选，阴影颜色
- 阴影可以叠加设置，每组阴影取值之间以逗号隔开
- 盒子阴影：
- 作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节
- 属性名：box-shadow
- 取值：
- h-shadow：必须水平偏移量，允许负值
- v-shadow：必须垂直偏移量，允许负值
- blur：可选，模糊度
- spread：可选，阴影扩大
- color：可选，阴影颜色
- inset：可选，将阴影改为内部阴影
- 阴影可以叠加设置，每组阴影取值之间以逗号隔开
- 过渡：
- 让元素的样式慢慢的变化。常配合hover使用，增强网页交互体验
- 属性名：transition
- 取值：
- 过渡的属性：all（所有能过渡的属性都能过渡）
- 过渡的时长：数字+s（秒）
- 注意点：
- 1.过渡需要：默认状态和hover状态样式不同，才能有过渡效果
- 2.transition属性给需要过渡的元素本身添加
- 3.transition属性设置在不同状态中，效果不同
- （1）给默认状态设置，鼠标移入移出都有过渡效果
- （2）给hover状态设置，鼠标移入有过渡效果，移除没有过渡效果
- 操作
- 1.直接设置父元素高度
- Css书写顺序：浏览器执行效率更高
-
3460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
