Web前端基础学习笔记(Html CSS Javascript)

HTML:是一种超文本标记语言,Hyper Text Markup Language的简写

标签(tag)和属性(attribute)

元素(亦称标签)

块元素:h1~h6,p,div,ul,li,ol,dl,dt,dd,table,tr,th,td

内联元素(行内元素):a,span,strong,em,img,form, input, select, option, textarea, label, td, th, font,b,i(后面三个现不常用)

空元素:br hr <!----> meta link

	内联元素转块元素:display:block
	块元素转内联元素:display:inline
	内块特性兼有元素:display:inline-block
	不显示(隐藏):display:none

常用属性及属性值

id:id
class:classname
style:style_definition
title: text
target:_blank
colspan rowspan cellspacing cellpadding
name color type src href background boder width height

超链接a

<a href="http://...../">网址链接</a>
路径:../一层../../两层
target:_blank新窗口打开
锚点(anchor)<a href="#id">网址链接</a>   <p id="id">
title=""//鼠标指向时的内容

图片(img)

<img src="url" alt="" title="" usemap="#aaa" >
内联元素,但可以设置width height
<map name="aaa";>
    <area= shape="rect" coords="10,12,456,478" href="url">
    </map>

表格(table)

table tr td th
border //默认不出现
cellspacing//单元格之间的边距,默认有,一般设为0;
cellpadding//单元格内距,默认有,一般设为0;
colspan//横向合并,注意删掉多余的横向后面的td,以免多出
rowspan//纵向合并,注意删掉多余的纵向向后面的td,以免多出
width height可单独给table/td设置(tr的哪一行在第一个td里设置)

表单(form)

<form action="" method="get/post"  enctype=" multipart/form-data" >
<input type="text"	单行文本框>
	'password'  	密码
	'radio'		单选按钮 //checked默认选中,name一致限定单选
	'checkbox'	复选框 //checked默认选中
	'file'		文件,图片等上传
	'hidden'	隐藏表单
	'submit'	提交//js:form.submit=""
	'reset'		重置
	'button'	按钮
	'select'	下拉选择框 //multiple多选
	'option'	select的选项//selected默认选中
	'textarea'	文本域(多行文本框)
这些都是行内元素,如要换行记得加<br>	
label标签把input和对应文字括起来可以起到点击文字选中input的效果	
以上也可添加disabled来限制该表单不可用	

CSS:层叠样式表

css基本语法

选择器,以及一条或多条声明,多条声明间用分号隔开
声明由属性及其属性值组成,用冒号(:)赋值,多个属性值间用空格隔开( )

selector {declaration1; declaration2; ... declarationN }

css注释用/* */

css引入方式

1,行内引用:style="property:value;..."
2,内部引用:<style>	</>
3,外部引用:<link href="../../****.css" type="text/css" rel="stylesheet">
权重:行内引用>>内部引用>>外部引用

css选择器

1,#id(唯一名)<<.classname(类名)<<tag(标签)<<*(通配符)
2,群组选择器:多个ID,classname,tag间用逗号(,)相连,一起调用选择
3,层次选择器:ID/classname/tag 间用空格( )相连,则调用前值得子元素相应的选择器,div p调用div 下的p

常用的字体属性及值

	font-size 字号	//一般设为双数,8px,20px,等等
	font-weight 字重(粗细)//normal不加粗,bold加粗,可以加具体数字(px)印刷行业的叫法
	font-family 字体//"宋体" "微软雅黑" "楷体" 中文名字体得加引号,用外国名不加
	font-style 字体倾斜方式//normal 不倾斜,italic oblique,两种角度不一样的倾斜
	text-indent 首行缩进//2px,具体值,不管字号大小;2em,2字符,按字号大小来;
	text-decoration 文本修饰(各种线)//none,不要任何线,一般用来清除a链接的下划线
					//underline,下划线
					//line-through,中划线(删除线)
					//overline,上浮线
	text-align //字体对齐方式,center用的多
	color 字体颜色
	line-hegiht 行高//当line-height和height设置的值一致时,字体上下居中
	background 字体所在的背景设置
	height 字体所在背景的高
	margin-bottom//下边距,整段字体距下一段的距离
	border-bottom//下边框,整段字体的下边的框线

盒模型

给元素(一般为块元素)添加宽(width)/高(height)/边框(border)/背景(background)等以便操作,因而称为盒模型

border(边框),值组成:线的粗细/虚实/颜色/位置
border:2px #f00 solid/dashed/dotted  	border:none ;
也可拆分四边不同设置:	border-left:2px solid #00f;
			border-top:3px dashed #f00;
			border-right:1px dotted #ff0;
			border-bottom:4px solid #f0f;			

background(背景),可添加背景色,或添加背景图片
background:#f00 url("url") no-repeat 10px 20px ;
background:url("url") no-repeat 10px 20px,url("...") on-repeat 30px 40px ;//多背景图中间用逗号(,)隔开
背景也可以单独设置:background-color:rgba(255,0,0,.7)//后面的小数是设置透明度,颜色的设置方式是rgba的
		background-image:url("urlvalue")//可配合opacity使用个图片加透明度
		background-repeat:no-repeat/repeat/repeat-x/repeat-y/space //图片展开方式,一般不平铺
		background-position:x y//图片从哪开始展开,x y可以是具体坐标点,也可以设置为left,center,right,top,bottom等

padding(内填充):元素里面实际可用空间和其边框间的距离,算在元素的占位里,可以设置大小,单位px
padding:20px 30px 40px 50px //注意浏览器读取顺序是上>右>下>左
也可单独设置:padding-top:
	padding-right:
	padding-bottom:
	padding-left:

margin(外间距),元素距其他元素边框的距离,不算在元素占位里//margin距离很烦有时候是离同级元素距离,有时候是距父级元素的,有时候着父级元素一起动
margin :20px 10px 20px 5px //同padding一样注意浏览器读取顺序是上>右>下>左
margin:20px 10px//则浏览器会读取为上下都为20px左右为10px 
同样可以单独设置,就不撤了,注意margin的auto,只能设置在水平位置居中,即margin:0px auto

几个常见的none,auto,normal

width:auto
height:auto
display:none
border:none//可单独设置某一边
text-decoration:none
margin:none//不是0,可单独设置某一边
margin:auto//水平居中
list-style:none //不要<li>前的黑点
font-weight:normal //不加粗

布局

float(浮动):一般设置<div>做盒子来切开页面各部分,再利用float(浮动)让div自己拼起来
float:left//左浮动,最常用,让div尽力地往左去挤,若不然则下来往左挤
float:right//右浮动,同上
//注意没有float:top和float:bottom,因为默认浏览器页面是没有底的,可以不断往下,只要你愿意一直翻可到内存撑不住为止
float会使元素脱离文档流,若子元素设置得float,而其父元素或其他同级元素没有,则会把父元素的部分(具体得开子元素的大小)盖住(隐藏)
行内元素设置float会自动为其加上块元素特性,相当于加了个display:block

使父元素脱离隐藏的方法: 设置父元素的高度
			给父元素加上:overflow:hidden属性
			再已浮动的子元素块后面加上一个空的子<div></div>并为其加上clear:both属性
overflow:auto,如果内容溢出元素框时自动加上滚动条,
	 hidden,父元素溢出隐藏,内容会被修剪，并且其余内容是不可见的。
	 visible,内容不会被修剪，会呈现在元素框之外
	 scroll,元素框时自动加上滚动条,

position(定位):可以自由定义元素在任何位置(无脑定位),定位点事元素框的左上角点

相对定位:relative,相对于它本该在的位置移到定位点,原来的位置也留着
position:relative; left:20px;右移20px  //只设置两个移动就行,位置就定了
		   top:10px;下移10px
		   right:10px;左移20px
		   bottom:20px;上移20px
绝对定位:absolute,按设置的位置坐标点移过去,脱离文档流,不占原位置,坐标点是按设置过的parents定的,若父一级没有,就再往上一级找,直到body
position:absolute;left:20px;往右20px定  //只设置两个移动就行,位置就定了
		   top:10px;下10px定
		   right:10px;往左20px定
		   bottom:20px;往上20px定
//绝对定位容易被挤在下面被隐藏,可配合z-index设置层级
//以上relative,absolute的定位值都可设为负数,往返方向走

小广告:fixed,想对Window不动,固定在窗口的某一位置