chapter2-HTML基本概念.ppt

3.1 HTML的概念,HTML（HyperText Markup Language）超文本标记语言，几乎所有的网页都是以HTML格式书写的。,用超文本标记语言（HTML）编写的网页文件其实只是很平常、很普通的文本文件。可以用你所熟悉的文字编辑器来编辑它，如Word、写字板、记事本等，但一定要以纯文本方式保存，浏览器只能识别纯文本格式的文件。,3.1.2 什么是HTML元素,HTML元素规定web文档的逻辑结构，并控制文档的显示格式。 也就是说，设计者用元素定义文档的逻辑结构，但是文档的实际显示则由浏览器来负责解释。 我们可以使用HTML元素来设置链接、标题、段落、列表和字符加亮区域等。,HTML元素一般有起始标记与结束标记，分别放在它起作用的文档两边。 如： 主页 但有一些HTML元素只有起始标记，而没有结束标记。 如：换行标记 还有一些元素的结束标记可以省略，如列表项结束标记、词语结束标记等。, 相应内容 ,大部分HTML元素的形式如下所示：,3.2 HTML基本结构, 这里是标题部分 这里是HTML主体部分 ,一个完整的html文档有三个基本结构：HTML版本信息及元素 由元素定义的头部 由元素定义的正文部分 这三部分的相互位置和包含关系是这样的： 其中， 中的内容不显示在页面上，而中的内容显示在页面上。,元素和属性,HTML是超链接文本标记语言,HTML文档就是应用一定的符号对文本加以标记而得到的，这些符号就是HTML的元素。,1. 元素 指出本文档的内容是用HTML语言编写的 。,2. 元素 是HTML文件头标记符，用来描述HTML首部的内容，说明文档的整体信息。通常与某些标记符一起使用，如： 标记符。 3.元素 指的是定义出一个HTML文档的体部，位于首部下面。在标记符内的文字，所有使用标记符的地方都可以经浏览器正确地显示在浏览器窗体中。,标签不区分大小写，但我们建议用大写字母，这样更容易分辨。 起始标签中可以包含属性（attribute）域，其位置是从标签名后空一格的地方开始，在结束符（）之前结束。属性域向客户端提供了关于页面元素内容以及如何处理的附加信息。 ,在HTML语言中，每个元素都有其自己的属性，这些属性中，有的是该元素特有的，有的则是大多数元素都有，前者成为特有属性，后者成为通用属性。,通用属性： “ID”属性 为文档中的元素指定了一个独一无二的身份标识。 “CLASS”属性 可以把一个元素指定为一个或多个类的成员。 “STYLE”属性 允许设计者为一个单独出现的元素指定样式。,“LANG”属性 指定了一个元素的内容所使用的语言。 “DIR”属性 指定了文字在网页上的行文方向，如果文字从左至右，可以写成“DIRltr”；如果从右至左，则写成“DIRrtl”。“DIR”属性的默认值为我们习惯的从左至右的行文方向。,3.3 HTML版本信息及元素,一个有效的HTML文档必须说明文档中所使用的HTML版本信息，文档类型的声明指出了在文档中所使用的文档类型定义(即DTD)。,1.什么是DOCTYPE？,DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。 其中的DTD(例如上例中的strict.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。,HTML 4.0指定了三个DTD文档，各个DTD文档定义的元素有所不同。,严格的HTML 4.0 DTD文档包含所有未被废弃的元素和属性(除与多窗口页面有关的元素)。应用DTD文档的HTML文档，应该使用以下的DTD文档类型声明： ,过渡HTML 4.0 DTD文档包含严格DTD文档中所有的内容，以及废弃的元素和属性应用此DTD文档，应使用以下的文档类型声明： ,HTML 4.0多窗口页面DTD文档，包含HTML 4.0过渡DTD文档中所有的内容，以及与多窗口页面有关的元素和属性。在HTML文档中应用这种DTD文档，则包含以下文档类型说明： ,DOCTYPE声明必须放在每一个HTML文档最顶部，在所有代码和标识之上，其内容在之间。,2.HTML头部元素,HTML文档的头部是指包含在 之间的部分。 元素中的内容一般由它的内嵌元素引出。这些元素主要有： ,元素,每个HTML文档的标题部分（之间）必须包含 标签对。 标签用于设定文档的标题（不超过64个字符）。绝大多数浏览器会把文档标题显示在窗口顶端的标题栏中。, 这里是标题部分 这里是HTML主体部分 ,使用标签,元素,元素在文档中包含一段客户端程序(或称为脚本程序)。这些客户端程序通常是利用SCRIPT语言编写。 元素可以在之间应用多次。,元素的属性有： TYPE=ContentType(编写语言的内容类型) LANGUAGE=CDATA(编写语言名称) SRC=url(外部程序位置) CHARSET=Charset(外部程序的字符编码) DEFER(程序执行可能延迟), 这里是标题部分 document.write(“这是SCRIPT程序的内容“); document.close(); 这是文本正文。 ,元素,元素在文档中嵌入样式表单。在中可以多次应用元素。,元素的属性有： TYPE=ContentType(样式语言的类型) 对于层叠样式表TYPE属性值应为“text/css“。 MEDIA=MediaDesc(应用样式的媒体) all-所有设备；print-打印输出； projection-投影仪 TITLE=Text(样式表单的名字), 这里是标题部分 Bcolor:red 红色的黑体字 黑体字 , 这里是标题部分 红色的黑体字 ,3.文本排版标记,元素的属性和应用 元素的应用 元素的应用,段落标签,标签定义一个段落。它支持ALIGN属性域， ALIGN的取值为： center、left、right、justify, 如何使用段落标签 在1977年，国际标准化组织（International Standardization Organization，缩写为ISO）成立一个专门委员会SC16，开始着手制订“开放系统互联”的有关标准。 鉴于计算机网络的不断发展，各种标准层出不穷。在1977年，国际标准化组织（International Standardization Organization，缩写为ISO）成立一个专门委员会SC16，开始着手制订“开放系统互联”的有关标准。 鉴于计算机网络的不断发展，各种标准层出不穷。在1977年，国际标准化组织（International Standardization Organization，缩写为ISO）成立一个专门委员会SC16，开始着手制订“开放系统互联”的有关标准。 ,元素,标记相当于Word中一个回车符一样，它使得文本在浏览器上显示时，将在此处换行，但它并不附加一空白行。,4.段落修饰与空白文本,元素的应用 元素的应用 HTML语言中空白文本的标记,预格式化文本标签,多数情况下，HTML文件中的文本是基于HTML标签进行格式化的，文本中额外的空白字符（空格、制表符、回车符）都将被忽略。 使用可以让其中的空白字符出现在屏幕中。, 使用预格式化文本标签 在没有用到预格式化文本标签以前 这是我的工作安排： 19：00AM， 计划工作目标和工作流程 210：00AM，参加小组工作会议 31：30PM，设计新产品模型,*应该有节余时间，以免有变化 用到预格式化文本标签以后 这是我的工作安排： 19：00AM， 计划工作目标和工作流程 210：00AM，参加小组工作会议 31：30PM，设计新产品模型 *应该有节余时间，以免有变化 ,元素,将文档断行并在新的地方加入一条水平线。 属性说明： ALIGN(对齐方式) center、left、right NOSHADE(没有阴影) SIZE=Pixels(水平线的宽度) WIDTH=Lenth(水平线的长度),5.空白文本标记,在网页上显示为&,6.字体风格标记,标题元素 元素 字体样式元素,标题标签,HTML中的标题标签分别用来指明页面上的一到六级标题，标题用于对文本中的章节进行划分。 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题,标题标签的使用 如何使用标题标签 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 ,字体和字号标签,标签用于控制字符的显示。 SIZE属性指明字体显示的字号。“3”是默认值，也可以用相对值，范围是（-3+4）。 FACE属性指明文本实际的显示字体。 COLOR属性可以改变个别单词和短语的颜色。, 网上冲浪 网上冲浪 ,7.文本格式化标签,使用字符风格标签 使用字符风格标签 这里 使用粗体字 这里 使用斜体字 , 这里 使用等宽字体 这里 使用下划线 这里 使用删除线 这里 使用较大字体 这里 使用较小字体 这里 使用上标 这里 使用下标 ,8.超级链接,一、超链接标记符 创建一个超链接需要使用标记符，A是Anchor的首字母，标记符的最基本属性是HREF，用于指定链接到的文件位置。 标签在HTML程序中为如下形式： 热点文本,使用锚标签建立与另一个页面的链接 如何使用锚标签 热点文本1 热点文本2 热点文本3 ,如何建立与远端Web的链接,使用锚标签建立与远端Web的链接 如何使用锚标签 雅虎英文站点 搜狐中文站点 ,9.元素,包围着一组任意的HTML标签，并影响它们之间的所有标签和文本。 使用标签的好处是： 只需使用一次； 可用于对其任何元素，而ALIGN属性域只被有限的标签支持。,对齐独立的元素 对齐独立的元素 课程列表 机械制造工艺 英语专业阅读 ,使用对齐元素块标签 对齐独立的元素 课程列表 计算机原理 机械制造工艺 ,10.列表格式标签, 编号列表，每一项由开头。 项目列表，每一项由开头。 定义列表，每个条目都由两部分构成：名词()和随后的定义或解释(), 使用编号列表 使用编号列表 标题-1 标题-2 子标题-1 子标题-2 ,HTML 使用项目列表 使用项目列表 标题-1 标题-2 子标题-1 子标题-2 , 使用定义列表 使用定义列表 章节一 网页制作初识 章节二 HTML语言 ,11.表格,创建表格使用标签。 表格内容 它只能生成表格的基本框架。 定义行。 定义列。 定义表格的列标题。 定义表格标题。, 实现单元格对齐 使用ALIGN 表头1 表头2 表头3 , 数据A 数据B 数据C 使用VALIGN 表头1 表头2 表头3 数据A 数据B 数据C ,跨多个行或列的单元格,跨多个行的基本语法为： #=1,2,3, 跨多个列的基本语法为: #=1,2,3, 使用跨多行和多列的表 跨多列 Headings Heading one Heading two Heading three , A B C 跨多行 Headings Heading one A Heading two B Heading three C ,3.4 Web上的多媒体,1.web上的图像 1. web上的图像应用分为两类： 内嵌图像 在web页中和文本与链接一起显示，并且当一web被获取时自动载入。 外部图像 它是和web页分开存储的，只有在需要时才被载入。 放到web上的图像一般为：GIF、JPEG、BMP、XBM、TIFF等格式。,2.在web页面中插入图像,在HTML语言中，可以用标签把图像放在web上，它没有结束标签。 它的一些相关属性如下： SRC 被包含的图像的位置和文件名。 ALT 浏览器中替换图像的文本。 WIDTH和HEIGHT 设定图像的尺寸。,BORDER 确定图像边框的宽度和隐藏图像边框（BORDER=0） ALIGN 如何摆放图像和它周围的文本。 如果使用纯文本浏览器阅读你的web，解决办法是可以使用ALT属性。,使用ALT属性域, 使用ALT属性域 , 使用ALIGN属性 图象前的文字, 图象后的文字 图象前的文字, 图象后的文字 图象前的文字, 图象后的文字 ,使用图像作web页面的背景,为了增加页面的生动性，可以用标签的BACKGROUND属性来创建WEB页面的图像背景。BACKGROUND的值是图像文件名的URL。,使用图像作Web页面的背景 使用图像背景 飞鸟 ,2.web上的音频与视频,外部音频与视频 要想从web页指向一个外部音频或视频，只需像链接其他文档那样使用链接标签和HREF属性。,使用外部音频与视频 使用外部音频与视频 MathenLien 星球大战 ,使用内嵌音频与视频 使用内嵌音频与视频 ,3.5 滚动式文本,一个滚动文本就是在web页上从文本一边滚动到另一边德一行文本。用标签可创建一个滚动的文本。,其属性如下： BEHAVIOR 设定文本滚动方式，有3个值：SCROLL、SLIDE和ALTERNATE。 DIRECTION 决定文本的起始滚动方向，有:DOWN、UP、LEFT和RIGHT。 LOOP 属性设定文本滚动次数，LOOP=-1永不停止。,哈哈,3.6 表单的应用以及用户输入,1.创建表单 每个表单都必须以作为起始标签和作为结束标签。 其基本语法为： ,2.一般来说表单提供给用户的输入方法为： #=text,password,checkbox,radio 在标单中可以使用以下几种类型的用户输入域： 文字输入(TEXT)和密码(PASSWORD)输入域 复选框(CHECKBOX)域 单选框(RADIOBUTTON)域 列表框(SELECTABLE MENU)域 多行文本输入域,使用文字输入和密码输入域 您的姓名: 密码: ,使用单选框 学历选项的应用 请选择最高学历: 中学 高中 专科 大学,使用复选框 计算机 打印机 复印机 ,使用列表框 计算机 打印机 复印机 Orange ,使用多行文本输入框,在html语言中为用户提供了一种多行文本输入框，可以输入多行文本。基本语法为： ,使用多行文本输入框 请输入您的意见: 预设文字 ,表单按钮,为了使外部程序获取用户的输入信息，必须使用表单按钮。根据HTML标准，表单按钮有两种： 提交按钮(SUBMIT)和复位按钮(RESET) 基本语法分别如下： , 使用提交按钮和复位按钮 请输入您的意见: 预设文字 ,3.7 地址标签,地址标签用于WEB页上类似于签名的文本。它常写在每个WEB页的最底行，用于显示作者、联系人、日期、版权等信息。,使用地址标签 吉林大学 中国.吉林.吉林大学 / 版权所有，2005年3月 ,3.8 框架,框架式html中的新特性，它提供了一种全新的观看web的方法： 框架就是在同一页面上显示许多交互的独立的html文档。创建框架的基本语法： ,1.纵向排列多个窗口,在WEB页面上纵向排列各个窗口的基本语法为： ,横排为 ROWS=30%,30%,30%,2.混合排列多个窗口,3.9 WEB标准,网页主要由三部分组成： 结构（Structure） 表现（Presentation） 行为（Behavior）。 对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。,采用网站标准的好处 对网站浏览者的好处： 文件下载与页面显示速度更快； 内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）； 内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等） 用户能够通过样式选择定制自己的表现界面 所有页面都能提供适于打印的版本,对网站所有者的好处： 更少的代码和组件，容易维护 带宽要求降低（代码更简洁），成本降低。 更容易被搜寻引擎搜索到。 改版方便，不需要变动页面内容 提供打印版本而不需要复制内容。 提高网站易用性。在美国，有严格的法律条款（Section 508）来约束政府网站必须达到一定的易用性，其他国家也有类似的要求。,XHTML简述,HTML语言基于SGML (Standard Generalized Markup Language)即标准通用标记语言。SGML太庞大了，不适合描述流行的HTML ，因此，定义了XML(The Extensible Markup Language可扩展标识语言) 。,HTML 4.01并不完全兼容于XML，2000年底，国际W3C(World Wide Web Consortium)组织公布发行了XHTML(Extensible Hyper Text Markup Language可扩展 的超链接标记语言 ) 1.0版本 。XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言，目的是基于XML应用。,HTML文件的结构性过度松散,省略DTD的声明 缺少结束的控制标记 字符大小写不限 设置属件值省略“ “ ”。,怎么改善现有网站,为页面添加正确的DOCTYPE (1)过渡型（Transitional ） ,(2)严格型（Strict ） (3)框架型（Frameset ） ,声明你的编码语言 为了被浏览器正确解释和通过标识校验，所有的XHTML文档都必须声明它们所使用的编码语言。代码如下： ,用小写字母书写所有的标签 XML对大小写是敏感的，所以，XHTML也是大小写有区别的。所有的XHTML元素和属性的名字都必须使用小写。否则你的文档将被W3C校验认为是无效的。 例如下面的代码是不正确的： 公司简介 正确的写法是： 公司简介,给所有属性值加引号 在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。 例：height=“100“，而不能是height=100。,关闭所有的标签 在XHTML中，每一个打开的标签都必须关闭。 例如： 每一个打开的标签都必须关闭。 HTML可以接受不关闭的标，XHTML就不可以。 空标签也要关闭，在标签尾部使用一个正斜杠“/“来关闭它们自己。 例如： ,国外符合web标准的站点，基本都采用CSS布局： / / / / /,国内符合web标准站点 闪客帝国 网易科技频道 枪旗工作室 夜雨敲窗 魔兽世界中文网艾泽拉斯国家地理,JavaScript简介,客户端JavaScript 通过标记嵌入到HTML代码中 。 服务器端JavaScript 通过标记或通过的方式嵌入到服务器端的脚本或程序中。,1、JavaScript的程序结构,类似自然语言的描述方式 函数描述方式 外接式描述方式,1.1类似自然语言的描述方式,不建议使用，且其安全性极差 ,1.2函数描述方式,符合结构化程序设计的规范，建议使用 ,在源文件中调用函数,1.3外接式描述方式,安全性最高，建议使用 在记事本中将如下代码保存成file_name.js格式的文件： var today=new Date(); date=today.getDate(); month=today.getMonth(); month=month+1; if (month=9) month=“0“+month; year=today.getYear(); document.write(year,“-“,month,“-“,date);,用如下方式引用file_name.js文件：,2、JavaScript的数据类型、常量与变量,2.1数据类型 Boolean（布尔类型） Number（数字类型） String（字符类型） Null与Undefind NaN与Infinity Object（对象类型）,2.2常量,整形常量，如2008，315等 浮点常量，如3.1E12，2E-12等 布尔常量，只有ture与false 字符常量，如 “Jilin university“ 特殊常量，如“f”表示换页符、“t”表示Table符号 Null常量，Null可与任何类型的数据进行转换，当数据类型为数值型时，Null表示0，当数据类