当前位置: 代码迷 >> HTML/CSS >> 懂得html的常识
  详细解决方案

懂得html的常识

热度:294   发布时间:2012-11-23 00:03:43.0
了解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>
  相关解决方案