回顾html+css（1）
日期： 2020-12-12 分类： 跨站数据测试 375次阅读
一.html和web网页组成部分
1.什么是html
超文本标记语言
2.html的语法
双标记 常规标记
单标记 空标记
3.常用的标记
1) 文本标题h1~h6（其中h1只能用一次，h2用三次）
2）段落标记p
3）空格  分号结束
4) 加粗 b strong
5）倾斜 i em
6）强制换行 br
word-break：break-all；
另起一行换行 word-weap：break-word；
7）水平线 hr
8）上角标 sup 下角标 sub
9）列表3
无序列表 ul li
默认有一个实心圆（想要改变符号样式 给ul添加type=“square” 方形 circle空心圆）
有序列表 ol li
默认是数字（想要改变符号样式 给ol添加type=“A start=3”开始的位置）
自定义列表 dl dt dd
规范的注意点：一组里面只能有一个dt 可以有多个dd
常用的场景：图文排列（图在上自在下 图在左字在右）
10）插入图片<img src=""/>
src相对路径的写法
-1.如果当前文件是html和目标文件所在的目录是同一级 路径的写法：目标文件的名字.扩展名
-2.如果当前文件和目标文件所在的文件夹在同一级目录，路径写法:目标文件的文件夹的名字.扩展名
-3.如果当前文件在找目标文件的过程中，需要后退的时候，路径在写的时候需要添加./如果是后退2步.J.Jlaqiang.ipg
title属性：鼠标悬停上去的提示信息
alt属性：图片加载失败时的提示信息
11）超链接 <a></a>
路径：href：“”
title属性：鼠标悬停上去的提示信息
target=“_blank” 新窗口打开 默认值：_self
12）没有太多默认样式的标签
div 划分区域
span 可以是某几个或者某几个字
14）表格
表格的作用：数据的显示或者数据统计
表格 table
行 hr
列或者单元格 td
相关属性：
width ，height，border，bordercolor，bgcolor，
对齐方式：align=“center” left right
单元格和单元格间距 cellspacing="0"
单元格个内容的间距 cellpadding
行合并 rowspan="合并的数" 注意要删除多余的单元格
列合并 colspan="合并的列"
单元格边框合并 border-collapse：collapse
列表隔行变（eve/2n odd/2n+1）
tr:nth-child(even){
background-color: gray;
}
4.web网页组成的部分
html结构
css修饰
javaScript行为
二.html表单和css基础
html的表单
作用：收集数据的时候
创建表单<form></form>
设置数据传送方式method="get和post"
action=""
name= "表单的名字"
输入框<input/>
属性;type
文本框：type="text"
密码框：type="password"
提交按钮：type="submit" <button></button>
重置按钮：type="reset"
表示提示信息：placeholder
鼠标单击为手型：cursor:pointer
value=""
如果type="submit或者reset value的作用是修改内容
如果type的值是text或者password value的作用是获取用户的信息
css基础：
什么是css：层叠样式表
css语法：选择器{屈性:属性值:属性和属性值合起来的整体叫做声明
写在哪里（引入方式）：
内部样式： 在头部里面写<style></style>
外部样式：链接<link href=" rel="stylesheet" type=""textcss">
导入<style>@important url（）</style>
link和import之间和区别？
1.本质的区别link是HTML的写法import是CSS的一种引入方式
2.加载顺序上的link在加载的时候他是和HTMIL同时加载的，而impor载的
3.兼容上的link没有兼容问题import有兼容问题。
4、js控制dom改变样式的时候，link可以修改的
内联样式：行内样式嵌入式样式写法<div style="width:200px;"></div>
选择器（选择符） 的分类
1）直接用HTML标签的名字作为选择器的，比如div+ p碍h1元素选择器或者类型选择器
2) 多个—样的元素想要区分的时候，可以用class选择器或者id选择器
class的选择器的语法:.class的名字{}
ID选择器的语法id名字{} 特点：唯一性
3）想要所有的元素都变的时候，就用通配符
4) 多个元素样式一样的时候，用群组选择器，群组选择器语法:选择符1，选择符2，选择3{属性：属性值}
三.css选择器和核心属性
1.css选择器
包含选择器（后代选择器）：语法 父元素 子元素{}
伪类选择器
超链接默认的状态alink
超链接访问过后avisited
鼠标经过的: hover
超隧接激活时候的状态aactivef
2.css选择器权重
类型选择器的权重是0001
class选择器0010
id选择器0100
包含选择器所有的之和
伪类选择器0010
内联样式表1000
3.css核心属性
文本相关属性
font-size （浏览器默认大小16px）
字体颜色 color
直接写单词red
用16进制表示#999999
用rab（0,0,0）
透明度rgba（0,0,0,0） a的取值范围是0-1
字体 font-fanily
如果是中文字体或者有多个英文单词组成字体，需要添加双引号
多个字体之间用逗号隔开
文字的加粗 font-family
100-500表示的是不加粗
600-900表示的加粗
这些shuzh后面是没单位的
文字倾斜 font-style
italic oblique表示的是倾斜
normal 不倾斜
文字的水平对齐方式
taxt-align：center；right left
文字的垂直位置
行高line-height
ps在测量的时候，如果文字大小一样，那么就是从上一行文字的顶部到下一行顶部
line-height：1；其中的1表示的意思是字体大小的1倍（可以清除文字自带的上下间距）
简写 font
简写的顺序不能乱font：italic 800 20px/40px"宋体"
最少有两个参数 必须要有字号大小和字体
首行缩进text-indent
只对首行起作用
可以给负值，负值往左边走
文本修饰：text-decoration
text-decoration：none；一般会给a去除下划线
下划线：underline
上划线：overline
删除线：line-through
字间距：letter-spacing
词间距：word-spacing
英文的处理方式
英文大小写的转换 text-transform
列表的相关属性:
去除列表前的小黑点 list-style:none;
背景的相关属性
背景颜色background-color
背景图 background-image:url( );
默认情况下，背景图是显示不了的，但是有内容或者设置了宽高就可以显示了
背景图默认是平铺
背景图显示的范围 由内容的多少或者宽高决定的
背景图的平铺background-repeat
默认值repeat
不平铺no-repeat
横向平铺repeat-X
纵向平铺repeat-Y
背景图的位置background-position：水平位置 垂直位置
取值可以负值
背景图固定back-attachment：fixed；
简写：background：不需要注意顺序
四.css核心属性
浮动属性：
left，right，none
什么时候用，让元素横着排过去
清除浮动：
clear：left，right，both
关于调整间距的
外边距margin
实现一个盒子的水平居中（margin：0 auto；）
可以为负数
margin-top的兼容问题
产生的条件 默认情况下，给子元素添加margin-top，父元素会跟着一起下来
解决的办法：
1.给父元素添加overflow-hidden；
2.给父元素添加border-top：1px solid rgba（0,0,0""
3.margin换成padding
4.给父元素或者子元素浮动
内间距（添白，补充）padding
如果该元素有设置宽度或者高度，添加padding之后需要做减法
如果分析间距相对于该元素是里面的话，可以用padding
如果想要调整背晏图和内客的距离，用的也是padding
如果想要调整边框和内容的距离,用的也是padding
简写:padding的教值的个数
padding-20px;表示4个都是20px
padding:10px 20px;表示上下是10左右是20px
简写:padding的教值的个数
padding-20px;表示4个都是20px
padding:10px 20px;表示上下是10左右是20px
padding:10px 20px 30px;上是10px左右是20px下是30pxL padding:10px 20px 30px 40px,上10px右20下30左40
边框border
边框的宽度border-width
边框的颜色border-color
边框的线型border-style（实线solid 虚线dashed 双线double 点状线dotted）
简写border.20px solid red；
边框写三角形
写一个箭头朝左的三角形
div:boder-top:30pmx solid transparent；
border-bottom : 30px sold transparent； border-left：30px solid transparent； border-right：30px solid red； width :0;}
盒模型：
盒子模型的组成部分
content内容 padding内边距 border边框 margin外边距
五，单行本文溢出显示省略号和元素类型
1.单行文本溢出显示省略号
1） width：200px；
2） 溢出属性overflow：hidden；
默认值：visible
auto， scroll， inherit
分开：overflow-x和overflow-y
3） 空余空间white-space：nowrap；
pre可以识别空格和回车，不会换行
pre-line不可以识别空格，但是识别回车，且换行
4）省略号的属性text-overflow：ellipsis；
默认值:clip
2.元素类型
1）依据css的显示分类
块元素：
竖着排列
可以设置宽高，形状为矩形
可以作为其他元素的容器
例如：div li p h1-h6 ol li form
行内（内联）元素
横着排列
设置宽高不生效
对于盒模型的属性的个别属性值不生效margin-padding的上下显示不正确
例如：i span em a b strong
行内块元素
既有行内元素的特点又有块元素的特点
例如：img input
行内块中的img和文字一起排列的时候，图片对于文字基线对齐
input和文字一起排列的时候 ，input相对于文字居中对齐
垂直对齐方式：vertical-align：
默认值：baseline
居中:middle
top:实际是相对与文字行高的顶端对齐
bottom：实际是相对与文字行高的低端对齐
这个属性会受到line-heright的影响
元素嵌套规则
块元素可以随意去嵌套其他的元素类型，但是块元素有几个比较特殊，p标签不能嵌套自己，p也不能包含其他的块元素，和h1-h6之间不可以互相包含，并且自己不能包自己
默认情况瞎，行内元素不要嵌套块元素，行内块元素
3.元素类型的分类
置换元素（替换元素)
1）元素的实际显示结果，是浏览器根据html的属性或者标签来决定的
2）这类元素一般默认有一定的宽度和高度，或者其他的样式(比如边框)
例如:img input textarea object select
非置换元素（非替换元素）
除了置换元素之外都是非置换元素
4.元素类型转换的属性 display
属性值有18个
常用的 display：block；（inline，inline-block，none）
li默认的display的值是list-item
5.图片撑大三像素兼容
给图片添加：display:block;
给图片添加：vertical-align：top；
六.宽高自适应和浏览器兼容
1.宽高的自适应：用的单位%如果撑满是100%
1）高度的自适应：用的单位可以是%，高度不写，height：auto；
2）如果高度不写，这个时候父元素会有一些问题
子元素浮动后，父元素高度会塌陷（清除浮动的方法）
给父元素添加固定的高度，缺点：不适合自适应的布局
给父元素添加overflow：hidden/auto/scroll；，和zoom1 缺点：如果遇到定位定出去的时候，就不太适合了
给所有的浮动元素添加一个空盒子，并且添加生命==声明clear：both； height：0；overflow：hidden；缺点：造成代码冗余
设置万能清楚法
：after{content：""; display:block; height:0; clear:both; overflow:hidden; visibility:hidden;}
zoom:1;
伪元素选择器的权重是1
:after和content
:before和content
:first-letter 第一个字符 只能用于块元素
:first-line 第一行 只能用于块元素
:selection选中之后的样式 背景颜色和字体颜色
给父元素添加浮动，没有优点
给父元素添加display：table；转成表格
3）自适应的时候，可以一些min-height或者max-height，min-width max-width
min-height对于ie6不兼容
最小高度的兼容写法
1.min-height：200px；_height:200px;
2.min-height：200px；height：auto！important；height：200px；顺序不能乱
4）过滤器
_下划线的过滤器
！important过滤器
\9过滤器
\0过滤器
+或者*过滤器
：root过滤器
****用height写百分比的时候，注意点：给html和body同时添加height：100%；****
2.浏览器的兼容
1）5大浏览器的内核和带博爱作品
Trident 内核 MSHTML ie内核 代表作品IE，遨游
Gecko 内核 代表作品 火狐
Webkit内核 代表作品 谷歌和苹果浏览器
Blink内核 代表作品最新的谷歌和欧朋
Presto 内核 代表作品 欧朋
2）常见的兼容问题和解决方法
图片撑大3像素 hack：img{display：block；或者vertical-align：top；}
图片横着排列的时候，水平之间有空隙 hack：浮动
图片添加a后，再IE上有边框hack：img{border：0；}
图片格式png24在IE6上有背景色，hack：把格式转成png8
3) 表单相关的兼容
表单元素就顶部间距不一致 hack：input{float：left}
表单按钮样式u不一样 hack：用a模拟或者如果按钮是图片，用背景图写
表单里面输入的文字不一样，在IE上文字靠上对齐，hack：line-height；
表单去除自带的边框，不要用border：none；hack：border：0；
4）其他的兼容
margin-top的兼容
hack1：给父元素添加上边框
hack2：给父元素添加overflow：hidden；
hack3：给父元素或者子元素添加浮动
hack4：给换成padding
鼠标变小手cursor：hand；但是只能IE9以下 hack：cursor：pointer；
七.定位，锚点，透明
1.定位
默认值：position：static；
相对定位：position：relative； 不脱离文档流 参照物：自己原来的位置 层叠顺序：没有设置z-index的时候，后写在上面
绝对定位：position：absolute； 脱离文档流 参照物：最近的带有relative的父元素，默认相对与浏览器
固定定位：position：fixed； 脱离 参照物:浏览器窗口
粘性定位：poition：sticky； 不脱离文档流
包含块概念；给决对定位的父元素添加相对定位，那么这个父元素就是包含块。
2.实现一个元素水平垂直居中
1）position：absolute/fixed; margin：auto ；上下左右"0"
3.锚点
作用：同一片页面内不同位置跳转
用法：<a href="#id的名字"></a>
<div id=“box”></div>
4.透明
opacity：0； 或者1
IE的兼容写法fitter：alpha（opacity=0-100）；
显示隐藏：
display:none;隐藏，彻底隐藏内容和位置都不在，显示到隐藏中间没有过程
opacity：0；隐藏，内容不在但是位置还在，可以看到过程，可以搭配过渡动画
八.图片整合
优点：1.减少服务器的请求次数，提高页面的加载速度
2.减少图片的体积
图片整合过程中的主要应用的是
background-position：
其他名称：css精灵图，雪碧图
除特别声明，本站所有文章均为原创，如需转载请以超级链接形式注明出处：SmartCat's Blog
上一篇： Python简述及优缺点
精华推荐