- html 网页的结构
- 标题标签 h1-h6
- 段落标签 p
- 换行标签 br
- 《列表标签》
- 《超链接》
- 《路径》
- 《图片》
- 《块元素》
- 《表格》
- css 网页的表现
- 样式表
- 选择符
- border’边框
- 类选择符
- 包含选择符 后代选择符
- 群组选择符
- 通配符 *
- 伪类选择符
- 选择器权重
- 背景属性
- 文本文字
- 继承的补充
- PC端网页布局
- 列表属性
- 三角形
- 浮动
- 盒模型
- 《表单》
- 《省略号》
- 《布局》
- 《元素分类》
- 《元素转换》
- 对齐
- 《去除图片之间的间隔》
- 《置换元素》
- 定位
- 《元素的堆叠顺序》
- 《元素水平居中》
- 《透明度》
- 《锚点》
- 自适应
- 《清除浮动》
- 《伪元素》
- 《计算函数》
- 《图片整合》
- BFC
- BFC的布局规则
- 阴影
- 《圆角》
- 《过度》
- 2D转换
- 3D转换
- 动画
- 多列
- 语义化标签
- 多媒体
- html5表单
- 线性渐变
- 重复线性渐变
- 图片边框
- 结构伪类选择符
- 兄弟选择符
- 属性选择器
- css3中width新增了属性值min-content、max-content、fit-content、fit-available
- 伪类选择符
- FLEX布局弹性和布局
- 怪异盒模型
- 媒体查询
- grid 布局 网格布局 具有行和列的概念
html 网页的结构
标签 <标签名></标签名>
分类 双标签 <标签名>内容</标签名>
单标签 <标签名> 或者 <标签名 />
文本类型标签
标题标签 h1-h6
- 双标签
2. 独占一行
3. 从上到下越来越小，重要程度越来越低
4. 有间隙
h1 只能有一个 seo 优化
段落标签 p
- 双标签
2. 独占一行
3. 有间隙
4. 不可以主动换行
换行标签 br
- 单标签
加粗 b strong
1. 双标签
2. 不独占一行
3. 没有间隙
推荐strong 语义化 为了语气而强调
倾斜 i em
1. 双标签
2. 不独占一行
3. 没有间隙
推荐em 语义化
上标 sup
下标 sub
场景 公式 下标 引用
转义 1. 空格
2. < <
3. > >
4. ©
水平线 hr
《列表标签》
有序列表
ol li
start
type
2. 无序列表
ul li
type
3. 自定义列表
dl dt dd《超链接》
a
- href 跳转链接
- title 超链接的提示信息
- target 跳转页面的打开方式
- _self 当前页面打开 默认值
- _blank 跳转到新窗口打开
《路径》
- 上级路径 ../
2. 同级路径 ./ 或者直接写
3. 下级 先找到同级 再找到下级《图片》
img
src 图片地址 (必须 可以写空)
alt 图片丢失的提示文字 盲人的提示文字 seo (必须 可以写空)
title 图片的提示信息
《块元素》
div
1. 双标签
2. 独占一行
span 文本块
1. 双标签
2. 不独占一行
《表格》
table tr td
tr 每一行
td 单元格
width 表格的宽度
height 表格的高度
border 边框的宽度
cellspacing 单元格和单元格之间的距离
cellpadding 单元格和内容的距离
align 水平对齐方式
left 靠左 默认值
center 居中
right 靠右
valign 垂直对齐方式
top 靠上对齐
middle 居中 默认值
bottom 靠下对
table 表格 colspan 跨列
。 rowspan 跨行
跨行合并行
跨列合并列
合并单元格 1. 属性要加在左上角的元素<br /> 2. 属性值表示要合并的行数或列数<br /> 3. 删除合并的单元格
《表格的补充》
- border-spacing 设置相邻单元格的边框间的距离
必须给table 加
合并相邻单元格间距
2. border-collapse 决定表格的边框是分开的还是合并的
collapce 合并
separate 不合并
必须给table加
表格有collapse border-spacing 会无效
3. empty-cells 是否显示表格中的空单元格
hide 隐藏
show 显示5
table-layout 表格布局算法
auto 默认 表格宽度有内容物决定
fixed 宽度和内容无关 固定宽度 渲染速度会更快
1. caption 表格标题
必须是table的第一格元素
属性 caption-side：top/bottom/left/right
只有火狐浏览器（firefox）看看而已用left/right
2. 《th表头标题》
自动加粗居中效果
3.数据行分组
thead表头
tbody表体
tfoot 表尾
4. 数据列分组
colgroup span=’value’
写在table最上面
结合rules属性：规定内测边框的那个部分是可见的<br /> rules=‘’<br /> groups 位于行组和列组的线条<br /> rows 每行之间的分隔线<br /> cols 每列之间的分隔线<br /> none 没有<br /> all 位于行和列之间的线条<br />colgroup：nth-of-type（num）
css 网页的表现
写法 选择器 声明
选择器: 表示选中的元素
声明 : 给元素添加的样式
{
属性: 属性值;
属性1: 属性值1;
}
1. 属性值结束加分号
2. 所有的符号要是英文
3. 属性和属性值中间冒号 再写空格
样式表
内部样式表
html 中 写style标签 写在head标签的最下面
style里面不允许写标签, 只允许写css
先有结构(html),再有表现(css)
2. 外部样式表
写在css文件中,再引入到html文件中
引入方式: 1.link href属性引入
2. style标签中用@import url();引入
@import url(); url()后面必须有分号
@import 和 url中间有空格
link 和 @import 区别
1. link 是xhtml 来的, @import 是css提供的
2. link 是下载的时候加载, @import 是下载后加载
3. link 可以被js识别, @import 不可以
3. 内联样式表
html 中 用style属性写在标签中, 属性值就是css样式表权重
内联样式表最大
内部样式表和外部样式表 谁写在下面.谁权重高
同一个元素如果有多个选择器选中 a. 属性相同 谁权重高选谁
b. 属性不同, 叠加
选择符
- 元素选择符 标签 div p span
2. 类选择符 html 中 用属性class绑定名字 css中用 .名字
eg .p 类选择符 p 元素选择符
.box 类选择符 box 元素选择符
命名: 1. 英文 数字 下划线 连字符
英文字母开头
不允许写中文
2. 见名知意
3. 按照功能起名 或 按照结构起名
4. 起名方式 a. 驼峰命名 searchBox (小驼峰) SearchBox (大驼峰)
b. 连字符命名法 search-box
border’边框
**
宽度 width: value px
高度 height: value px
背景色 background: 1. 名字 2. 十六进制 3. rgb()
文本颜色 color: 1. 名字 2. 十六进制 3. rgb()
边框 border: 边框颜色 边框宽度 边框样式
边框颜色 border-color: 1. 名字 2. 十六进制 3. rgb()
文本颜色color(默认值)
边框宽度 border-width: value px <br /> 2.4px(默认值)<br /> 边框的样式 border-style: solid 实线<br /> dashed 虚线<br /> dotted 点线<br /> double 双实线<br /> none 没有 (默认值)<br /> 左边框 border-left: 边框颜色 边框宽度 边框样式<br /> 右边框 border-right: 边框颜色 边框宽度 边框样式<br /> 上边框 border-top: 边框颜色 边框宽度 边框样式<br /> 下边框 border-bottom: 边框颜色 边框宽度 边框样式左边框宽度 border-left-width: value px<br /> 左边框颜色 border-left-color: 1. 名字 2. 十六进制 3. rgb()<br /> 左边框样式 border-left-style: solid 实线<br /> dashed 虚线<br /> dotted 点线<br /> double 双实线<br /> none 没有 (默认值)<br /> 字体大小 font-size: value px
类选择符
可以一对多 可以一对一 可以多对一
一个标签写多个class 名字
标签名.class名字
id选择符 只能用一个 (js getElementByIdName
id 用在页面的外部结构
包含选择符 后代选择符
**
选择符1 选择符2 选择符3….{} 空格
选择符可以写class id 标签。。。
群组选择符
语法 选择符1,选择符2,选择符3{} 逗号，
选择符 可以写 class id 标签…
通配符 *
表示所有的元素 表示该样式适用所有网页元素<br />子代选择符<br /> 选择符1>选择符2>选择符3{}
伪类选择符
a:link {color: red;} / 未访问的链接状态 /
a:visited {color: green;} / 已访问的链接状态 /
a:hover {color: blue;} / 鼠标滑过状态 /
a:active {color: yellow;} / 鼠标按下去时的状态 /
如果 :link :visited :hover :active 组合使用 要按照顺序书写<br /> 爱恨原则 love-hate<br />input:focus{<br /> background: red;<br /> }
选择器权重
内联样式表最大 > id选择器 > (类)class选择器 > 元素选择器 伪类选择符 通配符* 继承来的样式
1000 0100 0010 0001 0010 0000 0000
权重一样 看书写顺序 谁在下谁优先
权重不一样 看权重大的
包含选择器的权重是每一级进行叠加<br /> 子代选择器的权重是每一级进行叠加群组选择器的权重看自身继承 继承来自父辈的样式 (有些样式可以继承 例如color) 权重为0<!-- 颜色 计算机三原色 红绿蓝<br /> 1. 英文 词汇量不多 颜色描述不准确<br /> 2. 十六进制 #000000 前两位-红色 中间两位-绿色 最后两位-蓝色 <br /> 0 1 2 3 4 5 6 7 8 9 a b c d e f<br /> #ff0000<br /> #00ff00<br /> #0000ff<br /> #12ee33 #33aabb<br /> #ffffff<br /> #0000003. rgb() rgb(r,g,b) rgb是0-255范围的整数<br /> 4. rgba() rgba(r,g,b,a) a是透明度 0-1的小数 0是透明 1是不透明
背景属性
background 背景 复合属性
**
背景颜色 background-color
背景图 background-image: url(‘’)
背景平铺 background-repeat: repeat 平铺(默认值)
no-repeat 不平铺
repeat-x 沿着x轴 水平方向平铺
repeat-y 沿着y轴 垂直方向平铺
背景定位
background-position: 水平 垂直
1. 水平方向: 数值 方位词
2. 垂直方向: 数值 方位词
方位词 left right bottom top center
1.都是方位词 <br /> 水平和垂直没有先后顺序<br /> 如果方位词有一个是center 可以省略center不写<br /> 2.都是数值 x(水平方向) y(垂直方向)<br /> 顺序不可以颠倒<br /> 3.数值 + 方位词 x(水平方向) y(垂直方向)<br /> 顺序不可以颠倒
背景图附着
background-attachment
属性值 1. scroll 滚动 默认值 背景图像会随着页面其余部分的滚动而移动
2. fixed 固定
背景属性简写
- 多个属性复合，属性值和属性值可以换位置，属性值和属性值之间有空格
background: background-color background-image background-repeat background-attachment background-position
背景图缩放
background-size:
属性值： 1. 数值 百分比 auto
width height
2. cover 按照背景图尺寸进行缩放，完全覆盖容器，可能会造成部分图片不展示
contain 自动调整比例，保证图片完整展示
多个背景图
background: 背景图1,背景图2,背景图3
background: url('图片1') repeat position, url('图片2') no-repeat position,url('图片3') no-repeat position1. 前面的背景图会盖在后面的背景图上<br /> 2. 背景图和背景图之间有逗号<br /> 3. 为了避免背景色和背景图冲突，背景色要放在最后一组背景属性上
css3 新增背景属性
background-origin:规定背景图片的定位区域，规定background-position属性相对于什么位置来定位。
属性值：
padding-box:背景图像相对于内边距框来定位 默认
border-box:背景图像相对于边框盒来定位
content-box:背景图像相对于内容框来定位
background-clip:属性规定背景的绘制区域<br />属性值:<br />border-box:背景被裁剪到边框盒。 默认<br />padding-box:背景被裁剪到内边距框。<br />content-box:背景被裁剪到内容框。<br /> <br /> background-size: 水平 垂直 *****很重要cover 两边都覆盖停止 成比例<br /> contain 遇到最短边停止 成比例简写<br /> background: background-color background-image background-repeat background-position/background-size background-attachment
文本文字
文字属性
文字大小 font-size : 数值 单位（px pt em rem）
单位
px : 浏览器中默认字号16px 浏览器的最小字号12px
font-size 为0 看不见
pt : 印刷尺寸 16px==12pt
em : 相当于元素本身的字体大小的倍数
如果元素本身没有字号，那么参考父元素
如果改变元素自身字体大小，em单位的属性等比缩放
rem : 相当于根元素字体大小的倍数
2. 文字字体 font-family :
‘微软雅黑’ 默认字体
Arial 默认字体
中文 多个单词组成的字体 要加引号
多个字体的时候，如果前面的字体没有，向后找
3. 文字粗细 font-weight :
1. 单词 bold bolder normal(常规,默认值) lighter
2. 100 - 900 整百数 100-400 一般显示 500常规字体 600-900加粗字体
4. 文字倾斜 font-style
italic 倾斜的文字
oblique 样式倾斜
normal(常规,默认值)
5. 文字水平对齐方式
text-align :
1. left
2. center
3. right
4. justify 实现两端对齐文本效果 每一行最后一个字贴着最右边text-align 给文字用的，不能给独占一行的元素居中，但是可以给图片居中不是独占一行的元素 使用text-align 是没有用的
垂直对齐方式
vertical-align : top 顶线对齐
bottom 底部对齐
middle 中线对齐
baseline 基线对齐
行高
line-height: 一行文字所占的高度
属性值 1. 具体值
百分比 元素自身的字体大小
2. 1/2/3/4.. 元素自身字体大小的倍数
应用 垂直居中 line-height 设置为容器高度
文本修饰
text-decoration
属性 underline 下划线
line-through 删除线
overline 上划线
none 没有(默认)
文本缩进
**
text-indent
1. 具体数字 + px
2. 具体数字 + em
text-indent 可以写负数
文本大小写
text-transform
属性
none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母，仅有小写字母。
继承的补充
initial：默认值
inhorit：主动继承父元素的属性
unset：不设置
设置的属性：如果是一个可以继承的属性，等同与inherit
设置的属性：如果是一个不可以继承的属性，值等同于inltial
内联元素、块状元素可继承
：letter-spacing、word-spacing、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform。
块状元素可继承：text-indent和text-align
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse border-spacing empty-cells
PC端网页布局
1，确定版心
2，网页模块划分
3，设置html，css文件夹
4，重置网页样式
列表属性
**
list-style-type 设置列表项标记的类型
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
list-style-position：定义列表符号的位置<br /> inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。<br /> outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。list-style-image：设置图片作为列表符号；<br /> url 图片地址<br /> none 默认 不设置简写 <br /> list-style：none;去掉列表符号
三角形
transparent 透明色
1. 容器高度宽度未0
2. 边框设置号
3.去掉多于边框的高度
浮动
让竖着的元素横着
float
left
right
none
1. 如果想让几个元素都横着排，这几给元素·都要要加浮动
2. 浮动元素 半脱离文档流
盒模型
padding
bottom
页面中元素的内容到边缘之间的距离
补白 填充
padding会撑大父元素
作用 改变父元素中子元素的的位置
如果不想撑大，需要在有padding的基础上减去padding的值
padding-访问（top/right/bottom/left）：单边的填充
padding’没有颜色 background会填充到padding，border的位置
padding 不可以写负值
padding 是加给父元素
margin
不会改变元素大小
元素外边的区域 边框
用来改变元素和元素的位置关系
margin可以加负数 负数用来使元素重叠
margin给子元素加
margin问题
- 如果相邻上下俩个元素 上面有margin-bottom 下面有margin-top
如果同号 绝对值大的
如果异号 相加
2. 如果父元素里面的点一个元素有margin-top,会把父元素带下来
解决 父元素 overfloe： hidden
mqrgin
ayto ：自动占据剩余空间
margin：0-auto 让元素水平居中
margin-方向（top/right/bottom/left）：
标准的和模型
margin+border+padding+width
怪异盒模型
IE margin+width 怪异盒模型的width 包括 content-width padding-left padding-right border-left border-right
height content-height padding-top padding- bottom border-top border-bottom
怪异盒模型属性
box-sizing：content-box 标准盒模型
border-box 怪异盒模型
《表单》
获取用户数据
表单域 form 双标签
action 后端的一个接口 发送数据
name 表单标识，名字
js找到对应的表单
method 将数据发送给后端的方式 共有两种方法：POST 方法和 GET 方法
表单控件
输入框 下拉框 单选 多选 按钮
提交按钮
默认的提交功能
value 按钮的文字
重置按钮
value 按钮的文字
单选
name 同一组单选框 用一个name
disabled 禁用
checked 选中
value
多选
下拉框
selecyed 选中的值
value 传递给后端的值
name 同一组单选框 用一个name
disabled 禁用
文本框
普通按钮
get post 区别
1 get相对不安全 数据明文显示在网址上
2. get 传输数据有大小限制，post没有
3. 从语法上来说 get原来获取数据post发送数据
《表单补充》
1.fieldset 表单字段集
可将表单内的相关元素分组,会在相关表单元素周围绘制边框,fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。
2.legend 字段集标题
legend元素为fieldset元素定义标题，legend元素必须是fieldset内的第一个元素
3. label 提示信息标签
标签为input元素定义标注（标记）；此标签的for属性可把label绑定到另外一个元素上，将for属性设置为与该控件的id属性值相同。
4.文件上传
5. 图片域
6.
若有收获，就点个赞吧
0 人点赞
