html＋css小结 _HTML/CSS

html＋css总结
web:

	在适用Internet、维护工作量等方面，B/S比C/S要强得多的多；但在运行速度、数据安全、

	人机交互等方面，B/S远不如C/S。综合起来可以发现，凡是C/S的强项，便是B/S的弱项，反之亦然



1、了解一些html基本常识

	（1）什么是html，发展历史

		制作网页的标记语言.

		Hypertext Markup Language的英文缩写,即超文本标记语言.

		是一种标记语言,不需要编译,直接由浏览器执行.

		是一个文本文件,包含了一些HTML元素,标签等.HTML文件必须使用html或htm为文件名后缀.

		是大小写不敏感的.

		HTML是由W3C的维护的(http://www.w3school.com.cn/)

		1990年, Tim Berners-Lee 创立了HTML,web之父

		1997年, HTML4.0成为W3C标准

	（2）w3c、web标准

		结构：html,xhtml,xml

		表现：CSS

		行为：W3C DOM，ECMAScript

	（3）xhtml与文档类型声明

		EXtensible Hypertext Markup Language，html-->xml 过渡。

		常见的文档类型声明

		XHTML 过渡型

			<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

		Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

		XHTML 严格型

			<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

		 HTML严格型

			<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

		HTML松散型

			<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

	（4）主要浏览器

		IE浏览器是用户数量最多的浏览器，超过80％的用户使用IE.

		Firefox

			由Mozilla基金会所开发，市场使用率第二。

		Navigator

			Netscape通信公司开发，是浏览器的最早的创始者和先驱者。

		Google Chrome

			Google在2008年新推出的浏览器	

2、掌握html基本结构及主要标记的使用。

		<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

		<html>

			<head>

				<meta http-equiv="Content-Type" content="text/html; charset=gbk">

				<!--  

				<meta http-equiv="refresh" content="3;url=http://bbs.tarena.com.cn">

				<meta http-equiv="refresh" content="3">

				-->

				<title>html01</title>

				<link rel="stylesheet" type="text/css" href="css/1.css">

			</head>

			<body>

				<h1>欢迎来到达内</h1>

				<p>欢迎大家来到<a href="http://bbs.tarena.com.cn">达内</a></p>

				<h2>在这里，你可以</h2>

				<ul>

					<li>学java</li>

					<li>有机会找到人生的另外一半</li>

				</ul>

			</body>

		</html>

		（1）meta

				http-equiv="content-type"告知浏览器HTML页面的编码方式。

				http-equiv="refresh",指定页面刷新的频率。

				name="keywords"，为搜索引擎指定关键字，例如：

				<meta name="keywords" content=“tarena","java">

		（2）link

		（3）列表

				ul元素用于创建无号序列表

				ol元素用于创建有序号列表

				li元素表示列表项目

		（4）块级元素与行内元素

				div、p 、h1等元素常常被称为“块级元素”（需要另开始一行）；

				span、 strong 等元素称为“行内元素” （不需要另开始一行）

3、掌握链接的使用

		（1）基本语法

		<a href="http://www.sina.com" target="">sina</a>

		target属性确定链接页面显示的窗口

		_blank(新窗口), _self(原窗口)

		（2）文档内导航

		<a name="top"/> … … … <a href="#top">to top</a>

		（3）发送邮件

		<a href="mailto:eric_ct@126.com?subject=hello">发送邮件</a>	

		（4）图片作为链接

		<a href="#"><img border="0" src="img/dl.gif" /></a>

		（5）图片区域产生链接

		<img src="index04.jpg" width="500" height="500" border="0" usemap="#m1" />

		<map name="m1" id="m1">

			<area shape="rect" coords="…" href="#" />

			<area shape="circle" coords="…" href="#" />

			<area shape="poly" coords="…" href="#" />

		</map>

			当shape="rect"（矩形）时，coords的值为左上角和右下角的坐标值; 当shape="poly"（多边形）时，

			为各顶点值; 当shape="circle"（圆形）时，为圆心坐	标值和半径值。 coords值依照图片大小的不同

			和所希望链接区域的不同而有所不同

		</map>

		（6）链接中的伪样式

			a:link { color: red} 没有访问时

			a:visited { color: blue} 访问后

			a:active { color: lime} 鼠标点击但还没有放开时

			a:hover { color: aqua} 鼠标指向时

4、掌握表格的使用

		table元素定义表格

		tr元素定义行

		td元素单元格

		单元格间隔和单元格填充

			table的cellspacing属性定义单元格之间的间距.

			table的cellpadding属性定义单元格边界与单元格中内容的间距.

		单元格的对齐方式

			align属性用于指明横向对齐方式：left center right

			valign属性纵向对齐方式：top middle bottom

		单元格的合并

			td的colspan用于指定单元格所占的列数, 用于横向合并单元格.

			td的rowspan用于指定单元格所占的行数, 用于纵向合并单元格.

5、熟练掌握表单的使用

		表单的作用

		常用属性

			action

			method

			input

				text checkbox radio submit reset image button

				select textarea	

6、了解css，掌握一些比较核心（程序员应该掌握）的css知识

	（1）什么是css

		Cascading Style Sheets(层叠样式表)。标准网页设计中CSS负责网页内容的表现。

	（2）css的基本语法

		selector {property:value; property:value; …}

	（3）css选择器

		简单选择器 

			例如:	h1{color:blue} 针对所有的h1元素

		类选择器

			例如:.msg {color:red} 针对class属性为msg的元素.

			p.msg {color: blue} 只针对class属性为msg的p元素.

		ID选择器

			例如:#err {background-color:#blue} 针对id属性为err的元素.

		派生选择器

		例如: #content p {color:blue} 针对id是content元素中的p元素.

		li span { font-color: red}针对li中的span元素

	（4）选择器分组

		可以对选择器进行组合, 这些选择器就可以共享样式,例如:

		h1,h2,h3 {color:green}

	（5）css继承

		子元素将继承父元素的样式而不需要另加指定

	（6）样式表的引入与优先级

			1. 浏览器缺省设置

			2. 外部样式表

			3. 内部样式表（位于 <head> 标签内部）

			4. 内联样式（在 HTML 元素内部）

	（7）css定位

			diplay属性

				display：none 不显示

				display：block 块级元素

				display:  inline 行内元素

			position属性

				static 默认的选项, 按照浏览器默认的方式摆放。

				absolute 相对于父元素, 按top和left值指定的值摆放。

				relative 按照浏览器默认的方式摆放位置的基础上加以top和left值作为偏移

	（8）盒模型

			内容(content)、填充(padding)、边框(border)、边界(margin)

			这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也

			具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西

			（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆

			放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。

			内边距相关CSS属性

			例如：

				h1 {padding: 10px 20px 30px 20%;}

			相当于

				h1 {

				padding-top: 10px;

				padding-right:20px;

				padding-bottom:30px;

				padding-left: 20%;

				}

			其中padding属性的书写顺序为从top开始顺时针旋转，既top、right、bottom、left；设置为百分数意为相对于父元素的width的百分比。

			外边距相关CSS属性

			例如：

				h1 {margin : 10px 0px 15px 5px} 和padding类似

				p {margin : 10%} 相对于父元素的width

				body{margin: 0}

			边框相关CSS属性

				border-style 针对所有边框的样式

				border-width 针对所有边框设置宽度

				border-color针对所有边框中可见部分的颜色。

				也可这样设置：

					border:宽度、样式（ashed/solid）、颜色

				border-bottom

				border-bottom-color

				border-bottom-style

				border-bottom-width

				

7、框架

	<html>

	<head>

	<frameset cols="50%,*" border="1">

		<frame src="left.html" name="f1" noresize="true" />

		<frame src="right.html" name="f2" marginwidth="50" marginheight="60" />

	</frameset>

	</head>

	</html>