超文本标记语言基础

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

HTML语言的基本结构
关于HTML语言基本结构的几点说明：（1）创建一个HTML文档所需的最基本的标记是<html>和</html>。（2）HTML文档是由标记和文本组成，其中标记用“<”、“>”括起来。（3）标记元素总是起始与“<”并结束与“>”。（4）HTML标记有单边标记和双边标记两类。（5）在HTML文档中标记元素不区分大小写，如<body>、<BODY>、 <Body>，对于浏览器来说都是一样的。
HTML的正文标记
（4）正文文字颜色格式：<body text="#RRGGBB">…</body> 说明：text属性标志HTML文档的正文文字颜色，如text="#ff6666"。 text元素定义的颜色将应用于整篇文档。技术要点：text属性用来设置一般文本（非超链接的文本）的颜色，而超链接颜色由link、vlink、alink来设置。（5）超链接颜色格式：<body link="#RRGGBB" vlink="#RRGGBB" alink="#RRGGBB">…</body> 说明：link、vlink、alink分别控制普通超链接、访问过的超链接、当前活动超链接颜色。技术要点：在改变超链接的颜色时一定慎重，避免因改变超链接的颜色而引起混乱。特别应注意不可将未访问过的超链接与已访问过的超链接设置为同一种颜色，这样会给访问该页面的用户造成不便。
HTML的正文标记
（2）页面背景图像属性格式：<body background="URL" >…</body> 说明：该属性的取值为一个指向某个图像文件的URL，以产生页面的背景图案。可以使用的图像文件为.gif或.jpeg，如<body background=" images\bg.gif" >。技术要点：background属性的优先级高于bgcolor属性的优先级，因此当background属性和bgcolor属性同时使用时，页面显示背景图像而不是背景颜色。（3）背景图片成水印效果格式：<body background="URL" bgproperties="fixed">…</body> 说明：使背景图片成水印效果，即图片不随着浏览器滚动条的滚动而滚动。。
3.由Web 服务器（或称HTTP 服务器）一方实时动态地生输成入。代</码p>
</body>
HTML文档的编写方法
在浏览器中预览
HTML文档的命名规则
无论使用那种HTML文档编写方法，对编写完成的HTML文档进行保存时应该注意以下几点：
（1）文件保存类型为“.htm”或“.html”。（2）文件名应该为英文、数字，避免出现汉字。（3）文件名不应该包含空格、特殊符号（例如&符号）等，可以有下划线“_”。（4）文件名应该注意区分大小写。建议文件名全部为小写。（5）首页文件命名为：index.htm 或 index.html。
HTML的标题标记
例5-2 文件头标记的应用。在HTML文档编辑器中编写以上代码并保存为“.html”格式，在浏览器中的运行结果如图所示。3秒钟后本网页自动跳转到网易首页。
HTML的正文标记
<body>元素表明是HTML文档的主体部分。在<body>与</body>之间，通常都会有很多其它元素，这些元素和元素属性构成HTML文档的主体部分。
N o
超文本标记语言基础
.
2
学习目标：
了解超文本标记语言的含义
理解超文本标记语言的基本结构
掌握超文本标记语言中常用标记元素的功能
主要内容
HTML语言的基本结构 HTML语言常用标记元素
HTML语言的基本结构
HTML是HyperText Markup Language（超文本标记语言）的缩写。 HTML语言与C、C++、C#、Java等语言不同，它并不是一种程序设计语言，而是一种页面描述性语言，用于描述Web页面。它是在文本文件的基础上，加上一系列标记用来描述其格式、颜色，再加上一些声音、动画、视频等，形成一个完整的文件。我们把这种用HTML语言编写的文本文件称之为HTML文档（HTML Document）。这些HTML文档存放在Web服务器上，当用户通过Web浏览器上浏览这些文件时，浏览器会自动解释这些标记的含义，并按照一定的格式把被标记的信息显示在浏览器上，而HTML的标记符号并不显示在屏幕上。
HTML的正文标记
（6）页面内容距浏览器边界的距离格式： <body leftmargin="number01" topmargin=" number02">…</body> 说明：leftmargin属性和topmargin属性取值均为数值，分别表示网页主体内容距浏览器左端和顶端的距离，如，<body leftmargin=“30” topmargin=“ number50”>。例5-3 leftmargin属性和topmargin属性的取值。
HTML文档的编写方法
由于HTML文档是一个文本文档，因此可以应用文本编辑器即可完成 HTML文档的编写。下面介绍几种常见的编写方法：
（1）手工直接编写使用记事本、Ultra Edit等文本编辑器编写，编写完成后将其保存成.htm或.html格式即可。（2）可视化HTML编辑器使用Frontpage、Dreamweaver等可视化编辑器完成编写，在这些可视化编辑器中的代码输入界面中编写，在预览界面中就能够看见编写的结果。而且在编写时还有代码提示信息，编写比较方便。（3）由Web 服务器（或称HTTP 服务器）一方实时动态地生成。
HTML的标题标记
例5-2 文件头标记的应用。  <html>
<head> <title>文件头标记的应用</title>
<meta name="keywords" content="study, computer"> <meta name="author" content="Zhangjie"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
HTML文档的编写方法
例5-1编写一个简单的HTML文档。具体制作过程如下：（1）打开记事本。（2）在记事本中输入代码。（3）在记事本中，执行“文件”|“保存”命令。打开“另存为”对话框，在“文件名”中输入“5-1.html”。单击【保存】按钮保存文档。（4）双击“5-1.html”文件，在浏览器中打开。
5.2.5 表格标记<table> 5.2.6 超链接标记<a> 5.2.7 图片标记<img> 5.2.8 表单标记<form>
HTML的标题标记
1. <head>标记格式：<head>…</head> 功能：<head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是这一对标记之间可以加入其它，如<title>标记、<meta>标记等。 2. <title>标记格式：<title>…</title> 功能：<title>标记定义HTML文档的标题，是对整个文档内容的概括。 <title>与</title>之间的内容将显示在浏览器窗口的标题栏。另外，当在浏览器中保存文档时，<title>与</title>之间的内容将作为缺省的文件名。
HTML语言的基本结构
任何一个HTML文档都由两个部分：标题和正文。其中 <head>…</head>标识为标题部分， <body>…</body>标识为正文部分.
html 文件的基本格式如下： <html>
<head> <title>标题部分</title>
</head> <body>
正文部分 </body> </html>
<meta http-equiv="refresh" content="3;URL="> </head> <body>
文件头元素所标记的内容不会在浏览器的文档窗口显示3秒钟后本网页将自动跳转到网易网站首页 </body> </html>
HTML的标题标记
3. <meta>标记格式：<meta> 功能：该标记为单边标记，具有多个属性，不同属性表明<meta>有不同的功能。属性：<meta>元素有很多很有用的元素属性。下面介绍常见的四种属性：（1）文档关键字格式：<meta name="keywords" content="study, computer"> 说明：用来标记搜索引擎在搜索该页面时所取出的关键词。（2）作者信息格式：<meta name="author" content="Zhangjie"> 说明：用来标记文档的作者。该文档作者为“Zhangjie”。
格式：<body>…</body> 功能：标注HTML文档的主体。属性：<body>标记一般有六种可选属性，它们用来设置Web页面的外观。这些属性分别是：（1）页面背景颜色属性格式：<body bgcolor="#RRGGBB">…</body> 说明：该属性是用来设置页面的背景颜色的，其值可用六位十六进制形式的颜色代码表示。颜色代码#RRGGBB中的RR、GG、BB分别表示红、绿、蓝三种原色的亮度，取值范围在00～FF之间，数值越大亮度越高，如颜色代码#000000表示为黑色。常见的颜色代码如表5-1所示。
HTML的标题标记
3. <meta>标记（3）解码方式格式：<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 说明：用来标记该页面的解码方式。该页面的解码方式为“gb2312”。（4）自动刷新网页格式：<meta http-equiv="refresh" content="5;URL="> 说明：用来自动刷新网页。表明5秒钟后本网页将自动跳转到网站首页。
HTML的正文标记
常见的颜色代码如下表所示。
颜色黑色白色黄色红色蓝色银色绿色海蓝色
颜色名和RGB值 Black="#000000" White="#ffffff" Yellow="ffff00"
Red="#ff0000" Blue="#0000ff" Silver="#c0c0c0" Green="#00ff00" Aqua="#00ffff"
HTML文档的编写方法
例5-1编写一个简单的HTML文档。
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>例5-1 HTML语言基本结构练习</title> </head> <body> HTML语言是一种标记性的语言。 HTML文档的编写有以下几种方法： 1.手工直接编写 2.使用可视化HTML编辑器 
主要内容
HTML语言的基本结构 HTML语言常用标记元素
HTML语言常用标记元素
在HTML语言中有许多标记元素，这些标记分别用来控制页面排版、表格、表单、框架、图片、多媒体等。本节将介绍一些常用的标记元素。
5.2.1 HTML的标题标记 5.2.2 HTML的正文标记 5.2.3 页面排版标记 5.2.4 列表标记