470 likes | 865 Views
第 2 章 HTML 语言基础. 3. 4. 1. 2. 5. 6. HTML 图像、声音和影像标记. HTML 表格标记. HTML 简介. HTML 常用格式标记. HTML 表单标记. HTML 框架标记. 内容概要. HTML 语言简介. 基本内容和要求 了解 HTML 文档基本语法和基本结构; 掌握 HTML 常用标记的使用; 标题、段落、文本等格式标记的应用;超级链接标记的使用;水平线、图像、声音和视频等网页元素的插入标记;表格标记的使用。 了解 HTML 框架标记、表单标记的使用。. HTML 概述.
E N D
3 4 1 2 5 6 HTML图像、声音和影像标记 HTML表格标记 HTML简介 HTML常用格式标记 HTML表单标记 HTML框架标记 内容概要
HTML语言简介 • 基本内容和要求 • 了解HTML文档基本语法和基本结构; • 掌握HTML常用标记的使用; 标题、段落、文本等格式标记的应用;超级链接标记的使用;水平线、图像、声音和视频等网页元素的插入标记;表格标记的使用。 • 了解HTML框架标记、表单标记的使用。
HTML概述 • 1. 什么是HTML? HTML是Hyper Text Markup Language(超文本标记语言)的缩写, 它是构成Web页面(Page)的主要工具,是用来表示网上信息的符号标记 语言。 HTML是一种用于网页制作的排版语言,是Web最基本的构成元素。 HTML并非一种编程语言。其通过标记(Tags)指令,将文字、图像、声音 和影像等元素连接起来,构成超文本的网页。 用HTML标记文档或给文档添加标记,使文档可在WWW上发布。用 HTML准备的文档包含引用图形和格式标记。用Web浏览器可以查看这些 HTML文档。 用HTML的语法规则建立的文档可以运行在不同操作系统的平台上。因 此,HTML文档属于纯文本文件(它能用任意的文本编写器书写)。 用HTML语言编写的文档称为HTML文件,其扩展名必须为htm或html,才 能通过Web浏览器解释后以网页方式显示在浏览器窗口中,呈现出丰富多彩 的页面。
2. HTML的作用 HTML语言作为一种网页编辑语言,易学易懂,能制作出精美的网页效果,其作用如下: ① 格式化文本。如设置标题、字体、字号、颜色;设置文本的段落、对齐方式等。 ② 建立超链接。通过超链接检索在线的信息,只需用鼠标单击,就可以到达任何一处。 ③ 创建列表。把信息用一种易读的方式表现出来。 ④ 插入图像。使网页图文并茂,还可以设置图像的各种属性,如大小、边框、布局等。 ⑤ 建立表格。表格为浏览者提供了快速找到需要信息的显示方式,还可以用表格来设定整个网页的布局。 ⑥ 加入多媒体。可以在网页中加入音频、视频、动画,还能设定播放的时间和次数。 ⑦ 交互式窗体、计数器等。为获取远程服务而设计窗体,可用于检索信息、定购产品等。 HTML是最基本的网页制作语言,其他的专用网页编辑器(如FrontPage,Dreamweaver等)都是以HTML为基础的。
3. HTML的编辑环境 HTML的编辑环境很简单,任何一台计算机都可以编辑网页。但要看到用户自己设计的网页效果,就需要安装一个浏览器,如Internet Explorer,Netscape Navigator等。因此,只要计算机能运行某个浏览器,就具备了网页制作的硬件环境。HTML要求的软件环境更为简单,任何文本编辑器都可以用来制作网页,包括记事本、写字板、Word、WPS等编辑程序。不过在保存时,一定要用纯文本方式存盘。 HTML文件的设计制作与一般程序设计语言之间最大的不同在于,HTML具有跨平台的处理能力。也就是说,只要有适当的浏览器,不管使用何种操作系统,都能阅读制作的HTML文件。
4. 几种网页编辑器 HTML作为最基本的网页编辑语言,能实现制作网页的各种效果。为使设计网页更加简单方便,人们设计了专用的网页编辑器。主要分为三大类。 ① 所见即所得工具:即在编辑网页时看到的效果,与使用浏览器时看到的效果基本一致。如果希望建立一个美观而又不复杂的站点,这种工具非常适合,可以很轻松地制作想要的效果。典型的工具有Drumbeat、NetobjectFusion。 ② HTML代码编辑工具:用纯粹的HTML代码编辑工具,用户使用这些工具时,直接编辑原始的HTML代码。 这些工具通常带有许多辅助工具,可以帮助用户创建表格、表单,以及其他复杂的结构,并对创建的页面进行预览。 这些工具最大要求是必须会HTML语言。 典型的有HomeSite、HotDogProfessional、HTMLedPro、WebEditPro。
③ 混合型工具:介于上面两种工具之间,混合型工具在所见即所得的工作环境下可以完成主要的工作,同时也能切换到一个文本编辑器,对HTML源代码进行直接地调整。 像所见即所得的工具一样,混合型的创作工具通常也不能完全控制HTML页的代码。但Macromedia Dreamweaver在对已有的HTML页进行编辑时,会严格保持原有代码的格式。典型的混合型工具还有Adobe PageMill、FrontPage、CutePage、QuickSite等。 FrontPage是较好的所见即所得的网页编辑工具,也是常用的网页编辑器。它对一个Web站点有很强的控制能力,可以统一Web站点内页面的外观和风格。它的Web管理功能也很强大,用户可以通过图形的方式观察和调整站点的结构。
Dreamweaver的最佳特性就是它的“往返式(Roundtrip)HTML”编辑能力,这种特性使图形编辑工具和代码编辑工具输出同样的HTML代码。Dreamweaver是图形化HTML编辑工具中惟一不干扰原有HTML代码的工具,所以用Dreamweaver编辑后,仍然可以转回到原来的代码中用编辑工具进行修改。用其他工具修改后,Dreamweaver能自动更新相应的页面。它能很方便地产生动画,嵌入JavaApplet、ActiveX控件,以及Netscape插件,并对用户的动作作出反应。此外,Dreamweaver在Internet Explorer和Netscape Navigator两种浏览器之间的兼容性问题上处理得也很好。
HTML文档的编写方法 • 在文本编辑器中直接编写 由记事本、书写器等文本编辑器编辑,生成 .htm、.html格式文件。 • 使用可视化HTML 编 辑 器 Frontpage、Dreamweaver等 • 由Web服 务 器(或称HTTP服务器) 一方实时动态地生成。
HTML的基本概念 • 标记和属性 • 标记是HTML语言中具有描述功能的符号,其具体形式是用一对尖括号“<>”括起来的字符串指令,标记中还包括一些属性选项,用于描述标记符的具体作用。 • 标记一般由“始标记”和“尾标记”两部分构成,必须成对使用。始标记前加一个斜杠(/)即成为尾标记。 • 使用始标记就能表达指令功能而省略尾标记的标记,称为单标记。 • 属性包含在始标记内。各属性之间无先后次序,属性也可省略(即取默认值)。
<标记符 [属性1] [属性2]...>...</标记符> • 标记格式: • 属性格式:属性名=“值” • 注释语句 HTML注释语句使用“!”标记, 由“<!--”开始至“-->”结束。 注释语句可插入文档中任意位置。任何标记若在标记符前插入感叹号,即被标识为注释,不予显示。
HTML的语法规则 • 文件以纯文本形式存放,扩展名为“*.htm”或“*.html”。 • 标记不区分大小写,标记符中间不能有空格,(建议使用小写字母)。 • 多数HTML标记可以嵌套,但不可以交叉。 • 文件一行可以写多个标记,一个标记也可以分多行书写,不用任何续行符号。 • HTML源文件中的换行、回车符和多个连续空格在显示效果中是无效的。 • 网页中所有的显示内容都应该受限于一个或多个标记,不应有游离于标记之外的文字或图像等,以免产生错误。
HTML基本结构 注释: <!-- 注释内容--> HTML文本的基本结构 <html> <head> 文档头部分 </head> <body> 文档主题部分 </body> </html> • HTML的基本结构
<Head>标记 • 用于标记页面的一些说明性内容,如页面的标题、脚本语言、样式表等头部信息。 • 在HEAD标记内最常用的标记是网页标题栏标记,即TITLE标记,其格式为: • 网页标题是提示网页内容和功能的文字,显示在浏览器的标题栏中。一个网页只能有一个标题,并且只能出现在文档的头部。除了<title>标记,头部还有其他一些非必须的,如<meta>、<link>等常用标记。 <title>网页标题</title>
<Body>标记 • Body标记是HTML文档不可缺少的主体,文档中所有涉及的网页元素,包括文字、表格、图像、声音和影像等标记都包含在这对标记之间。 • 设置 <body>标记内的属性,可控制整个页面的显示方式。
颜色的设定 • 颜色值是一个关键字(颜色名),如blue(蓝);或一个RGB格式的数字,6位十六进制颜色代码,如#0000FF(蓝)。 • 常用的RGB颜色表示: • #rrggbb 如,bjcolor=“#0000FF” • rgb(x,x,x) x是一个介乎0到255之间的整数 如, bjcolor=rgb(0,0,255) • 关键字(颜色名) 如, bjcolor=blue
HTML常用格式标记 1 标题格式标记 功能:用于定义文章内章节标题的显示格式。 格式:<hn align=“对齐方式”>标题内容</hn> (1)设置标题:一共有6种格式的标题,各自显示不同大小的标题文字,格式如下: <h1 属性=值…> … </h1> <h2 属性=值…> … </h2> …. <h6 属性=值…> … </h6> 常用属性:align = 水平对齐方式 对齐方式如下: left: 左对齐(默认值) center: 居中 right: 右对齐
HTML常用格式标记 2. 文字格式标记 功能:设置网页中普通文字的显示效果。 (1) 设置字体: <font face=? size=? color=? > … </font> 注:face-字体,size-大小,color-颜色 (2) 固定字体标记: <b> 加粗</b> <i> 斜体</i> <strong> 加强显示</strong> <em> 倾斜</em> <big> 放大显示</big> <small> 缩小显示</small> 格式:<font face=“字体” size=“字号” color=“颜色”>文字</font>
HTML常用格式标记 3. 文字样式设置标记
格式:<p align=“水平对齐方式”>文本</p> 4. 段落标记 功能:设置文章段落的开始和结束。 5. 换行标记 功能:另起一行显示文字。 6. 文本预排格式标记 功能:保留文字在纯文字编辑器中的格式,原样显示。 格式:<br> 格式:<pre >文本</pre>
格式:<div align="对齐方式">...</div> 7. 文本分块标记 功能:此标记对的用法与<p></p>标记对非常相似,用于排版大块HTML段落,设置多个段落的文本对齐方式,也用于格式化表格。 如果多个段落有相同的对齐方式,则可以将这些段落放入<div>标记之中。 8. 插入水平线标记 功能:在页面上画横线,可用于页面上内容的分割。 格式:<hr width=“value1” size=“value2” align=“value3” color=“color1” noshade> 常用属性如下: align = 水平对齐方式(left/center/right) color = 线的颜色 noshade = 显示一条无阴影的实线 size = 线的宽度(以像素为单位) width = 线的长度(像素或占页面宽度的百分比) 9. 对齐标记: <center> 居中对齐 </center> <p align=“left”> 居左对齐 </p> <p align=“right”> 居右对齐 </p>
10. 转义字符 在HTML语言中,一些已被标记或标记属性使用的特殊字符,当网页需要显示这些字符时,必须使用以“&”开始“;”结束的转义字符表示。
列表标记 • 分段排列出一组级别相同的项目称为列表。如果在每段前面加上一个相同的符号,则称为符号列表;如果每段前面加上一个序号,则称为标号列表。 • 符号列表 属性: type 属性表示在每个列表项前所显示的项目符号类型,共有三种取值:”disc”时,符号为“●”(实心圆),”circle”时,符号为“○”(空心圆),”square”时,符号为“■”(实心方块)。 格式: <ul type="符号类型"> <li type="符号类型">列表项1 <li type="符号类型">列表项2 …… </ul>
列表标记 格式: <ol type="标号类型"start=“起始编号”> <li type="标号类型">列表项1 <li type="标号类型">列表项2 …… </ol> • 标号列表 属性:type 属性表示每个列表项前显示的标号类型,取值可以为1(阿拉伯数字)、A(大写英文字母)、a(小写英文字母)、I(大写罗马字母)、i(小写罗马字母)。start 用于设置标号的开始值,默认值为1。
列表标记 格式: <dl> <dt>列表条目1 <dd>列表条目1的说明 <dt>列表条目2 <dd>列表条目2的说明 …… </dl> • 说明列表 说明:<dl>和</dl>标记说明列表的开始和结束,每一项列表项之前必须加上<dt>标记,用<dd>标记设置列表项说明,说明文本自动向右缩进。
HTML的超链接标记 功能:建立超链接。通过超链接打开图像、声音、影像文件等。 说明:<a>标记对之间就是带超链接标识的文本或图像。超链接标识文本的颜色由<body>标记的link、alink、vlink属性设定。 属性:href用于设置要链接的目标URL地址,目标可以是包含路径的图像、声音、影像文件等。target属性用于设置显示链接的页面窗口,默认是在当前窗口显示。 格式: <a href="URL" target="窗口">...</a>
HTML的图像与多媒体标记 格式: <img src=“image-URL” alt=“简单说明” longdesc=“详细说明” width=“x” height=“y” border=“边框长度” hspace=“x” vspace=“y” align=“对齐方式”>。 1.图像标记
HTML的图像与多媒体标记 1. 在HTML中插入Gif动画 2.背景音乐标记 格式:<bgsound src=“声音文件的URL地址” loop=“播放次数”>
HTML的图像与多媒体标记 3.视频标记 格式:<img src=“image-URL” dynsrc=“avi-URL” loop=“n” start=“播放方式” controls loopdelay=“时间间隔”>
HTML表格标记 格式: <html> <head> <title>表格结构示例</title> </head> <body> <center><caption><b>一个简单的表格</b></caption> <table border="1"> <tr><th>标题单元格1</th><th>标题单元格2 </th><th>标题单元格3</th><tr> <tr><td>单元格11</td><td>单元格12</td><td>单元格13</td></tr> <tr><td>单元格21</td><td>单元格22</td><td>单元格23</td></tr> </table> </center> </body> </html>
HTML表格单元格标记属性 • TD标记常用属性 Table标记中的bgcolor、background、bordercolor、align、height、width等属性可以作为单元格的属性放在TD标记中。
HTML表单标记 • 表单标记 • 作用 与浏览器端实现交互的重要手段,利用表单可以收集客户端提交的有关信息。 • 格式 <form 属性=值> 子标记 </form> 标记对之间的一切都属于表单的内容。 action属性指定表单处理程序的程序名(包括网络路径)。 method属性定义处理程序从表单中获得信息的方式,其取值为get 或 post,默认值为get。 target属性用来指定目标窗口或目标框架。 格式:<form action=" " method=" " target=" " >...</ form >
HTML表单标记 • 写入标记 type=定义一个用于输入信息的表单域类型, <input type=" " >标记必须放在<form >标记之间。 格式:<input type=“表单域类型 " 表单域属性=" ">
列表框标记 格式:<select multiple name=" " size=" " > <option selected value=" "> ...</option> </ select> • <select>标记用来创建一个下拉列表框或可以复选的列表框;<option>标记用来指定列表框中的一个选项。 • multiple属性决定列表框是否可多选;selected用来指定默认的选项,value属性用于给<option>标记中指定的哪一个选项赋值。 • <select>标记必须放在<form></form>标记对之间,<option>标记必须放在<select>标记之间。
多行文本框标记 功能:创建一个可以输入多行的文本框。 cols和rows属性分别用来设置文本框的列数和行数,列与行是以字符数为单位。 <textarea>标记必须放在<form></form>标记对之间。 格式:<textarea name=" " cols=" " rows=" ">...</ textarea>
HTML框架标记 框架结构用于网页布局,其特征是将浏览器页面分为数个大小不一的区域,每个区域就是一个框架,每个框架显示一个独立网页,框架集并不在浏览器中显示,而是定义了框架的大小分布和个数。
HTML框架标记 框架结构用于网页布局,其特征是将浏览器页面分为数个大小不一的区域,每个区域就是一个框架,每个框架显示一个独立网页,框架集并不在浏览器中显示,而是定义了框架的大小分布和个数。 • 框架的基本结构 <html> <head> …</head> <frameset> ‘框架集定义标记 <frame src=“url地址1”> ‘框架定义标记 <frame src="url地址2"> ...... <frameset> </html>
<frameset>标记属性 设置内容包括浏览器窗口中将要显示的框架数目、框架的大小、每一个框架中将要放置的页面等。框架排列遵循从左到右,从上到下的次序规则。
<frame>标记 格式:<frame src="url地址1" name= " " scrolling =" " noresize > <frame>标记放在<frameset>标记之间,每个框架都由对应的<frame>标记描述。 框架的名称也用于超文本链接标记<a href= " " target= " ">中的target属性赋值,指定链接目标HTML文件所显示在的框架。
<noframes>标记 格式:<noframes>…</noframes> 功能:用于在不支持框架结构的浏览器中显示文本或图像信息。 说明:<noframes>标记放在<frameset>标记之间。
浮动窗口<iframe> 标记 功能:在浏览器窗口中可以嵌入一个框架窗口(窗框)以显 示另一个文件。 格式:<iframe src=“ url地址1” name=“窗口名" align=" " width=" " height=" " marginwidth=" " marginheight=" " frameborder=" " scrolling=" "> <iframe>标记只适用於IE浏览器。在包含<iframe>标记的文档中,<body>标记中background-color 或 bgcolor 属性必须设置为 transparent。