Web-HTML+CSS入门笔记

一、 Web-HTML入门笔记
1.注释无法嵌套。
2.a标签:可做跳转、下载、锚点。
属性href必须有;
属性target的值:
_blank:在新的标签页打开连接;
_self:在当前页面打开连接(默认情况);
外部连接:域名;
内部连接:非域名;
锚点连接:用于跳转到指定的名称的部件处,目标部件名前必须打上#;

伪类一般用在a标签中,分别有4个:link(默认情况)、visited、hover、active。
伪类的语法格式:a:伪类{a的样式};

锚点连接例子:
这里是顶部,单击可到达底部
这里是底部,单击可到达顶部
3.audio标签:
属性src:音频的URL;
属性autoplay:自动播放;
属性controls:出现播放控件;
属性muted:静音;
标签中间放打开失败的提示信息。
4.video标签:
属性src:播放的视频的URL;
属性autoplay:自动播放;
属性controls:出现播放控件;
属性width:设置视频的宽度;
属性height:设置视频的高度;
属性poster:播放前显示海报,海报图片的URL;
属性width、height:当只修改某一个时,另一个会等比例缩放;
标签中间放打开失败的提示信息。
5.ul、li标签:ul是一个无序列表区域,li是列表里的项;子项里可以嵌套列表;
ul里的属性type:
disc:实心小圆点(默认情况);
square:实心正方形;
circle:空心小圆圈;
ul与li必须组合使用。
6.ol、li标签:ol是一个有序列表区域,li是列表里的项;子项里可以嵌套列表;
ol里的属性type:
1:li前的是阿拉伯数字(默认情况);
i:li前的是小写罗马数字;
I:li前的是大写罗马数字;
a:li前的是小写字母;
A:li前的是大写字母;
ol与li必须组合使用。
7.dl、dt、dd标签:dl是一个自定义列表域,dt是概念名词、dd是对概念的描述;
子项里可以嵌套列表;
dl、dt、dd必须组合使用。
例子:

1.江户川柯南:
真实身份是工藤新一
2.毛利小五郎:
一个老油条
8.p标签:段落标记。 9.font标签:属性size的值:size = [1,7]。 10.b标签与strong标签:都是加粗效果,只是名称不同。 11.i标签与em标签:都是强调,即斜体效果,只是名称不同。 12.pre标签:在页面中,原样输出标签中的文本。 13.u标签:一个下划线,尽量不使用。 14.del标签:一个删除横线,不常用。 15.sub标签:一个下标效果。 16.sup标签:一个上标效果。 17.hn标签:一套标签,其中n = [1,6],常用于做标题,n与字体大小呈负相关。 18.small标签:相对其前一个标签里的字体大小小一号。 19.big标签:相对其前一个标签里的字体大小大一号。 20.div标签:一个div独占一行,其默认宽度为浏览器宽度的100%。 21.span标签:多个span可并排一行,其宽度、高度、边距均不可修改;用于修饰你想修饰的文字。 22.table标签: 属性border:整个表格边框的宽度; 属性bordercolor:边框的颜色; 属性width:整个表格的宽度; 属性height:整个表格的高度; 属性cellspacing:单元格之间的间距; 属性cellpadding:单元格中的内容与单元格的间距; table的结构: table:一个表格区域; caption:一个表格的标题内容; thead:一个表头区域; tr:表的一行区域; td:一个普通的单元格; th:一个表头单元格的内容; tbody:一个表格主体区域; tfoot:一个表格尾部的区域; 例子: …… …… ……
一张表的标题内容
表头单元格的内容
普通单元格的内容
表脚注单元格的内容

table的特性:一个table独占“一行”,单元格是内容撑开宽度,支持宽高;

对表格加样式,就加在table、th、td中,不要对其他表格的东西加样式;
默认情况下,单元格的宽度和高度自动按需分配;
每一列必须设置宽度;
若想固定单元格的宽高,则需要设置单元格的宽高;

单元格的合并:合并前需要去掉结构化区域,同时记得删除原来的单元格,即删除紧跟着它的相应个数的单元格;
单元格的属性:
属性rowspan:跨行合并;
属性colspan:跨列合并;
23.form标签:
属性action:数据发送的目标URL;
属性method:数据发送的方式,为get或post;
get:
在URL中可以看到数据,数据传送量小,数据传送的格为:
?name1=value&name2=value……;
post:
在URL中看不到数据,数据传送量较大;
属性enctype:当input标签里的type为file时,必须将enctype的值置为“multipart/form-data”,同时将method的值置为“post”;
24.label标签:label标签没有任何特效,用于将内容与input关联起来,一般用在单复选框中;
使用方法:
a),直接将单复选框包住即可。ie6不支持这种用法;
b);ie6支持;
25.textarea标签:一个多行文本域;属性name:多行文本域的名称。
26.select、option标签:select是一个下拉框域,option是下拉列表里的一个子项;select与option一般组合使用;
select的属性:
属性name:下拉列表框的名称;
属性multiple:允许同时选中多个子项;
option的属性:
属性value:被选中的一个值;当没有value时,提交的内容是option里的内容;
属性selected:与单复选框里的checked的意思一样;
27.iframe标签:将当前页面与iframe内的东西分离开。
在iframe中可以存放另一个网页或文件;
属性src:显示文档的URL;
属性frameborder:是否显示框架的边框,0则不显示,1则显示;
属性width:框架的宽度;
属性height:框架的高度;
属性name:框架的名称,把该名称填入a标签里的target,则a跳转的内容会显示在该框架中;
属性scrolling:是否显示框架滚动条,yes则显示,no则不显示,auto则自动;
标签中间放打开失败的提示信息:
28.frameset标签:
frameset是在整体上划分空间,而frame是具体的部分;frameset与frame必须组合使用;
使用框架集,必须去掉body标签;
frameset的属性:
属性rows:将空间拆分成多少行,多行间的大小用英文逗号隔开;
属性clos:将空间分成多少列,多列间的大小用英文逗号隔开;
例子:

29.几个常用的特殊字符:  :空格;  :大一点的空格 >:> <:< &:& 30.
:一个换行标记。 31.
:一条水平分割线。 32. : 属性src:图片的URL; 属性alt:图片打开失败显示的文字; 属性title:鼠标放在图片上时显示的文字; 属性width、height:当只修改某一个时,另一个会等比例缩放;

img标签默认会在图片下多出几px的间隙;
去除该间隙的方法:给img加上vertical-align:top\middle\bottom;
33.:对提供的资源依次进行选择,直到遇到能够播放的、或选择完为止;
属性src:播放的音频或视频的URL;
属性type:audio或者video;
必须与audio标签或video标签组合使用。
34.:支持宽高,一般不改单复选框的宽高和select的高度;
在ie6下,input里的背景会被多出的内容挤走,因此一般不给input加除了宽高以外的样式;
属性name:要提交数据的input标签必须具有name;
属性type:所有input标签必须说明属性type的值;
text或password或button或submit或file或reset或radio或hidden或checkbox;
text:文本域,value是文本域中的文本内容;
password:密码框,会以*号或.来显示密码框的内容,value是密码框里的密码;
submit:提交按钮,value是提交按钮显示的名称;
button:普通按钮,结合js使用,value是该按钮显示的名称;
reset:恢复当前form里提交数据的全部的input的初始状态,value是该按钮显示的名称;
radio:单选,同一组里的radio型的input的name必须相同,value是被选中的一个值;
checkbox:多选,同组的checkbox型的input的name必须相同,value是被选中的多个值;
hidden:隐藏性质的input,会把value的值提交上去;
属性readonly:只读性质的,该内容会被提交,用在text、password型的input中才有效;
属性placeholder:在文本域中,显示提示用户要输入的信息内容,用在text、password型的input中才有效;
属性maxlength:最多可在文本域中输入的字或字符个数,用在text、password型的input中才有效;
属性disabled:禁用该所有类型的input,该内容不会提交上去;
属性checked:选中的意思,用在radio或是checkbox型的input中才有效;
35.:
frame的属性:frane标签与frameset标签组合使用。
属性src:显示文档的URL;
属性scrolling:是否显示滚动条,yes则显示,no则不显示,auto则自动;
属性noresize:不允许缩放框架的空间大小;
36. :用于规定默认的href和target,使用位置在head。

二、 WEB-CSS入门笔记
1.外部样式的引用方法:在head中,
2.盒子的width、height指的是盒子的容积,并非盒子的大小。
3.属性background的属性值:
background-color:背景颜色;
background-image:背景图片;url(背景图片的URL);
background-position:设置背景图片在盒子里的位置;x y或
center top right bottom left;
background-repeat:是否在盒子里重复背景图片;no-repeat或repeat-x或repeat-y;
background-attachment:是否固定背景图片在盒子里的位置;fixed:相对固定;
默认情况:绝对固定,fixed的参照物是浏览器大小,而默认情况的参照物是盒子;
4.属性border的属性值:border会改变盒子的大小。
border-width:边框的宽度;
border-style:边框的样式;多数用solid;要显示边框必须给出此属性值;
border-color:边框的颜色。
5.可以将属性padding内边距理解为,给盒子内部周边填充了与盒子背景颜色相同的区域,因此padding会改变盒子的大小;
padding的语法格式:top right bottom left
属性padding的属性值:
padding-top
padding-right
padding-bottom
padding-left
6.在垂直方向上相遇的margin会产生合并,即:
第一种情况:当两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
第二种情况:当两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
第三种情况:当两个外边距一正一负时,折叠结果是两者的相加的和。
常用解决方法:加border或用padding代替margin或去掉其中一个margin,
把另一个margin的值改为自己想要的值;
属性margin不会给盒子填充东西,因此不会改变盒子的大小,但是,但是,margin会占用空间,要注意margin后该盒子是否会从父级盒子产生溢出;margin是从该元素向四周散发出去的,在垂直方向上,直至遇到border或是padding才会断,不然垂直方向上的margin会整个直接溢出;
margin的语法格式:top right bottom left
属性margin外边距的属性值:
margin-top
margin-right
margin-bottom
margin-left
属性margin的auto值的作用:将该元素附近的可用空间转移到指定的水平方向,auto在垂直方向上无效;
auto的应用:a)居中;b)左对齐、右对齐。
7.属性font的值(一般不使用font的复合):
font-style:文字斜体之类的,不常用;默认情况:normal;
font-weight:文字加粗;默认情况:normal;bold;
font-size:通常使用偶数,汉字一般不小于12px;
line-height:行高;对行高的理解:行高就像信笺纸的一行,行高就是一行的高度,文字就在行高的上下居中处;
行高的应用:将行高设置成盒子的高度,可以使得文字在该盒子中上下居中;
font-family:可以使用英文逗号提供多种字体,以供浏览器选择;字体名建议加双引号;
默认情况:中文的为宋体,英文的为arial。
8.属性color:此color指的是字体的颜色。
9.属性text的值(一般不使用text的复合):
text-align:文本对齐方式;left或right或center或justify(两端对齐);
text-indent:单位为em时,首行缩进多少个汉字;单位为px时,首行缩进多少像素;
text-decoration:underline或overline或line-through;
默认情况:none。
10.样式选择符:
a)#:id选择符;
b)id a+一个英文逗号+id b:群组选择符;
c).:class选择符;
d)类型名:类型选择符;
e)类型名a+一个空格+类型名b:包含选择符;
不只是类型才有包含选择符;

当同一个同时面临多种选择时,需要考虑样式优先级:
a)不同级别时:js>行间style>id>class>类型=伪类(有包含的类型>没有包含的类型);
b)相同级别时:按照解析顺序看;   
包含时,对包含的一切该类型均有效;
一个标签同时使用多个class时,用空格隔开,不分前后。

11.重置默认的样式(css reset)常用代码:
body{
margin:0;
}

ul,ol{
margin:0;
padding:0;
list-style:none;
}

dl,dd,p,h1,h2,h3,h4,h5,h6{
margin:0;
}

a{
text-decoration:none;
}

img{
border:none;
vertical-align:top;
}

table{
border-collapse:collapse;
}

th,td{
padding:0;
}

form{
margin:0;
}

input{
padding:0;
margin:0;
}

select{
margin:0;
}

textarea{
margin:0;
padding:0;
}
12.行标签和块标签:
行标签里不可以有块标签;
a标签里不可以嵌套a标签;
p标签、hn标签、dt标签里不可以有块标签;
行标签特性:
行标签代码之间的换行会被解析成半个汉字的px;
不支持垂直方向的margin和padding;

行标签有:a标签、span标签、strong标签、em标签;
块标签有:p标签、div标签、列表标签、hn标签。

13.属性display的值:
block:将该元素显示为块元素;
inline:将该元素显示为行元素;
inline-block:将该元素显示为行块元素(即块与行的综合)【ie7及以下不支持】。
14.属性float的属性值:
left
right
默认情况:none;
特性:除了不解析行标签代码之间的换行以及能够漂浮外;其他的特性与inline-block同;
所谓漂浮:
按照指定方向漂;
脱离文档流;
其里面的内容与元素本身分离。
使得块可以内容撑开宽度;
使得行元素支持宽高;
float只会影响其后头的元素,不会影响到其前头的元素。

ie6、ie7下的兼容问题,即被挤出的内容会与漂浮的元素有一定的距离,并非紧紧排在一起;
解决方法:要求浮动元素紧排在一行;得给相关元素都加float;	
	
在ie6下,float的块标签的水平方向margin会被加大一倍;
解决方法:给float的块加上display:inline;

在ie6下,float的li之间会产生几个px的间隙;
解决方法:给li加上vertical-align:top\middle\bottom;

15.vertical-align是垂直方向上的对齐方式;属性值有:top;middle、bottom;
对齐的相关元素都得加上相同的vertical-align,否则vertical-align无效;
vertical-align只对行元素起作用,对块元素无效,对浮动的元素也无效;
16.属性clear的值:
left
right
both
默认情况:none:
作用:清除上一层中指定方向的浮动,使得当前层不会受到上层浮动的影响。
17.简单的布局模型:
html:




test
















	css:
		body{
				margin:0;
				font-size:14px;
		}
		dl,dd,p,h1,h2,h3,h4,h5,h6,ol,ul{
											margin:0;
		}
		ul,ol{
				padding:0;
				list-style:none;
		}
		a{
			text-decoration:none;
		}
		img{
				border:none;
		}
		#box{
				width:900px;
				margin:0 auto;
				zoom:1;
		}
		#box:after{
			content:"";
			display:block;
			clear:both;
		}
		.left,.right,.center{
							width:300px;
		}
		.left div,.center div,.right div{
									border:1px solid white;
		}
		.left div,.right div{
							height:298px;
							background:gold;
		}
		.left,.center{
					float:left;	
		}
		.right{
					float:right;
		}
		.center div{
						height:198px;
						background:orchid;
		}

18.清除浮动的弊端的方法:
a)给父级加dislay:inline-block;但是会使得水平方向的margin失效;
b)给父级指定高度;但是不便于以后修改;
c)给所有相关“父级”加float;但是会使得水平方向的margin失效;
d)加一个“clear和font-size:0”的空标签;但是ie6、ie7不兼容;
e)加一个
;但是不符合结构、样式、行为分离的原则;
f)给父级加overflow:hidden;
属性overflow的值:auto、hidden、scroll(会始终显示滚动条)、visible(默认情况);
以上方法不是常用的方法,以下的方法是常用的清除浮动弊端的方法;
g)给父级加上:zoom:1;和after:content:"";display:block;clear:both;
对g方法的理解:属性zoom:缩放页面;after是个伪类,after里必须有content、display、clear才能起到清除浮动弊端的效果;
g中的after效果,可以理解为是在父级最后新加了一个clear的div。
19.在ie6下,高度小于ie6默认px的元素,其高度均会被作为ie6默认的高度处理;
解决方法:给该元素加上overflow:hidden;
20.网页设计模型(步骤):
(1)确定结构:
a)根据整个网页的内容,将其分成多个块;即确定哪些内容属于哪些块;
b)确定用哪些标签来展示内容;不同块的内容用div包起来;
(2)样式的书写顺序:
a)布局前须明确每个元素的最终效果;
b)书写css reset;
c)从左到右一个一个元素地写;最好样式的作用对象就是元素它自己,而不是隔着其他元素;
d)确定元素的宽度、高度和border;对于图片、视频、音乐类的内容,最好定高度、宽度和border,以免这类元素加载不出来时,影响到其他元素的布局;
e)确定元素的字体样式;
ps:修改hn,strong,em,b,i标签里头的字体时,注意需要在这些标签的css里也加上字体修改,不然对布局有一定影响;
f)确定元素本身的位置;
g) 元素里的内容的位置;即float、margin、padding等;
h)记得清除浮动的弊端;
i)确定背景及其位置;
21.属性position的值:
relative:相对定位;相对自己发生移动;不会使得元素脱离文档流;不会影响元素本身的特性,但是在ie6下,当相对定位元素溢出父级时,使用overflow无效;
absolute:绝对定位;默认相对文档发生移动,若有定位父级,则相对该定位父级移动(一般用relative来给absolute当定位父级);使得块支持内容撑开宽度,行标签支持宽高;使得元素完全脱离文档流;
在ie6下,定位父级的width或height的值为奇数时,那么水平方向或是纵向方向上的定位会有1px的偏差;

margin:0 auto无效的解决方法:
left:50%;top:50%;margin-top:-元素水平方向的大小的一半;-元素纵向方向的大小的一半;

fixed:固定定位;特性同上,不同在于,fixed定位是始终相对文档进行相对定位;ie6不支持fixed;
static:默认情况;

absolute或是fixed定位元素可以清楚浮动的弊端,即当该元素内元素都float时,不需要再考虑该元素的清浮动;

body<html<文档;当html和body的heigh均被设置为100%时,他们的height才能与文档的height一样;

定位元素具有以下位置控制的属性(单位px或%):top、right、bottom、left;
正值就是在该方向向原中心靠,负值则是在该方向向原中心远离;
移动后,依然会占据着原先的位置;
22.定位元素之间存在层级关系:
默认情况下,后者的层级高于前者;
属性z-index的值:阿拉伯数字(自己定);该属性用于控制元素所在的层级;
只有当不同元素处于同一层的时候,z-index才有效;
23.属性opacity的值:[0,1];
属性opacity是不透明度;
ie里没有属性opacity,用filter:alpha(opacity=[0,100])可以实现同样的效果;
24.属性outline的值:none:去除聚焦效果;
25.滑动门:;
26.css spirit:;
27.ps的web基础:
a)常用的选项卡:
信息;历史记录;图层;
b)常用工具介绍:
移动工具:移动图层,注意与抓手工具不同,对图像有影响;

抓手工具:用于移动视角,对图像无影响;

矩形选框工具:用于选中一个图层里的一块区域,然后可对该区域进行复制,剪切,删除;
按住Ctrl键进行,可微调选框大小与参考线一致;Ctrl+c之后Ctrl+v,可快捷地将该选区创建在一个新的图层,大小同原图层;
若在上步骤之前Ctrl+n,则可以创建出与选区大小一致的图层;

配合标尺,可用于测量大小;

自由变换:快捷键:Ctrl+t,调整图层的大小、可使图层旋转;

取消选择:快捷键:Ctrl+d,取消选择;

裁剪工具:回车,快捷地将工作区里所有图层里的选中的区域独立地剪切出来;

吸管工具:吸取颜色值;

横排文字工具:设置横排文字的字体、大小、颜色等属性;

缩放工具:Ctrl+“+”、Ctrl+“-”、快捷地放大或缩小图像;

标尺工具:Ctrl+r快捷地打开或关闭标尺;每单击标尺往图层拖拽,可出现一条参考线;

png8:支持透明,不支持半透明;
png24:支持半透明和透明;
jpg:用于存储高清图;不支持半透明以及透明,所有透明区域均会被白色填充;
gif:用于存储动态图;支持透明,不支持半透明;
*.疑问:
* 1.如截图所示
* 2.float的行元素;
*3.块中margin-right无效;

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页