3html语言

第3章HTML语言HTML是网页的基础了解HTML语法，有助于进行网页设计与开发中国人民大学王蓉内容HTML简介HTML文件结构常用标签中国人民大学王蓉3.1HTML简介什么是HTMLHTML历史发展HTML标签请参见维基百科HTML词条3.1HTML简介中国人民大学王蓉3.1.1什么是HTMLHTML（HyperTextMarkupLanguage）超文本标记语言用来描述网页的一种语言，是网页的基础HTML一种标记语言(markuplanguage)，而不是编程语言标记语言定义了一套标记标签(markuptag)HTML使用标记标签来描述网页在HTML文档中可以加入指向任何文档的超链接（文本、图象、动画和声音等）HTML的语法很简单，可以用任何文本编辑器来完成超文本文档的制作Notepad、UltraEdit请参见维基百科HTML词条3.1HTML简介中国人民大学王蓉3.1.2HTML发展历史HTML是SGML的一个实例SGML(StandardGeneralizedMarkupLanguage)SGML最初是由IBM开发的一种用于排版的符号化语言，称为GML。经过若干年的发展，1984年国际标准化协会（ISO）开始对此提案进行讨论，于1986年正式承认SGML为国际标准规范（ISO8879）。SGML实际上是一种通用的文档结构描述符号化语言，主要用来定义文献模型的逻辑和物理类结构。3.1HTML简介中国人民大学王蓉3.1.2HTML发展历史（续）HTML是SGML的一个实例1991年，蒂姆·伯纳斯·李在CERN定义了HTML语言的第一个规范，之后成为W3C组织为专门在互联网上发布信息而设计的符号化语言规范。超文本置标语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）.HTML2.0——1995年11月作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布已经过时HTML3.2——1996年1月14日，W3C推荐标准HTML4.0——1997年12月18日，W3C推荐标准HTML4.01（微小改进）——1999年12月24日，W3C推荐标准ISO/IEC15445:2000（“ISOHTML”）——2000年5月15日发布，基于严格的HTML4.01语法，是国际标准化组织和国际电工委员会的标准。现在HTML5.0正在测试，同时DHTML(动态)、VHTML(虚拟)、SHTML等也飞速发展起来。3.1HTML简介中国人民大学王蓉3.1.2HTML发展历史（续）XML是由W3C于1998年2月发布的一种标准。它同样是SGML的一个简化子集以一种开放的、自我描述方式定义了数据结构。在描述数据内容的同时能突出对结构的描述，从而体现出数据之间的关系。W3C又用XML设计出一个与HTML4.01功能等价的语言，称为XHTML1.0（ExtensibleHyperTextMarkupLanguage）使之与HTML相兼容。请参见维基百科XML词条XML定义结构、存储信息、传送信息。下例為張旭发送给陳貞伶的便条，存储为XML。3.1HTML简介中国人民大学王蓉相互关系SGMLHTMLXMLXHTML实例子集实例3.1HTML简介中国人民大学王蓉3.1.3HTML标签HTML标记标签通常被称为HTML标签(HTMLtag)。HTML标签是由尖括号包围的关键词，比如htmlHTML标签通常是成对出现的标签标签控制的内容/标签比如h1和/h1标签对中的第一个标签是开始标签，第二个标签是结束标签HTML中不区分大小写H1我最喜欢的站点/H1h1我最喜欢的站点/h1在HTML中作用一样，但W3C标准建议用小写注：标签也称为标记、标志、标识等请参见W3C关于HTML4与XHTML的区别3.1HTML简介中国人民大学王蓉3.1.4HTML元素HTML元素指的是从开始标签（starttag）到结束标签（endtag）的所有代码。3.1HTML简介htmlbodyp这是一个段落/p/body/html这段例子包含三个HTML元素。中国人民大学王蓉3.1.4HTML属性属性为HTML元素提供附加信息。属性总是以名称/值对的形式出现，比如：name=“value”。属性总是在HTML元素的开始标签中规定。3.1HTML简介htmlbodypalign=“center”这是一个段落/p/body/html中国人民大学王蓉每一个HTML文档都由文档头部（head）和文档体组成（body）htmlhead………/headbody………/body/html3.2HTML文档结构文档头文档体HTML文档中国人民大学王蓉例：一个简单文档htmlheadtitle欢迎光临/title/headbody我的第一次尝试/body/html3.2HTML文档结构练习1：使用记事本，输入左侧内容，并将文档储为扩展名为.html或.htm的文档中国人民大学王蓉文档头部HTML头部用head标签来标识头部的开始，用/head标签来标识头部的结束。此部分主要放置描述HTML文档本身的信息，如标题、编码方式、注释、关键词、作者等3.2HTML文档结构中国人民大学王蓉文档体HTML文档体用body标签来标识文档体的开始，用/body标签来标识文档体的结束。显示在浏览器中的内容主要放置于此文档体中包括由段落、列表、表格和其他元素组成的HTML文档内容3.2HTML文档结构中国人民大学王蓉3.3常用标签1文档标题title2文档体body3标题4段落、换行与空格5文字格式标签6HTML样式7超链接8表格table9内置图像img10列表中国人民大学王蓉1文档标题Title显示在浏览器的窗口标题栏、历史记录和书签等处，为搜索引擎提供搜索依据语法：title这个文档的标题/title包括在文档头标签中3.3常用标签位于文档头部中请记住始终为文档定义标题！中国人民大学王蓉2文档体Body文档体标签定义文档的主体内容body此为文档主体……./body3.3常用标签中国人民大学王蓉2文档体Body3.3常用标签练习2：修改练习1文档，在body标签中将文背景设置为黑色，文字颜色设置成白色中国人民大学王蓉3标题标题（Heading）是通过h1-h6等标签进行定义由于h元素具有明确的语义很重要，所以需慎重选择恰当的标签层级来构建文档的结构，不要仅仅是为了产生粗体或大号的文本而使用标题搜索引擎会使用标题为网页的结构和内容建立索引3.3常用标签例：h1这是标题1/h1h2这是标题2/h2h3这是标题3/h3h4这是标题4/h4h5这是标题5/h5h6这是标题6/h6练习3：在body元素中添加1-6级标题，观察结果再增加一个h7这是标题7/h7看看会有什么结果中国人民大学王蓉4段落、换行与空格(1/4)浏览器会忽略HTML文档中回车换行键导致的换行空格键和Tab键导致的空格，两个字之间的所有空格被看成一个空格需用HTML标签来强制换行、分段和空格3.3常用标签中国人民大学王蓉4段落、换行与空格(2/4)p段落标签定义一个新段落的开始在段与段之间插入一个空行由于一个段落的结束意味着一个新段落的开始，所以使用p标签可以省略结束标签，但这不是一个好的用法，避免使用3.3常用标签在Dreamweaver中对应Enter键p这是一段/pp这是另一段/p提示：使用空的段落标记p/p去插入一个空行是个坏习惯。用br/标签代替它！中国人民大学王蓉4段落、换行与空格(3/4)br/换行标签该标签单独使用，强制换行浏览器解释时，br标识后面的文字、图片、表格等内容显示于下一行在Dreamweaver中的快捷键Shift+Enter3.3常用标签在XHTML、XML以及未来的HTML版本中，不允许使用没有结束标签（闭合标签）的HTML元素。即使br在所有浏览器中的显示都没有问题，使用br/也是更长远的保障。插入空格可用特殊字符 ，参见HTML特殊字符显示Dreamweaver中的快捷键Ctrl+Shift+Space中国人民大学王蓉4段落、换行与空格(4/4)3.3常用标签练习4：在body元素中随意添加一些文字，加入p/p和br/标记，观察结果。中国人民大学王蓉5文本格式化标签3.3常用标签其它请参见中国人民大学王蓉6HTML样式3.3常用标签样式是HTML4引入的通过style属性可以改变HTML元素的样式。它提供了一种改变所有HTML元素的样式的通用方法。中国人民大学王蓉6HTML样式——字体、颜色、尺寸和文本对齐3.3常用标签字体font-family颜色color尺寸font-size文本对齐text-align中国人民大学王蓉6HTML样式——颜色设置方法3.3常用标签方法一英文颜色名（16种），如右图方法二用“#”引导一个十六进制数代码#rrggbb：rr、gg、bb分别取值为00-ff的十六进制数，分别表示红绿蓝颜色的强度方法三rgb(x,y,z）x,y,z在0到255取值可参考中国人民大学王蓉7超链接（1/3）链宿是其它HTML文档ahref=url相关描述文字，图片或其它资源/aahref=urltarget=“_blank”相关描述文字，图片或其它资源/a在新窗口中打开如：ahref=中国人民大学/aahref=second.htm与该网页在同一文件夹下名为second.htm网页/aahref=images/flower.gif指向该网页所在文件夹下images子文件夹中名为flower.gif的图片/a3.3常用标签中国人民大学王蓉7超链接（2/3）链宿是页面的某部分ahref=#锚点名相关描述文字/aaname=锚点名相关描述文字/a如：ahref=#chp1第一回灵根育孕源流出心性修持大道生/aaname=chp1第一回灵根育孕源流出心性修持大道生/a3.3常用标签中国人民大学王蓉7超链接（3/3）链宿是邮件系统ahref=mailto:email地址相关描述文字/a如：ahref=mailto:[e-mail]有问题请与我联系/a链宿是匿名FTP服务器ahref=服务器地址相关描述文字/a3.3常用标签中国人民大学王蓉8表格Tabletabletrth/th/trtrtd/td/tr/tableTR标签：定义表的行TD标签：定义表的单元格。Align属性缺省为left，Valign属性缺省为middleTH标签：定义表头。除文字显示为加粗且缺省Align属性为center之外，与TD标签相同3.3常用标签中国人民大学王蓉8表格Table3.3常用标签浏览器中显示结果HTML代码一行一个单元格中国人民大学王蓉8表格Table表格外框属性Border控制表格宽度Cellspacing单元格边框与表格边框之间的距离Cellpadding单元格元素到单元格边框的