admin管理员组文章数量:1565252
1
HTML的相关概念和建站流程
- HTML的概念:超文本标记语言
- HTML的基本组成
- 结构 html/xhtml w3c(万维网联盟)制定规范
- 样式 css w3c(万维网联盟)制定规范
- 行为 js ECMA(欧洲电脑网商联合会)
- xhtml: 可扩展的标记性语言
- xhtml和html的区别??
- xhtml的单标签后面需要加 /
- XHTML的标签必须是小写
- XHTML属性值必须使用双引号
HTML的基本结构
- 新建带有.html后缀的文件
- 英文状态下 按! 按tab 生成基本结构
<!-- 文档类型声明 -->
<!DOCTYPE html>
<html>
<!-- 头部 -->
<head>
<!-- 编码格式 -->
<meta charset="UTF-8">
<!-- 网页的标题 -->
<title>我的第一个网页啊</title>
</head>
<!-- 主体 -->
<body>
文字/图片/视频
</body>
</html>
HTML的基本语法
- 标记/标签/元素:放在尖括号中的第一个单词
- 双标签/双标记:成对出现的标签
- 单标签/空标记:单独出现的
- 属性:跟在标签后面,用空格隔开
- 属性和属性值直接用等号连接
- 属性值必须用引号引起来
- 属性可以是多个,多个之间用空格隔开
HTML的基本标签
- 文章类的标签
- 标题标签 h1-h6
- 双标签/加粗且字体较大/h1-h6字体大小逐渐变小/独占一行
- 段落标签 p
- 双标签/独占一行
- 随机生成一段文本:lorem回车,要控制多少个字的话,lorem字的个数,如:lorem100
- 控制换行:文件->首选项->搜索框输入“wrap” 将控制折行的方法切换成 on
- 加粗 b strong
- 双标签/加粗样式/可以在同一行显示
- 倾斜 i em
- 双标签/倾斜样式/可以在同一行显示
- 删除线 del
- 双标签/可以在同一行显示
- 下划线 u
- 双标签/文字下面有下划线/可以在同一行显示
- 上标 sup 双标签
- 下标 sub 双标签
- 标题标签 h1-h6
- 换行 br 单标签
- 水平线 hr 单标签
- 特殊字符
- 空格
- 注册商标 ®
- 版权符号 ©
- 左尖括号 <
- 右尖括号 >
- 超链接 a
- 双标签/自带颜色/自带的下划线/在同一行显示
<a href="https://www.baidu" target="">百度一下,你就知道</a>
- href: 点击所要跳转的页面的路径
- 窗口的打开方式 target
- _self 自身窗口打开,默认值
- _blank 新开窗口去打开
- 图片 img
<img src="" alt="未加载的时候显示" title="鼠标划过显示的文件">
- src: 图片路径
- 绝对路径:直接复制线上的图片地址,粘贴到对应的src的属性值里面
- 相对路径
- 当当前文件和目标文件在同一个目录下面的时候,直接图片名.后缀
- 当当前的文件和目标文件的文件夹在同一个目录下面,文件夹名/图片名.后缀,套几个文件夹就进几次
- 当当前文件的文件夹和目标文件的文件夹在同一个目录下面,…/文件夹名/图片名.后缀
- alt 图片未加载的时候显示
- title 鼠标划过显示的文字,可以应用到所有的标签
- src: 图片路径
vscode快捷键
- 注释 ctrl+/ 取消注释 ctrl+/
- 保存 ctrl+s
- 撤销 ctrl+z 反撤销 ctrl+y
- 全选 ctrl+a
2
html基本标签
- 布局标签
- div 划分网页板块
- 双标签/不带任何自带样式/独占一行
- span 小文本
- 双标签/不带任何自带样式/在同一行显示
- div 划分网页板块
- 列表标签
- 无序列表
<ul> <li><b>哈哈哈</b></li> <li><a href="">嘿嘿嘿嘿</a></li> <li>嘻嘻嘻</li> </ul>
- 快速生成列表 ul里面10个li ul>li*10
- 花括号里面写内容: ul>li*10{哈哈哈$}
- $代表从1开始的数字
- 应用场景:网页的导航/新闻列表/商品列表
- 快速生成列表 ul里面10个li ul>li*10
- 有序列表
<ol type="a" start="2"> <li>嘻嘻嘻1</li> <li>嘻嘻嘻2</li> <li>嘻嘻嘻3</li> </ol>
- type: 排序方式 1/A/a/I/i
- start: 排序的起始值,必须是数字
- 自定义列表
<dl> <dt>图片/名词</dt> <dd>图片说明/名词的解释</dd> <dd></dd> <dd></dd> </dl>
- 应用场景:1.上面的图片,下面是文字 2.左边是图片,右边是文字
- 无序列表
- 表格: 主要用在后台系统展示数据,一般不用在前台网页布局
- table 表格
- 边框 border=“数字” 像素px
- 宽度 width=“数字” 高 height=“数字”
- 表格水平位置 align
- left 默认值
- center 居中
- right 居右
- 单元格之间的间距 cellspacing=“数值” 一般设置0 去掉单元格之间的间距
- 调整内容到单元格的距离 cellpadding=“数值”
- 快速生成表格 table>tr10>td8{$} 10行8列的表格
- tr 行
- 水平对齐方式 align
- left 默认值
- center 居中
- right 居右
- 垂直对齐方式 valign
- middle 居中 默认值
- top 居上
- bottom 居下
- 水平对齐方式 align
- td 列
- 水平和垂直的对齐方式和tr一样
- 列合并 colspan
- 行合并 rowspan
- 合并的步骤:
- 补全表格,有几行几列就生成几行几列的表格
- 观察属于行合并还是列合并,哪个不同合并哪个
- 确定属性之后,观察合并几个单元格,属性对应的值就是几
- 将合并的属性放到合并的起始的单元格
- 注释掉多余的单元格
- 表单 form
<form action="" method=""></form>
- action: 提交路径
- method: 提交方式 GET/POST
- GET一般用来获取数据 POST一般提交信息
- GET请求安全系数较低
- get可以传送的数据量较小 一般不超过2kb post可以传送的数据量较大 理论上不受限制
- 表单元素 单标签/在同一行显示
- 文本输入框
请输入姓名:<input type="text" placeholder="请输入姓名" value="小白"> placeholder:提示信息 value:默认值
- 密码输入框
请输入密码: <input type="password">
- 文本输入框
- 提交按钮
<input type="submit" value="搜索"> value:按钮文本
- 重置按钮
<input type="reset" value="重新"> value:按钮文本
- 普通按钮
<input type="button" value="普通按钮">
- table 表格
初识css
- 层叠样式表
- 样式表
- 内联/行内样式表:加在哪个标签,哪个标签才生效
- 给标签生成一个style的属性
- style的属性值为css属性:css属性值;css属性:css属性值;
- 内部样式表
- 外部样式表
- 内联/行内样式表:加在哪个标签,哪个标签才生效
- css属性
- 宽度 width:数值px必须有单位 0可以不加单位
- 高度 height:数值px必须有单位 0可以不加单位
- 字体颜色 color:英语单词
- 背景色 background-color: 英语单词
- 层叠
3
css
- 内联样式表
<div style="width:200px;height:100px;background-color:red;color:blue;"></div>
- 内部样式表
- 在head标签里面,生成一个style的双标签
- 在style的标签里面写对应的css样式
<style> div { width: 200px; height: 200px; background-color: pink; } </style>
- 外部样式表
- 新建一个css文件夹
- 在css文件夹的下面新建一个.css后缀的文件
- 在html文件的head标签里面生成一个link单标签
<link rel="stylesheet" href="css/外部样式表.css" type="text/css"> rel: 当前关联的文件类型 stylesheet:样式表 href:css文件的路径 type:文件类型 默认就是css文件类型
- css语法
选择器{
属性:属性值;(声明)
属性:属性值;(声明)
属性:属性值;(声明)
……
}- 选择器和声明组成
- 每条声明以分号结尾
- 最后一条声明可以省略分号
- 样式表的权重(优先级)
- 内联>内部
- 内联>外部
- 内部和外部,根据就近原则,离得近的优先显示
- 样式表的选择
- 内联样式表:css属性较少的时候,还需要考虑优先级的问题
- 内部样式表:写小案例
- 外部样式表:整页开发,结构样式分离
- 选择器
- 标签选择器
p{color:red;}
- id选择器
- 给标签添加id的属性,值为id名
<div id="box">Lorem ipsum dolo</div>
- #id名 选择元素
#box { background-color: pink; }
- id名不能重复
- id只能有一个
- 给标签添加id的属性,值为id名
- class(类)选择器
- 给标签添加class的属性,值为class名
<div class="box box1">Lorem ipsum </div>
- .class名选择元素
.box { color: red; } .box1 { background-color: royalblue; }
- class名可以重复
- 一个标签可以有多个class名,多个之间用空格隔开
- 给标签添加class的属性,值为class名
- 通用选择器
*{ margin:0; 外边距 padding:0; 内填充 }
- 伪类选择器(状态)
- 标签选择器
- 选择器的权重
- 标签命名
- 英文单词并且语义化
- 驼峰命名
- 短线连接
- 下划线连接
注意
- 宽高只对独占一行的元素生效
4
选择器
- 伪类选择器 在某种状态下所显示的样式 爱恨原则 love hate
- 超链接:link{} 链接未点击之前
- 超链接:visited{} 链接访问之后
- 任何元素:hover{} 鼠标划过该元素
- 超链接:active{} 鼠标按下的状态
- 后代选择器
选择器 选择器{}- 可以是多个选择器
- 选择器之间可以跨级,但是必须存在后代关系
- 群组选择器
选择器,选择器{} - 选择器的权重
- 内联样式 1000
- id选择器 100
- class选择器/伪类选择器 10
- 标签选择器 1
- 继承样式 0
- 选择器权重特点
- 权重值越高,优先显示该样式
- 后代选择器的权重由每个选择器的权重值相加
- 群组选择器的权重值为选择器本身的权重值
- 权重值相同的,就近原则
- 继承样式的权重值是最低的
css属性
- 字体属性
- 字体大小 font-size 一般情况是偶数,并且一般不低于10px
- 数值+px
- 数值+em 默认值1em=16px 父元素有字体大小,参考的是父元素的字体大小
- 数值+rem 默认值 1rem=16px 根元素(html)有字体大小时,参考根元素的字体大小(移动端)
- 字体加粗 font-weight
- bold 加粗
- normal 去掉加粗样式
- 字体倾斜 font-style
- italic 倾斜
- normal 去掉倾斜样式
- 字体类型 font-family
- 中文,加引号
- 英文,一个单词不用引号,多个单词要加引号引起来
- 多个字体类型用逗号隔开,浏览器会依次检索,有该字体直接显示,找到最后都没有该字体时,显示默认字体
- 字体大小 font-size 一般情况是偶数,并且一般不低于10px
- 文本属性
- 颜色 color
- 颜色单词
- 十六进制 #f1f1f1
- rgb(0-255,0-255,0-255) rgb(241, 241, 241);
- 文本水平对齐方式 text-align
- left 左对齐 默认值
- center 居中
- right 居右
- justify 两端对齐 内容向两边,加大中间的间距
- 行高 line-height
- 数字:字体大小的倍数
- 数值+px
- 应用
- 多行文本:加行高可以增大行和行之间的距离
- 单行文本:将行高和元素的高度设置成一样,实现垂直居中
- 文本修饰 text-decoration
- underline 下划线
- overline 上划线
- line-through 删除线
- none 去掉下划线t:
- 文本缩进 text-indent
- 数值+px 只对独占一行的元素才生效
- 可以设置负数
- 缩进两个词:设置text-indent:2em; 参考当前元素的字体大小
- 字符间距 letter-spacing
- 数值+px
- 中文:加大字和字之间的距离 英文:加大字母之间的距离
- 单词之间的距离 word-spacing
- 数值+px
- 只对英文生效,加大单词和单词之间的距离
- 颜色 color
- 列表属性
- 列表符号 list-style-type
- disc 实心圆
- squre 方块
- circle 空心圆
- none 去掉列表符号
- 列表符号 list-style-type
5
css属性
- 层叠
- 通过不同的选择器选择同一个标签的时候,设置了相同的属性,但是设置了不同的属性值,根据选择器的权重值,权重值高的优先显示,如果没有冲突的样式,正常显示
- 大小写转换 text-transform
- 首字母全部大写 capitalize
- 全部小写 lowercase
- 全部大写 uppercase
- 默认值 none
- 复合写法 font
- font: 字体加粗 字体倾斜 字体大小/行高 字体类型
font: bold italic 20px/40px "宋体";
- 字体加粗 字体倾斜为可选
- 字体大小/行高 字体类型 必选,并且必须是该格式
- font: 字体加粗 字体倾斜 字体大小/行高 字体类型
- 列表属性
- list-style-type:disc/square/circle/none
- list-style:none 去掉列表符号
- 边框属性
- 边框大小 border-width
- 数值+px
- 边框样式 border-style
- 实线 solid
- 虚线 dashed
- 点状线 dotted
- 双实线 double
- 边框颜色 border-color
- 默认情况下,边框颜色和字体颜色一样
- 颜色单词/rgb()/十六进制
- 边框的复合写法 border: 边框大小 边框样式 边框颜色;顺序不固定
- 单方向边框 border-方向(top/right/bottom/left/none(去掉边框)):边框大小 边框样式 边框颜色;
- 边框实现三角形
向右的三角 div { height: 0; width: 0; border-top: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid red; }
- 边框大小 border-width
- 背景属性
- 背景颜色 background-color
- 背景图 background-image:url()
- 背景图是否重复 background-repeat
- repeat 重复
- repeat-x 在x轴重复
- repeat-y 在y轴重复
- no-repeat 不重复
- 背景图的位置 background-position: x轴 y轴;
- 数值+px 向右和向下为正数,反之,可以设置负数
- 关键字
- 水平方向:left/center/right
- 垂直方向:top/center/bottom
- 只设置一个值的情况下,第二个值默认为居中
- 复合写法 background: 背景颜色 背景图 背景图是否重复 背景图的位置; 顺序不固定
- 展开的写法写到复合写法的后面,不然会被复合写法覆盖掉
浮动
- 应用场景:让纵向排列的元素横向排列
- float
- none 默认值
- left 左浮动
- right 右浮动
- 浮动的特点
- 从父元素的边缘开始挨个排列
- 浮动元素会脱离文档流,浮动元素会遮挡后面的兄弟元素,但是不会遮挡文字
- 浮动元素的宽度如果超出父元素的宽,后面的元素会掉到浮动设置的位置
- 浮动元素会影响后面的兄弟,但是不会影响到前面的兄弟
两种图片的使用的条件
- img插入的图片占位, 图片作为网页的内容
- 背景图不占位, 修饰性的图片用背景图插入
切图方法
- 矩形工具(一次只能切一个)
- 选中需要的图片 ctrl+c
- ctrl+n 弹框中按回车
- ctrl+v 粘贴图片
- 菜单项 文件->导出->快速导出为png格式
- 切片工具(可以切多个)
- 选中多个需要的图片
- 菜单项 文件->导出->存储为web所用格式
- 弹框中根据需求修改图片格式,完成点击存储
- 存储的时候文件资源器的,图像选择 所有用户切片
- 在对应的文件下面会生成images的文件夹
6
盒模型
- 内容区(content) 显示文字/图片/视频等的区域,宽高确定内容区
- 内填充(padding)
- padding值的设置
- 一个值 padding:10px 四周
- 两个值 padding:10px 20px; 上下 左右
- 三个值 padding: 10px 20px 30px; 上 左右 下
- 四个值 padding: 10px 20px 30px 40px; 上 右 下 左
- 单方向 padding-方向(left/right/top/bottom): 数值+px;
- padding值的特点
- 会撑大盒子,如果不想被撑大的话,要在原来宽高的基础上,减去对应方向的padding值
- padding值不能设置负数
- 背景图/色可以在padding区域显示
- 可以用来调整内容区到盒子边缘的位置
- padding值的设置
- 边框(border) 边框也会撑大盒子,设计图从边框里面开始量取
- 外边距(margin)
- margin值的设置和padding值是一样的
- margin值的特点
- margin值不会撑大盒子,但是会影响到旁边的元素
- margin可以设置负数
- 背景图和背景色不在margin区域显示
- 调整自己和别的元素之间的距离
- margin:auto; auto: 浏览器会根据当前窗口的宽,减去元素的宽,将剩余的空间进行一个自动的平均分配,实现左右的居中,垂直是不生效的
- margin的bug
- margin的传递:给元素的第一个子元素添加上边距的时候,边距会错误加在父元素的身上
- 使用padding
- 给父元素添加边框
- 给父元素或者是该元素添加浮动
- 给父元素添加overflow:hidden(溢出隐藏)
- margin的重叠:给上面的元素设置下边距,给下面的元素设置了上边距,边距会产生重叠,并且以两个值的最大值显示,左右的间距是不会出现重叠的
- 只给一个盒子添加外边距
- margin的传递:给元素的第一个子元素添加上边距的时候,边距会错误加在父元素的身上
去掉标签自带的行高
- 设置line-height(行高)和font-size(字体大小)值为一样
7
img自带的3px的底部留白
- vertical-align:垂直方向对齐方式 (只对图片生效)
- baseline 基线 默认值
- bottom 底线 可以解决bug
- middle 中线 可以解决bug
- top 顶线 可以解决bug
- 应用
- 解决图片底部三像素的留白
- 调整小图标和文字对齐的方式
元素类型
- 内联元素(inline) span b strong i em a sub sup img
- 宽高不生效,由内容决定
- 在同一行显示
- 盒模型属性padding的左右生效,上下显示不准确;margin的左右显示准确,上下不准确
- 块级元素(block) h1-h6 div p ul li dl dt dd ol form table
- 宽高生效
- 独占一行
- 盒模型属性都生效
- 一般作为容器去包裹其他元素,p标签一般不包裹块级元素,也不包裹自己
- 行内块元素(inline-block) input (img)
- 在同一行显示
- 宽高生效
- 盒模型属性都生效
- 元素类型转换 display
- block 块
- inline 内联
- inline-block 内联块
- none 隐藏 隐藏之后不占位
- visibility: hidden; 隐藏元素 隐藏之后会占位
- 解决横向排列的元素之间的空格
- 将标签代码写到同一行
- 添加浮动
- 给元素添加一个父元素,设置font-size:0;然后单独设置该元素的字体大小
- 内联元素添加浮动之后,会转换成块级元素
溢出属性
- overflow(overflow-x/overflow-y)
- visible 默认值 显示
- hidden 溢出隐藏
- scroll 显示滚动条
- auto 内容没有溢出正常显示,溢出显示滚动条
- 单行文本溢出显示省略号
- 设置宽度
- 设置不换行 white-space:nowrap
- 设置溢出隐藏 overflow:hidden
- 设置文本溢出显示省略号 text-overflow:ellipsis
8
css属性的继承
- 给元素设置样式之后,该元素的后代都会具有该样式
- 可以继承
- 字体类:font-size(字体大小)font-weight(字体加粗) font-style(字体倾斜)font-family(字体类型)
- 文本类:color(文本颜色) text-indent(缩进) line-height(行高) letter-spacing(字符间距) word-spacing(单词之间的距离) text-align(文本对齐方式)
- 列表属性:list-style
- 不可继承
- text-decoration(文本修饰) width height float padding margin border
定位 position
- static 默认值
- relative 相对定位
- 参考物:自己本身
- 移动距离:left/right/bottom/top:数值+px
- 特点
- 移动之后依然占位
- 定位元素的层级要比普通元素的层级要高
- aboslute 绝对定位
- 参考物(包含块):有定位属性(除static属性之外)的祖先元素,设置绝对定位的元素,会一层一层向上找有定位属性的祖先元素,谁有定位属性,就参考谁去移动,如果找到body也没有找到有定位属性的祖先元素的话,就参考body,也就相当于浏览器的窗口
- 移动距离:left/right/bottom/top:数值+px
- 特点
- 脱离文档流,会遮挡后面元素的文字
- 给元素设置绝对定位后,margin:auto会失效
- 给内联元素添加定位后,内联元素会变成块级元素
- 给元素不设置宽,自适应宽度的时候,加了绝对定位,自适应会失效,需要重置元素的宽width:100%
- 应用场景
- 元素水平垂直居中1
<div class="box1"> <div class="box2"></div> </div>
.box1 { width: 600px; height: 400px; background-color: pink; margin: 0 auto; position: relative; } .box2 { width: 200px; height: 200px; background-color: cornflowerblue; position: absolute; /* left: 150px; */ /* top: 100px; */ left: 50%; 当前参考元素的宽度的50% margin-left: -100px; 向左拉取当前盒子宽度的一半 top: 50%; margin-top: -100px;向上拉取当前盒子高度的一半 }
- 元素水平垂直居中2
.box2 { width: 200px; height: 200px; background-color: cornflowerblue; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; }
- 元素水平垂直居中1
设置边框圆角
- border-radius:数值+px;
9
定位
- absolute 绝对定位
- 应用场景
- 元素的水平垂直居中
- 有重叠效果
<div> <img src="img/1.webp" alt=""> <ul> <li class="first"></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
div { width: 800px; 设置宽高和图片一样的宽高 height: 300px; border: 10px solid black; position: relative; } ul { /* width: 400px; height: 25px; */ background-color: blueviolet; position: absolute; 参考div去定位 bottom: 30px; right: 50px; }
- 二级菜单
- 二级菜单添加绝对定位属性
- 应用场景
- 定位元素的层级关系 z-index
- auto 默认值
- 数值 数值越大,层级越高,在最上面显示,可以为负数
宽高自适应
- 宽度自适应,参考父元素
- 宽度不设置
- 设置百分比
- 最大宽度(max-width)和最小宽度(min-width)
- 高度自适应
- auto 自动 根据内容撑开
- 高度不设置 根据内容撑开
- 百分比 参考父元素
- 最小高度(min-height)和最大高度(max-height)
- 一屏页面(盒子的宽高和当前浏览器的宽高一样)的实现方式
html,body{ height:100%; } div{ height:100%; width:100%; (可设,可不设) }
圆形
- border-radius:50%/100%;
10
定位
- 固定定位 position:fixed;
- 参考物 浏览器窗口
- 移动距离 left/right/bottom/top
- 特点
- 不会跟随滚动条进行滚动
- 脱离文档流
- margin: auto;失效
- 宽度自适应会失效,需要重新设置宽度
- 应用场景
- 侧边栏/回到顶部/头部导航/广告
- 粘性定位 position:sticky;
- 参考物 浏览器窗口
- 移动距离 top
- 特点
- 未达到top值之前,普通元素,达到top值之后类似于固定定位
锚点
- 实现在同一个页面不同板块之间的跳转
- 利用a标签的href属性和id名(必须是id名)进行联系
<a href="#box">跳转</a>
<div id="box"></div>
高度塌陷
- 产生条件
- 父元素不设置高度,想要子元素撑开
- 子元素浮动
- 解决方法
- 给高度塌陷的父元素添加overflow:hidden;(触发BFC)
- 弊端:会把溢出父元素的内容隐藏掉
- 给浮动元素的下方添加一个块级元素(一般添加的是div),给块级元素设置clear属性
- clear:left/right/both; 清除浮动元素对后面的元素带来的影响
- clear只对块级元素生效
- 弊端:代码中会出现很多空的标签,造成代码冗余
- 万能清除法,给高度塌陷的父元素,通过伪元素选择器的方法添加元素
高度塌陷的父元素::after{ content:""; clear:both; display:block; }
- 给高度塌陷的父元素添加overflow:hidden;(触发BFC)
伪元素
- 给父元素添加最后一个孩子,内联元素
元素::after{
content: “”;必须
} - 给父元素添加第一个孩子 内联元素
元素::before{
content:"";必须
} - 选中第一个字符
元素::first-letter{
css属性:css属性值;
} - 选中第一行
元素::first-line{
css属性:css属性值;
}
引入外部样式表
- @import url()
<style>
@import url(路径);
</style>
- 区别
- @import只能引入css文件,link不只可以引入css文件
- @import的css文件会在结构加载完成之后,才开始加载,link是结构和样式同时加载
- @import只能在ie5以上支持,link都支持
11
表格和表单的新增
- 表格的新增
- 标题标签 caption
- caption-side:top(默认)/bottom 标题的位置
<table> <caption>标题</caption> </table>
- 列标题 th
<tr> <th>姓名</th> <th>性别</th> <th>年纪</th> </tr>
- 行分组
- 表头 可选thead
- 表体 可以有多个tbody
- 表尾 可选tfoot
- 列分组 colgroup
- span: 几列为一组
<colgroup> <col span="1" class="first"> <col span="2" class="second"> <col span="1" class="third"> </colgroup>
- 单元格之间的距离:border-spacing:数值+px 一般设置0。加在表格身上
- 合并边框 border-collapse:collapse; 加在表格身上
- 表格固定 table-layout:auto(自动)/fixed(固定) 加在表格身上
- 设置表格为fixed提高浏览器加载速度
- 垂直对齐方式 vertical-align: baseline/top/bottom/middle 可以在单元格中生效
- 标题标签 caption
- 表单的新增
- 单选框 name的属性必须有,且值必须一样才能够互斥,checked 默认选中 disabled 禁止选中
<input type="radio" name="sex" checked>男<input type="radio" name="sex">女
- 多选框 checked 默认选中 disabled 禁止选中
<input type="checkbox" checked disabled>M416 <input type="checkbox">AKM
- 下拉列表 selected:默认选中
<select name="height" id=""> <option value="1">175</option> <option value="2" selected>176</option> </select>
- 多行文本域
- 禁止用户缩放:给textarea 添加 resize:none;
<textarea name="" id=""></textarea>
- 文件上传
<input type="file">
- 扩大表单选中范围 label
- for的属性值指向选择元素的id名
<label for="man"> <input type="radio" name="sex" id="man">男 </label>
- 表单字段集 fieldset
- 字段集标题 legend
<fieldset> <legend>标题</legend> <input type="text"> </fieldset>
- 单选框 name的属性必须有,且值必须一样才能够互斥,checked 默认选中 disabled 禁止选中
去掉表单元素获取焦点时候的边框
- outline:none;
BFC
- 块级格式化上下文(独立渲染的区域)
- 触发条件
- float的值为left/right
- position的值为absolute/fixed
- display的值inline-block/table-caption/table-cell/flex(弹性盒)/inline-flex
- overflow的值为hidden/scroll/auto
- 特性
- 在BFC的区域,浮动元素的高度也会计算在内(解决高度塌陷)
- BFC的区域不会与浮动盒子重叠 (两栏布局)
计算属性
- width: calc(100% - 300px) 计算符号两边一定要有空格
过渡 ie9及以下不支持
- 需要过渡的属性:transition-property:css属性
- 过渡持续时间:transition-duration:数值+s/数值+ms 1s=1000ms
- 过渡延迟时间:transition-delay:数值+s/数值+ms 1s=1000ms
- 过渡执行效果:transition-timing-function:linear(匀速)
- 复合写法:transition:需要过渡的属性 过渡持续时间 过渡延迟时间 过渡执行效果;(顺序不固定,出现一个时间或者两个时间的话,默认第一个时间为执行时间)
- transition: all 1s; 过渡所有的属性,过渡时间为1s
透明
- background-color:rgba(0-255,0-255,0-255,0-1)
- 0表示完全透明 1表示不透明 值越小越透明
12
浏览器内核(浏览器的解析代码机制)
- ie浏览器 Trident内核 -ms-
- 火狐浏览器 Gecko内核 -moz-
- 欧鹏浏览器 Blank内核 -o-
- 谷歌浏览器 Webkit内核 -webkit-
- 过渡的兼容写法
/* 标准写法 */ transition: all 1s; /* 火狐*/ -moz-transition: all 1s; -webkit-transition: all 1s;
渐变 ie9及以下不支持
- 线性渐变:background-image/background:linear-gradient(渐变方向,颜色1,颜色2……)
- 方向 设置方向一定要加 to
- to bottom; 向下
background-image: linear-gradient(to bottom, red, yellow, blue, green);
- to top; 向上
- to left 向左
- to right 向右
- to right top 右上角
- to right bottom 右下角
- to left top 左上角
- to left bottom 左下角
- 数值+deg
background-image: linear-gradient(45deg, red, yellow, blue, green);
- to bottom; 向下
- 方向 设置方向一定要加 to
- 重复性的线性渐变 background-image/background: repeating-linear-gradient(渐变方向,颜色1,颜色2……)
.box2 { /* 0-10px 红色纯色 10px-50px 红色到蓝色的过渡 50px之后是蓝色纯色*/ background-image: repeating-linear-gradient(red 10px, blue 50px); font-size: 50px; line-height: 50px; }
- 径向渐变 background-image/background:radial-gradient(方向,颜色值1,颜色值2……)
- 方向:和背景图的位置取值一样,设置方向一定要加浏览器前缀,否则不生效
background-image: -webkit-radial-gradient(left top, red, yellow);
- 重复性的径向渐变 background-image: repeating-radial-gradient(方向, 颜色值1,颜色值2……);
background-image: repeating-radial-gradient(blue, red 20px);
2d变形 transform:位移|旋转|缩放|倾斜
- 位移
- transform:translateX(数值+px) 向右和向下为正数
- transform:translateY(数值+px) 向右和向下为正数
- 两个方向同时位移
transform: translateX(100px) translateY(-100px); transform: translate(100px,-100px);
- 写一个值代表的是x轴的位移
transform: translate(100px);
- 移动之后,原来的位置依旧存在
- 利用位移实现水平垂直居中
- 优点:不论大盒子和小盒子的宽高如何变化,都能够识别到宽高的百分比
.box{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); 百分数参考的是当前盒子的宽高 }
- 旋转
- x轴的旋转 transform:rotateX(数值+deg)
- y轴的旋转 transform:rotateY(数值+deg)
- z轴的旋转 transform:rotateZ(数值+deg) 顺时针是正数,逆时针是负数
- 只写一个值:
transform: rotate(-600deg); 代表的是z轴的旋转 - 位移和旋转同时存在
表示先位移后旋转 transform: translateX(300px) rotateZ(90deg); 先旋转,坐标轴会跟着变化,位移会根据新的坐标轴去移动 transform: rotateZ(90deg) translateX(300px);
- 缩放
- x轴的缩放 transform:scaleX(数值) 1:正常 0-1之间是缩小 >1是放大
- y轴的缩放 transform:scaleY(数值) 1:正常 0-1之间是缩小 >1是放大
- 两个方向都有
div{ transform: scaleX(0.4) scaleY(2); transform: scale(0.4, 2); transform: scale(2); }
- 倾斜
- x轴的倾斜 transform:skewX(数值deg)
- y轴的倾斜 transform:skewY(数值deg)
- xy轴的倾斜
div{ transform: skew(40deg, 50deg); }
- 一个值代表的只是x轴的倾斜
- 变形原点:transform-origin:水平 垂直
- 水平:left/center/right 垂直:top/center/bottom
- 数值+px
- 百分比
利用外部样式表写过渡属性存在的问题及解决
- 问题:利用外部样式表写过渡属性可能会在页面初始的时候就有过渡效果
- 解决:给整个结构也就是html的标签下面添加
过渡属性对 display:none到display:block是不生效的
13
动画 ie9及以下不支持
- 定义动画
@keyframes 动画名{ 关键帧 划分时间 from{} 0% to{} 100% } 5s @keyframes 动画名{ 0%{} 0 20%{} 1s 40%{} 2s 60%{} 3s 80%{} 100%{} } 兼容写法 @-moz-keyframes longer{} @-webkit-keyframes longer{}
- 使用动画
- animation-name: 动画名
- animation-duration: 动画执行的时间 s/ms
- animation-delay: 动画的延迟时间 s/ms
- animation-iteration-count: 动画执行的次数 数值/infinite(无限循环)
- animation-timing-funcition: 动画的执行效果 linear(匀速)
- 复合写法 animation: 动画名 动画执行的时间 动画的延迟时间 动画执行的次数 动画的执行效果; animation: longer 1s infinite linear;
- 兼容写法 -webkit-animation
- animation-direction: 动画的播放方向;noraml(正向)/reverse(反向)/alternate(交替运行)
- animation-fill-mode:动画停止的关键帧(要限制次数才可以停止);backwards(第一帧)/forwords(最后一帧)如果设置了动画执行的方向为反向,关键帧起始和结尾也会变
- animation-play-state:动画是否停止播放 running(播放)/paused(暂停)
div:hover { animation-play-state: paused; }
3d变形 transform
- 位移
- z轴的位移 transform:translateZ(数值+px)
- 三个轴都位移 transform:translate3d(x轴,y轴,z轴)
- 旋转
- x轴的旋转 transform:rotateX(数值+deg)
- y轴的旋转 transform:rotateY(数值+deg)
- 三个轴都旋转 transform:rotate3d(a,b,c,数值+deg) 0或者1 0表示不旋转 1表示旋转
- 缩放
- z轴缩放 transform:scaleZ(数值) 0不显示 1正常 0-1缩小 >1放大
- 三个轴都缩放 transform:scale3d(x轴,y轴,z轴缩放)
- 景深:persepctive:数值+px 近大远小
- 形成3d空间 transform-style:flat(2d平面)/preserve-3d(3d空间)属性加在变形元素的父元素身上
- 背部隐藏:backface-visibility: hidden;
透明度
- 使用透明度可以实现元素从无到有的过程
- 第一种 rgba()
div { width: 200px; height: 200px; background-color: rgba(165, 42, 42, 1); 透明度从1 transition: all 1s; } div:hover { background-color: rgba(165, 42, 42, 0);过渡到0 }
- 第二种 opacity
div { width: 200px; height: 200px; background-color: brown; opacity: 1; 透明度从1 transition: all 1s; } div:hover { opacity: 0; 过渡到0 }
- 区别:rbga不会模糊到里面的文字,opacity会影响里面的文字
14
css3新增的选择器
- 属性选择器 权重和class选择器一样 为10 方括号前面可以加标签名,限制名可以是自定义属性
- [属性名=“属性值”] 属性名和属性值匹配
- [属性名^="值元素
- [属性名]{} 属性"] 属性值以某个值开头
- [属性名$=“值”] 属性值以某个值结尾
- [属性名*=“值”] 属性名中包含某个值
- 伪类选择器 权重值和class选择器一样 为10 0010
- 结构性的伪类
- child系列
- 父元素 子元素:first-child{} 父元素中的第一个孩子必须和该子元素匹配
- 父元素 子元素:last-child{} 父元素中的最后一个孩子必须和该子元素匹配
- 父元素 子元素:nth-child(n){} 父元素中的第几个孩子必须和该子元素匹配 n可以替换成even(偶数)odd(奇数) 也可以是表达式 2n等 n是自然是从0开始
- 父元素 子元素:only-child{} 父元素中只能有该子元素一个孩子
- type系列
- 父元素 子元素:first-of-type{} 这么多子元素中的第一个
- 父元素 子元素:last-of-type{} 这么多子元素中的最后一个
- 父元素 子元素:nth-of-type(n){} 这么多子元素的第几个子元素
- 父元素 子元素:nth-last-of-type(n){} 这么多子元素中倒数第几个元素
- child系列
- 目标伪类 (一般结合锚点使用)元素:target{} 点击跳转到该板块之后样式才生效
<a href="#box">点击跳到HTML板块</a> <div id="box">HTML板块</div>
#box:target { background-color: brown; color: chartreuse; font-size: 40px; }
- 状态伪类
- 可编辑 表单元素:enabled{} eg: input:enabled{}
- 不可编辑 表单元素:disabled{} eg: input:disabled{}
- 获取焦点 表单元素:focus{} eg: input:focus{}
- 选中 单选/多选::checked{} eg: input:checked+span{}
- 高亮状态 元素::selection{} eg: div::selection{background-color:blue;color:red}
- 动态伪类(link/visited/hover/active)
- 结构性的伪类
- 层级选择器
- 后代选择器 选择器 选择器{}
- 子代选择器 选择器>选择器 只能选择的孩子
- 相邻的后面兄弟 选择器+选择器{}
- 相邻的后面的兄弟们 选择器~选择器{}
H5新增的语法及标签 ie8及以下不生效
- 新增标签 特点:语义化
- 头部 header
- 导航 nav
- 板块 section
- 侧边栏 aside
- 主要内容区域 main
- 有图文 figure ficaption
<figure> <img src=""> <figcaption>图片说明</figcaption> </figure>
- footer 底部
- article 文章
- mark 标记 内联
- time 时间标签 内联
- 新增的语法
- 文档声明DOCTYPE可以小写
- 单标签不写结尾标签
- 可以省略的结尾标签 li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
- 可以省略的标签 html、head、body、colgroup、tbody
- 多媒体标签
- 音频
<audio src="zy/梦然-少年.mp3" controls autoplay muted loop></audio> 兼容写法 浏览器从上到下解析支持那种格式就播放哪个 <video width="800" height=""> <source src="myvideo.mp4" type="video/mp4"></source> <source src="myvideo.ogg" type="video/ogg"></source> <source src="myvideo.webm" type="video/webm"> </source> </video> controls: 控件 autoplay: 自动播放 谷歌和火狐不支持 muted: 静音 静音之后火狐支持自动播放 loop: 循环
- 视频
<video src="zy/zyx.mp4" controls autoplay loop poster="zy/7.jpg"></video> 属性同音频 autoplay: 静音之后谷歌和火狐都支持自动播放 poster: 视频没有播放之前显示的图片 兼容写法 浏览器从上到下解析支持那种格式就播放哪个 <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> </audio>
- 音频
15
怪异盒模型
- 标准盒模型:box-sizing:content-box
- 盒子宽度 = 内容区的width+padding的左右+border的左右+margin的左右
- 怪异盒模型:box-sizing:border-box ie8以下不支持
- 盒子宽度 = 内容区的width + margin的左右
弹性盒布局(flex)
- 父元素
- 形成弹性盒 display:flex;
- 主轴对齐方式 justify-content
- flex-start 默认值 主轴起点
- flex-end 主轴终点
- center 主轴中心
- space-between 两端对齐
- space-around 中间空隙是两边的2倍
- space-evenly 平均分配
- 交叉轴 align-items
- stretch 默认值拉伸 (主轴是横向的话,看到该效果需要去掉子元素的高度,子元素的高会拉伸到和父元素一样高,主轴是纵向的话,看到该效果需要去掉子元素的度,子元素的宽会拉伸到和父元素一样宽)
- flex-start 交叉轴的起点
- flex-end 交叉轴的终点
- center 交叉轴的中心
- 主轴的方向 flex-direction
- row 默认值 横向从左向右
- row-reverse 横向从右向左
- column 纵向从上到下
- column-reverse 纵向从下到上
- 换行 flex-wrap
- nowrap 默认值 不换行
- wrap 换行
- 多行之间的对齐方式 align-content
- stretch 拉伸
- flex-start 整个盒子的起始
- flex-end 整个盒子的终点
- center 主轴中心
- space-between 多行内容两端对齐
- space-around 多行内容中间空隙是两边的2倍
- space-evenly 多行内容平均分配
- 子元素
- 子项在交叉轴的对齐方式 align-self 重写父元素中交叉轴对齐方式(align-items)
- stretch 拉伸
- flex-start 交叉轴的起点
- flex-end 交叉轴的终点
- center 交叉轴的中心
- 排列顺序 order
- 数值 值越大,越在后面排,可以为负数
- 放大比例 flex-grow
- 0 不放大
- 数值
- 压缩 flex-shrink
- 1 默认值 压缩
- 0 不压缩
- 滚动导航的实现
- 设置子项不压缩 flex-shrink:0;
- 给父元素设置溢出显示滚动条 overflow-x:auto;
- 子项的宽度 flex-basic:数值+px
- 复合属性 flex:flex-grow(0) flex-shrink(1) flex-basic(auto);
- flex:1; 子项占满整个剩余控件
- 子项在交叉轴的对齐方式 align-self 重写父元素中交叉轴对齐方式(align-items)
利用弹性盒对盒子进行水平垂直居中
父元素{
display:flex;
justify-content:center;
align-items:center;
}
css3新增的属性
- 盒子阴影 box-shadow: x轴偏移 y轴偏移 阴影模糊大小 阴影大小 阴影颜色 阴影位置
- eg: box-shadow: 10px 10px 20px 10px green inset;
- 文字阴影 text-shadow:x轴偏移 y轴偏移 阴影模糊大小 阴影颜色
- eg: text-shadow: 10px 10px 10px blue;
- 圆角 border-radius:
- 一个值 四周
- 两个值 对角
- 三个值 左上 对角 右下
- 四个值 顺时针
- 背景图的大小 background-size: 宽度 高度
- 百分比 可能会变形
- 像素
- 关键字
- cover 背景图会不断放大 直到充满整个盒子,可能会出现裁切的情况
- contain 背景图会不断的放大 碰到边缘后就停止放大,可能会出现留白
背景图的固定
- background-attachment:srcoll/fixed(固定) 背景图不会随滚动条滚动
元素类型
- 置换元素:浏览器会根据标签以及标签内的属性值来显示不同的内容
input的type类型
img的src
textarea的内容在变
select中的option内容会变 - 非置换元素:除了置换元素
- 为啥img或者input有的标签可以设置宽高??因为标签属于置换元素
字体图标的使用
- 普通字体图标的使用
- 搜索对应的图片,点击加入购物车
- 完成后点击 添加至项目
- 下载项目到本地站点,解压文件,不要删除任何文件
- 在使用图标的文件地方 用link引入iconfont.css文件
<link rel="stylesheet" href="download/font_2135748_v7l4jintarp/iconfont.css">
- 使用,必须加 iconfont的名字,其次添加所需图片的class名
<span class="iconfont icon-jipiao">哈哈哈</span>
- 彩色图标的使用
- 引入js文件
<script src="download/font_2135748_v7l4jintarp/iconfont.js"></script>
- 添加通用样式
.icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }
- 使用 只需要改id名就行
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-tubiaov-daochushangchuan-"></use> </svg>
- 引入js文件
16
响应式布局
- 概念:根据不同的分辨率,显示不同的样式
- 主要修改的样式
- 元素的隐藏与显示
- 宽度
- 浮动排列
- 文本对齐方式
- 字体大小
- 优点:适配性好
- 缺点:
- 增大工作量
- 出现大量的隐藏元素,导致代码量冗余
- 一般用在小网站
媒体查询
@media 设备类型 and (媒体特性){}
- 设备类型
- all 所有的设备
- screen 显示器/笔记本/移动端设备
- print 打印机
- 媒体特性
- min-width(比最小值大)/max-width(比最大值小)
- 媒体特性的值后面不要加分号
- 多个媒体特性之间用and连接
- and两侧必须有空格
<style>
/* @media 设备类型 and 媒体特性{} */
/* 设备宽度>1000 body显示红色 */
@media screen and (min-width:1000px) {
body {
background-color: red;
}
}
/* 设备宽度500-1000 body显示蓝色 */
@media screen and (min-width:500px) and (max-width:999px) {
body {
background-color: blue;
}
}
/* 设备宽度<500 body显示粉色 */
@media screen and (max-width: 499px) {
body {
background-color: pink;
}
}
</style>
17
移动端准备工作
- meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
+ 视口 viewport
- 布局视口:css所作用的区域,默认是980px;
- 可视视口:所看到的区域
- 完美视口/理想视口:将布局视口的宽和可视视口的宽设置为一样 width=device-width
+ 参数
- width = device-width:宽度等于当前设备的宽度
- initial-scale: 初始的缩放比例(默认设置为1.0)
- minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)
- maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)
- user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)
- 设备参数
- 屏幕尺寸:对角线的长度
- 分辨率:宽度或者高度容纳像素的个数
- PPI: 每英寸显示的像素点的个数
- 物理像素: ps量取的值
- 逻辑像素:css设置的值
- 逻辑像素比(dpr) = 物理像素/逻辑像素
pc端ps量取多少值就设置多少的值,移动端,因为iphone4的出现,出现了视网膜高清屏,1个css像素对应的就不是1个物理像素,物理像素和逻辑像素就产生了不对等的情况- 320设计图 dpr=1
- 750/640设计图 dpr=2
- 1080/>750 dpr=3
- 单位
- 百分比
- em/rem
- em: 字体大小参考父元素的字体大小
- rem: 参考根元素(html)的字体大小
- 一般将根元素的字体大小设置为100px html{font-size:100px}
- vw(设备宽度)/vh(设备高度)
1vw = 设备宽度的1% vh等同
10vw = 设备宽度的10% vh等同
100vw = 设备宽度的100% vh等同
- 根元素单位转换
- 设计图宽度750/设备宽度 375px
1rem = 100px
100vw = 375px
1rem = ??vw 1rem = 26.667vw - 设计图宽度640/设备宽度 320px
1rem = 100px
100vw = 320px
1rem = ?? vw 1rem = 31.25vw
- 设计图宽度750/设备宽度 375px
移动端布局
- 百分比布局(流式布局)
- rem布局(等比缩放布局)
- 观察设计图大小,确定dpr,在ps图像-》图像大小,修改图像所对应的宽度(根据量取的值/dpr)
- 设置HTML标签的font-size:26.667vw或者24.154vw。
- 100vw = 设备分辨率 ( 设计图 / dpr ) 414
- 1vw = 414px / 100 = 4.14px
- 100px = 100/1vw(4.14px) = 24.154vw
- 在设计图里正常测量,测量出来的结果是以px单位结尾的,我们写代码的时候要把这个px换算成rem,此时px和rem的比例就是1rem:100px
height:0.9rem;
- 混合布局(百分比+rem)
18
CSS Sprite
雪碧图的本质:将项目中所有的小图进行整合,整合为一张大图,然后使用背景图片和background-position属性来进行定位,进而显示出整张大图里某一个小的区域。
雪碧图的优势:介绍服务器端硬盘的寻址压力,减少HTTP请求次数;繁忙的网站有必要使用,但不繁忙的网站完全没有必要。
劣势:
-
- 使用麻烦
-
- 维护起来不能改变原有图片的位置。
使用注意事项:
- 1.确定装载图片的容器,并为其设置宽高(图标的宽高)。
- 2.为装载图片的容器设置background-image属性。
- 3.测量要使用的图标在雪碧中的相对位置。
- 4.为装载容器设置background-position属性,属性值就为刚刚量取的相对位置(该值都为负值,没有特性情况)。
本文标签: 笔记webHTML5andCSS
版权声明:本文标题:P-1(全)web前端HTML5andCSS笔记 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1727192600a1101588.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论