搜索
2007-11-1哈工大计算机科学与技术学院张建国Slide5-1第8章超文本标记语言HTML计算机导论计算机导论IntroductionofComputer张建国哈工大计算机科学与技术学院2007-11-1哈工大计算机科学与技术学院张建国Slide5-2第8章超文本标记语言HTML第第88章章超文本标记语言超文本标记语言HTMLHTML2007-11-1哈工大计算机科学与技术学院张建国Slide5-3第8章超文本标记语言HTML本章主要内容本章主要内容HTML简介文字版面的编辑建立超链接图像处理列表项目声音与视频窗口框架2007-11-1哈工大计算机科学与技术学院张建国Slide5-4第8章超文本标记语言HTML1.Web信息浏览将用超文本标记语言HTML(HyperTextMarkupLanguage)编写的网页内容,按照超文本传输协议HTTP(HyperTextTransferProtocol)在Internet上进行传送的过程.Web的结构C/S(Client/Server)服务器端(Server):网页的提供者存放网页供用户浏览的网站客房端(Client):网页接收者通过网络浏览网页的计算机和用户浏览器(Browser)执行在计算机上供用户操作和浏览网页的应用程序8.1HTML8.1HTML简介简介2007-11-1哈工大计算机科学与技术学院张建国Slide5-5第8章超文本标记语言HTML网页浏览过程8.1HTML8.1HTML简介简介((Cont.)Cont.)浏览解析网页将该网页传送给浏览器请求浏览某网页请求浏览某网页2007-11-1哈工大计算机科学与技术学院张建国Slide5-6第8章超文本标记语言HTML2.浏览器安装的客户端阅读Web上信息资源的软件IE,Maxthon,Firefox,Opera,Netscaper浏览器的基本工作原理从服务器下载文件;如果该文件是一个HTML文件,则翻译该文件中的HTML代码;对代码表示的内容格式化,并显示格式化后的内容;如果该文件还包含图像及其他类型文件的链接,则处理相应的图像和文件的内容.8.1HTML8.1HTML简介简介(Cont.)(Cont.)2007-11-1哈工大计算机科学与技术学院张建国Slide5-7第8章超文本标记语言HTML3.网页设计的基本概念超链接HyperLink网页中的特殊文字标识,用于指向中的其他资源.超链接:文字,图像等其他资源:另一网页,一个声音文件,网页的另一段落等统一资源写信器URL(UniformResourceLocator)用于指定要取得的Internet上资源的位置与方式(网址)在进行超文本链接时也要用到URL网站(Website)一个存放在网络服务器上的完整信息的集合体.一个网站包含一个或多个网页,网页之间以一定的方式链接在一起成为一个整体,描述一组完整的的信息.8.1HTML8.1HTML简介简介(Cont.)(Cont.)2007-11-1哈工大计算机科学与技术学院张建国Slide5-8第8章超文本标记语言HTML网页(Webpages)网站的组成部分,组成网站的基本元素;是将要发布的信息按照一定的方式组织的一个基本单位;网页是由存放在磁盘上的多个单一文件组成的;网页中可以有文字,表格,图像,声音及视频等信息.主页(Homepage)一个特殊的网页,是整个网站的起始点和汇总点.应给出整个网站的概述,主要内容和浏览各种信息的通道.8.1HTML8.1HTML简介简介(Cont.)(Cont.)2007-11-1哈工大计算机科学与技术学院张建国Slide5-9第8章超文本标记语言HTML4.网页技术概况静态网页无论何时何地浏览都以相同的画面显示.用户只能浏览,不能向网站提供信息让网站响应用户的请求.例如:HTML,CSS动态网页让网页按照用户的请求做出动态响应.JavaScript/VBScript,ASP等网页美工处理网页素材的技术.例如:Flash,Fireworks等8.1HTML8.1HTML简介简介(Cont.)(Cont.)2007-11-1哈工大计算机科学与技术学院张建国Slide5-10第8章超文本标记语言HTML5.静态网页设计工具静态网页只能显示文字和图片,是制作所有网页的基础技术.用HTML编写,文件扩展名为HTML或HTM.主要网页设计工具FrontpageDreamweaver8.1HTML8.1HTML简介简介(Cont.)(Cont.)2007-11-1哈工大计算机科学与技术学院张建国Slide5-11第8章超文本标记语言HTML6.HTML的内容不是一种程序只是一种控制网页中信息显示的标识语言.有自己的语法支持丰富的样式表,脚本,框架,表格,表单.定义了一系列标签用于控制网页浏览的格式.编辑工具HTML是一个纯文本文件,可以使用任何纯文本编辑器编辑.运行环境运行Web环境下,在URL中输入文件的URL.8.1HTML8.1HTML简介简介(Cont.)(Cont.)2007-11-1哈工大计算机科学与技术学院张建国Slide5-12第8章超文本标记语言HTML超本文标记语言由两组成HTML部分文本文字内容标记指明文件内容的性质和等HTML中标记是用“”括起来的例:html/htmlhead/headbody/body8.1HTML8.1HTML简介简介(Cont.)(Cont.)2007-11-1哈工大计算机科学与技术学院张建国Slide5-13第8章超文本标记语言HTML8.1HTML8.1HTML简介简介(Cont.)(Cont.)HTMLHEADTITLE这是我的第一个网页/TITLE/HEADBODY我是哈尔滨工业大学软件学院07级学生，我正在学习制作个人网站。/BODY/HTML一段HTML代码,诞生了我的第一个网页!文件开始标签文件结束文件头标签文件标题标签标题内容文件体标签文件正文2007-11-1哈工大计算机科学与技术学院张建国Slide5-14第8章超文本标记语言HTML1.页面布局为使网页显示美观、布局合理,可以给网页加上更多的标签.(1)换行标签br|/br功能:该标签后面的内容换行显示.例:未加换行标签8.28.2文字版面编辑文字版面编辑htmlheadtitle测试换行标签/title/headbody春夜喜雨好雨知时节，当春乃发生。随风潜入夜，润物细无声。/body/html2007-11-1哈工大计算机科学与技术学院张建国Slide5-15第8章超文本标记语言HTML例:加入换行标签8.28.2文字版面编辑文字版面编辑(Cont.)(Cont.)htmlheadtitle测试换行标签/title/headbody春夜喜雨br好雨知时节，当春乃发生。br随风潜入夜，润物细无声。br/body/html2007-11-1哈工大计算机科学与技术学院张建国Slide5-16第8章超文本标记语言HTML(2)强制不换行标签nobr|/nobr功能:不管文本多长,都放在一行.例:8.28.2文字版面编辑文字版面编辑(Cont.)(Cont.)htmlheadtitle测试强制不换行标签/title/headbody春夜喜雨brnobr好雨知时节，当春乃发生。随风潜入夜，润物细无声。/nobr/body/html若一行太长,可能超屏幕2007-11-1哈工大计算机科学与技术学院张建国Slide5-17第8章超文本标记语言HTML(3)自动换行标签wbr功能:根据屏幕宽度自动换行.8.28.2文字版面编辑文字版面编辑(Cont.)(Cont.)(4)分段控制标签p|/p功能:由所标识的文字为同一段落.格式:p文字ppalign=left|center|right文字/p2007-11-1哈工大计算机科学与技术学院张建国Slide5-18第8章超文本标记语言HTML例:8.28.2文字版面编辑文字版面编辑(Cont.)(Cont.)htmlheadtitle测试强制不换行标签/title/headbody春夜喜雨brp好雨知时节，当春乃发生。随风潜入夜，润物细无声。/ppalign=left好雨知时节，当春乃发生。随风潜入夜，润物细无声。/ppalign=center好雨知时节，当春乃发生。随风潜入夜，润物细无声。/ppalign=right好雨知时节，当春乃发生。随风潜入夜，润物细无声。/p/body/html2007-11-1哈工大计算机科学与技术学院张建国Slide5-19第8章超文本标记语言HTML(5)原样显示文字标签pre|/pre功能:文字按原来编排的样式显示.8.28.2文字版面编辑文字版面编辑(Cont.)(Cont.)(6)居中对齐标签center|/center功能:文字居中对齐.(7)水平分隔线标签hr功能:自动产生水平分隔线,将不同内容分开.center对齐方式Left,center,rightAlign100%象素/百分比宽度Width阴影noshadeblack颜色Color2象素线组细Size默认值单位功能参数属性2007-11-1哈工大计算机科学与技术学院张建国Slide5-20第8章超文本标记语言HTML(8)署名标签address功能:在网页下方显示的署名或地址等信息.8.28.2文字版面编辑文字版面编辑(Cont.)(Cont.)(9)设置网页背景颜色bgcolor格式bodybgcolor=背景颜色值/body颜色值表示方法英文单词:”red”,”blue”,”green”,…颜色代号:“#6位十六进制数字”2007-11-1哈工大计算机科学与技术学院张建国Slide5-21第8章超文本标记语言HTML2.字体属性(1)标题文字标签hn六级标题:h1~h6格式:hnalign=left|center|right标题文字/hn8.28.2文字版面编辑文字版面编辑(Cont.)(Cont.)htmlheadtitle设置各级标题标签/title/headbodyalign=centerh1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6/body/html2007-11-1哈工大计算机科学与技术学院张建国Slide5-22第8章超文本标记语言HTML(2)文字格式控制标签font格式fontface=“字体”size=字号color=“颜色名称”文字/font字号:1~7,默认值为38.28.2文字版面编辑文字版面编辑(Cont.)(Cont.)htmlheadtitle设置文字格式标签/title/headbodycenterprefontfcae=隶书size=5color=red春夜喜雨/fontfontfcae=楷体size=3color=blue好雨知时节，当春乃发生。随风潜入夜，润物细无声。/font/pre/body/html(3)物理类型文字样式标签粗体标签b斜体标签i下划线标签u2007-11-1哈工大计算机科学与技术学院张建国Slide5-23第8章超文本标记语言HTML超链接的概念利用超文本链接到其他网页或地址.1.超链接的建立(1)超链接标签a格式ahref=“链接目标名”target=“窗口名”超链接名/a链接目标名通信协议://链接地址/文件位置/…/文件名称窗口名默认窗口为原窗口,若指定新窗口需用此项给出.超链接名链接的源点,鼠标