HTML简介编辑本段回目录
HTML简介
要让设计者在网络上发布的网页能够被世界各地的浏览者所阅读,需要一种规范化的发布语言。在万维网(WWW)上,文档的发布语言是HTML。 HTML意思是:Hypertext Marked Language,即超文本标记语言,就是该类文档有别于纯文本的单个文件的浏览形式,超文本文档中提供的超级链接能够让浏览者在不同的页面之间跳转。
标记语言是一种基于源代码解释的访问方式,它的源文件由一个纯文本文件组成,代码中由许多元素组成,而前台浏览器通过解释这些元素显示各种样式的文档。换句话说,浏览器就是把纯文本的后台源文件以赋有样式定义的超文本文件方式显示出来。
HTML和网络是紧密相连的,HTML语言的发展和浏览器的支持是密不可分的,在20世纪90年代网络刚刚兴起时,多种浏览器同时流行于世界各地,它们支持HTML语言的标准也各不相同,这样限制了HTML标记语言本身的发展,逐渐,W3C网络标准化组织联手一些较为流行浏览器开发厂商一同定义HTML标准,并且力推浏览器解释语言和显示方法的统一。
到今天,IE浏览器随着WINDOWS操作信息系统的绝对垄断地位占据着主流市场,这也在另一方面为HTML标准的统一起到了关键作用。
HTML4.01的新突破
1997年 HTML 3.2版已经极大丰富了HTML功能。
1997年12月推出HTML 4.0版将HTML语言推向一个新高度,该版本倡导了两个理念。
(1)将文档结构和显示样式分离;
(2)更广泛的文档兼容性。
由于同期CSS层叠样式表的配套推出,更使得HTML和CSS对于网页制作的能力达到前所未有的高度。
1999年12月,W3C网络标准化组织推出改进版的HTML4.01,该语言相当成熟可靠,一直沿用至今。
HTML4.01相比先前的版本在国际化设置,提高兼容性,样式表支持,以及脚本,打印方面都有所提高。
编辑和查看结果
--一个最简单的HTML源文件-----------------------------------------------------------------
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<p>第一段<b><i>HTML</i></b>代码。
</body>
</html>
-------------------------------------------------------------------
IE浏览器翻译的结果就是这样的一个页面,可以看到所有标记语言都没有显示出来。
元素、属性和数据类型编辑本段回目录
一个标准的HTML文件由HTML元素,元素的属性和相关属性值3个基本部分组成。
HTML元素
HTML元素的英文名称是element,它通常由首尾两个标记(tag)组成,它一个标记都由一组尖括号“<”的“>”包含。一组首尾标记组成了一个元素。
以下划线元素为例, 〈u〉HTML〈/u〉
HTML元素的出现形式有3类:
首尾标记必须成对出现的元素,例如:<h1>,<button>等元素
起始标记必须出现,而结尾标记是可选的,例如<p>,<option>等元素
只有起始标记,而禁止结尾标记的元素,例如<input>,<img>等元素
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<p>第一段<b>HTML</b>代码。
<p><img src="../horse.gif" width="70" height="70" alt="马">
</body>
</html>
缩进和大小写规范
网络标准化组织从HTML4开始建议所有HTML元素都用小写,虽然大小写无关功能。
HTML源代码都遵循编程的统一规范--缩进格式。令源文件的代码结构更为清晰。
HTML属性
每一个元素都有一个或者几个属性(attribute,property)定义该元素的显示样式,行为或者其它内容,同一个元素的各个属性之间的顺序没有前后之分,属性的类型主要有等式型和布尔型两种。
属性的设定方法
属性全部都设置在HTML元素起始标记的尖括号内,一般是以“<起始标记 属性1="属性值1" 属性2="属性值2".......>”的格式出现。属性之间没有先后顺序,属性也没有大小写之分。每一对属性/属性值之间用空格分隔。
布尔属性只有属性名称而没有属性值,指定了这个属性就代表它为“真(True)”,反之则代表“假(False)”默认情况下,每一个布尔属性都是假,即不用指定,只有在需要的时候才添加该项属性。
<input type="button" value="查看效果" disabled>
<option value="30" selected>
注意,在字符串或者文本类型的属性值是区分大小写的。
<input type="button" value="click button">
<input type="button" value="CLICK BUTTON">
显示出来的结果是:
HTML源代码都遵循编程的统一规范--缩进格式。令源文件的代码结构更为清晰。
引号的使用规范
按照HTML规范和标准,等号以后的属性值应该全部用英文半角双引号所含。但要注意在某些嵌套的情况下,会出错。
注意:如果引号需要进行嵌套,外层用单引号,里层用双引号。
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<input type="button" value="点击查看效果" onclick='javascript:alert("Hello World!");'>
</body>
</html>
HTML数据类型
HTML常用的数据类型有长度,颜色,URI链接地址和字符串等形式。
长度值
长度值的定义方法有许多种,既有绝对数值定义,又有相对数值定义。
像素值:
像素是计算机屏幕上所能显示的最小单位。不同计算机屏幕由于分辨率设置的不同,所以显示出像素的大小也不同。例如,同样一个17英寸的液晶屏幕,设置为800*600时,水平有800个像素点,设置为1024*768的时候,水平有1024个像素点,显然,在屏幕总宽度不变的情况下,像素的大小是不一样的。
像素值也是长度定义中使用最为普遍的单位,因为一般浏览器输出页面总是在屏幕上,如果设计者不考虑打印输出的话,利用像素值就能够在屏幕上进行了精确的定位。
像素值的英文名称为pixel,px就成了单位名称,例如10px就是像素长度,468px就是468像素长度。
用像素值定义长度的时候,一定要考虑屏幕分辨率的兼容性,例如,一个设计者设置了一个张图片的显示宽度是800像素,在800*600像素分辨率的屏幕上它能够占据整个宽度,而在1600*1200像素宽度的屏幕上,它只能占有屏幕宽度的。
像素值的单位也可以省略不写,例如76就代表76px,即76像素长度。如果浏览器遇到了在数字后面有不能识别的字符,就会忽略这些字符直接取前面的数字作为长度值。例如,100abcd会被浏览器识别为100px。
相对长度值:
百分比形式就是最典型的相对长度值。
<img src="../horse.gif" width="100%" height="100%" alt="horse">
如果对一张图片定义了百分比值,则它的参照对象是整个浏览器窗口的宽度和高度。当浏览器窗口大小再变的时候,图片的尺寸也会跟随窗口大小相应变化。
比值长度定义:
HTML元素属性中还有一种长度定义是比值定义,它的格式为数字加上星号“*”,这些属性总是若干个一起出现,此时,星号前面的数字代表这些数值之间的比值。星号“*”前面如果是1可以省略。
颜色值
颜色定义也是HTML属性中比较常用的数据类型定义。页面文档不可能是一成不变的黑白显示,浏览器默认将没有设置过颜色值的字体,直线和边框都定义为黑色,而背景全部定义为白色。
计算机屏幕上的任意一种颜色都是由红,蓝,绿按照一定比例混合而成的,三色规律的另一种称呼也叫做RGB颜色。颜色值的命名就使用3个数值的连写格式进行了定义,格式为颜色=“#RRGGBB”
按照标准化定义,红,绿,蓝每一种颜色数值都由十六进制00至十六进制FF表示,因此,单一颜色深度为256等级。这样一来,颜色的总数量就是256*256*256=16,777,216种。
比如,我们利用编辑器来调出一种色调。
按照十六进制,“#FF8000”表示红色打满(相当于FF),绿色打一半(相当于80),蓝色不出现(相当于0)。则此时应该出现的是橙色。