神奇的前端探索之旅

一丶HTML学习心得

1.html结构标签

【1】＜html＞＜/html＞指文件为htm文件
【1】 ＜head＞＜/head＞头部标签
【1】＜title＞＜title＞ 文章标题标签，指打开网页时所弹出的上部网页选项卡所带有的文字内容
【1】  ＜body＞＜/body＞ 文件内容标签，一般指浏览器整个界面

2.文件更新–

【1】10秒后自动更新一次
　　＜meta http-equiv="refresh" content=10＞
【2】10秒後自动连结到另一文件
　　＜meta http-equiv="refresh" content="10；URL=欲连结文件之URL">

3.版面
【1】标题文字 ＜h#＞..........＜/h#＞ #=1~6；h1为最大字，h6为最小字
【2】字体大小 ＜font size=#＞..........＜/font＞ #=1~7；数字愈大字也愈大
【3】显示小字体 ＜small＞..........＜/small＞
【4】显示大字体 ＜big＞..........＜/big＞
【5】粗体字 ＜b＞..........＜/b＞
【6】斜体字 ＜i＞..........＜/i＞
【7】下划线 ＜u＞..........＜/u＞
【8】删除线 ＜strike＞..........＜/strike＞
【9】下标字 ＜sub＞..........＜/sub＞
【10】上标字 ＜sup>..........＜/sup＞
【11】文字闪烁效果 ＜blink＞..........＜/blink＞
【12】换行 ＜br＞
【13】段落标签＜p＞

4.背景属性
【1】背景颜色 – bgcolor ＜body bgcolor=#rrggbb＞
【2】背景图案 – background ＜body background="图形文件名"＞

5.注解 ＜!–…--＞21.特殊字元表示法
符 号 　　语 法
＜ 　　　＆ｌｔ
＞ 　　　＆ｇｔ
& 　　 　＆ａｍｐ
" 　　　＆ｑｕｏｔ
空白 　　＆ｎｂｓｐ

6.图片
【1】插入图片 ＜img src="图形文件名"＞

7.表格
表格
1.定义表格 ＜table＞..........＜/table＞
【1】设定边框的厚度 – border＜table border=点数＞
【2】设定格线的宽度 – cellspacing＜table cellspacing=点数＞
【3】设定资料与格线的距离 – cellpadding＜table cellpadding=点数＞
【4】调整表格宽度 – width＜table width=点数或百分比＞
【5】调整表格高度 – height＜table height=点数或百分比＞
【6】设定表格背景色彩 – bgcolor＜table bgcolor=#rrggbb＞
【7】表格标题＜caption＞..........＜/caption＞
【8】栏位垂直合并 – rowspan＜th rowspan=欲合并栏位数＞
【9】栏位横向合并 – colspan＜th colspan=欲合并栏位数＞

8.定义大小位置
【1】水平位置 – align ＜align="#"＞#号可为 left：向左对齐center：向中对齐 right：向右对齐
【2】垂直位置 – align ＜align="#"＞ #号可为top：向上对齐 middle：向中对齐bottom：向下对齐
【3】栏位宽度 – width＜width=点数或百分比＞
【4】栏位高度 – height＜height=点数或百分比＞

9.列表
【1】无序列表

		`<ul>
					<li>    </li>`
					</ul>

【2】有序列表

		<ol>
					<li> 	 </li>
					</ol>

二丶css学习心得

1.字体属性：(font)
大小 font-size:x-large;(特大) xx-small;(极小) 或者加数值单位：PX
样式 font-style:oblique;(偏斜体) italic;(斜体) normal;(正常)
行高 line-height:normal;(正常) 单位：PX 行高等于父容器的高可以垂直居中
粗细 font-weight:bold;(粗体) lighter;(细体) normal;(正常)
修饰text-decoration: none 去掉下划线
常用字体：(font-family)

2.背景属性： (background)
色彩background-color:#FFFFFF;
图片background-image:url();
位置background-position:left(水平) top(垂直);

3.区块属性： (Block)
字间距letter-spacing:normal; 数值
对齐text-align:justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)
显示display:block;(块) inline;(内嵌)inline-block；（行级块）

4.方框属性： (Box)
width:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左

5.边框属性： (Border)
border-width:; 边框宽度
border-color:#;
简写方法border：width style color;

6.列表属性： (List-style)
类型list-style：none 去除文字格式 一般用来去点

7.CSS连接属性：
a /所有超链接/
a:hover /鼠标转到链接/
鼠标光标样式：
链接手指 cursor: hand

8.CSS框线：
border-top : 1px solid #6699cc; /上框线/
border-bottom : 1px solid #6699cc;/*下框线*/border-left : 1px solid #6699cc;/*左框线*/border-right : 1px solid #6699cc;` /右框线/

9.CSS边界样式：
margin-top:10px; /上边界/
margin-right:10px; /右边界值/
margin-bottom:10px; /下边界值/
margin-left:10px; /左边界值/

10.三大定位
position：absolute；绝对定位 不占位置 类似于浮动 相对自身移动
position ：relective；相对定位 占位置 相对父容器移动
position ：fixed；相对于浏览器占位置 固定不动
一般做网站用相对定位和绝对定位相结合来做效果
子容器写position：absolute； 父容器加position ：relective；这样就可以卡住子容器