您的位置:首页 > Web前端 > JavaScript

(清华大学HTML+CSS+JavaScript入门到精通学习笔记)第二章 HTML基础

2018-01-30 16:49 811 查看
2.1 HTML历史

1990年,Tim Berners-Lee(蒂姆●伯纳斯-李:互联网之父)在SGML语言基础上开发了HTML语言。

1991年,Tim Berners-Lee将项目(包括HTML语言)的全部代码和说明书发布到互联网上。

1993年,互联网工作小组(IETF)发不了超文本标记语言,但这仅是一个非标准的工作草案。

1994年4月,HTML2.0最初文档被发布。

1995年,Tim Berners-Lee成立了W3C组织。

1995年9月,HTML2.0(RFC1866)被正式核准为提议标准。

1996年3月,HTML1.0草案发布,不久后被废除。

1996年5月,HTML1.2草案发布。

1996年7月,HTML DTD(文件类型定义)发布。

1997年1月,HTML1.2(Wibur)成为W3C的标准。

1997年7月,HTML4.0草案发布。

1997年12月,HTML4.0成为W3C推荐标准。

1999年1月,XHTML1.0工作版本发布。

2000年1月,XHTML1.0成为W3C推荐标准。

2001年5月,XHTML1.1发布。

2.2 HTML规范雏形

2.3 HTML与XHTML

HTML全称Hypertext Markup Language,超文本标记语言。使用HTML标签编写的文档称为HTML文档,目前最新版本是HTML5.0。

XHTML全称The Extensible Hypertext Markup Language,可扩展标识语言,实际上是HTML语言的升级版本,目前遵循的是XHTML1.0规范。

XHTML和HTML在语法和标签使用方面差别不大,具有以下特点:

a,用户可以扩展元素,从而扩展功能,但在目前1.0版本下,用户只能够使用笃定的预定义元素,这些元素基本上和HTML4版本元素相同,

但删除了部分属性描述性的元素。

b,能够与HTML很好的沟通,可以兼容当前不同的网页浏览器,实现XHTML页面的正确浏览。

2.4 HTML基础

2.4.1 HTML语言作用

a,使用HTML语言标识文本。

b,使用HTML语言建立超链接。

c,使用HTML语言创建列表,把信息有序的组织在一起,方便浏览。

d,使用HTML语言在网页中显示图像、声音、视频、动画等多媒体信息。

e,使用HTML语言可以制作表格,以方便显示大量数据。

f,使用HTML语言制作表单,允许在网页内输入文本信息,执行其他用户操作,方便信息互动。

2.4.2 HTML文档基本结构

HTML文档一般都应包含两部分:头部区域和主题区域。HTML文档基本结构由3个标签来组织。

<html>

<head>

<!--头部信息-->

</head>

<body>

<!--主题信息,包含网页显示的内容-->

</body>

</html>

2.4.3 HTML基本语法

a,所有标签都包含在“<”和“>”起止符中,构成一个标签。

b,在HTML文档中,绝大多数元素都有起始标签和结束标签

c,起始标签包含元素的名称,以及可选属性。也就是说元素的名称和属性都必须在起始标签中。

d,元素的属性包含属性名称和属性值,中间通过等号进行连接,多个属性之间通过空格进行分割。属性和元素名称之间也是通过空格进行分隔。

e,少数元素的属性也可能不包含属性值,仅包含一个属性名称。例如:<tag a1 a2 a3.....an>元素主体</tag>

f,一般属性值应该包含在引号内,虽然不加引号,浏览器也能够解析,但是最好养成好的习惯。

g,属性是可选的,元素包含多少个属性,也是不确定的,主要根据不同元素而定。

h,少数标签不是成对的,这些固定的标签称为空标签,空标签仅包含其实标签,没有结束标签。

i,标签可以相互嵌套,形成文档结构。合法的嵌套应该是包含和被包含的关系。

j,HTML文档所有信息必须包含在<html>标签中,所有文档元信息应包含在<head>子标签中,

而HTML传递信息和网页显示内容应包含在<body>子标签中。

对于HTML文档来说,出了必须符合基本语法规范外,还必须保证文档结构信息的完整性。HTML文档应主要包括以下内容:

a,必须在首行定义文档的类型,过度型文档可省略。

b,<html>标签应该设置文档名字孔家你,过度型文档可省略。

c,必须定义文档的字符编码,一般使用<meta>标签在头部定义,常用字符编码包括中文简体(gb2312)、中文繁体(big5)和通用字符编码(utf-8)。

d,应该设置文档的标题,可以使用<title>标签在头部定义。

HTML文档扩展名为.htm或.html,保存时必须正确使用扩展名,否则浏览器无法正确解析。注释标签:<!--注释内容-->

2.4.4 HTML常用标签

1,文档结构标签

<html></html>:标识HTML文档的起始和结束

<head></head>:标识HTML文档的头部区域

<body></body>:标识HTML文档的主体区域

2,文本格式标签

<title></title>:标识网页标题

<hi></hi>:标识标题文本,其中i表示1、2、3、4、5、6,分别表示几级标题

<p></p>:标识段落文本

<pre></pre>:标识预定义文本

<blockquote></blockquote>:标识引用文本

3,字符格式标签

<b></b>:标识强调文本,以加粗效果显示。

<i></i>:标识引用文本,以斜体效果显示。

<blink></blink>:标识闪烁文本,以闪烁效果显示,IE浏览器不支持该标签。

<big></big>:标识放大文本,以放大效果显示。

<small></small>:标识缩小文本,以缩小效果显示。

<sup></sup>:标识上标文本,以上标效果显示。

<sub></sub>:标识下标文本,以下标效果显示。

<cite></cite>:标识引用文本,以引用效果显示。

4,列表标签

<ul></ul>:标识无序列表。

<ol></ol>:标识有序列表。

<li></li>:标识列表项目。

定义列表是一种特殊的结构,它包括词条和解释两块内容。

<dl></dl>:标识定义列表。

<dt></dt>:标识词条。

<dd></dd>:标识解释。

5,链接标签

<a></a>:标识超链接

<a>标签还可以定义锚点。锚点是一类特殊的超链接,它可以定位到网页中某个具体的位置

6,多媒体标签

<img/>:嵌入图像

<embed></embed>:嵌入多媒体。

<object></object>:嵌入多媒体。

7,表格标签

表格标签用来组织和管理数据,主要包括下面几个标签。

<table></table>:定义表格结构

<caption></caption>:定义表格标题

<th></th>:定义表头

<tr></tr>:定义表格行

<td></td>:定义表格单元格。

8,表单标签

表单标签主要用来制作交互表单,主要包括以下标签:

<form></form>:定义表单结构

<input/>:定义文本域、按钮和复选框

<textarea></textarea>:定义多行文本框。

<select></select>:定义下拉列表。

<option></option>:定义下拉列表中的选择项目。

2.5 XHTML基础

XHTML语言是在HTML语言基础上发展而来的,但是为了兼容数以万计的显存网页和不同浏览器,

XHTML文档与HTML文档没有太大区别,只是添加了XML语言的基本规范和要求。

2.5.1 XHTML文档基本结构

<!--定义XHTML文档类型-->

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

<!--XHTML文档根元素,其中xmlns属性声明文档命名空间-->

<html xmlns="http://www.w3.org/1999/xhtml">

<!--头部信息结构元素-->

<head>

<!--设置文档字符编码-->

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

<!--设置文档标题-->

<title>无标题文档</title>

</head>

<body>

<!--主体内容结构元素-->

</body>

</html>

XHTML代码不排斥HTML规则,在结构上也基本相似,但如果仔细比较,有两点不同:

1,定义文档类型

<!DOCTYPE>元素用来定义文档类型,它设置XHTML文档的版本。DTD(如xhtml-transitional.dtd)表示文档类型定义,

里面包含了文档的规则,网页浏览器会根据预定义的DTD来解析页面元素,并把这些元素所组织的页面显示出来。

2,声明命名空间

在XHTML文档根元素中必须使用xmlns属性声明文档的命名空间。xmlns是XHTML NameSpace。

XHTML是HTML向XML过渡的标识语言,它需要符合XML规则,因此也需要定义命名空间。又因为XHTML1.0还不允许用户自定义元素,

因此它的命名空间都相同,就是"http://www.w3.org/1999/xhtml"。

2.5.2 XHTML基本语法

XHTML是根据XML语法演化而来的,因此它遵循XML文档规范。

1,在文档的开头必须定义文档类型。

2,在根元素中应声明命名空间,即设置xmlns属性。

3,所有标签都必须是闭合的。HTML中可以不写结束标签,但是在XHTML中,所有标签必须关闭,单标签页必须用"/"来关闭。

4,所有元素和属性都必须小写。HTML大小写不敏感,但是XHTML对大小写是敏感的。

5,所有的属性值必须用引号""括起来,在HTML中,可以不给属性值加引号,但是在XHTML中,它们必须被加引号。

6,所有标签都必须合理嵌套。

7,所有属性都必须被赋值,没有值的属性就用自身来赋值。例如<td nowrap>是错误的,正确的是<td nowrap="nowrap">

8,所有特殊符号都用编码表示,例如"<"用"<",">"用">"

9,不要在注释内容中使用"--","--"只能出现在XHTML注释的开头和结束。

10,XHTML规范废除了name属性,而使用id属性作为统一的名称。

2.5.3 XHTML文档类型

XHTML1.0支持3中DTD声明:过度型(Transitional)、严格型(Strict)和框架型(Frameset)。

1,过度型

这种文档类型对于标签和属性的语法要求不是很严格,允许在页面中使用HTML4.01的标签(符合XHTML语法标准)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w1.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2,严格型

这类文档类型对于文档内的代码要求比较严格,不允许使用任何表现层的标签和属性。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Strict//EN" "http://www.w1.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

在严格文档类型中,以下元素将不被支持。

center:居中(属于表现层)、font:字体样式(属于表现层)、strike:删除线、s:删除线、u:文本下划线

iframe:嵌入式框架窗口(专用于框架文档类型或过度型文档)、isindex:提示用户输入单行文本(与input元素语义重复)

dir:定义目录列表(与dl元素语义重复)、menu:定义菜单列表(与ul元素语义重复)、basefont:定义文档默认字体属性(属于表现层)

applet:定义插件(与object元素语义重复)。

在严格型文档类型中,以下属性将不被支持:

align(支持table包含的相关元素:tr、td、th、col、colgroup、thead、tbody、tfoot)。

language、background、bgcolor、border(table元素支持)、height(img和object元素支持)、hspace

name(在HTML4.01Strict中支持,在XHTML1.0 Strict中的form和img元素不支持)。

noshade、nowrap、target、text、link、vlink和alink、vspace、width(img、object、table、col和colgroup元素支持)。

3,框架型

这是一种专门针对框架页面所使用的DTD,当页面中含有框架元素时,就应该采用这种DTD。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w1.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

对于大多数标准网页设计师来说,过度型DTD(XHTML1.0 Transitional)是比较理想的选择。因为这种DTD允许使用描述性的元素和属性,

也比较容易通过W3C的代码校验。

2.5.4 DTD文档类型解析

实际上,DTD是一套关于标签的语法规则,是一个ASCII的文本文件,后缀名为.dtd,利用DOCTYPE声明中的URL可以访问指定类型的DTD详细信息。

结构:

<!DOCTYPE(文档类型命令) html(顶级元素) PUBLIC(可用性) "-(注册)//W3C(组织)//DTD(类型) XHTML(标签) 1.0(版本号)

Transitional(定义)//EN(语言)" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd(URL)">

1,顶级元素:指定DTD中声明的顶级元素类型,HTML文档默认顶级元素为html

2,可用性:指定公开标识符是可公开访问的对象(PUBLIC)还是系统资源(SYSTEM)。默认为PUBLIC

3,注册:指定组织是否由国际标准化组织(ISO)注册。"+"(默认)标识组织名称已注册,"-"标识组织名称未注册。W3C属于非注册的ISO组织。

4,组织:指定在!DOCTYPE声明应用的DTD的创建和维护的团体或组织的名称。HTML语言规范的创建和维护组织是W3C。

5,类型:指定公开文本的类,即所引用的对象类型。HTML默认为DTD.

6,标签:指定公开文本的描述,即对所引用的公开文本的唯一描述性名称,后面科附带版本号。HTML默认是HTML,XHTML默认是XHTML。

7,定义:指定文档类型定义。

8,语言:指定公开文本的语言,即用于创建所引用对象的自然语言编码系统。该语言定义已编写为ISO639语言代码,默认为EN(英语)。

9,URL:指定所引用对象的位置。

2.5.5 名字空间(命名空间)

<html xmlns="http://www.w1.org/1999/xhtml">,这个xmlns属性声明了html顶级元素的名字空间。

在XML语言中,允许用户自定义标签,但是在网络上,就会存在出现重复的标签名称,名字空间就用来为各自的文档指定其语义的限制空间。

2.6 HTML元信息

meta信息称为元信息,存储文档的各种基本信息,这些信息主要被浏览器所采用,不会显示在网页正文中,另外,搜索引擎也会检索这些信息,

因此重视并设置这些头部信息将有助于提高网页的访问率。

<meta>标签的属性主要分为两组。

1,name和content属性配合使用。name:元信息名称,content:属性详细说明。

<meta name="description" content="标准网页设计专业技术资讯">:告诉搜索引擎你的站点的主要内容

<meta name="keywords" content="HTML、CSS、XML、XHTML">:向搜索引擎说明你的网页的关键词

2,http-equiv和content属性配合使用。http-equiv属性声明HTTP协议的响应头报文(即MIME文档头),content:属性说明。

一些常用的例子:

<meta http-equiv="content-type" content="text/html;charset=UTF-8">:设置网页的编码信息。

<meta http-equiv="refresh" content="5">:设置5秒之后刷新网页

<meta http-equiv="refresh" content="5;url=http://www.css8.cn">:设置5秒之后转到样吧网站首页。

<meta http-equiv="expires" content="Sunday 20 October 2009 01:00 GMT">:设置网页缓存过期时间。

<meta http-equiv="pragme" content="no-cache">:设置页面不缓存。

<meta http-equiv="author" content="http://www.css8.cn">:设置网页作者

<meta http-equiv="copyright" content="http://www.css8.cn">:设置网页版权

<meta http-equiv="date" content="2009-01-12T20:50:30+00:00">:设置创建时间

<meta http-equiv="robots" content="none">:设置禁止搜索引擎检索。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  HTML CSS JavaScript
相关文章推荐