kok电子竞技

1、1第第3章章 HTML语言基础语言基础本章学习要点本章学习要点 l HTML语言及其基本语法l 构成网页的基本元素l 超文本链接指针l 表格和分框2 超文本标记语言HTML（Hyper Text Markup Language）是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如Unix，Windows等）。 HTML语言是通过利用各种标记（tags）来标识文档的结构以及标识超链接（Hyperlink）信息的。虽然HTML语言描述了文档的结构格式，但并不能精确地定义文档信息应如何显示和排列，而只是建议Web浏览器（如Mosiac，N

2、etscape等）应该如何显示和排列这些信息，最终在用户面前的显示结果取决于Web浏览器本身的显示风格及其对标记的解释能力。这就是为什么同一文档在不同的浏览器中展示的效果会不一样的原因。 33.1 网页设计基本原则 在设计网页的过程中，要了解以下基本设计原则：（1）正确分析网页用户的需要。 （2）网页下载时间不宜过长。 （3）网页的设计要做到在不同的环境下都能浏览。 （4）注意网页中的图形设计。 （5）定期更新网页内容。 （6）注意网站内容的搭配。 （7）考虑不支持某些功能的浏览器。 （8）对多媒体文件实施有限的限制。 43.2 HTML语言的结构 从结构上讲，HTML文件由元素（elemen

3、t）组成。每一个元素都有名称和可选择的属性，元素的名称和属性都在起始标记内标明。例如体元素（body）： 起始起始标记标记开始开始 元素元素名称名称 属性名属性名 属性值属性值 起始起始标记标记结束结束 5一个HTML文件应具有下面的结构： html文件开始 文件头开始标题 文件头结束 文件体开始文件体 文件体结束html文件结束6一般来讲，HTML的元素有下列3种表示方法：l 文件或超文本。l 文本或超文本。l 。 第三种写法仅用于一些特殊的元素，例如分段元素P，它仅仅通知WWW浏览器在此处分段，因而不需要界定作用范围， 所以它没有结尾标记。73.3 构成网页的基本元素 题目题目(title

4、) title元素是文件头中惟一一个必须出现的元素，它也只能出现在文件头中。title元素的格式为： 题目 题目标明该HTML文件的题目，是对文件内容的概括。 8标题（标题（hn) 标题标签用于显示HTML文件的各级标题，格式为:标题内容 其中n为16之间的整数，其值越大，字越小。 9排kok电子竞技标签分段排kok电子竞技标签分段 HTML的浏览器是基于窗口的，用户可以随时改变显示区的大。訦TML将多个空格以及回车看成一个空格，这是和绝大多数字处理器不同的。HTML的分段依赖于分段元素。 也有多种属性，比较常用的属性是： align# # 可以是left、center、right，其含义同上文。 例如： 段落

5、居中10清单清单List清单用于列举事实。常用的清单有3种格式，即无序清单（unordered list），有序清单（ordered list）和定义清单（definition list）。例如：今天明天输出为：今天明天例如：今天明天输出为：1. 今天2. 明天3定义清单定义清单 例如：条目1条目1的定义条目2条目2的定义输出为： 条目1条目1的定义条目2条目2的定义2 2有序清单有序清单 ol1 1无序清单无序清单 ul11居中居中 很多元素都有对齐方式属性，如hn、p等。也可以直接用居中标记。以下代码的输出结果如图3-2所示。今天的天气真好！123.4超文本链接指针超文本链接指针 使用超文

6、本链接指针可以使顺序存放的文件具有一定程度上随机访问的能力，更加符合人的思维方式。人的思维是跳跃的、交叉的，而每一个链接指针正好代表了作者或者读者的思维跳跃。 一个超文本链接指针由两部分组成：一是被指向的目标，它可以是同一文件的另一部分，也可以是世界另一端的一个文件，还可以是动画或音乐；另一部分是指向目标的链接指针。13统一资源定位器统一资源定位器URLURL 统一资源定位器URL（Uiform Resource Locator）是文件名的扩展。在Internet上，各个网络、各个主机的操作系统可能不一样，因此必须指定访问该文件的方法。一个URL包括了以上所有的信息，它的构成为： protoc

7、ol : / :port/directory/filename 其中，protocol是访问该资源所采用的协议， 一个典型的URL为：http:/14指向一个目标指向一个目标 a 在HTML文件中可用链接指针指向一个目标。其基本格式为： 字符串 href属性中的url是被指向的目标，随后的“字符串”在HTML文件中充当指针的角色，它一般显示为蓝色，也可以定义成其他颜色。当用户用鼠标点击这个字符串时，浏览器就会将url处的资源显示在屏幕上。例如：中国教育和科研计算机网15标记一个目标标记一个目标 对于同一文件的不同部分，标识目标的方法实现: textname属性将放置该标

8、记的地方标记为“name”，name是一个全文惟一的标记串，text部分可有可无。做好标记后，可以用下列方法来指向它： text 其中，url是放置标记的HTML文件，#name是标记名。对于同一个文件，可以写为： text 这时就可以点击“text”跳转到标记名为name的部分了。16目标窗口目标窗口 如果希望被指向的目标在一个新的窗口中显示，可以使用target属性来修饰链接指针元素。如： text 可将url代表的资源显示在一个新的窗口中，该窗口的名字叫window-name，它可以是本窗口（_self）、父窗口（_parent）、新窗口（_blank）及整个浏览器窗口（_top）。 1

9、7图像链接指针图像链接指针 图像也可以做为链接指针。格式为： 可以看出，上例中用取代了链接指针中“text”的位置。是图像元素，它表明显示url代表的图像文件。 下面是一个简单的图像链接指针：中国教育和科研计算机网 18图像地图（图像地图（image map） 图像地图不仅需要在HTML文件中说明，它还需要一个后缀为.map的文件，用来说明图像分区及其指向的URL的信息。在.map文件中说明分区信息的格式如下：recturl 左上角坐标 右下角坐标polyurl 各顶点坐标circle url 直径两端点坐标default url19下面是一个完整的说明文件：default：http:/rec

10、t：http:/ 140,20 280,60poly：http:/ 180,80 200,140circle：http:/ 80,140 80,100 图像地图需要一个特殊的处理程序imagemap，imagemap放在/cgi-bin 中。在HTML 文件中引用图像地图的格式为：203.5 kok电子竞技面风格控制kok电子竞技面风格控制 字号字号 HTML有七种字号，1号最。7号最大。默认字号为3，可以用来设置新的字号。 21字体风格字体风格 字体风格分为物理风格和逻辑风格。物理风格直接指定字体，如字体有黑体，斜体。逻辑风格用于指定文本的作用，如强调等。 格式为：标标 签签语法说明语法说明 /b/将字体格式设置

11、成黑体将字体格式设置成黑体/ /斜体斜体/ /下划线下划线 /tt/将字体格式设置成打字机体将字体格式设置成打字机体/ /文字中间画删除线文字中间画删除线 /sup/将字体格式设置成上标将字体格式设置成上标/ /下标下标 blink文字闪烁效果文字闪烁效果, , 闪烁频率为闪烁频率为1 1秒钟一次秒钟一次 /small/将文字相对缩小将文字相对缩小/ /放大显示放大显示 /em/设置字体为强调设置字体为强调/ /加重文本显示加重文本显示 /code/一个一个HTMLHTML元素的示例文字元素的示例文字/ /输出示例中文字输出示例中文字 /kbd/一个键盘按键的文字一个键盘按键的文字/ /输出引

12、用方式的字体输出引用方式的字体 /var/定义变量或值的文字定义变量或值的文字/ /定义字体定义字体22横线（横线（hr） 横线，一般用于分隔同一文本的不同部分。在窗口中划一条横线非常简单，只要写一个即可。横线的宽度用指定，n是线宽，单位是像素。例：。指定横线长度，既可以指定绝对线长，也可以指定横线长度占窗口宽度的百分比。例、。 横线的位置用指定，其中的#是left或right之一。left表示左端与左边界对齐，right是右端与右边界对齐。默认时，横线出现在窗口中央。 23行间图像行间图像 行间图像可使网页更加漂亮，但是过大的图像会导致网络通信量急剧增大，延长访问时间。所以在主页上不宜采用很

13、大的图像。如果确实需要一些大图像，最好在主页中用一个缩小的图像指向原图，并标明该图的大。庋饕晨煽焖俚乇环梦，访问者可选择看还是不看那些图像。 图像的基本格式为： 或24分行分行和禁止分行和禁止分行表示在此处分行，将通知浏览器，其中的内容在一行内显示，若一行内显示不了，则超出部分将被裁剪掉。 中的clear属性标明下一行的情况，如 clear=left，表示下一行从左边界处开始。#可以是left、right、all之一。 25背影和文本颜色背影和文本颜色 窗口背景可以用下列方法指定： bgcolor：背景颜色。 text：文本颜色。 link：链接指针颜色。 alink：活动的链接指针颜色

14、。 vlink：已访问过的链接指针颜色。例如： 大红背景色。注意，此时体元素必须写完整，并用结束。26转义字符与特殊字符转义字符与特殊字符 HTML中及&字符有特殊含义（前两个字符用于链接签，&用于转义），不能直接使用。要使用这3个字符，必须用它们的转义序列。l & 的转义序列为 &s 或 &。l 的转义序列为 >或 >。 前者为字符转义序列，后者为数字转义序列。 例如： <font>显示为。若直接写成则会被认为是一个链接签。273.6 表格（表格（table） 表格的基本结构如下：表格的基本结构如下： 一个表由开始，结束，表的内容由、和定义。说明表的一个行，表

15、有多少行就有多少个；说明表的列数和相应栏目的名称，有多少个栏就有多少个；则填充由和组成的表格。border属性用来说明是否用表格线分开。 28有通栏的表有通栏的表 有横向通栏的表用属性说明。其中，colspan表示横向栏距，#代表通栏占据的网格数，它是一个小于表的横向网格数的整数。 有纵向通栏的表用属性说明。其中，rowspan表示纵向栏距，#表示通栏占据的网格数，应小于纵向网络数。需要说明的是有纵向通栏的表，每一行必须用明确表示一横向栏目结束,这是和表的基本形式不同的。 29表中文本的输出表中文本的输出 文本与表框的距离用cellpadding=#说明。 表格的宽度大于其中的文本宽度时，文本

16、在其中的输出位置用align=#说明。#是left、center和right三者之一，分别表示左对齐、居中和右对齐。align属性可修饰、和链接签。 表格的高度大于其中文本的高度时，可以用valign=#说明文本在其中的位置。#是top、middle、bottom、baseline四者之一。分别表示上对齐、文本中线与表格中线对齐、下对齐、文本基线与表格中线对齐。特别注意的是基线（baseine）对齐方式，它使得文本出现在网格的上方而不是想像中的下半部。同样，valign可以修饰、和中的任何一个。 30浮动表格浮动表格 所谓浮动表格是指表与文件中内容对齐时，若在现在位置上不能满足其对齐方式，表格

17、会上下移动，即“挤开”一些内容，直到满足其对齐要求。 浮动属性一般由align=left或right指定。 313.7 分框（分框（frame） 分框将同一浏览器的窗口（主框架：frameset定义）分成多个区域（子框：frame定义），每个区域可以单独显示一个HTML文件，各个区域也可相关连地显示某一个内容。分框的基本结构如下： 323.8 其他标签其他标签其他标签说明如下表所示。语法格式： 33标 签语法说明注释功能，不显示在网页上bgsoundsrc=# 增加背景音乐 #=wav 文件所在的URLloop=# 设定循环次数 #=循环次数marquee设置文字滚动功能direction=# 设置滚动方向 #=left、right、up、downbehavior=# 设置滚动方式 #=scroll, slide, alternateloop=# 设置循环次数scrollamount=# 设置滚动速度scrolldelay=# 设置滚动延时align=# 设置对齐位置 #=top、middle、bottom34本章小结本章小结 本章主要介绍了HTML语言的结构、构成网页的基本元素、超文本链接指针、kok电子竞技面风格控制，以及如何使用表格、分框等内容。表单部分的内容将在后面章节中专门介绍。