《第2章HTML语言》由会员分享,可在线阅读,更多相关《第2章HTML语言(26页珍藏版)》请在金锄头文库上搜索。
1、31第第2 2章章 HTML语言语言主讲主讲: :吕志峰吕志峰322024年7月26日计算机应用技术系教师专用(ASP.NET程序设计)教学重点教学重点 本章重点介绍本章重点介绍HTMLHTML语言的特点,常用标记,语言的特点,常用标记,HTMLHTML文档的基本结构及其编辑方法。对应于文档的基本结构及其编辑方法。对应于ASP.NETASP.NET332.1 HTML语言概述语言概述HTMLHTML是是Hyper Text Markup Language(Hyper Text Markup Language(超文本标记语言超文本标记语言) )的的缩写。缩写。HTMLHTML是是WWWWWW(W
2、orld Wide WebWorld Wide Web)中使用的超文本标记语言。)中使用的超文本标记语言。HTMLHTML起源于起源于SGMLSGML语言,它是在语言,它是在SGMLSGML定义下的一个描述性语定义下的一个描述性语言。言。HTMLHTML是所有浏览器都能识别的通用语言,是浏览器生成网是所有浏览器都能识别的通用语言,是浏览器生成网页的基础。页的基础。2024年7月26日计算机应用技术系教师专用(ASP.NET程序设计)342.1 HTML语言概述语言概述HTML语言的特点:语言的特点:1.1.HTMLHTML不是程序语言,它是一种标记语言,文本语言不是程序语言,它是一种标记语言,
3、文本语言。2.任何一个文本编辑器都可以编辑。任何一个文本编辑器都可以编辑。3.需要使用浏览器运行。需要使用浏览器运行。4.HTML语言独立于各种平台。语言独立于各种平台。HTML标记的基础标记的基础1.所有所有HTML标记都必须用尖括号(标记都必须用尖括号()括起来。)括起来。2.大部分标记是成对出现的,包括开始标记和结束标记。大部分标记是成对出现的,包括开始标记和结束标记。3.所有被标记包围的元素,如文本、图像和表格等都按照所有被标记包围的元素,如文本、图像和表格等都按照标记定义的格式显示。标记定义的格式显示。2024年7月26日计算机应用技术系教师专用(ASP.NET程序设计)352.1
4、HTML语言概述语言概述HTML标记的基础标记的基础w少数标记允许只有开始标记没有结束标记。少数标记允许只有开始标记没有结束标记。换行用的标记:换行用的标记:分段用的标记:分段用的标记:w标记不区分大小写。标记不区分大小写。w大多数标记都有属性,且有默认值。大多数标记都有属性,且有默认值。设置属性时将设置属性时将“属性名属性名=值值”放在开始标记名的尖括号中。放在开始标记名的尖括号中。例如:例如:本段放置在右侧本段放置在右侧w为为HTML语言注释语句语言注释语句.2024年7月26日计算机应用技术系教师专用(ASP.NET程序设计)362.1 HTML语言概述语言概述HTML文档的基本结构文档
5、的基本结构wHTML标记标记是全部文档内容的容器,表示文档的是全部文档内容的容器,表示文档的开始与结束。开始与结束。w首部标记首部标记用于提供与网页有关的信息。用于提供与网页有关的信息。其中包括其中包括标记用于定义网页的标题。标记用于定义网页的标题。用于插入脚本。用于插入脚本。标记用于对文档进行说明。标记用于对文档进行说明。 例:例: 第一个表示建立搜索关键字,第二个表示每第一个表示建立搜索关键字,第二个表示每20秒刷新一次秒刷新一次2024年7月26日计算机应用技术系教师专用(ASP.NET程序设计)372.1 HTML语言概述语言概述lHTML文档的基本结构文档的基本结构u正文标记正文标记
6、u包括了文档的内容,文字,图像,动画包括了文档的内容,文字,图像,动画等元素。等元素。background:指定文档背景图像的指定文档背景图像的URL地址,图像平铺在页地址,图像平铺在页背景上。背景上。bgcolor:指定文档的背景颜色。:指定文档的背景颜色。text:指定文档中文本的颜色。指定文档中文本的颜色。link指定文档中链接的颜色。指定文档中链接的颜色。各个颜色属性的值有两种表示方法:使用颜色名称来指定,各个颜色属性的值有两种表示方法:使用颜色名称来指定,如红色用如红色用red表示,使用十六进制格式数值表示,使用十六进制格式数值#RRGGBB来表来表示,如:红色用示,如:红色用#FF
7、0000表示。表示。2024年7月26日计算机应用技术系教师专用(ASP.NET程序设计)382.1 HTML语言概述语言概述HTML文档的基本结构文档的基本结构 标题文字标题文字 文本,图像等文本,图像等 2024年7月26日计算机应用技术系教师专用(ASP.NET程序设计)392.2 HTML常用标记常用标记正文标题标记正文标题标记wHTML语言从语言从到到标记定义正文中的标题。标记定义正文中的标题。例如例如结果结果2024年7月26日计算机应用技术系教师专用(ASP.NET程序设计)3102.2 HTML常用标记常用标记字符的格式化标记字符的格式化标记w用用于设置文本的字符格式。于设置文
8、本的字符格式。其中其中face属性用于设置文字的字体,属性用于设置文字的字体,size属性用于设置文字的字号属性用于设置文字的字号(取值为取值为1-7),color用于设置文字的颜色用于设置文字的颜色w设置文本为粗体。设置文本为粗体。w设置文本为斜体。设置文本为斜体。2024年7月26日计算机应用技术系教师专用(ASP.NET程序设计)3112.2 HTML常用标记常用标记字符的格式化标记字符的格式化标记w设置下划线。设置下划线。w设置删除线。设置删除线。w 表示空格。表示空格。居中标记居中标记w居中标记居中标记2024年7月26日计算机应用技术系教师专用(ASP.NET程序设计)
9、3122.2 HTML常用标记常用标记段落格式化标记段落格式化标记w定义一个段落。常用属性定义一个段落。常用属性alignalign用于设置水平用于设置水平对齐方式。对齐方式。w换行标记换行标记w设置水平线标记。设置水平线标记。align:指定线的对齐方式,取值为指定线的对齐方式,取值为left(左对齐左对齐)、center(居居中对齐中对齐)或或right(右对齐右对齐),默认为,默认为center。color:指定线的颜色。:指定线的颜色。noshade:显示一条无阴影的实线。显示一条无阴影的实线。size:指定线的宽度,以像素为单位。指定线的宽度,以像素为单位。width:指定线的长度。
10、指定线的长度。2024年7月26日计算机应用技术系教师专用(ASP.NET程序设计)3132.2 HTML常用标记常用标记设置列表文本设置列表文本w创建有序列表,创建有序列表,start属性用于数字序列的起始值,可以取整数值。属性用于数字序列的起始值,可以取整数值。type属性用于设置数字序列样式,其取值如下。属性用于设置数字序列样式,其取值如下。1:表示阿拉伯:表示阿拉伯数字,数字,A:表示大写字母。表示大写字母。标记有两个常用属性:标记有两个常用属性:type和和value。type属性指定数字样式,其取值与属性指定数字样式,其取值与ol的的type属性相同。属性相同。value属性指定一
11、个新的数字序列起始值,以获得非连续性属性指定一个新的数字序列起始值,以获得非连续性的数字序列。的数字序列。2024年7月26日计算机应用技术系教师专用(ASP.NET程序设计)3142.2 HTML常用标记常用标记设置列表文本设置列表文本w用于创建无序列表。用于创建无序列表。ul标记的标记的type属性用于指定列表项前面显示的项目符号。属性用于指定列表项前面显示的项目符号。其取值可以是:其取值可以是:disc:实心圆实心圆,circle:空心圆空心圆,square:方:方块。块。超链接超链接w通过超链接可以随时转向其他页面。通过超链接可以随时转向其他页面。w超链接有超链接有4种形式:文件超链接
12、,锚点超链接,种形式:文件超链接,锚点超链接,E-mail链接,图像超链接链接,图像超链接2024年7月26日计算机应用技术系教师专用(ASP.NET程序设计)3152.2 HTML常用标记常用标记超链接超链接w路径是指从站点根文件夹或当前文件夹到目标文件所路径是指从站点根文件夹或当前文件夹到目标文件所经过的路线,经过的路线,w可以使用路径来指定超链接中目标端点的位置。可以使用路径来指定超链接中目标端点的位置。w在路径表示中,常用在路径表示中,常用“/”分隔文件夹,用分隔文件夹,用“”代表代表站点根文件夹。例如:站点根文件夹。例如:/imgae/1.gif.w绝对路径:完整的绝对路径:完整的U
13、RL地址地址,包括传输协议在内。包括传输协议在内。w相对路径:相对相对路径:相对URL地址,是指以当前文档所在位置地址,是指以当前文档所在位置为起点到目标文档所经过的路径。为起点到目标文档所经过的路径。2024年7月26日计算机应用技术系教师专用(ASP.NET程序设计)3162.2 HTML常用标记常用标记l超链接超链接u根相对路径:是指从站点根目录到被链接文件的路径。根相对路径:是指从站点根目录到被链接文件的路径。u常见链接常见链接创建创建文件链接。文件链接。其中其中href表示链接的表示链接的URL地址。地址。target表示指定链接的目标窗口,表示指定链接的目标窗口,“_blank”空
14、白窗空白窗口,口,”_self”本窗口,本窗口,“_parent”父窗口,父窗口,“_top”指定将链接的目标文字加载到整个浏览器窗口,并由指定将链接的目标文字加载到整个浏览器窗口,并由此删除所有框架。此删除所有框架。设置邮件设置邮件链接。链接。2024年7月26日计算机应用技术系教师专用(ASP.NET程序设计)3172.2 HTML常用标记常用标记超链接超链接w常见链接常见链接定义锚点。定义锚点。文字文字创建锚点链接,以链接到文创建锚点链接,以链接到文档的相应位置。档的相应位置。设设置图片链接置图片链接2024年7月26日计算机应用技术系教师专用(ASP.NET程序设计)3182.2 HT
15、ML常用标记常用标记设置移动文本设置移动文本w创建移动的文本。创建移动的文本。其中其中behavior表示文件动画的类型,可以为表示文件动画的类型,可以为scroll,slidedirection:表示文本的移动方向,其取值可以是表示文本的移动方向,其取值可以是 down,left,right,upscrolldelay:指定文本指定文本 移动的延迟时间。移动的延迟时间。loop:指定字幕流动的次数。指定字幕流动的次数。2024年7月26日计算机应用技术系教师专用(ASP.NET程序设计)3192.2 HTML常用标记常用标记表格标记格式表格标记格式 标题标题 2024年7月26日计算机应用技
16、术系教师专用(ASP.NET程序设计)3202.2 HTML常用标记常用标记图层:是一个容器,在图层内可以放置各种类型的网页元图层:是一个容器,在图层内可以放置各种类型的网页元素。素。 图像标记图像标记w 其中其中src表示图像的路径表示图像的路径,alt表示图像无法加载时在图像表示图像无法加载时在图像位置出现的替换文字。位置出现的替换文字。2024年7月26日计算机应用技术系教师专用(ASP.NET程序设计)3212.2 HTML常用标记常用标记框架框架w . 可以对页面进行上下,左右的分隔,使每部分显示不同可以对页面进行上下,左右的分隔,使每部分显示不同的内容。的内容。2024年7月26日
17、计算机应用技术系教师专用(ASP.NET程序设计)3222.2 HTML常用标记常用标记表单标记表单标记wHTML表单表单(Form)是主要用于采集和提交用户输入的信息。是主要用于采集和提交用户输入的信息。w表单标记表单标记 2024年7月26日计算机应用技术系教师专用(ASP.NET程序设计)3232.3 动态动态HTML技术技术浏览器端的动态技又称浏览器端的动态技又称DHMTL技术,它是利用浏览器本技术,它是利用浏览器本身的资源使网页的某些元素身的资源使网页的某些元素“动动”起来。起来。DHTML是多项技术的综合。包括是多项技术的综合。包括HTML,CSS,事件,脚本事件,脚本等技术。等技
18、术。DOM文档对象模型,将浏览器接收各类网页元素设置成文档对象模型,将浏览器接收各类网页元素设置成为为“对象对象”,通过对这些属性和行为的控制可以改变它们,通过对这些属性和行为的控制可以改变它们的状态和动作。的状态和动作。一个网页包括一个网页包括window对象对象,document对象对象,location对象对象,navigator对象和对象和history对象。对象。2024年7月26日计算机应用技术系教师专用(ASP.NET程序设计)3242.3 动态动态HTML技术技术window对象的对象的status属性可以改变网页状态栏的信息。属性可以改变网页状态栏的信息。window对象的对
19、象的open方法可以打开一个窗口方法可以打开一个窗口 open(页面地址页面地址,窗口名称窗口名称,窗口网格窗口网格) window对象的对象的close方法可以关闭一个窗口。方法可以关闭一个窗口。alert(字符串字符串)可以显示一个对话框。可以显示一个对话框。confirm(字符串字符串)可以显示一个确认框。可以显示一个确认框。location.href表示提供一个链接地址。表示提供一个链接地址。document对象可以获取网页内各个元素。对象可以获取网页内各个元素。2024年7月26日计算机应用技术系教师专用(ASP.NET程序设计)3252.3 动态动态HTML技术技术动态动态HTML技术可以通过技术可以通过JavaScript语言实现。语言实现。JavaScript是一种基于面向对象和事件驱动的跨平台的脚是一种基于面向对象和事件驱动的跨平台的脚本语言。在语法上类似于本语言。在语法上类似于C语言。语言。JavaScript语言函数的定义格式语言函数的定义格式wfunction 函数名函数名(参数表参数表) 代码块代码块2024年7月26日计算机应用技术系教师专用(ASP.NET程序设计)326谢谢大家!谢谢大家!