.<.img> 中的title是悬停时的提示 ,alt是加载不出来时的显示,同时给搜索引擎提供服务
2.<a> 中的title属性是鼠标悬停的提示
arget属性是网页打开方式有_selt _blank
设置全局打开方式 <base target="_blank">
3.<video > <audio>
autopaly:自动播放
controls :显示控制器
loop:循环播放
<audio>
<source src="xxx" type="mp3"></source>
<source src="xxx" type="mvm"></source>
</audio>
4.网页head相关设置
设置编码: <meta charset="utf-8">
设置关键字: <meta name="keywords" content="动漫,二次元">
设置详细概要: <meta name="description" content="我们是一个专门吸收二次元的世界">
设置网页刷新跳转 <meta http-equiv="refresh" content="3;http://www.baidu.com">
设置icon小图标 <link rel="icon" href="jd.icon" >
5.表格相关
设置表格标题: <caption>工资表</caption>
合并边框 : border-collapse:collapse; collapse 折叠 边框折叠
table,td {border:1px solid red; border-collapse;}
跨行:rowspan 跨列 clospan
6.控件相关
[多选]下拉框,下拉框分组
<select multiple="multiple">
<optgroup label="北方">
<option>北京<option/>
<option>天津<option/>
<option>河北<option/>
</optgroup>
<select>
表单设置多文件上传:<form multiple>
<input type=""> h5控件
type="email" : 邮箱
type="tel" : 手机号码
type="range" : 滑块
type="color" : 调色板
h5中表单的属性
自动获取属性 : autofocus
自动完成 : autocomplete自动完成
(输入过东西再点会有提示) off关闭 on打开
不为空 : required
7.H5 中的数据显示绑定(option中如果有value,那么没有value的没有提示)
:就是输入控件只输入部分,就能提示全部
<input type="text" list="dataLiset">
<datalist id="dataListe">
<option value="bj">北京</option>
<option>上海</option>
<option>河南</option>
<option>山东</option>
</datalis>
8.H5的自定义属性
语法 : data-[属性名]: 属性值
用法 : Node.dataset[属性名]来获取属性值
注：当我们如下格式设置时，则需要以驼峰格式才能正确获取
<div data-my-name="itcast"> 这样获取Node.dataset['myName']
9. fieldset
fieldset是集合的意思,也可以理解成领域
作用 : 把一块区域用边框包起来,同时上边框左侧中间有个标题
<fieldset >
<legen>注册</legen>
</fieldset>
css 部分
1.设置透明度
rgba(0,0,0,.5)
opcity : 0.5 [该属性会使内容也有透明度]
hsl :色谱图
h : 色调 0-360
s : 饱和度 0%~100%
L : 亮度 0%~100%
hsl(100,23%,50%) 或者hsl(100,23%,50%,0.5) 其中的0.5是透明度
2.字体相关样式:
斜体 : font-style : italic
加粗 : font-weight : bold (也可以是0-900之间的指,400是正常,700加粗)
去掉下划线 : text-decoration : underline;
font属性连写: font:700 italic 20px 宋体
注意: font-size 必须在font-family前面
字体阴影 : text-shadow : [x偏移量] [y偏移量] [模糊度] 颜色
例 : text-shadow : 1px 0px 15px red,-1px 0px 15px blue
选中第一个首字母(文字) ::first-letter
选中第一行: ::first-line
标签被选中时的状态 ::selection
3.css样式初始化
body,p,h1,h2,h3,h4,h5,h6,ol,ul,dl,li,dt,dd {
margin : 0;
padding :0;
font-size :14px;
font-family:微软雅黑,宋体;
color : #000;
list-style : none;
}
img,input,button {
margin:0;
padding:0;
border:0 none;
outline-style:none;
}
a {
text-decoration:none;
color : #000;
}
4. 选择器权重
!important > 行内样式 > id 选择器 > 类选择器 >标签选择器
5. a标签中的伪类顺序 link - visited -hover -active
补充 : :focus 获取焦点的伪类
6.过渡动画 transition
transition : all 2s 1s ease;
第一个属性是要实现动画的属性
第二个属性是动画的持续时间
第三个属性是动画的延迟时间
第四个属性是动画的加速度 linear ease ease-in ease-out ease-in-out
7. 背景连写问题
background : url() Xpx Ypx red no-repeat
注意 : 可以连写多个背景图片,但是不能写背景色
x 跟 y 不写是 从左上角开始 , 省略不写的就是center
left : 从左边开始显示
right :从右边开始显示
8. 垂直外边距塌陷
触发条件 :
1 :父元素与子元素都占着位置 (没有浮动,或者fixed,absolute) position: relative 占着位置,所以也会触发垂直外边距塌陷
2 : 子元素的margin-top 的参照是父元素的上边(就是子元素没设置margin-top时与父元素上边贴合)
解决方法:
1.给父元素设置边框
2.给父元素添加overflow:hidden属性
3.当父元素或者子元素有浮动时(不占着位置),那么也能解决
9.盒子模型
轮廓线 outline-style :
合并边框 : boder-collapse : 给table设置即可 同时给table 跟td设置边框 table,td{ border:1px solid red;border-collapse:collapse;}
边框圆角:
border-radius：5px;
边框的四个角都圆角化
border-radius：5px 10px;
上左 下右的角为5px 上右 下左 的角是10px
border-radius:5px 10px 20px;
上左角5px 上右 下左角10px 下右角20px
10. 边框图片(一般原始图片是九宫格,对应边框的各个部分,中间舍弃)
border-img-src :url() 设置边框图片
border-img-slice : 5px 6px 7px 8px 进行裁切图片
上 右 下 左 4条线切割九宫格,例如上边那条线距离上边框的距离是5px,右边那条线距离右边边框的距离是6px )
border-img-repeat 设置边框图片平铺 选值有:stretch | repeat | round
默认是 : stretch 拉升
repeat : 原始比例平铺,有可能出现显示不完整
round : 整数的平铺,不会出现有边框图片元素显示不完整的情况
11. 浮动
文字不受浮动的影响
清除浮动的3种方式:
1. 给父元素设置overflow : hidden
2. 在最后一个浮动的元素后面添加一个 <div class="clear"></div>
其中 .clear {clear:both; }
3.伪类的方式清除浮动: 只要给父元素设置clearfix的类样式即可
.clearfix: after {
content : "";
display:block;
visibility : hidden;
height:0;
clear:both;
}
.clearfix { zoom:1; }
12.设置背景图片,那么元素一定要有宽高,如果设置了宽高,一定要是块(行内块元素),如果不是一定要进行模式转换 display : block ;display:inline-blick;
13.overflow内容超出盒子大小
overflow : hidden 超出部分隐藏
overflow : scroll 出现滚动条
overflow : auto 当有超出内容才出现滚动条
14.说出4种定位的类型以及他们的特点.
静态定位 static : 默认的定位,标准流下的定位方式,不能用定位方式移动位置
绝对定位 absolute :
1.会进行模式转换
2.脱标不占位置
3.移动位置一级一级向上找有设置除了static定位的父级元素,移动位置则参照该父元素,否则移动位置参照body.
口诀 : 子绝父相
4.具有层叠性
相对定位 relative:
1.不会脱标 占位置
2.不会进行模式转换
3.移动参照自己原来的位置
4.具有层叠性
固定定位 fixed :
1.脱标不占位置
2.进行模式转换
3.移动位置参照浏览器的可视区域
4.具有层叠性
15.精灵图的使用
精灵图 : 是很多张图片合成一张图片 , 可以避免浏览器访问时进行多次的请求,加快网站的访问速度
使用场景 : 一般一些图标的背景图,或者小图标会使用精灵图.
使用方法 : 使用background-img-position : 位置进行找到指定的图片
注意: positon: 中的值 向左还有向上移动是负值。所以一般精灵图中位置多位负值
html和css中的疑惑解决
1.select ->中option 设置 backgournd-color and width 没有效果
解答 : 因为option不支持css样式, 所以一般实现这种效果都使用div+ul列表来实现
2. first-child ,nth-child(n),last-child .....的具体含义
解答: 选中的标签所在父标签中, 选中第一个标签,第n个标签,最后一个标签.
3.absolut 绝对定位如何实现水平跟垂直居中.
解答 : 水平居中 : left : 50% ; margin-left :-自己宽度的一半
垂直居中 : top : 50% ; margin-top : -自己高度的一半
margin : 0 auto;对于不占位置的元素不起作用
4.<link rel="stylesheet" href="book.css">其中的rel是什么的缩写?指的是什么意思?
解答: 是relevance 的缩写, 意思是关联性.在这里指关联样式表
5.<meta http-equiv="refresh" content="3;#">中的http-equiv 是什么意思?
解答: http-equiv 百度翻译 : 标题信息 ,信息
http-equiv 是用来设置http的文件头信息.键值对中提供名称.
一般是服务器在发送实际文档之前设置MIME文档头部.
MIME : 多用途的网际邮件扩充协议;
6.<thead><tbody></tfoot> 是什么?
解答: 这3个标签都是表格中的标签,当我们不写时,浏览器会默认帮我们加上.(很少用)
<thead> 是定义表格的表头
<tbody>是定义表格的主体
<tfoot> 定义表格的页脚,会出现在表格的最下面
一般要一起使用,使用顺序是thead,tfoot,tbody
7.点击文字时 , 控件会获取焦点的使用?labe for
解答 : 给文字用<laber>标签包起来 , 设置for属性,值为要获取焦点控件的id值
<laber for="username">用户名:</laber> <input type="text" id="username">
8.nth-child伪类选中奇数跟选中偶数?
解答 : even:偶数的意思 odd :奇数的意思
nth-child(odd) 选中奇数
nth-child(even) 选中偶数
9.伪元素选择段落的首字符,第一行,选中的状态?
解答: 伪元素 是用2个: 表示 ::
::selection 选中的状态 只能设置颜色相关的属性
::first-line 第一行
::first-letter : 首字符
10. 如何不让浏览器解析html代码,当成文字显示?
解答: 用 <xmp> </xmp>包裹起来
11.什么是轮廓线,怎么去掉?
解答: 轮廓线是指输入框输入时,亮起的边框.
去掉的方式 : outline-style:none
12.表格中的边框合并怎么实现?
解答 : collapse 折叠的意思 border-collapse 设置边框的折叠样式
只要给table便签设置css样式 border-collapse : collapse;即可
13.表单中多文件上传怎么设置?
解答: <form method="post" action="" enctype="multipart/form-data">
14.边框圆角如何是让一个角或者多个角是椭圆?
解答: border-radius 可以设置1-4个值
其中每个值都可以有2种写法 5px/10px 5px
第一个值指x轴的半径,第二个值指Y轴的半径,只写一个值代表x跟y轴的值
通过这种写法,可以设置椭圆形的边框
15.什么是bfc , 什么属性会有bfc?
解答: bfc 是block fomatting context 块级格式上下文,它规定了内部如何布局,定位的规则.
http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
部分引用:
BFC布局规则：
1.内部的Box会在垂直方向，一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float box重叠。
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6.计算BFC的高度时，浮动元素也参与计算
哪些元素会生成BFC :
1. 根元素
2. float属性不为none
3. position为absolute或fixed
4. display为inline-block, table-cell, table-caption, flex, inline-flex
5. overflow不为visible
16.如何引用外部html文件?
解答: iframe引入 object引入
<iframe name="header_frame" height="" width="" frameborder="0"></iframe>
注意: 1. 其中如果没有设置frameborder,那么他默认引入是有边框的,
2. 如果没有设置高度,或者设置的高度小于引入html的高度,那么会出现滚动条
<object style="border:0px" type="text/x-scriptlet"
data="import.htm" width=100% height=30></object>
其中的type可以省略,style也可以不写
————————————————
版权声明：本文为CSDN博主「依秋无泪」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u012312203/article/details/71740102
