《计算机网络教材》PPT课件.ppt

HTML知识,HTML (HyperText Markup Language) 超文本标记语言，是用特殊标记(tag)来描述文档结构和表现形式的一种语言。使用HTML语言描述的文件，需要通过Web浏览器显示出效果。,HTML开发工具：记事本、EditPlus、UltraEdit、Dreamweaver等。 HTML文件的扩展名：htm，html。,1.1 HTML标记控制内容显示的语法 , ,HTML标记语法,1.2 HTML文件结构, 正文 ,HTML文件结构,HTML标记分类,1.3 HTML中的标签,单标签 只需单独使用就能完整地表达意思的标记，语法： 如：断行标记 水平线标记,双标签 语法： 内 容 必须成对使用，其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，尾标签告诉Web浏览器在这里结束该功能。 如：段落内容 ,HTML标记属性,1.4 HTML标签属性 许多单标记和双标记的始标记内可以包含一些属性， 其语法是： 各属性之间无先后次序，属性也可省略（即取默认值）。,如： ,HTML文档中的元素,HTML文件一对起始和终止标记符以及它们之间的所有内容称为一个元素。 HTML文件是以各种功能的元素所组成的。 如：最新新闻 ,1.5 HTML中的元素,Head 部分,HEAD部分包含的主要元素 元 素 描 述 title 文档标题 meta 描述HTML元信息 link 描述当前文档与其它文档之间的链接关系 script 脚本程序内容 style 指定CSS样式表,Head 部分,title元素 语法格式：文档标题 如：温州大学首页,Head 部分,meta元素 描述HTML文档的元信息，即关于文档自身的信息。,定义搜索关键字以及文档描述 格式例： 定义语言 格式例：,Head 部分,script元素 语法格式： 程序代码 属性：language,Head 部分,style元素 语法格式： 样式语句 ,Head 部分,link元素 该网页与哪些文件设有链接 语法格式： ,Body 部分,BODY元素是用来定义文档主体的，语法格式： 页面元素 ,Body 部分,属性： bgcolor 背景色 background 背景图案 text 一般文本颜色 link 链接文字颜色 alink 活动链接文字颜色 vlink 已访问链接文字颜色 leftmargin 页面左侧的留白距离 topmargin 页面顶部的留白距离,例1,例2,Body部分的文本,特殊字符的插入 【插入】【HTML】 【特殊字符】 插入面板选择“文本”，在该面板中可选择要插入的字符 快捷键 1. CtrlShiftSpace（空格） 允许网页自动插入非断行空格的方法：【编辑】 【首选参数】 【常规】，在“编辑选项”中选择“允许多个连续的空格” 2. EnterShift（断行字符） 3. Enter（段落字符）,特殊字符的HTML标记,特殊字符：< - "-” &-&  -空格,控制文本的HTML标记,1. 文字格式控制,文本字体，大小，颜色, this is a test!,SIZE属性的有效值范围为17，其中缺省值为3。我们可以在SIZE属性值之前加上“”、“”字符，来指定相对于字号初始值的增量或减量。,为了统一显示效果，WEB安全色定义了一系列的颜色。一般Web安全色包含216种颜色，这些颜色为调色板中的“立方色”和“连续色调”，其十六进制数值表示中包含成对的：00，33，66，99，CC，FF,颜色值的表示,颜色值表示： 16进制颜色代码：#RRGGBB 10进制RGB代码：RGB（RRR，GGG，BBB） 直接颜色名称：“Red”/“Blue”/“Silver”,控制文本的HTML标记,2. 文字格式控制,字体属性,粗体 斜体 下划线 上标 下标 闪烁效果,练习：如何写出x的平方加y的平方？,控制文本的HTML标记,段落 Align属性：Left，Center，Right,3. 文字排版控制,换行 ,控制文本的HTML标记,3. 文字排版控制,分区 Align属性：Left，Center，Right,分区 Align属性：Left，Center，Right Class属性：CSS样式名称,控制文本的HTML标记,标题元素,语法格式： 标题内容 ,其中n为标题的等级，HTML总共提供六个等级的标题（n=1,2,3,4,5,6）， n越小，标题字号就越大，默认字体为黑体。,3. 文字排版控制,控制文本的HTML标记,预格式化元素,语法格式： 其间的内容能承认用户输入的回车、空格。,3. 文字排版控制,控制文本的HTML标记,4. 文字布局,有序列表,无序列表,控制文本的HTML标记,5. 字 幕,属性： bgcolor 背景颜色 direction 字幕滚动方向 height 字幕高度 width 字幕宽度 vspace 字幕与上页边垂直距离 Hspace 字幕与左页边水平距离 scrolldelay 每次移动的时间间隔 scrollamout 每次移动的距离 behavior (= scroll, alternate, slide) loop 循环次数 align,水平线的HTML标记,水平线元素,语法格式： 属性：noshade 无阴影效果,作业1,设计一网页，要求， （1）网页设有标题“温州大学05教技班级主页” ； （2）页面背景为淡蓝色，页面上边距为0 （3）页面内容： 页面头部有一移动字幕“欢迎光临05教技班级网站”，要求居中，字幕宽300象素，高100象素，字每次移动距离为20象素，移动时间间隔为100毫秒，背景颜色为蓝色 字幕下方排版有一首诗歌，要求：诗歌题目为h1标题格式，居中；作者居中，字体为宋体，大小为3号；诗词内容居中，字体为楷体，大小为3号。其中诗歌题目与作者在同一段但换行，所有诗词内容为一段，但每句占一行,作业1,超级链接,链接语法, 属性：href 链接目标 target 目标窗口 title 链接提示 链接文字或图片,超级链接,href 路径表示法： 物理路径表示：(不提倡) 文件的链接 相对路径表示： 文件的链接 绝对路径（URL）表示法： 温州大学,超级链接,target属性 _blank 打开一个新窗口 _self 在当前窗口中打开链接 _parent 在当前窗口的父窗口中打开链接，仅用于 框架窗口 _top 在最高一级窗口中打开链接，仅应用于框 架窗口,超级链接,目录链接：网页内部链接。,要点： 锚点的HTML标记：(链接的目标) 链接到锚点的HTML标记： ,超级链接,邮件链接： 联系我,图像的插入,回顾：页面背景图片如何设置？,图像的插入,Body内的图片元素： ,图像的插入,属性：src 图片文件的地址 alt 图片的说明文字 align 图片与文字的对齐方式 border 图片的边框 hspace 图片与文字的水平距离 vspace 图片与文字的垂直距离,图像的插入,Align属性的可选值有： Top 图片和文字顶部对齐 Middle 图片和文字中间对齐 Bottom（默认值）图片和文字底边对齐 Left 图片左对齐，文字沿图片绕排 Right 图片右对齐，文字沿图片绕排 AbsMiddle 图片对齐到目前文字行绝对中间 AbsBottom 图片对齐到目前文字行绝对底部,图像的插入,超文本支持的图象格式一般有：png、GIF、JPEG三种。,声音的插入,背景声音,前景声音,声音的插入,背景声音,背景声音标签是个隐藏标签，可以放在任何位置。,声音的插入,前景声音,（1）链接法：声音提示说明,（2）嵌入式： ,声音的插入,背景声音格式限制：mp3 wav midi wma,前景声音格式没有限制，只要有相应的播放软件即可。,视频的插入,（2）嵌入式： ,（3）图片插入式： ,（1）链接法：视频提示说明,Flash动画的插入,（2）嵌入式： ,（3）嵌入式（用工具插入） ,（1）链接法：链接提示说明,表 格,边框(boder) 单元格间距(CellSpacing),单元格内容与单元格边框之间的距离(Cellpadding),行 (TR),单元格 TD,表格(TABLE),表 格,表格的基本结构,示例1, . ,表 格,表格的标题,表格标题的位置，可由align属性来设置，其位置分别为表格上方和表格下方。 设置标题位于表格上方： . 设置标题位于表格下方： . ,示例2,表 格,表格尺寸设置, width和height属性分别指定表格一个固定的宽度和长度，可以用像素来表示，也可以用百分比来表示。,示例3,表 格,表格边框粗细设置, 边框是用border属性来体现的，它表示表格的边框边厚度和框线。将border设成不同的值，有不同的效果。,示例4,表 格,表格边框的颜色,表格边框颜色 ,示例10,表 格,表格的背景设置,在表格中，既可以对整个表格填入底色，和背景图。 表格的背景色彩 ,示例9,表 格,表格单元格间线宽度设置, 格与格之间的线为格间线，它的宽度可以使用中的cellspacing属性加以调节。,示例5,表 格,表格内容与格线之间的宽度设置, cellpadding用来规定内容与格线之间的宽度。,示例6,表 格,表格排版位置设置, align属性用来设置整个表格在页面中的排版位置：left ，center，right。,示例7,表 格,表格单元格的设置,表 格,Width、height：设置了一个单元格的大小后，与其同一列的单元格的width是一样的，与其同一行的单元格的height是一样的。,单元格边框、背景设置只对本单元格起作用。,Align、Valign：设置单元格中文本水平和垂直方向的对齐方式,表 格,Colspan、rowspan： 一个单元格跨多列： 一个单元格跨多行： ,示例8,表 格,表格行的设置,表格中若同一行的单元格属性一致，则设置行属性即可。,示例7,表格的高级设置,设置table的frame、rules属性，可以使表格的只显示指定边框，从而具有信纸等效果,示例,表格的应用,注意：表格布局页面和定位元素时，如果希望表格顶着页面边线，可以设置,表格的页面布局作用 单级表格 重复单级表格 嵌套表格,作业2,设计并制作一站点（个人站点，班级网站等），站点内包括若干个网页，应用表格进行页面布局，页面内容可包括文本、图像、视频、Flash等，页面之间通过链接进行导航,框架集网页,适用场合：,网页上经常出现一些重复部分，用框架可将整个窗口分成几个独立的小窗口，每一个窗口可分别载入不同的文件，每个窗口是可以相互沟通。最常见的是用来定义页面的导航区域、LoGo标志和内容区域，从而使浏览者随时能找到自己感兴趣的内容,不足：,内容非常多的网页不宜采用框架式结构，所以大网站中几乎所有的网页都不是框架式网页。因为不同框架部分的表格比较难对齐,框架集网页,框架集网页,框架集的相关概念,框架 框架不是文件，是在框架集中定义的区域，它可以通过指定URL显示任何文档。 框架集 框架集是个文档，它本身没有提供显示在浏览器中的HTML内容。它用来定义一系列框架的属性以及他们大小、位置等布局方式，以及每个框架中最初始的页面的URL。,框架集代码,框架集,总结： 框架集文件只是对窗口进行划分，并在各窗口载入相应的网页。 （1）是对窗口进行划分，并预设了各窗口属性和特点 （2） src值指定了事先做好的、要载入该窗口的文件 （3）该部分用于不支持框架的浏览器所显示的内容,框架集文件制作步骤,规划框架集（框架结构规划）； 准备每一个框架中调入（打开）的页面； 创建框架集网页，设置框架集及各框架属性、大小，加载的初始页面等属性； 选中框架集保存框架集文件 。,创建框架集方法,【插入】 【HTML】 【框架】 【新建】 方法，在对话框中的类别栏选择框架集，并选择合适的框架集种类,修改框架集,新增框架 将鼠标移动到文档窗口四周的框架集上，当鼠标变为双向箭头时，可以对框架进行水平或竖直的分割 按住ALT，拖动不在文档窗口四边的框架的边框，也可以分割框架 光标定位在要分割的框架中，【修改】 【框架集】 删除框架 拖动框架的边框到文档窗口四边,框架集及框架属性设置,应用“框架面板”选中框架集或各框架，在属性面板中设置相关属性 框架集：边框及边框颜色，各窗口的大小 框架：框架名，初始加载的文件URL等,框架文件和框架集的保存,框架文件的保存 光标锁定框架，【文件】 【保存框架】 框架集的保存 选择框架集，【文件】 【框架集另存为】 保存全部,框架网页代码,窗口的结构划分和大小设置,横向分用ROWS属性，纵向分用COLS属性，每一块的大小可以由这两个属性的值来实现。, 例: 例:,#的值为一对用引号括起来的字符串，字符串中的数值表示每个分窗口所占的尺寸，数值中间用逗号隔开，有几个数值就表示分出了几个窗口。其中数值可以是百分比值，也可是象素值，任何一个数值也可由“*”来代替，表示由浏览器自动设置其大小（剩余的都分配给最后一个窗口或平均分配给剩余的窗口）。,框架网页代码,窗口的结构和大小,纵向排列多个窗口,横向排列多个窗口,纵横排列多个窗口,框架集属性设置,边框的设置 #=yes, no/0,1 边框的粗细设置 #为象素值 边框的颜色设置 #为颜色值,框架属性设置,窗口的其他属性,各窗口的名称设置 #为字符串 各窗口边框的设置 #=yes, no/0,1 各窗口的上下左右边界宽度设置 各窗口的滚动条设置 #=yes, no, auto 各窗口框边是否允许用户改变设置 ,框架中链接的设置,由frameset分出来的几个窗口的内容并不是静止的，往往一个窗口的内容随着另一个窗口的要求而不断变化。如，一个窗口中的链接操作影响其他窗口的显示内容。 技术要点： 1.设置框架中各窗口的name属性 2.链接设置中设置Target属性，其值为指定了所链接的文件出现在哪一窗口（ _top / _parent /框架名称/_self /_blank）,Iframe嵌入网页的用法, 框架的另一种形式，它与不同的是，iframe可以嵌在网页中的任意部分。 语法： URL可以是相对路径，也可以是绝对路径,用CSS样式表格式化文本,CSS概念 CSS（Cascading Style Sheets） 层叠样式表，是一个格式设置的集合，用来控制页面中文字以及其他各种元素的显示效果。 意义： 应用了CSS样式表能精确控制页面各类元素，而不仅是文本和段落； 应用了相同CSS样式表的元素在浏览器中显示出相同的效果,保持页面具有统一风格，并且提高工作效率。,1. 标签内定样式表（HTML样式） 2. 文档样式表 3. 样式表文档,CSS样式表种类,标签内定样式表,语法： 例如：,不足之处： 文档中多处需要用同一样式，制作和维护比较费力。,文档样式表,语法： ,文档样式表,标签名 属性及属性值 是对已有标签的属性重新设置，定义后，文档中凡此标签的属性以此为标准。,如： table background-color: #6699FF; background-position: left center; border: dashed #6633FF; ,#ID名属性及属性值 对包含特定id属性的标记进行重新定义。,文档样式表,定义： 例 #selfont-size:18px;color:#0000FF 引用： 例 ,文档样式表,自定义类名属性及属性值 自定义的样式，是一种类。要用标签的class属性引用。,如： .mystyle font-size: 18px; line-height: 25px; color: #000000; ,文档样式表的特点,不论标签名 属性及属性值、#ID名属性及属性值、自定义类名属性及属性值中的哪一种样式都是定义在本网页文档的style中，而且也只有本文档才能引用这些样式。,文档样式表的定义方法,新建CSS样式面板中选择“仅用该文档”的标签或高级或类样式定义“仅用该文档”的标签、高级、类样式 定义样式属性,文档样式表的引用,如果定义的是类样式，则选中文本或段落等页面元素，在属性面板中或【文本】 【样式】下选择样式名 如果定义的是标签样式，则自动应用 如果定义的是高级样式，则选中标签，设置ID属性,样式文档,CSS样式文档是用以保存样式表的文档，后缀名为.css CSS样式文档中的样式可以通过“链接”或“导入”方式应用于该其他网页,样式文档中样式的定义方法,新建CSS样式面板中选择“定义在新建样式表文件” 指定保存新建样式的样式文档 定义样式属性,样式文档中样式的应用方法,打开要应用指定CSS文档中的样式的网页，通过管理CSS面板导入或链接指定CSS文档 然后选中网页中文本或段落等页面元素，在属性面板中或【文本】 【样式】下选择样式名,问题： 对同一元素应用了多种样式时，这时页面元素该按哪一个样式来显示呢？,样式应用规则,优先级：越接近目标的样式定义优先级越高； 继承：高优先级样式将继承低优先级样式未重叠定义的属性； 层叠：高优先级样式将覆盖重叠的定义。,样式应用规则,长度单位： 绝对长度 ：pt(磅) 相对长度：px(像素)，黙认长度。 百