`

html+css总结

    博客分类:
  • Html
阅读更多
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>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics