第03章超文本标识语言HTML
第三章 HTML语言概述 fzy
第一节 HTML简介
1．HTML语言 网页一般是以HTML语言格式为基础编写成的。 HTML语言是超文本标记语言的缩写。 创建HTML文件也十分简单，使用任何的文本编
辑器都可以对它进行编辑。 HTML文件的后缀名必须是.html或移动的像素数； Scrolldelay，重复画面之间的时间间隔，以微妙（ms）为单位。
第四节 版面设置
6．META标记的使用 META标签用来描述一个HTML网页文档的属性，
例如作者、日期和时间、网页描述、关键词、页 面刷新等。 常用属性有Content、 http-equiv和 Name，其中http-equiv和Name不能同时使用。
第七节 表格
（2）定义表格行标记<TR> 表明所控制的内容为表格的一行，其属性为：
height，控制行高度（像素数或百分比） bordercolor，控制行的边框（即内框）颜色 Bgcolor，控制行的背景颜色 Align，控制行的文字水平对齐方式（left、right、
center） Valign，控制行的文字垂直对齐方式（top、middle、
第三节 文字编排
2．文字标记 文字标记：<FONT>，是双标记格式。 <font>的属性：
Face属性，控制字符使用字体的属性，语法： face=“字体名” （华文中宋、华文彩云、宋体、楷体、 隶书、华文新魏、华文行楷、黑体）
Size属性，控制字符大小，语法：size=字符等级 Color属性，用于控制字符的颜色，语法：color=“颜
Size，用于控制水平线的粗细，属性值为像素数。
第四节 版面设置
5．滚动文字 滚动文字标记<MARQUEE>控制内容在行内滚动。其属性
超文本标记语言 HTML教程
HTML 文档中标签的用法
<HTML> <HEAD> <TITLE>一个 HTML 的例子</TITLE> 首部结束 </HEAD> <BODY> <H1>HTML 很容易掌握</H1> <P>这是第一个段落。虽然很 短，但它仍是一个段落。</P> <P>这是第二个段落。</P> </BODY> </HTML>
1
HTML 文档
仅当 HTML 文档是以.html 或 .htm 为后缀时， 浏览器才对此 文档的各种标签进行解释。 如 HTML 文档改换以 .txt 为其后缀，则 HTML 解释程序就不对标签进行解释，而浏览器只能 看见原来的文本文件。 当浏览器从服务器读取 HTML 文档后，就按照 HTML 文档中的各种标签，根据浏览器所使用 的显示器的尺寸和分辨率大小，重新进行排版 并恢复出所读取的页面。
3
HTML 的标签
HTML用一对标签（即一个开始标签和一个结束 标签）或几对标签来标识一个元素。 开始标签由一个小于字符“<”、一个标签名、和 一个大于字符“>”组成。 结束标签和开始标签的区别只是在小于字符的 后面要加上一个斜杠字符“/”。 虽然标签名并不区分大写和小写。 有一些标签可以将结束标签省略。
插入图像
开始标签 结束标签
<IMG SRC=portrait.gif HEIGHT=100 WIDTH=65> 插入图像 高度是 100 像素 宽度是 65 像素 插入的图像文件名是 portrait.gif
15
第三章html、xml与xhtml
第三章html、xml与xhtmlHTML：超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。
HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。
HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
HTML标签通常是英文词汇的全称（如块引用:blockquote）或缩略语（如“p”代表Paragraph），但它们的与一般文本有区别，因为它们放在单书名号里。
故Paragragh 标签是<p>,块引用标签是<blockquote>。
有些标签说明页面如何被格式化（例如，开始一个新段落），其他则说明这些词如何显示(<b>使文字变粗)还有一些其他标签提供在页面上不显示的信息－－例如标题。
HTML标准的版本历史：超文本置标语言(第一版)——在1993年6月发为互联网工程工作小组 (IETF)工作草案发布（并非标准）.HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时HTML 3.2——1996年1月14日，W3C推荐标准HTML 4.0——1997年12月18日，W3C推荐标准HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准HTML 5——2007年HTML 5草案被W3C接纳，并成立了新的HTML工作团队。
08年1月22日第一份正式HTML 5草案发布。
XML：即可扩展标记语言，它与HTML一样，都是SGML(Standard Generalized Markup Language,标准通用标记语言)。
Xml是Internet环境中跨平台的，依赖于内容的技术，是当前处理结构化文档信息的有力工具。
扩展标记语言XML是一种简单的数据存储语言，使用一系列简单的标记描述数据，而这些标记可以用方便的方式建立，虽然XML占用的空间比二进制数据要占用更多的空间，但XML极其简单易于掌握和使用。
第03章 超文本标记语言HTML
3.2.5 水平线标记 功能：水平线标记<HR>可以在页面中显示一 条水平线，将不同功能的页面内容分隔开， 使之整齐明了。当浏览器执行HTML文件中 的标记时，会在此处换行，并加入一条水 平线段。 格式：<HR align=“对齐方式” size=“横线粗 细” width=“横线长度” color=“横线颜色” noshade> 属性： align， size， width， color。
3.2.1 标题字标记 功能：用于定义文章内章节标题的显示格式，并且 标题字会单独成行。 格式：<Hn align=“对齐方式”> 标题文字 </Hn> 属性：n用来指定标题文字字号的大小。n可以取 1～6的整数值，数字越小，字号越大。 align用来设置标题在页面中的对齐方式，取值有： left（左对齐）、center（居中）、right（右对 齐）、bottom（位于底端）和top（位于顶端）。
HTML语言 主要功能
格 式 化 文 本
创 建 列 表
建 立 表 格
插 入 图 片
加 入 多 媒 体
添 加 交 互 式 表 单
2.标记符 标记符又称标签，用来控制网页内容显示效 果。它在使用时必须用“< >”括起来。绝大多数标 记符都是成对出现的，包括开始标记符和结束标记 符。标记符是不区分大小写的，但通常约定标记符 使用大写字母，这有利于HTML文档的维护，其格 式为：
【实例3-6】水平线标记的使用。 <HTML> <HEAD> <TITLE> 水平线段标记的应用 </TITLE> </HEAD> <BODY> <CENTER><H3>水平线</H3></CENTER> <HR> <HR align="left" size="6" width="320"> <HR align="center" size="8" width="60%" color="blue"> <HR align="right" size="8" width="360" color="red"> <HR size="4" width="80%" color="#CD061F"> <HR size="5" noshade> <HR width="70%" noshade> </BODY> </HTML>
超文本标记语言(英文：HyperText Markup Language,HTML)
超文本标记语言（英文：HyperText Markup Language，HTML）超文本标记语言（英文：HyperText Markup Language，HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。
HTML被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。
1982年由蒂姆·伯纳斯-李创建，由IETF用简化的SGML（标准通用标记语言）语法进行进一步发展的HTML，后来成为国际标准，由万维网联盟（W3C）维护。
1 基本介绍HTML（HyperText Markup Language），超文本标记语言，是一种专门用于创建Web超文本文档的编程语言，它能告诉Web浏览程序如何显示Web文档（即网页）的信息，如何链接各种信息。
使用HTML语言可以在其生成的文档中含有其它文档，或者含有图像、声音、视频等，从而形成超文本。
超文本文档本身并不真正含有其他的文档，它仅仅含有指向这些文档的指针，这些指针就是超链接。
HTML是用来制作网页的语言，网页中的每个元素都需要用HTML规定的专门标记来定义。
要让设计者在网络上发布的网页能够被世界各地的浏览者所阅读，需要一种规范化的发布语言。
在万维网(WWW)上，文档的发布语言是HTML。
标记语言是一种基于源代码解释的访问方式，它的源文件由一个纯文本文件组成，代码中由许多元素组成，而前台浏览器通过解释这些元素显示各种样式的文档。
换句话说，浏览器就是把纯文本的后台源文件以赋有样式定义的超文本文件方式显示出来。
HTML和网络是紧密相连的，HTML语言的发展和浏览器的支持是密不可分的，在20世纪90年代网络刚刚兴起时，多种浏览器同时流行于世界各地，它们支持HTML语言的标准也各不相同，这样限制了HTML标记语言本身的发展，逐渐，W3C网络标准化组织联手一些较为流行浏览器开发厂商一同定义HTML标准，并且力推浏览器解释语言和显示方法的统一。
超文本标记语言HTML
(2)无序列表
<UL type=符号类型> <LI type=符号类型>列表项1</LI>
<LI type=符号类型>列表项2</LI>
<LI type=符号类型>列表项3</LI> </UL> 例子 心圆、缺省值)|circle(空心圆)|square(方块)。 (常用)
源网页为favorite.htm
<Ahref=“../index.htm”>返回首页</A> <A href=“..Folder1/photo.htm”>相册</A> <Ahref=“interest.htm”>兴趣</A>
2) 外部链接
所谓外部链接是指建立链接的源网页与待链接的目标网 页不在同一站点内。创建这样的超链接必须使用绝对路径， 例如下而的代码创建了连接到“搜狐”主页的超链接： 例： <A href="">链接到"搜狐"</A>
UL type 设置无序列表的项目符号样式，取值为disc(实
LI
Type 设置列表项的项目符号样式，取值为disc(实心ห้องสมุดไป่ตู้
圆、缺省值)|circie(空心圆)|square(方块)。(不 常用)
(3)定义列表 定义列表的制作需要以下几个标记符： 列表标记符<DL>...</DL>,用来指定定义列表的开始与 结尾； 术语标记符<DT>，用来指定第一层数据；
HTML超文本标记语言使用户可以通过统一的界面
目录式搜索引擎 全文搜索引擎 元搜索引擎
3、搜索引擎的发展
二、搜索引擎的发展与分类
1、搜索引擎的产生
产生时间
1994.4 1995.12 1997.10
搜索工具
Yahoo Altavista 北大天网
开发组或公司
斯坦福大学 入 第一个支持自然语言关键词和高 级检索的引擎 收录网页约6000万,有强大的 FT引器 检索器
当堂测试
2）检索器的功能是（C） 索引器的功能是（ B ） 搜索器的功能是（ A ） A：抓取页面 B：分析网页，并存入数据库 C：查询并反馈结果
当堂测试
目录类搜索引擎的信息按网络资源的主题性质进行分类 目录类搜索引擎的信息组成形式： 总目录 专题目录 链接 网站
Language，HTML）编写的文本文件。
HTML超文本标记语言使用户可以通过统一的界面（浏 览器）访问各种不同格式的计算机文档，它消除了不同计 算机系统之间的信息交流问题。 HTML语言是通过在文本文件中加入一系列的标签来告 诉计算机如何显示网页。所以HTML只是一种排版标记语言。 HTML文档是用HTML标记语言所编写的文档，可以用任何文 本编辑器编号，其扩展名通常为：.html 或.htm
1998.9
2001.8Google斯坦福大学公司
提供网页评级动态摘要、网页快 照，每天更新、多文档格式支持
快照、预览、相关词搜索、mp3、 flash搜索功能
二、2 搜索引擎的分类
类型 定义
网络信息资源按 照主题分类,并以 层次树状形式进 行组织的一类搜 索引擎.
查找信息 灵活、方便 取决于超链接，搜索的结果有偶然性和片面性 经常遇到线索中断和偏离用户感兴趣的主题
第3章 超文本标识语HTML
• 本章学习目标
– 掌握HTML文件的基本结构。 – 掌握HTML文件中常用标签的作用。 – 会用HTML中常见的标签命令编写简单的网 页。
3.1பைடு நூலகம்HTML的基本结构
• Html是英文 HyperText Markup Language 的缩写，中文意思 是“超文本标记语言”，它是一种专门用于创建web超文本文 档的结构语言，它能告诉Web浏览程序如何显示Web文档（即网 页）的信息，如何链接各种信息。使用Html语言可以在其生成 的文档中含有其他文档，或者含有图像、声音、视频等，从而 形成超文本、超媒体文档。 • Html文件是加入了许多被称为“标签”的特殊字符串的文本文 件，用标注文档或给文档添加标签，使得文档可以在Web浏览 器中显示。用它编写的文件(文档)的扩展名是.html或.htm。 可以使用各种文本编辑工具（如记事本、写字板）来编写Html 文件。 • HTML文件的结构由“控制语句”和“显示内容”两部分组成。 控制语句描述了显示内容以何种形式展示给使用者，并负责客 户机与服务器之间的信息交换。控制语句以“标签”的形式出 现。
• 本地链接
– 对同一台机器上的不同文件进行的连接称为本地链 接，它使用文件路径的表示方法来指示一个文件。
• URL链接
– URL意思是统一资源定位器，通过它可以以多种通 讯协议与外界沟通来存取信息。 URL链接的形式是： 协议名：//主机.域名／路径／文件名
• 内部链接
– 所谓内部链接就是指链接的目的文件是位于同一 HTML文件中的某个段落。
• • • • • • 标题标签：<Hn> 文件段落标签：<P> 文字格式控制标签<FONT> 格式化文本标签 行中断标签<br> 文字滚动标签
第3章 HTML语言基础
在起始标记和结尾标记中间的部分是元素体。 每一个元素都有名称和可选择的属性，元素 的名称和属性都在起始标记内标明。比如体
<body backgroud＝"background.gif"> <h2>示例</h2> 这是一个示例<p>
</body>
第一行是体元素的起始标记，它标明体 元素从此开始。由于所有的标记都具有相同 的结构，因此仔细分析这个标记的各个部分， 就能对标记的写法有一个大概了解。 < 起始标记开始
第3章 HTML语言基础
本章要点： 网页设计的基本原则 HTML语言及其基本语法
HTML（Hyper Text Markup Language， 即超文本标记语言）是一种用来制作超文 本文档的简单标记语言。用HTML编写的 超文本文档称为HTML文档，它能独立于 各种操作系统平台（如UNIX，WINDOWS 等）。自1990年以来HTML就一直被用作 WWW上的信息表述语言，用于描述网页 的格式设计和它与WWW上其它网页的链 接信息。
（5）定期更新网页内容。每隔一定时间就 对网页内容和版面设计进行较大幅度的更新， 从而吸引访问者的注意力。这不失为增加来 访次数的好方法。 （6）注意网站内容的搭配。在首页中尽量 使之美观大方，直观又丰富。其它网页要与 首页有很好的搭配效果。
（7）考虑不支持某些功能的浏览器。随着 网页设计技术的不断进步，在网页中经常会 使用一些特殊的技术，使得网页的功能更加 丰富，看起来也更加美观。但是不可排除一 些用户使用过时的浏览器浏览这些网页，这 就需要为这些特殊的功能部分添加替代性文 字，避免误将程序代码显示出来。 （8）对多媒体文件实施有限的限制。尽管 网络多媒体技术有了很大的发展，但由于网 络速度的限制，就要求一个网页设计者在设 计网页时要充分考虑到所添加多媒体部分的 大小和必要性。
超文本标记语言(html)的基础知识
超文本标记语言(html)的基础知识超文本标记语言，即HTML（HyperText Markup Language），是一种用于创建网页和其他可在web浏览器中查看的信息的标准标记语言。
在这里，我们将初步介绍HTML的基础知识，包括HTML的定义、语法和一些常用的标签。
一、HTML的定义HTML是一种标记语言，它使用标记来创建网页的各个部分。
在HTML文档中，标记用于指示文本的结构和格式。
HTML文档包含视觉元素，例如标题、段落、列表、链接、图像和表格。
二、HTML的语法HTML文档由标签和内容组成。
标签告诉浏览器如何呈现文本。
标签通常成对出现，包围文本。
打开标记以开始效果，关闭标记以结束效果。
标签通常按照以下格式编写：<标记>内容</标记>三、HTML的常用标签1. 标题标签：用于定义HTML文档中的标题。
HTML中有六个级别的标题：<h1>到<h6>，其中<h1>是最大的标题。
2. 段落标签：用于定义HTML文档中的段落。
<p>标签用于标记段落的开始和结束。
3. 链接标签：用于在HTML文档中创建链接。
<a>标签可以将文本链接到其他网页、文件、电子邮件地址等。
4. 图像标签：用于将图像插入HTML文档。
<img>标签按以下格式编写：<img src="image.jpg" alt="图像" width="500" height="500">5. 列表标签：用于创建有序和无序列表。
<ul>标签用于创建无序列表，<ol>标签用于创建有序列表。
6. 表格标签：用于在HTML文档中创建表格。
<table>标签用于定义表格，<tr>标签定义表格行，<td>标签定义表格单元格。
超文本语言HTML.
标签是用一对< >中间包含若干字符表示，通常成对出现，前一个是 起始标签，后一个是结束标签。 编辑环境：任何文本编辑器 运行环境：任何浏览器，如IE
3.1
HTML文档结构
基本HTML页面以<HTML>标签开始，以</HTML>结束，在它们之间，就是 HEAD和BODY。 HEAD部分用<HEAD>..........</HEAD>标签界定，用于定义网页的头。一般包含 网页标题，文档属性参数等不在页面上显示的网页元素。用<title>和</title>标签定 义网页的标题。 BODY部分是网页的主体，内容均会反映在页面上，用<BODY>.............</BODY> 标签来界定，其内容的定义和组织是通过各类标签。 <HTML> <HEAD> <TITLE> 在此标签中写网页的标题 </TITLE> </HEAD> <BODY> 在此标签中写网页的内容 </BODY> </HTML>
HTML表格示例2
l 多媒体类标签
嵌入图片标签<IMG>与属性 连接的图片文件属性 SRC=“图形文件” 说明的文字属性 ALT=“图形的代替文本” 图片是否带边框属性 BORDER＝数字 图片与文本的环绕方式属性 ALIGN＝left（right） 图片的宽高属性 WIDTH，HEIGHT 嵌入声音、视频标签<EMBED>与属性 连接的声音文件属性 SCR=“声音文件” 或 “视频文件” 自动播放属性 AUTOSTART=TRUE/FALSE 循环播放属性 LOOP= TRUE 隐藏声音控制面板属性 HIDDEN 多媒体类标签示例
计算机网络原理 超文本标记语言(HTML)
计算机网络原理超文本标记语言（HTML）超文本标记语言HTML（HyperText Markup Language）中的Markup的意思就是“设置标记”。
因此HTML也常译为超文本置标语言。
早在1986年，ISO就已经制定了标准的ISO8879，即SGML（Standard Generalized Markup Language）。
SGML是一个非常复杂的、功能丰富的系统，有很多种选项，很适合于需要精确文档标准的大型组织。
然而SDML的过分复杂使用它很不适合于简单快捷的WWW网。
由于HTML非常易于掌握且实施简单，因此它很快就成为WWW的重要基础。
官方的HTML标准由WWW Consortium负责制定。
1．HTML文件描述这类标记是每一个HTML文件都应该具有的，但是请注意，即使没有这些标记，浏览器也不会显示出错，而是按照默认的方式解释代码内容并显示页面。
●HTML文本标记<html></html><html>标记表示这是HTML文本文件，基本HTML页面以<html>标记开始，以</html>结束。
在它们之间，文件有两部分—标题和正文。
●文件头部标记<head></head>这个标记表示文件头部的描述，包含一个不在自己页面上出现的页面信息，例如标题名称(title)，一些有关浏览器的定义和说明。
●页面标题<title></title>定义的页面标题，这个标记之间的文字在被访问时将出现在浏览器窗口标题的地方。
●页面主体<body></body>页面内容所在。
主页面上显示的东西都包含在这两个标记之中。
在它的起始标记中可以包括一些页面属性，它们在整个页面有效：background：背景图片文件名；bgcolor：背景颜色；link：超级链接的颜色，一般浏览器默认为蓝色；text：设定本页面文本的颜色；vlink：已经看过的超级链接的颜色，默认为紫色。
HTML超文本标记语言（HyperTextMarkupLanguage）
HTML超⽂本标记语⾔（HyperTextMarkupLanguage）1、HTML是什么HTML指的超⽂本标记语⾔(Hyper Text Markup Language)，是⼀种⽤来描述⽹页的语⾔。
超⽂本指的是除了可以包含⽂字之外，还可以包含图⽚、链接、⾳乐、视频、程序等内容。
（每个都需要⼀个标记，在⽹页中通过不同的标记组成起来。
）HTML 指的是超⽂本标记语⾔ (Hyper Text Markup Language)HTML 不是⼀种编程语⾔，⽽是⼀种标记语⾔ (markup language)标记语⾔是⼀套标记标签 (markup tag)HTML 使⽤标记标签来描述⽹页前端三剑客。
2 常⽤的HTML标签① html 根标记② head 头标记③ body 体标记④ a 超链接⑤ form 表单⑥ table 表格<!--⼀个HTML页⾯最基本的组成部分html: 跟标记head：头标记写描述性的信息（css\javaScricpt）body: 体标记写页⾯显⽰的信息--><html><head></head><body>想写什么<!--标题标记 h1....--><h1 align="center">E</h1><h2 align="right">E</h2><h3 align="left">E</h3><!--超链接 href 可以指定应⽤内或者是应⽤外的任意地址--><a href="">跳转连接</a><!-- 表格--><h1 align="center">Information</h1><table border="lpx" align="center" width="60%"><!--内部是属性设置--><!--tr : 表⽰⼀⾏--><tr><!--th: 标题列⾃带剧中并加粗效果td: 普通列--><th>ID</th><th>Name</th><th>Age</th></tr><td>12234</td><td>Zhang</td><td>Mail</td><tr></tr></table><!--表单：收集⽤户的信息，提交到后台服务器--><form action="提交的地址，例如" method="GET/POST">⽤户名称：<input type="text" name="username" value="admim"/><!--数据的提交⽅式：username=admin ,此时username相当于⼀个key --><br/><!--换⾏-->⽤户密码：<input type="password" name="password"/>⽤户性别：男<input type="radio" name="gender" value="1"/>⼥<input type="radio" name="gender" value="0"/><!--通过在radio指定相同的name 来表⽰互斥的关系--><br/>⽤户爱好：⽻⽑球<input type="checkbox" name="hobby" value="1"/><!--checkbox表⽰多选框-->篮球<input type="checkbox" name="hobby" value="2"/>乒乓球<input type="checkbox" name="hobby" value="3"/><br/>⽤户地址：省份<select name="province"><!--select 表⽰下拉列表--><option value="hb">河北省</option><option value="js">江苏省</option><option value="ah">安徽省</option></select><br/><input type="submit" value="注册"/><!--表⽰按钮，点击后向 action中的地址进⾏数据的提交--></form></body></html>3、表现CSSCSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显⽰ HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极⼤提⾼⼯作效率外部样式表通常存储在 CSS ⽂件中多个样式定义可层叠为⼀ <div></div>：选中⼀部分区域，施加⼀些样式。
第03章超文本标识语言HTML
清华大学出版社
14
3.3.2
标记语法
（2）空白标记 空白标记是指为空内容的标记。 空白标记是孤立出现的，即没有带斜杠符号的结束标记与之配对。 空白标记示例： <HR>标记：表示画一条水平直线。 <BR>标记：表示换行，使接下去的文本从左边界处开始。 <IMG SRC＝"example.JPG">：社
32
3.3.4
水平直线标记
在浏览器上运行该HTML文件，其结果如图所示。
清华大学出版社
33
3.4
主要内容 3.4.1 逻辑格式 3.4.2 物理格式
文本格式编排
清华大学出版社
34
3.4.1
表3-4 逻辑格式标记
逻辑格式
清华大学出版社
35
3.4.2
物理格式
1. 物理格式标记对<B></B>、<I></I>和</U></U> <B></B>标记对：表示以粗体方式显示指定文本。 <I></I>标记对：表示以斜体方式显示指定文本。 和</U></U>标记对：表示以下划线方式显示指定文本。 2.字体标记<FONT> <FONT>标记一般是与SIZE和COLOR属性一起使用的。 COLOR属性用于表示显示文本的颜色。 SIZE属性可以是正数（1至7），表示显示指定文本比现行字体尺寸要大。 SIZE属性可以是负数（－1到－7），表示显示指定文本比现行字体尺寸 要小。 例： <FONT SIZE＝＋2>abcd</FONT>efgh<FONT SIZE＝＋2>ijkl</FONT>
超文本Html
超文本语法讲座第一章：HTML语言的结构Html文件是标准的ASCII文件，它看起来象是加入了许多被称为链接签(tag)的特殊字符串的文本文件。
从结构上讲，html文件由元素(element)组成，组成html文件的元素有许多种，用于组织文件的内容和指导文件的输出格式。
它有起始标记和结尾标记。
元素的起始标记叫做起始链接签(start tag)，元素结束标记叫做结尾链接签(end tag)，在起始链接签和结尾链接签中间的部分是元素体。
每一个元素都有名称和可选择的属性，元素的名称和属性都在起始链接签内标明。
比如体元素(body)<body backgroud＝"back-ground.gif"><h2> demo </h2>This is my first html file. <p></body>第一行是体元素的起始链接签，它标明体元素从此开始。
因为所有的链接签都具有相同的结构，所以我们将仔细分析这个链接签的各个部分，以便读者对链接签的写法有一大概了解。
<起始链接签开始body 元素名称，由于元素和链接签一对应，所以元素名也叫链接签名。
需要注意的是<和body之间不能有空格，元素名称不分大小写。
Background是元素的一个属性，一个元素可以有多个属性，属性及其属性值不分大小写，也无前后顺序之分。
本属性指明用什么方法来填充背景，“background.gif”属性值，表示用background.gif文件来填充背景。
属性名,＝,属性值合起来构成一个完整的属性，一个元素可以有多个属性，各个属性用空格分开。
>起始链接链结束。
第二行和第三行是body元素的元素体，最后一行是body元素的结尾链接签。
结尾链接签用</开始，随后是元素名，然后是大于号>。
从上面的例子中，我们可以看出，一个元素的元素体中可以有另外的元素。
超文本标记语言-HTML
网页文件结构
<html>...</html> <head>...</head> <body>...</body>
表格
表格的基本语法 <table>...</table> - 定义表格 <tr> - 定义表行 <th> - 定义表头 <td> - 定义表元(表格的具体数据)
字体风格 用face属性来设定字体风格。示例代码如下： <p><font fac="arial">这一段的字体风格是arial。</font></p> 字体颜色 用颜色属性(color)来设定字体颜色。 <p><font color="#FF0000">这一段的字体颜色是红色 </font></p>
超文简介 2.标签讲解 3.操作练习
HTML简介
HTML：即超文本标记语言或超文本链接 标示语言，是目前网络上应用最为广泛 的语言，也是构成网页文档的主要语言。 结构主要分两部分 1.头部 2.主体
头部：描述浏览器所需的信息
主体：包含所要说明的具体内容
跳转到另一个页面的某个地方 <a href="URL#name"> ... </a> <a name="name"> ... </a> 跳转到另一个页面的<a href="samp/link.html#jump-test">某个地方 </a>。
超文本标记语言 计算机编程语言
超文本标记语言计算机编程语言超文本标记语言（Hypertext Markup Language，简称HTML）是一种用于创建网页的标准标记语言。
它是一种计算机编程语言，用于描述网页的结构和内容。
HTML使用标记来定义文本和其他元素的结构和样式，使其能够在浏览器中正确显示。
HTML的语法简单易懂，基本上是由一系列的标记组成。
每个标记都由尖括号包围，其中包括一个起始标记和一个结束标记。
起始标记用来定义元素的开始，结束标记用来定义元素的结束。
在两个标记之间，可以插入文本、图像、链接、表格等元素，以便构建丰富多样的网页。
HTML的标记语言使用的是英文单词或者单词的缩写，例如，`<head>`标记用来定义文档的头部，包括标题、样式和脚本等信息。
`<body>`标记用来定义文档的主体部分，包括文本、图像、链接等内容。
`<p>`标记用来定义段落，`<h1>`到`<h6>`标记用来定义标题的级别，`<a>`标记用来定义链接，等等。
除了基本的标记外，HTML还提供了许多其他的标记和属性，用于控制文本的样式、布局和行为。
例如，可以使用`<b>`标记来加粗文本，使用`<i>`标记来斜体文本，使用`<table>`标记来创建表格，使用`<img>`标记来插入图像，等等。
通过合理使用这些标记和属性，可以实现丰富多样的网页效果。
HTML不仅可以创建静态网页，还可以与其他技术结合，实现动态交互效果。
例如，可以使用JavaScript编程语言来控制HTML元素的行为和样式，可以使用CSS样式表来定义网页的外观和布局。
通过这些技术的结合，可以实现网页的动态更新、表单验证、响应式布局等功能。
HTML的标准由万维网联盟（World Wide Web Consortium，简称W3C）制定和维护。
W3C不断更新和完善HTML标准，以适应不断变化的互联网环境。
HTML-超文本标记语言
HTML-超⽂本标记语⾔总结HTML，超⽂本标记语⾔，本质上是⽂本编辑器，通过Browser内核实现其功能。
HTML主要由标识符分割写成，通常功能模块写在⼀对标识符 < xxx >这⾥是内容< /xxx >内,⾃标识符< / >除外。
标识符内可以带形参，表明此模块功能实现需要的属性。
如src,name.height标识符信息可以在 W3 相关标准中查询，类似JavaAPI。
1. HTML基础1.1 HTML基本信息HTML：超⽂本标记语⾔，其⽤于编写⽹页。
CSS：⽤于页⾯美化。
JS：⽤于实现动态功能。
Vue：框架实现上述的集成开发。
1.2 W3C标准W3C标准包括：结构化标准语⾔（HTML，XML）表现标准语⾔（CSS）⾏为标准（DOM、ECMAScript）1.3 HTML基本语法（<>内空格均为多余）⽹页由头部和主体两部分组成，其中头部在<head>、</head>标签对内，主体在<body>、</body>标签对内。
<body>、</body>等成对的标签，分别叫开放标签和闭合标签。
单独呈现的标签（空元素），如;<hr/>意为⽤/来关闭空元素。
<!-- xxx -->这个是注释符meta 为描述性标签，它⽤来描述我们⽹站的⼀些信息，需要搭配具体的修饰符使⽤。
如：<meta name="Keywords" content="zfy的⾸页">所有的内容必须在<html> 所有内容 </html>内部。
1.4 标签详解(⼀）通⽤标签<h1> 内容xxx <h1/>⼀级标签；<h2> 内容xxx <h2/>⼆级标签。
<br/>：换⾏标签，为⾃闭和标签。
第三章 超文本标记语言HTML
实例
ALIGN属性也常常用在其它标签中，引起其内容位 置的变动。
如：<P ALIGN=left> <HR ALIGN= right > <H1 ALIGN= center 〉
§3.2 常用的HTML标签命令
一、BODY标签用来定义文档主体
语法格式：
<Body Bgcolor=“?” Background=“?”
Leftmargin=“?” Topmargin=“?”
Alink=“?”
Vlink=“?” >
Text=“?” Link=“?”
…… (其他页面元素) ……
</Body>
实例
2、表格的尺寸
<table width="200" height="100"> <table width=20% height=10%>
3、边框尺寸
<table border=10 width=250> <caption>定货单</caption> <tr><th>苹果</th><th>香蕉</th><th>葡萄</th> <tr><td>200公斤</td><td>200公斤 </td><td>100公斤</td> </table>
Bgcolor Background Text Leftmargin Topmargin Link Alink Vlink
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
17
3.3.2标记语
4.注释形式
【例3-5】注释使用示例。 <HTML> <HEAD><TITLE>注释使用示例</TITLE></HEAD> <BODY> <H1 ALIGN="center">注释使用示例</H1> <!-- 这是第一个自然段 --> <P> 山下旌旗在望，山头鼓角相闻。 敌军围困万千重，我自岿然不动。 </P> <!-- 这是第二个自然段 --> <P> 早已森严壁垒，更加众志成城。 黄洋界上炮声隆，报道敌军宵遁。 </P> </BODY> </HTML>
超文本的特点：
清华大学出版社
3
3.1.1超文本、超媒体与通讯协议
2.超媒体
超媒体是指含有文本对象以外事物的超文本应用媒体。 超媒体的应用方式包括：声音、图像、动画、视频等。 超文本标记语言HTML含有定义与多媒体对象链接所用的置标标记。 多媒体对象如何在浏览器上显示出现。 图像媒体如何扩展成文稿中的一幅插图或图像。 声音、动画和视频等媒体如何在具有“播放节目”控件、“停止播 放节目”控件等的窗体中进行表示。
清华大学出版社
20
3.3.3结构标记
2.文档结构标记 （1）总体标记<HTML></HTML> （2）标题标记<HEAD></HEAD> 表3-2标题元素
标题元素
<TITLE> <SCRIPT> <STYLE> <BASE> <META> <ISINDEX>
说明
定义文档标题，该标题将出现在浏览窗口顶部的标题栏中 定义所使用的脚本描述语言，如JavaScript、VBScript等 定义各种格式表单、串联格式表单等 定义用于引用的URL地址 定义总体信息，如说明、关键字、作者等 用于各种关键字搜索<LINK>定义标识与其它文档的链接关系
清华大学出版社
2
3.1.1超文本、超媒体与通讯协议
1.超文本
超文本是一个完全不同于线性文本的一种新文本。 超文本是按若干链接文本的互联方式来组织文稿信息的。 超文本中可以嵌入许多HTML元素，如表单、表格、声音、图像、动 画、视频等。 超文本本身可以称为该超链接中的定位符，其中任何图像内容也可 以像文本内容一样是进行调用，它也是该超链接中的一种定位符。 超文本允许将非线性结构的文稿内容安排到一个超文本作品中。
【例3-2】拼错</HTML>标记以观效果。
<HTML> <HEAD><TITLE>拼错</HTML>标记以观效果</TITLE></HEAD> <BODY> <H1 ALIGN="center">拼错</HTML>标记以观效果</H1> </BODY> </HTML
清华大学出版社
12
3.3.1置标标记与字符实体
置标标记包括：
清华大学出版社
4
3.1.2HTML语言简介
1.HTML语言简介 （1）什么是标准通用型标记语言SGML
在传统出版印刷行业中，作者提供手稿，编辑用特殊的编辑符号加 上各种修改标记，从而规定书稿的印刷字体、印刷格式、版面大小、 文本与图像的精确位置等。
用于描述文档所使用的字符集，它的字符是用来区分文本内容和标 记符号的。 用于说明文档类型以及可以使用哪些标记。 用于表示一个文档实例，它包括实际的文本内容和标记符号。
清华大学出版社
21
3.3.3结构标记
（3）文档体标记<BODY></BODY> <BODY></BODY>标记内应该是全部文档体内容，其中：
分段标题部分可表示各种分段标题 文本元素部分用于改变其文本格式 块元素部分主要用于定义段落类型
表3-3<BODY></BODY>标记中的属性
属性说明 TEXT 定义指定文本的显示颜色 LINK 为没有访问的超链接定义显示颜色 VLINK 为已经访问的超链接定义显示颜色 ALINK 为单击过的超链接定义显示颜色 BGCOLOR 文档所用颜色，BACKGROUND比BGCOLOR优先 BACKGROUND定义背景图像和颜色
（4）文档类型元素<!DOCTYPE>
清华大学出版社
22
3.3.3结构标记
3.换行标记与部分公共属性 （1）换行标记<BR> （2）属性ALIGN
ALIGN＝"left"：表示指定内容按左对齐方式显示，这是隐含设置。 ALIGN＝"center"：表示指定内容按居中对齐方式显示。 ALIGN＝"right"学出版社
15
3.3.2标记语法
2.置标标记和字符实体的使用 【例3-4】置标标记和字符实体的使用示例。
<HTML> <HEAD><TITLE>置标标记和字符实体的使用示例</TITLE></HEAD> <BODY> <H1 ALIGN="center">置标标记和字符实体的使用示例</H1> <P> 钟山风雨起苍黄，百万雄师过大江。 虎踞龙盘今胜昔，天翻地覆慨而慷。 </P> <P> 宜将胜勇追穷寇，不可沽名学霸王。 天若有情天亦老，人间正道是沧桑。 </P> </BODY> </HTML>
【例3-3】下面是一些容器标记的示例。
<HTML> <HEAD><TITLE>容器标记的示例</TITLE></HEAD> <BODY> <I>这是一个斜体字示例<BR></I> <U>这是一个下划线文字示例<BR></U> <TT>这是一个电传打字机字体示例<BR></TT> <A HREF="example.HTM">这是一个超文本引用示例</A> </BODY> </HTML>
1.形式服从功能 2.超链接 3.通用性 4.通过Web学习HTML
清华大学出版社
7
3.2页面结构
主要内容
3.2.1HTML文件的组成 3.2.2.文件头部分 3.2.3.文件体部分
清华大学出版社
8
3.2.1HTML文件的组成
1.HTML文件的组成 【例3-1】一个简单HTML文件示例。
<HTML> <HEAD><TITLE>一个简单HTML文件示例</TITLE></HEAD> <BODY> <H2 ALIGN="center">一个简单HTML文件示例</H2> </BODY> </HTML>
说明 用于表示左角括号或小于符号 用于表示and的符号 用于表示非中断的空格符号 用于表示注册商标符号 用于表示右角括号或大于符号 用于表示双引号 用于表示版权符号“”
清华大学出版社
13
3.3.2标记语法
1.容器与空白标记 （1）容器 容器是指非空内容的标记：
开始标记：以“<”开始，紧接一个标记名字、一个属性，最后使用 “>”来封闭该标记。 结束标记：以“<”开始，紧接一个“/”符号、一个标记名字，最后 使用“>”来终结该标记。
清华大学出版社
19
3.3.3结构标记
【例3-7】使用居中方式显示各级分段标题。
<HTML> <HEAD><TITLE>使用居中方式显示各级分段标题</TITLE></HEAD> <BODY> <H1 ALIGN="center">使用居中方式显示一级分段标题<BR></H1> <H2 ALIGN="center">使用居中方式显示二级分段标题<BR></H2> <H3 ALIGN="center">使用居中方式显示三级分段标题<BR></H3> <H4 ALIGN="center">使用居中方式显示四级分段标题<BR></H4> <H5 ALIGN="center">使用居中方式显示五级分段标题<BR></H5> <H6 ALIGN="center">使用居中方式显示六级分段标题<BR></H6> </BODY> </HTML>
清华大学出版社 18
3.3.3结构标记
1.分段标题标记 【例3-6】六种不同分段标题的页面情况。
<HTML> <HEAD><TITLE>六种不同分段标题的页面情况</TITLE></HEAD> <BODY> <H1>这是一级标题的格式信息</H1> <H2>这是二级标题的格式信息</H2> <H3>这是三级标题的格式信息</H3> <H4>这是四级标题的格式信息</H4> <H5>这是五级标题的格式信息</H5> <H6>这是六级标题的格式信息</H6> </BODY> </HTML>