HTML
标签
| 作用 | 标签 | 说明 |
|---|---|---|
| 标题标签 | h1-h6 | 标签自带margin值，一个页面中只使用一次h1标签，有利于搜索引擎优化 |
| 段落标签 | p | 标签自带margin属性值 |
| 水平线标签 | hr | |
| 换行标签 | br | |
| 加粗标签 | strong b | |
| 倾斜标签 | em i | |
| 删除线标签 | del s | |
| 上标标签 | sup | |
| 下标标签 | sub | |
| 空标签 | div span | |
| 头部标签 | header | |
| 导航标签 | nav | |
| 侧边栏标签 | aside | |
| 文章标签 | article | |
| 区块标签 | section | |
| 底部标签 | footer | |
| 无序标签 | ul>li | |
| 有序标签 | ol>li | |
| 自定义标签 | dl>dt dd |
特殊标签
/*图片标签*/
<img src="图片路径" alt="图片不显示时替代文档" title='鼠标悬停在图片上时提示文字'>
/*超链接标签*/
<a href="跳转路径" target="打开方式"></a>
<!--
target="_blank" 在新的窗口打开
锚点：
链接同页面:<a href="#two"></a> <h3 id="two"></h3>
异页面:<a href="test.html#two"></a> <h3 id="two"></h3>
-->
/*base标签*/
<base href="路径" target="打开方式">
<!--
base标签决定了整个页面的a标签的跳转路径和打开方式
target="_blank" 整个页面的a标签都是在新窗口打开
href="www.baidu.com" 整个页面的a标签跳转地址或者地址前缀都是此路径
-->
/*表格标签*/
<table border="边框" cellpadding='边框与内容之间的距离' cellspacing='边框与边框之间的距离'>
<caption>表格顶上文字</caption>
<thead>
<tr>
<!-- 行 -->
<th>表格头部</th><!-- 列 默认加粗 居中 -->
</tr>
</thead>
<tbody>
<tr>
<!-- 行 -->
<td>表格内容</td><!-- 列 -->
</tr>
</tbody>
</table>
<!--
水平对齐方式 align=center/left/right
设置在表格上，表格水平对齐方式
设置在tr和td上，里面的内容水平对齐方式
colspan 合并列
rowspan 合并行
注意：table标签内只能显示上述的标签，不能出现其它的标签，但是上述标签内可以显示其他标签，否则其他的不生效
-->
/*表单标签*/
<form action="提交地址" method="get/post">
<label for="">
<input type="text" checked="默认选中" name="名称">
</label>
</form>
<!--
type属性值:
text 文本框
password 密码框
radio 单选
checkbox 多选 name需要相同
submit 提交
reset 重置
file 文件域
email 邮件 必须包含@
tel 电话
search 搜索
number 数字
url 网址 必须包含http://
time 时间
date 日期
week 周
表单的input标签属性:
autofocus 自动获取光标
autocomplete:
on 默认值，输入框记住输入的内容
off 输入框不记住输入的内容
required 必填项
placeholder='占位符'
maxlength='最大字符长度'
value='文本框显示值'
input标签CSS样式：
outline:0/none; 清除轮廓线
::palceholder 修改占位符样式 必须是两个冒号
-->
/*下拉菜单标签*/
<select>
<option selected='selected'></option>
</select>
<!--
option标签属性：selected='selected' 默认选择
-->
/*文本域标签*/
<textarea name="" id="" cols="30" rows="10"></textarea>
<!--
文本域标签CSS样式：
resize:none; 禁止文本域拖拽
-->
/*音频标签*/
<audio controls='' loop='' autoplay=''>
<source src='小乔.mp3'>
<source src='小乔.wav'>
<source src='小乔.ogg'>
</audio>
/*视频标签*/
<video controls='' loop='' autoplay='' width='' height=''>
<source src='小乔.mp4'>
<source src='小乔.wav'>
<source src='小乔.ogg'>
</video>
CSS
css样式书写位置
- 行内样式
它与HTML结构混合在一起 不推荐使用 - 内嵌样式
只能控制当前页面 部分分离（HTML）通常头部 - 外链接样式
从外部引入CSS文件
选择器
- 标签选择器 div
div span 等等标签 - 类名选择器 .类名
class=“类名” - id选择器 #id名
id=‘id名’ - 通配符选择器 *
- 后代选择器
div p span{子代 孙代 …都能选中} - 子代选择器
div>p{只能选中子代} - 交集选择器
div,s,p{样式相同，用逗号链接在一起} - 伪类选择器
:nth-child(1) 选择父元素的子元素 1开始 - 链接伪类选择器
a:link{未访问状态}
a:visited{访问之后的状态}
a:hover{鼠标悬停状态}
a:active{激活状态} - 获取光标选择器
:focus
文字属性
font-size:12px 文字大小
font-family:‘宋体’ 字体
font-weight:700 文字加粗 700
font-style:italic 文字风格 normal不倾斜 italic斜体
letter-spacing:18px 字体之间的间距
word-spacing:18px 单词与单词之间的距离 对中文无效
line-height:20px 行高
color:red 字体样式
text-indent:2em 首行缩进
text-decoration:none 去掉下滑线
text-decoration:line-through 删除线
text-align:center 文字水平对齐
注意：行内元素不能直接使用text-align和text-indent属性
标签显示模式
- 块元素
div p h1-h6 ul ol dl li form
特点：
1）独占一行
2）可以设置宽高
3）块元素不设置宽度的时候，默认是父元素的宽度，不设置高度的时候，默认高度为0，内容会撑开高度 - 行内元素
a span strong b em ins u s i
特点：
1）在一行上显示
2）行内元素不能设置宽和高
3）行内元素默认宽高为0，内容会撑开宽高
4）行内元素代码换行会生成缝隙 - 行内块元素
input img textarea td
特点：
1）在一行显示
2）可以设置宽和高
3）行内元素换行生成缝隙 - 模式转换：
display:inline 转为行内元素
display:block 转为块元素
display:inline-block 转为行内块元素
标签嵌套规范
- 行内元素不能嵌套块元素
- 行内块元素不能嵌套块元素
- p标签也不能嵌套其它块元素
- a标签不能嵌套a标签，但可以嵌套其它元素
背景样式
background:颜色 图片 是否平铺 是否固定 定位 大小
background-repeat:no-repeat 不平铺
background-attachment:fixed 固定背景
background-image:linear-gradient(to top,red,green)线性渐变
background-size:cover 背景图片等比例缩放，铺满盒子，有可能显示不完整
background-size:contain 背景图片等比例缩放，显示完整，有可能盒子铺不满
盒子模型
边框：
border:大小 线条 颜色
border-radius:50%; 圆
内边距：
padding:18px;
会把盒子撑大
外边距：
margin:12px;
行内元素只能设置左右内外边距，不能设置垂直上下内外边距
外边距的两大问题：
1）相邻块元素的垂直外边距合并
2）嵌套块元素的垂直外边距的合并
解决方法：
1）给父元素定义1像素的上边框或者内边距
2）可以为父元素添加overflow:hidden，触发块级格式上下文BFC
3）当子元素浮动或者脱标的时候，不会产生外边距塌陷
盒子阴影：
box-shadow:水平偏移量 垂直偏移量 模糊范围 阴影大小 颜色 （inset 内阴影）
怪异盒子：
box-sizing:border-box;盒子的大小不会因添加padding元素而撑大（不会撑大盒子）
透明度
rgba(255,255,255,.3); 0-1范围取值
opacity:0.2; 0-1范围取值
浮动
特点：
1）浮动的元素会脱离标准的控制，不占据原来的位置
2）浮动可以使（块）元素在一行显示
3）浮动只能浮动到父元素的左边和右边，受到父元素内边控制
4）浮动元素顶对齐，代码换行没有缝隙
5）浮动元素不会影响标准流里的块元素，只会影响下边的元素
6）浮动元素有了行内元素的显示特点：
块元素浮动之后，不会默认父元素的宽度，默认高度为0，内容会撑开盒子的大小
行内元素浮动之后，可以设置宽高了
浮动元素后面元素里面的文字，会环绕，不会跑到浮动元素的底下
清除浮动的原因：为了解决父元素没有设置高度，里面的子元素浮动之后不能撑大父元素高度问题
清除浮动：<style> .clear::after{ content:''; display:block; height:0; clear:both; visibility:hidden; } .clear{ *zoom:1; } </style>
伪元素
在元素前面插入伪元素
::before{ content:''; }在元素后面插入伪元素
::after{ content:''; }注意：伪元素里面必须有content
定位
定位：position:relative/absolute/fixed 相对定位 relative 特点： 相对定位元素不会脱标还占据原来的位置 相对定位的元素位置偏移基于自身位置 绝对定位 absolute 特点： 绝对定位的元素脱标，不占原来的位置 绝对定位的元素，所有父元素没有定位，位置偏移基于浏览器 绝对定位的元素，如果父级元素有定位，位置偏移基于离他最近的使用了定位的父级元素偏移 绝对定位的元素有了行内块的显示特点： 绝对定位的块元素，不会默认父元素的宽度 绝对定位的行内元素，可以设置宽高 固定定位 fixed 特点： 固定定位的元素脱标，不占据原来的位置 固定定位的元素位置偏移基于浏览器可视窗口 固定定位的元素有了行内块元素的显特点： 固定定位的块元素不会默认父元素的宽度 固定定位的行内元素会转换成行内块元素 定位元素的堆叠顺序 z-index:默认值为0，标签越靠后，z-index层叠顺序越靠前 注意： z-index的值没有单位 只能应用于在相对定位、绝对定位、固定定位上，对于标准流和浮动，静态定位无效
元素显示与隐藏
display:none; 隐藏对象，隐藏之后不占位置
visibility:hidden; 对象隐藏，隐藏之后还占据位置
overflow:visible; 溢出可见 默认值
overflow:scroll; 不管内容是否溢出都生成滚动条
overflow:auto; 溢出时候有滚动条
overflow:hidden; 溢出隐藏
鼠标样式
cursor:default 默认值
pointer 小手
move 移动
text 文本
not-allowed 禁止
help 帮助
单行文本超出生成省略号
white-space:nowrap; 单行显示
text-overflow:ellipsis; 省略号
overflow:hidden; 溢出隐藏
去掉图片底部缝隙
vertical-align:top;顶部对齐
middle 垂直居中对齐
bottom 底部对齐
baseline;基线对齐
以上都可以去掉图片缝隙，或者将图片元素转成块元素
注意：vertival-align:样式只有行内元素和行内块元素的文字、垂直对象有效，块元素无效
插入网页图标
<link rel="icon" href="图标地址" type="image/x-icon">
动画
过度属性：transition:all 1s linear
transform:translate(x,y); 移动
transform:rotate(45deg);旋转 顺时针
transform:origin:x y;旋转中心
transform:scale(x,y);缩放默认是1 不带单位
@keyframes 动画名称{
form{
}to{
}
}
@keyframes 动画名称{
0%{
}50%{
}100%{
}
}
调用动画:animation:动画名称 动画时间
3D转换
景深：
perspective:500px;近大远小
一般加在body上
值越小，变化越剧烈
位移translate3d:
transform:translate3d(x,y,z); 移动
使用与2d基本相同
旋转rotate3d:
transform:rotate3d(45deg); 旋转 顺时针
使用与2d基本相同
自定义轴向
transform:rotate3d(1,1,0,45deg)
缩放scale3d
transform:scale3d(x,y,z)默认是1
使用和2d基本相同
注意：z轴效果
开启3D转换
给3d转换的元素的亲生父元素开启空间：tansform-style:preserve-3d;
flex布局
1.写在父元素上
display:flex; 该属性使用后，子元素上的 float、clear、vertical-align属性将失效
flex-direction:row|row-reverse|column|column-reverse (改变主轴方向)
flex-wrap:nowrap|wrap|wrap-reverse(是否换还行)
nowrap 不换行
wrap 换行，第一行在上面
wrap-reverse 换行第一行在下面
flex-flow:flex-direction flex-wrap (上面两个属性的缩写)
justify-content:flex-start|flex-end|center|space-between|space-around|space-evenly(主轴对齐方式)
flex-start 左对齐
flex-end 右对齐
center 居中对齐
space-between 两端对齐，项目之间的间隔都相等
space-around 每个项目两侧的间距相等，项目之间比项目与边框之间的间距大一倍
space-evenly 项目之间间距和项目与容器边框之间的间距相等
align-items:flex-start|flex-end|center|baseline|stretch(交叉轴对齐方式)
flex-start 起点齐
flex-end 终点对齐
center 居中对齐
baseline 项目的第一行文字的基线对齐
stretch 默认值，如果项目没有设置高度或auto，将占满整个容器的高度
align-content:flex-start|flex-end|center|space-between|space-around|space-evenly(交叉轴多行对齐方式)
flex-start 起点齐
flex-end 终点对齐
center 居中对齐
space-between 两端对齐，项目之间的间隔都相等
space-around 每个项目两侧的间距相等，项目之间比项目与边框之间的间距大一倍
space-evenly 项目之间间距和项目与容器边框之间的间距相等
2.写在子元素上的属性
order:默认值为0，用于决定项目的排序，数值越小项目排越前面
flex-grow:默认值为0，用于决定项目在剩余空间的情况下是否放大，默认不放大 1放大
flex-shrink:，默认值为1，用于决定空间不足的时候项目是否缩小，默认等比例缩小 0不缩小
flex-basis：默认auto 用于设置项目的宽度，使用flex-basis属性会覆盖width属性，flex-basis权重比width高
flex:默认值 1 0 auto flex属性是flex-grow、flex-shrink、flex-basis属性的缩写
他的值有flex:auto(项目会放大或缩小，宽度auto)，flex:none(项目不会放大也不会缩小，宽度auto)
align-self:auto(默认)|flex-start|flex-end|baseline|stretch(交叉轴对齐方式)
媒体查询
@media screen and (min-width:0) and (max-width:32px){}
多列布局
那个元素需要多列布局就给那个元素添加样式
1.column-count：分栏的个数
2.column-width：分栏的宽度
3.column-gap：分栏的间距
4.column-rule：分栏的边框
5.column-span：all/1 合并分栏 火狐不支持 子元素上添加
瀑布流效果，解决断裂情况 加 break-inside:avoid; 谁需要给谁添加
移动端适配方法
1.淘宝适配 引入flexble.js文件 单位使用px
2.网易适应 vw + rem 实现布局，等比缩放布局
相对单位：
% 相对最近的父元素
em 相对于最近父元素的字号大小，即1em = 16px
rem root em 相对于根元素（HTML）字号的大小，即 1rem = 16px;
pt 安卓原生使用单位
vw 相当于当前视口的宽度，默认满屏宽度为100vw
vh 相当于当前视口的高度，默认满屏高度为100vh
把根元素的单位换为vw
vw和rem来写移动端
主要是用rem这个单位来写所有的数据，用vw作为HTML的font-size的单位来使用
CSS3新增属性：clac() ==> 计算属性
那么根元素就写，HTML{font-size：clac(100vw/7.5)}
7.5是 实际测量的宽度/100
页面元素rem值 = 实际测量值/100
扫一扫
645
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
