这是自己学习html时候做的一些记录,供大家参考
<!--
块和内联
块元素:独占一行的元素
div p h ul
div没有任何语义,就是一个纯粹的快元素
就是为了方便布局 span是内联元素(行内元素):只会占用自身大小的元素,不会占用一行
常见的内联元素:a img iframe span
span没有任何意义,可以设置样式
块元素主要用来实现页面布局,内联元素主要选中文本设置样式
一般情况下只是用块元素去包含内联元素,内联元素不去包含块元素
a元素可以包含任何元素,除去本身
p元素中不能放任何块元素
-->
<!--
类选择器,id,class,id不能重复,class可以重复
class能赋多个值,使用空格隔开
class用.
id用# 选择器分组
- 通过选择器可以同时选中多个元素
- 语法:选择器1,选择器2,。。。
通配选择器:*{}
选中页面中所有元素 复合选择器:
- 作用:
同时满足多个条件
选择器1选择器2.。 选择器中间没有间隔 伪类选择器必须顺序使用如下,但他们的优先级是一样的
伪类选择器::link,:visited, :hover,:active, :focus, ::selection,
伪元素(用来设置元素中的一些特殊位置)::first-letter, :first-line
:before, :after
before和after一般结合content使用,通过content添加内容
例如:
p{
content:"sdfsfdd";
} -->
<!-- ========== -->
<!-- = 属性选择器 = -->
<!-- ========== -->
<!-- title属性,这个属性可以用于任何标签,指定提示文字
例如<p title=" 这是一个title提示">十分士大夫的</p> 属性选择器,选取拥有特定属性的标签。
语法: [属性名], [属性名=属性值],
[属性名^=属性值](选取以属性值开头的属性元素),
[属性名$=属性值](选取以指定内容结尾的属性标签),
[属性名=属性值](选取包含指定内容的属性标签),
例如p[title]{},p[title=属性值] 子元素选择器: :first-child(选中第一个元素,并且自身是子元素),:last-child
:nth-child(子元素的位置),选定子元素任意位置。even表示偶数位的子元素,odd表示奇数位的子元素[IE8以下的浏览器是不支持的]
:first-of-type,:last-of-type[同一类中的第一个]
父 > 子类型 IE6不支持   兄弟选择器:
p +后一个兄弟元素{}
p ~后面所有类型的兄弟元素 否定伪类:可以从已经选中的元素中剔除某些元素
p:not(选择器){}
样式的继承,后代会继承祖先的样式,但是并不是所有的样式都会被子继承,例如,背景是不会被继承的 使用不同的选择器,选中同一个元素,设置相同的样式时、
这时候样式之间产生了冲突
优先级:内联样式>id>class>元素选择器>通配
如果优先级相同,会选择靠后的一个
可以在样式的最后,添加一个!important,将会获得最高优先级。但在开发中尽量避免使用
--> <!--
这两个都表示强调的内容
em 强调着重点,表示语气上的强调,em在浏览器中默认使用斜体显示
strong 表示强调,比em更强列,默认使用粗体显示
--> <!--
i标签没有任何语义,没有着重的意义
b只是丹村的加粗
--> <!--
small标签的内容文字较小
可以用于版权声明,合同
--> <!--
cite用于加书名号的内容,表示参考的内容
--> <!-- q标签表示一个引用,会自动加上引号 blockquote 表示长引用,表示一个块元素 sub,sup,下标和上标 pre标签是一个预格式标签,保留格式空格,不会删除空格显示 --> <!-- 列表有三种:
.有序列表 ol li
.无序列表 ul li
.定义列表 dl 包含dt(被定义的内容) dd(对定义内容的描述) --> <!-- ========== -->
<!-- = 长度单位 = -->
<!-- ========== -->
<!--
长度单位
px 像素
百分比% 占父元素的比例
em 和百分比相似
根据当前的字体大小来计算的
1em = 1font-size 当字体大小发生变化时,em也会变化
设置字体相关的样式时,会使用 --> <!-- ========== -->
<!-- = 字体样式 = -->
<!-- ========== -->
<!-- line-height 表示行高 可以继承
px时
、行间距 = 行高 - 字体大小
定义一个百分数,相对于字体大小来说
直接指定行高,传入数值,行高会设置字体大小的倍数 使用font定义字体时,如果不在font中指定,都会采用默认值,所以要么在font后定义单独样式,要么不指定
font-family
font-variant
font-size
font-weight
font-style
color
line-height
--> <!-- 关于文本的一些常用的样式 text-transform(文字变形): 可以继承
值:none(默认), capitalize(首字母大写),uppercase(全部大写),lowercase(小写),inherent
text-decoration(定义文本的修饰):不可继承
可选值:none(不加任何修饰)
underline(加下划线
、 overline 加上划线
line-through 为文本添加删除线 超链接会默认添加下划线,可以设置text-decoration 为none去除下划线
letter-spacing(字符之间的间距)【中英文都有效】
word-spacing 单词之间的距离【中文改变空格的大小,英文是词与词之间】
text-align:文本的对齐 left right center justify(两端对齐) text-indent:首行缩进 em单位表示一个单词 如果是负值,字体就会隐藏
--> <!--
盒子
width和height来设置盒子内容区的宽度和高度
设置边框必须设置三个样式,缺一不可 但是他们都有默认值 :border-weight(上 右 下 左, 上 左右 下, 上下 左右),border-color(上 右 下 左, 上 左右 下, 上下 左右),border-style
可以设定border设置三个样式,没有顺序要求例如 border:10px red solid border-right:none margin(外边距) padding(内边距)
margin可以设置为auto(能设置多大,就设置多大) 一般只是设定水平方向的,left和right同时设置为auto,会一边一半,经常会使用这样来使盒子居中
垂直方向设置auto,外边距默认为0,不起作用
垂直外边距的折叠
在网页中垂直方向的相邻外边距会重叠
外边距重叠指的是兄弟元素相邻外边距会取最大值
如果父子元素的垂直外边距相邻了,则子元素的外边距会设置给父元素
解决方案:把父子元素的外边距给隔离,可以设置顶部border或者设置padding内边距 浏览器设置了默认样式(为很多元素设置了padding和margin),为了在没有样式时,也有一个好的显示效果
所以我们需要将浏览器默认设置的样式去掉,由于通配选择器是最低优先级,所以在通配选择器中设置margin和padding为0
*{
margin:;
padding:;
}
--> <!-- ========== -->
<!-- = 内联元素和块元素 = -->
<!-- ========== -->
<!-- 内联元素和块元素的区别
内联元素
内容块
不能设置width和height,没有用
内边距
可以设置padding,水平垂直都可以,但是垂直方向不会影响布局。
边框
可以设置边框,但是垂直方向不会影响布局
外边距
水平方向的外边距不会重叠,而是求和
不支持垂直方向的外边距 display:会改变元素的类型 inline-block block none(不显示且不占空间)
visibility:是否显示,visible hidden(隐藏但是占用空间)
overflow:对溢出的部分进行处理【注:在父元素中进行设置】
visible 默认值,在父元素以外的位置显示
hidden 溢出的内容会被修剪,不会显示
scroll 产生滚动条,使用滚动条查看溢出的内容
- 无论内容是否溢出,都会显示滚动条
auto:根据需要,来决定是否需要添加滚动条
--> <!-- ========== -->
<!-- = 文档流和浮动 = -->
<!-- ========== -->
<!--
一旦脱离文档流,元素不在区分块元素和内联元素,只是互补。如果是块元素,则会在快元素的基础上拥有内联元素的特性,反之,亦然 一旦脱离文档流,可以去往任何位置。拥有所有特性,可以这么说 就是高层次的inline-block(内联和块元素的结合) 文档流 文档流处在网页的底部,他表示的是一个页面中的位置
我们所创建的元素默认都在文档流里面 元素在文档流中的特点
块元素:
.在文档流中独占一行
内联元素:
。只占用自身的大小,从左到右排列 把块元素水平排列,把块元素从文档流中剔除出来,可以用float实行 元素与元素之间一般情况下都是换行显示,所以中间会有个空格,可使用float消除空格。
float:只要元素浮动,下面的元素会顶上去被浮动的元素覆盖。只有下面的元素也设置浮动,才会浮动到同一水平位置上
none
left 从文档流中脱离出来,向页面左侧浮动
right从文档流中脱离出来,向页面右侧侧浮动 一旦浮动,都会脱离文档流,可以设置宽高,和块元素一样
一旦脱离文档流,会相当于从当前布局脱离出去,就当不存在一样,剩余的布局从新界定
.高度塌陷问题,父元素不设定高度,子元素浮动之后,父元素会塌陷,没有高度。可以将父元素的高度写死,避免这种问题出现,但是一旦写死,父元素将不能自适应布局(不推荐使用)
--> <!-- ========== -->
<!-- = 解决浮动问题产生的高度塌陷 = -->
<!-- ========== --> <!--

根据w3c标准,在页面中元素都包含一个隐含的属性,BFC(blcok formatting context)
默认是关闭的
开启BFC主要解决浮动的问题
当开启BFC时候,元素将会由如下特性
    1.父元素的垂直外边距不会和子元素重叠
    2.开启BFC的元素不会被浮动元素所覆盖
    3.开启BFC的元素可以包含浮动的子元素
如何开启BFC
    1.设置元素浮动(不建议使用 ,会导致布局混乱,父元素宽度丢失)
    2.设置inline-block(父元素宽度丢失,不推荐使用)
    3.设置绝对定位(一样的效果和第一个)
    4.将元素的overflow设置为非visible的值,一般使用auto和hidden
    推荐使用第四种方式
但在IE6及以下版本不支持BFC,所以使用这种方式不能兼容IE6
但是有另一个属性叫 Has Layout
该属性的作用,和BFC类似,在IE6中可以开启这个属性来设置塌陷问题
开启方式很多,我们直接使用一种副作用最小的
直接将元素的zoom设置为1就行(zoom表示放大的意思,后边跟着一个数值,就是将我么的元素放大几倍。 zoom只在IE中支持) 如果希望清除其他浮动元素对当前元素的影响,对当前元素应用clear属性
可选值:
none
left 清除左边浮动元素对当前元素的影响
right
both 清除对当前元素影响最大的 解决塌陷方案一:
.1在父子中使用 overflow ,zoom消除外边距重叠影响
.2在兄弟中使用clear清除浮动影响
解决塌陷方案二、:、
.1在父子中,在浮动元素下方添加一个div 在这个div中使用clear
.2在兄弟中直接使用clear
w3c推荐使用
解决塌陷问题方案三:
.1通过after伪类选中父元素的后面,添加一个空元素
div:after{
content:"";
display:block;
clear:both;
}
在IE6中不兼容,需要使用
div{
zoom:;
}
.2在兄弟中直接使用clear
最推荐的一种方式
同时解决父元素外边距和子元素相邻 ,高度塌陷问题
使用空的table标签可以做到这一点
div:after,div:before{
content:"";
display:table;
clear:both;
}   在IE6里面,块元素和内联元素都是看作块元素,这个要注意
-->
<!-- ========== -->
<!-- = 关于定位 = -->
<!-- ========== -->
<!--
定位
定位指的是将指定的元素放到任意的位置
position
可选值:
static
relative
absolute
fixed relative:
. 相对自身位置(在文档流中的原来位置)进行定位,通过left ,right,top , bottom来设置、
. 相对定位不会脱离文档流,原来的位置仍然占用
. 相对定位会使元素提升一个层级,如果发生重叠,会覆盖别的元素
. 相对定位不会改变元素的性质,块元素还是块元素,内联元素还是内联元素 absolute设置绝对定位
. 会使元素脱离文档流
. 开启绝对定位,不设置偏移量,位置不发生变化
.绝对定位是相当于离他最近的开启定位的祖先元素定位的(一般情况下,开启了子元素的绝对定位,父元素会开启相对定位)
如果所有祖先元素没有开启定位,就会相对于浏览器进行定位
.绝对定位会提升一个层级
. 绝对定位会改变元素的性质
内联元素变成块元素
块元素的高度和宽度默认都被内容撑开
fixed定位(绝对定位的一种)
. 元素会脱离文档流
不同的是:
固定定位永远都是根据浏览器窗口进行定位的
固定定位不会随滚动条滚动
IE6不支持这个固定定位 关于层级:
如果元素都提升了等级,在布局上谁在下面,就会盖住上面的元素
通过z-index属性可以用来设置元素的层级:为z-index指定一个值,数值越高,越优先显示
对于没有开启定位的元素,z-index没有用
父元素的层级再高,也不会遮挡子元素
--> <!-- ========== -->
<!-- = 透明 = -->
<!-- ========== -->
<!-- opacity用于设置透明度 在IE8及以下
需要使用filter:alpha(opacity=); 在IE tester中不行是个bug --> <!-- ========== -->
<!-- = 背景图片 = -->
<!-- ========== -->
<!--
所有的背景可以用background一个属性来设置,属性之间没有顺序
background-img来设置背景图片
语法:background-img:url()
- 背景元素大于当前大小,会显示左上角
- 背景元素小于当前大小,则会默认平铺(用图片不断填充)
- 背景颜色一定实在背景图片的后边 background-repeat 设置背景图片的重复方式
可选值:
repeat 双向重复
no-repeat 不重复,有多大就显示多大
repeat-x 横着重复,竖着不重复
repeat-y 竖着不重复,横着重复 background-position 设定图片的显示位置
可选值: top left center bottmo right
也可以使用偏移量 一个水平 一个垂直 。 可以指定正值和负值 background-attachment用来设置背景图片是否随页面一起滚动
scroll 默认值 滚动
fixed 固定在某一位置 不随页面滚动 背景图片永远相对于浏览器窗口进行布置,这个属性值一般只会设置个body元素,其他的基本不用
--> <!-- ========== -->
<!-- = 表格 = -->
<!-- ========== -->
<!-- table表格 colspan 横向合并单元格
rowspan 列合并
border-spacing 表格和单元格之间的距离
border-collapse 设置表格边框合并 如果设置了这个边框合并,border-spacing不起作用
th 表头
提供了三个子标签来设置长标签 thead tbody tfoot 表示不同的主题,这三个是固定位置显示,可以不顺序写
如果没有写tbody,会自动把tr放到tbody中
--> <!-- ========== -->
<!-- = 表单 = -->
<!-- ========== -->
<!--
使用fieldset来为表单项进行分组,使用legend来指定组名
<fieldset>
<legend> </legend>
</fieldset> input类型 【输入框是通过name来提价数据到服务器端的,name是必不可少的】
注意:
.像不需要用户去填的但是用户去选择的,必须写上value值,提交到服务器
.如果在单选或者多选希望选中默认值,可以使用checked=“checked”来设置选中
.在select中的option中添加selected=”selected“
.input 的placeholder提示文字,IE8及以下不支持,需要用js代码设置
.在IE6中,input的背景图片会滚动,在IE6中单独使用attachment=fixed,其他浏览器不用这么设置 text
password
radio 单选按钮 ,name必须相同实现单选
checkbox 多选框 name必须相同 value必须指定
select
下拉列表 使用option来设置列表项,在select中添加一个multiple可以设置多选。 name属性需要指定给select, value指定给option
在select中可以使用optgroup对选项进行分组,label设置组名
textarea 多行文本框
button
submit
reset
button类型
submit
reset
button
label标签 选中提示名 需要一个for属性,指定一个表单项的id
例如 <label for="myId">username</label>
<input id="myId" type="text" name="username" /> --> <!-- ========== -->
<!-- = 框架集 = -->
<!-- ========== -->
<!-- 框架集和内联框架的作用相似,都是作用于一个页面中引入其他的外部的页面
框架集可以引入多个页面,而内联框架只能引入一个 使用一个frameset来创建一个框架集 frameset和body不能同时使用
属性:
rows 指定框架集中的所有的框架,一行一行的排列
cols 列排列
这连个属性必须选择一个,指定框架占的比例
框架集中也可以嵌套框架集
他里卖的内容是不会被搜索引擎检索的,整个页面只能引用别的页面
引入一个页面,就会发送一个请求,用户体验较差
如果非要使用建议使用frameset 不建议使用iframe
<frameset>
<frame src="url"/>
</frameset> --> <!-- ========== -->
<!-- = 实现有选择性的执行css和js代码 = -->
<!-- ========== -->
<!--
使用这个代码,可以选择性的在IE中执行,IE10及以上版本不支持这个代码
条件hack
<!--[if IE]> <![endif]-->
<!--可以这样设置
if lt IE 表示小于IE8版本的都会执行
if ! IE 不是IE8的都会执行
if IE 等于
if ht IE 8大于 [if IE ]> 在body最后写js代码
解决IE6不支持png24,修复图片--> <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix("要修复的元素选择器,另一个选择器");
</script>
--> <!--属性hack
在属性前面添加符号,可以在IE版本中有选择性的执行
_ 下划线 只有在IE6及版本以下才执行
* 星号 只在IE7及以下执行
在选择器前加 *html 只有IE6才能识别
--> <!-- ========== -->
<!-- = 实战经验 = -->
<!-- ========== -->
<!--

设置按钮效果,使用背景图片设置按钮,设置背景的位置时,表示按钮的状态
图片整合技术(css-sprite),把多张图片整合成一张图片,然后设置图片的位置,显示其中的不同图片
优点:
. 浏览器只需要发送一次请求,加载多个图片。
提高用户体验
. 图片整合为一张图片,提高了请求的速度, 减小了图片大小 IE6中队png24支持度不高
如果使用的图片格式是png24,会导致透明效果消失
解决方案,
.可以把png24改为png8
.使用js代码来解决该问题
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix("要修复的元素选择器,另一个选择器");
</script>
二,
每个浏览器设置空格的效果不大一样,这个需要注意
三,
设置pointer-events:none,可以让本元素丧失掉焦点。下级元素不会被遮挡事件处理
-->