山东大学《网站设计与建设》课件第10章 HTML基础

第第10章章 HTML基础基础第三部分 网站设计技术 101 HTML简介nHypertext Mrakup Language（超文本标记语言）n是为网页创建和其它可在网页浏览器中看到的信息而设计的一种标记语言。nHTML已经成为描述和显示网页的国际标准，n由万维网联盟（W3C）维护。nHTML的一个重要特点是超级链接hyperlinkn一个HTML文件的后缀名是.html或者是.htmnHTML是一个纯文本格式的ASCII文件nHTML不是一种编程语言，而是一种描述性的标记语言，n用于描述超文本中内容的显示方式。这些内容的描述都是通过HTML标记来完成的n标记：被用来结构化信息例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义，比如图片的显示尺寸，文字的大小、颜色、字体等。 Title of page This is my first homepage. This text is bold nHTML的标记不区分大小写。2.浏览器：HTML解释器、网页解释器n网站浏览器（Browser）是万维网(Web)服务的客户端浏览程序，可向万维网(Web)服务器发送各种请求，并对从服务器发来的HTML超文本信息和各种多媒体数据格式进行解释、显示和播放，简言之浏览器就是访问网站的客户端工具软件。nHTML解释器并不局限于浏览器n最常用浏览器微软的Internet ExplorernIE 10，包括Metro界面、HTML5、CSS3以及大量安全更新。奇虎360的360安全浏览器n拥有国内领先的恶意网址库，采用云查杀引擎，可自动拦截挂马、欺诈、网银仿冒等恶意网址。n独创的“隔离模式”，让用户在访问木马网站时也不会感染。n无痕浏览，能够更大限度保护用户的上网隐私。n360安全浏览器体积小巧、速度快、极少崩溃，并拥有翻译、截图、鼠标手势、广告过滤等几十种实用功能.Mozilla的Firefoxn基于Mozilla开源项目发展而来n最新的Firefox 9 新增了类型推断（Type Inference），大幅提高了JavaScript引擎的渲染速度，使得很多富含图片、视频、游戏以及3D图片的富网站和网络应用能够更快的加载和运行Apple的SafariOperanOpera是挪威人开发的免费浏览器，其特点是快速小巧、符合工业标准、适用于多种操作系统。对于手机和掌上电脑来说，Opera是首选浏览器n。Google Chromen免费、开源 web 浏览器，采用BSD许可证授权并开放源代码。n2011年11月，市场份额正式超过Firefox，跃居第二n支持Windows平台、Mac OS X和Linux版本。nChrome浏览速度在众多浏览器中走在前列GreenBrowser浏览器maxthon傲游浏览器等3. 浏览网页原理-HTML基本原理n下载n浏览器将文档解释为网页并在浏览器窗口中显示出来。n标准HTML能在不同浏览器上产生同样的效果 HTML并不能精确地定义文档信息如何显示和排列，而只是建议浏览器应该如何显示和排列这些信息102 HTML标准与发展历史n万维网联盟World Wide Web Consortium，W3C，http:/www.w3.orgnHTML、XHTML和CSS，HTML 和 XHTML 用来提供内容CSS 用来对内容进行修饰 W3C 制定的 web 标准并非强制而只是推荐标准。nHTML标准定义了构成HTML语言的每一个独立元素以及这些元素是指示如何在浏览器中显示HTML文档中的指令和标记符。n这一标准确保在不同的浏览器和计算机平台上超文本显示的一致性2HTML的起源nSGML（standard generalized markup language，标准通用标记语言）语言，于1986年获得国际标准化组织的批准。这种语言是为了在各种网络环境之间、不同文件格式之间进行交流而使用的一种语言格式。它的文件格式标准化，并统一使用标记符号（tag）对文件的内容进行标记。nHTML于1991年问世，它是SGML的一个子集。nHTML是一种有前后关系格式化的语言，因此在HTML中除了包含文本内容，还包含通常是成对出现的标记。n标记是包括在尖括号中的文本，为HTML的解释器提供指令。3. HTML版本历史nHTML于1991年问世，它是在SGML基础上开发成功的，可以说它是SGML的一个子集。 n第一版1993年6月草案（并非标准）nHTML2.0：1995年11月发布 nHTML3.2：1996年1月14日，表格、框架 nHTML4.0：1997年12月18日，CSS，开访问性nHTML4.01：1999年12月24日，XHTMLnHTML 5.0最新草案2008年1月22日发布，支持HTML和XHTML。nHTML 5.02012年12月17日，W3C推荐标准。“HTML5是开放的Web网络平台的奠基石。”nHTML 5.1最新草案2013年5月28日发布，该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（HTML）。HTML 开发环境？n第第16章章 网站开发设计工具网站开发设计工具103 HTML标记与属性n标记（Tag）标记由封装在小于号（）构成的一对尖括号之中，标记一般分首标记和尾标记，它们成对出现。 例如：text with underline 开始标记，开启标记结束标记 ，关闭标记nHTML文件结构 例子1之间包含头部(head)与实体(body)两大部分HTML标记语法n标记单标记，例如：, 双标记, 例如：注释标记：或注释内容通过属性扩展HTML元素的描述能力n标记属性 例如： 引号不对，出问题n5HTML字符实体 标记n一般形式 各种子标记 脚本语言定义的函数或变量说明n功能开启（）和结束（ ）文件头标记文件头部分的内容不在网页中显示n属性无文件头及相关标记n 标记标记 标记标记标记 标记n一般形式网页标题文本例如：欢迎光临GSL网站 n功能用于标识网页主题，其中的内容将在浏览器的标题栏中显示，不出现在页面内。n 属性无 标记（举例）n HTML文档代码欢迎光临GSL网站 标记n功能标记定义文档的基础URL地址，在文档中所有的相对地址形式的URL都是相对于这里定义的URL而言的。 n 属性href 属性，href属性指定了文档的基础URL地址，该属性在标记中是必须存在的。n例如：target属性，target属性同框架一起使用，它定义了当文档中的链接被点击后，在哪一个框架中展开页面。如果文档中超级链接没有明确指定展开页面的目标框架集，则就使用这里定义的地址代替。 n_blank，表明在新窗口中打开链接指向的页面。n_top，在链接所在的完整窗口中展开页面。n_self，在当前文档的框架中打开页面。 n_parent，在当前文档的父窗口中打开页面。 例如： 表明页面上所有的链接都在新窗口打开。标记n功能标记定义文档之间的包含。在HTML的头部可以包含任意数量的标记。 n 属性href ，href属性值指向链接资源所在的URL，其中url是链接的地址。type，type属性用于指定被包含的媒体类型 title ，title属性值为一个字符串，用于描述该链接关系。 rel ，rel属性定义了文档和所链接资源的链接关系，可能的值包括：stylesheet， alternate stylesheet ，start，next，prev，contents，index，glossary，copyright，chapter，section，subsection，appendix，help，和bookmark等。如果希望指定不止一个链接关系，可以在这些值之间用空格隔开。 rev ，rev属性定义了文档和所链接资源之间的反向关系。其中linktype表明链接类型，其可能的取值同rel属性相同。n例如： 文件体标记及其属性n文件体标记 各内容标记 n属性一般属性事件属性n文件体标记一般属性n文件体标记事件属性n支持20多个事件属性文件体标记的子标记标题、段落标记文本格式标记图像标记超链接标记影像地图标记 层次块标记多媒体标记 标记和标记注释标记其它标记 104 HTML文本标记n标记align属性事件属性n单标记推荐使用n标题标记n标记 加入一条水平线，它具有size、color、width和noshade属性。 n字体标记 n粗体标记n斜体标记n下划线标记n删除线标记n、标记 n用来输出打字机风格字体的文本；n用来输出引用方式的字体，通常是斜体；n用来输出需要强调的文本(通常是斜体加黑体)；nstrong则用来输出加重文本(通常也是斜体加黑体)。例如：字体标记一17.HTML文本标记：字体实例 文本标志的综合示例 最大的标题 使用h3的标题 最小的标题 黑体字文本 斜体字文本 下加一划线文本 打字机风格的文本 引用方式的文本 强调的文本 加重的文本 size取值-1、color取值red时的文本 size取值缺省、color取值red时的文本 size取值+1、color取值red时的文本 HTML文本标记：定义列表n标记创建列表n其中每一项以定义n每个项目以定义服务器服务器 巨型机服务器巨型机服务器 dd大型机服务器大型机服务器 dd小型机服务器小型机服务器 dd微机服务器微机服务器桌面机桌面机 dd微机微机 dd笔记本笔记本 dd平板电脑平板电脑/dd / HTML文本标记：定义有序、无序列表n有序列表定义，其中每一项以定义n无序列表创建，其中每一项以定义 有序列表实例有序列表实例 中国城市中国城市 北京北京 上海上海 美国城市美国城市 华盛顿华盛顿 纽约纽约 图像标记n图像标记 图像标记为单标记，用以插入图像及设定图像属性n标记属性align：是指定图像的位置 id，指定的id号class：指定图像所属的类型name：用于设定图像的名称。src：规定插入的图像的url地址，也就是含路径的图像文件名title：设定图像的标题alt：表示图像的替代文字border：设定图片的边框height和width：分别用于指定图像的高度和宽度hspace和vspace：分别用于设定图像的左右边框大小和上下边框大小 ismp和usemap：在应用图像地图（map）时使用 图像标记（Cont.）n标记属性dynsrc：指定要下载的影像片断的url地址controls：设定影像播放的控制接钮 start：设定何时开始播放影像片断nFileopennMouseover loop：指定影像片断的播放次数n事件属性有20多个鼠标和键盘事件属性，分别是：onload， onclick，ondbclick，onmouseover，onkeydown，onkeypress等 105 HTML超链接n一般形式标记n 超链接类型文本超链接图像超链接影像地图n定义书签书签文本 n标记属性target属性，定义超链接打开的目标窗口 title属性，属性值为一字符串，鼠标指向超链接时，鼠标右下角显示标题文本美丽的山东美丽的泉城 美丽的海滨城市-青岛 主要旅游网影像地图标记 n 影像地图标记热点标记，为单标记n举例 走马灯标记n 功能标记一行或多行滚动的文本，各主流浏览器，如IE，Maxthon,Firefox等均支持标记 n 属性align属性，设定活动字幕的位置bgcolor属性，设定活动字幕的背景颜色direction属性，设定活动字幕的滚动方向，取值可以是left、right、up或down。behavior属性，设定滚动的方式，主要由三种方式：behavior=“scroll”表示由一端滚动到另一端；behavior=“slide”表示由一端快速滑动到另一端，且不再重复； behavior=“alternate”表示在两端之间来回滚动。 scrolldelay属性，用于设定滚动两次之间的延迟时间 loop属性，用于设定滚动的次数，当loop=-1表示一直滚动下去，直到页面更新。 走马灯标记（举例n 动态新