第2章HTML基础与文字版面设计

第2章HTML基础与文字版面设计本章知识技能要点：HTML标签与浏览器显示效果的基本对应关系HTML的基本结构组成简单页面的编排在HTML中颜色的使用掌握文字版面编辑的基本要领以及p,br,pre,center和hr标签的基本用法掌握标题标签hn，特殊文字和特殊符号的使用方法熟练掌握利用font标签设置各种字体样式的方法掌握各类列表的编排方法2.1HTML基础2.1.1HTML概述HTML英语意思是：HypertextMarkedLanguage，即超文本标签语言,是一种用来制作超文本文档的简单标签语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如Unix，Windows等）。自1990年以来HTML就一直被用作WorldWideWeb的信息表示语言，用于描述HOMEPAGE的格式设计和它与的连结信息。使用HTML语言描述的文件，需要通过浏览器显示出效果。HTML的普遍应用就是带来了超文本的技术----通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面与世界各地主机的文件链接，直接获取相关的主题。编辑HTML超文本文件时需要用到的一些标签。在HTML中每个用来作标签的符号都是一条命令，它告诉浏览器如何显示文本。这些标签均由“”和“”符号以及一个字符串组成。而浏览器的功能是对这些标签进行解释，显示出文字、图像、动画、播放声音。这些标签符号用“标签名字属性”来表示。HTML只是一个纯文本文件。创建一个HTML文档只需要两个工具，一个是HTML编辑器，一个WEB浏览器。HTML编辑器是用于生成和保存HTML文档的应用程序。WEB浏览器是用来打开WEB网页文件，提供查看WEB资源的客户端程序。2.1HTML基础2.1.2超文本中的标签2.1HTML基础HTML的标签分单标签和成对标签两种。成对标签是由首标签标签名和尾标签/标签名组成的，成对标签的作用域只作用于这对标签中的文档。单独标签的格式标签名，只需单独放在相应的位置插入元素就可以了。大多数标签都有自己的一些属性,属性要写在始标签内，属性用于进一步改变显示的效果,各属性之间无先后次序，属性是可选的，属性也可以省略而采用默认值;其格式如下：标签名字属性1属性2属性3…内容/标签名字2.1.2.1单标签2.1HTML基础某些标签称为“单标签”，因为它只需单独使用就能完整地表达意思，这类标签的语法是：标签名称内容最常用的单标签是br,它表示换行。2.1.2.2双标签另一类标签称为“双标签”，它由“始标签”和“尾标签”两部分构成，必须成对使用。其中始标签告诉web浏览器从此处开始执行该标签所表示的功能，而尾标签告诉web浏览器在这里结束该功能。始标签前加一个斜杠（/）即成为尾标签。这类标签的语法是：标签内容/标签其中“内容”部分就是要被这对标签施加作用的部分。例如你想突出对某段文字的显示，就将此段文字放在一em/em标签中，例如：em第一：/em2.1HTML基础2.1.3标签属性2.1HTML基础许多单标签和双标签的始标签内可以包含一些属性，其语法是：标签名字属性1属性2属性3…各属性之间无先后次序，有些属性也可省略（即取默认值）。2.1.4HTML的基本结构2.1HTML基础一个HTML文档是由一系列的元素和标签组成.元素名不区分大小写.HTML用标签来规定元素的属性和它在文件中的位置。超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。HTMLhead头部信息/headbody文档主体，正文部分/body/HTML其中HTML在最外层，表示这对标签间的内容是HTML文档。我们还会看到一些hompage省略HTML标签，因为.HTML或.htm文件被web浏览器默认为是HTML文档。head之间包括文档的头部信息，如文档总标题等，若不需头部信息则可省略此标签。body标签一般不省略，表示正文内容的开始。例2-1：以下是一个最基本的超文本文档的源代码HTML文件头headtitle我的第一个网页/title/headbodycenterh3学习HTML网页制作/h3br文件体hrfontsize=2HTML英语是：HypertextMarkedLanguage，即超文本标签语言。/font/center/body/HTML2.1HTML基础图2-1例2-1的运行效果2.2页面的整体编排2.2.1页面的头标签head/head页面的头标签head和/head构成HTML文档的开头部分，在浏览器窗口中，头部信息是不被显示在正文中的,在此标签中可以插入其它标签,用以说明文件的标题和整个文件的一些公用属性。在此标签对之间可以使用title/title、script/script等等标签对，这些标签对都是描述HTML文档相关信息的标签对，head/head标签对之间的内容是不会在浏览器的框内显示出来的。两个标签必须一块使用2.2.2页面的标题标签title/title页面的标题标签title/title决定了显示在页面标题栏中的文字。使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，那些信息一般是网页的“主题”，要将网页的主题显示到浏览器的顶部其实很简单，只要在title/title标签对之间加入要显示的文本即可。2.2页面的整体编排例如：HTMLheadtitle我的第一个网页/title/headbody/body/HTML2.2页面的整体编排2.2.3主体标签body/bodybody/body标签是HTML文档的主体部分，其中放置的是页面中所有的内容，如图片、文字、表格、表单、超链接等设置。在此标签对之间可包含p、/p、h1、/h1、br、hr等等众多的标签，它们所定义的文本、图像等将会在浏览器的框内显示出来。body/body两个标签必须一块使用。body标签有自己的属性，设置body标签内的属性，可控制整个页面的显示方式。其主要属性如表2-1。2.2页面的整体编排表2-1body标签的主要属性2.2页面的整体编排下面是一个综合的例子，仔细阅读，便可以了解以上各个标志对在一个HTML文档中的布局或所使用的位置。例2-2：HTML文档中基本标志的使用HTMLheadtitle显示在浏览器最标题栏中的文本/title/headbodybgcolor=redtext=bluetext=#000000link=#000000alink=#000000vlink=#000000p红色背景、蓝色文字/p/body/HTML2.2页面的整体编排颜色值是一个关键字或一个RGB格式的数字。在网页中有许多标签都会用到颜色的设置，在此一并给予介绍。颜色是由redgreenblue三原色组合而成的，在HTML中对颜色的定义是用十六进制数值进行表示的，对於三原色HTML分别给予两个十六进制数值去定义，也就是每个原色可有256种彩度，故此三原色可混合成16777216种颜色。应用时常在每个RGB值之前加上“#“符号，如：bgcolor=#336699。若用英文名字表示颜色时则可以直接写其英文名字，如bgcolor=greenRGB颜色可以有四种表达形式:：#RRGGBB(如，#00cc00)#RGB(如，#0c0)RGB(x,x,x)x是一个介乎0到255之间的整数(如，RGB(0,204,0))RGB(y%,y%,y%)y是一个介乎0.0到100.0之间的整数(如，RGB(0%,80%,0%)表1-2是部分颜色的RGB代码对照表。2.3网页中颜色的设置2.4.1标题标签hn一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签hn,hn标签用于设置网页中的标题文字，被设置的文字将以黑体或粗体的方式显示在网页中。其中n为标题的等级。HTML总共提供六个等级的标题，n越小，标题字号就越大。标题标签的格式：hnalign=参数〉标题内容/hn说明：hn标签是成对出现的，hn标签共分为六级，在h1.../h1之间的文字就是第一级标题，是最大最粗的标题；h6.../h6之间的文字是最后一级，是最小最细的标题文字。align属性用于设置标题的对齐方式，其参数为left（靠左对齐），enter（居中对齐)，right(靠右对齐）。hn标签本身具有换行的作用，标题总是从新的一行开始。2.4文字版面的编辑例2-3：HTMLheadtitle设定各级标题/title/headbody这是一行普通文字ph1align=center一级标题文字/h1h2二级标题文字/h2h3三级标题文字/h3h4四级标题文字/h4h5align=right靠右对齐的五级标题文字/h5h6align=left靠左对齐的六级标题文字/h6/body/HTML2.4文字版面的编辑图2-2例2-3的运行效果2.4.2段落标签pp/p标签对是用来创建一个段落，在此标签对之间加入的文本将按照段落的格式显示在浏览器上。文件段落的开始由p来标签，段落的结束由/p来标签，/p是可以省略的，因为下一个p的开始就意味着上一个p的结束。段落标签是HTML标签符中最常见的一种符号，它位于各段落起始部位，使用该标签符后，每块文本段落之间都会空出一行。p标签还有一个属性aling，它用来指名对象显示时的对齐方式，一般值有center、left、right三种。这三个参数设置段落文字的左,中,右位置的对齐方式。格式：palign=参数2.4文字版面的编辑例2-4:HTMLheadtitle测试分段控制标签/title/headbodyp花儿什么也没有。它们只有凋谢在风中的轻微、凄楚而又无奈的吟怨，就像那受到了致命伤害的秋雁，悲哀无助地发出一声声垂死的鸣叫。/ppalign=right或许，这便是花儿那短暂一生最凄凉、最伤感的归宿。/ppalign=center而美丽苦短的花期/ppalign=left却是那最后悲伤的秋风挽歌中的瞬间插曲。/p/body/HTML2.4文字版面的编辑2.4.3换行标签br在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会被浏览器切掉。因为，在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于自己需要断行的地方，应加上br标签。换行标签是个单标签，也叫空标签，不包含任和内容，在HTML文件中的任何位置只要使用了br标签，当文件显示在浏览器中时，该标签之后的内容将显示在下一行。大多数情况下，段落标签符p是分隔文本的最佳符号，但有时可能会希望重起一行，但在新行与上一行之间并不空出一行间距，在这种情况下，最好使用分行标签符br。2.4文字版面的编辑2.4.4水平线段标签hrhr标签是单独使用的标签，是水平线标签。这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分，使文档结构清晰明朗，使文字的编排更整齐。通过设置hr标签的属性值，可以控制