资源简介 (共171张PPT)编写HTML代码考纲分析1了解网页与网站的概念本课程在高考中上机占10分操作，理论一般为1——2个题，争取本课程高考中不丢分2HTML基础理解HTML基本结构、常用标记与超链接3常用应用的使用掌握列表、超链接、表格、css、表单、多媒体等常见应用的使用方法。1认识HTMLPart one3 常用的浏览器1 网页的基本组成2 什么是HTML目 录4 Web标准的三大组成部分1.网站的概念网站是指在 Internet上,使用HTML(超文本标记语言)等工具制作的用于展示特定信息的相关网页集合。网站结构一般分为物理结构和逻辑结构。分析网站结构主要是对网站的逻辑结构进行规划设计,常见的网站逻辑结构有线性结构、二维表结构、层次结构。网页是网站中的一“页”，通常是HTML格式的文件, 它要用浏览器来阅读。2、网页概念网页是构成网站的基本元素, 网页以文件的形式存储，通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常以.html或者.htm后缀结尾的文件，也被称为HTML文件。静态网页有HTML、 Flash、JavaScript、 VBScript等；动态网页有ASP、JSP、PHP、、CGI等,什么是网页？静态与动态网页？3、HTML什么是HTML HTML,称为超文本标记语言（hyper text markup language）,这些标记代码并不是一种程序语言,是一种编写超文本文档的简单标记语言。标记语言是一套标记标签可以直接通过浏览器解释执行。Ps：所谓超文本，有两个意思1、它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）2、它还可以从一个文件跳到另一个文件，与世界各地主机的文件链接（超链接文件包）3、HTML网页开发软件网页制作三剑客Dreamweaver(制作网页)、Flash(制作网页动画)、Fireworks(处理网页图形)FrontPage(微软已停止提供):网页制作软件动态网页开发软件: Microsoft visual studio(用于开发.aspx网页)、 I Builder(用于开发jsp网页)2、网页小结文字和图片是构成网页的最基本元素。除此之外,还包括有超链接、表格、音频、视频、动画、表单和脚本程序等。其中表单和脚本程序主要用于动态网页设计有前端人员书写HTML文件，然后浏览器打开，就看到的网页网页生成网页元素HTML超文件标记语言，用来制作网页的一门语言，由标签组成，比如图片标签，超链接标签，表格标签等。3、浏览器常用浏览器浏览器是网页显示、运行的平台。常用的浏览器有IE、火狐（firefox）、谷歌（chrome）、safari（苹果公司）、oprea、国产：360、UC等4、web标准4.1web标准的构成包括结构、表现和行为三个方面标准 说明结构 结构用于对网页元素进行整理和分类，现阶段主要学的是HTML样式 标准用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS行为 行为是指网页模型的定义及交互的编写，主要指的JavaScriptWeb标准提出最佳体验方式：结构、样式、行为相分离简单讲：结构写到HTML中，样式写到CSS文件中，行为写到JAVASCRIPT文件中HTMLCSSjavascript网页前端结构类似身体样式类似外观修饰行为类似行为动作2HTML标签基础Part two3 超链接标签1 标签的书写规范2 HTML结构目 录4 图片标签5 路径1.1基本语法概述1.HTML标签是由尖括号<>包围的关键词，例如：2.HTML标签通常是成对出现的，例如：和,这样的标签称为双标签3.有些特殊的标签是单个标签（较少），比如或者，这样的标签称为单标签1、HTML语法规范1.2标签关系双标签关系可以分为两类：包含关系和并列关系包含关系：标题内容<br/>1、HTML语法规范并列关系：内容< title>网页标题文件主体2.HTML基本结构2、HTML基本结构标签名 定义 说明… HTML标签 页面中最大的标签，用于标识网页文档的开始与结束… 文档头部 用于标识网页文档的头部< title>… 文档标题 网页标题，内容显示在浏览器窗口的标题栏中… 文档主体 页面内容基本都放在BODY里面，用于标识网页文档的主体部分2、dw介绍3.HTML常用标记3.1标签语义学习标签最重要的是记住每个标签的语义。简单说就是指标签的含义，即这个标签是干嘛的根据标签的语义，在合适的地方给一个合适的标签，可以让页面结构更清晰21格式:功能:为代码添加注释内容,这些内容不会显示在网页中格式:功能:使标记之后的内容强制显示在页面下一行 强制不换行 自动换行格式:…功能:将一段文字强制换成两个段落,换段之后的段落之间会多出一行空白行,可省略结束标记,但它仍然属于容器型标记,可使用align属性来设置对齐方式>格式:< center>…功能:将标记之间的文本进行居中显示3.HTML常用标记注释标记居中标记注释标记换行标记换段标记22格式:…功能:原样显示编辑排版好的文本内容格式:…功能:设置段落标题,以不同字号的黑粗体方式显示,自带换段功能。n的取值为1~6,n的取值越小,标题级别越大,字号越大,可使用 align属性来设置对齐方式①格式:…功能:字体加粗②格式:<1>…功能:字体倾斜③格式:功能:字体加下划线④格式:…功能:字体加删除线3.HTML常用标记特殊字符标记原样显示文本标记段落标题标记字体样式标记< <> >& & © ®空格 3.HTML常用标记标签除了语义定义外，还可以包含属性,写作:<标签 属性名1=“属性值1”属性名2=“属性值2...>，属性可以简单设置该标签的一些表现属性，比如对齐，设置颜色，表格宽度等。但是后面学了CSS后，基本都采用css样式定义标签表现形式。24格式:功能:插入一条水平分隔线3.HTML常用标记水平线标记字体标记属性 功能 默认值size 水平分隔线的粗细,以像素为单位 2pxwidth 水平分隔线的宽度,以像素或百分比为单位 页面宽度align 水平分隔线的对齐方式 居中显示color 水平分隔线的颜色 黑色noshade 取消水平分隔线的3D阴影 有3D阴影格式:…功能:设置文本的字体、字号和颜色属性 功能face 设置字体类别size 设置字体大小,取值为1-7,数值越大,字号越大,也可用“+“或““来设置相对值 默认是3号字color 设置字体颜色，可以用6位16进制数表示，也可以用英文表示。…:在一个网页文档中只能出现一次,用于标识网页文档的主体部分,常用属性如下表3.HTML常用标记属性 功能bgcolor 设置背景颜色background 设置背景颜图片text 设置文本颜色link 设置超链接颜色 默认蓝色vlink 设置已被点击的超链接颜色 默认深棕色alink 设置正在被点击的超链接颜色 默认红色leftmargin 设置页面左边距rightmargin 设置页面右边距topmargin 设置页面上边距bottommargin 设置页面下边距9.1日22级6班学到此作业2、标记常用属性应用（提供背景图片“Images下的Bg.png”，背景色为：599FF5，左右边距均为60Px，顶边距为20Px；文字为白色，宋体；链接颜色为白色，访问过的链接颜色为紫色，活动链接颜色为黄色；“作者单位”链接到空链接，“联系我”为空链接：作业：完成下发的TASK2中的作业要求：利用记事本编辑网页，按照要求保存为HTML文件，自己预览后提交。涉及到的颜色，有提示的根据提示设置，没有的自行设置，所有颜色都可以用英文或者6位16进制数表示。用16进制数表示时格式为#000000。有问题及时反馈练习。22.6班9.8日学到此22.2班9.13日学到此作业red（红）， white（白），black（黑），green（绿），yellow（黄），blue（蓝），purple（紫），gray（灰），brown（棕），，navy （丈青色）颜色颜色16进制的GEB颜色表示方法：#ff0000红色，#0000ff蓝色，#00ff00绿色#00FFFF青色，#ffff00黄色，FF00FF紫色#ffffff白色，#000000黑色4.超链接建立超链接本地链接网络链接格式:< a href="链接目标“>链接源功能:从一个网页指向另一个目标的链接关系添加文本超链接的属性属性 功能href 设置超链接的链接目标,一般是一个URL地址,也可以是图片、电子邮件地址或一个文件等target 取值 _blank,链接内容打开在新的测览器窗口中取值 _parent,链接内容打开在包含链接的父框架页或窗口中取值_self,链接内容显示在当前窗口中,此取值为默认值取值_top,将框架中的链接目标内容,显示在没有框架的窗口中取值“框架名称”,链接内容在“框架名称”的网页框架中打开书签链接电子邮件链接4.超链接建立超链接本地链接网络链接链接目标为本地计算机的不同文件,常用相对路径来表示位置,也称为相对URL链接。相对路径分为根相对路径和文档相对路径。根相对路径:以站点根目录“/”为起始目录。文档相对路径:以当前文档所在路径为起始目录,进行相对文档查找,不用包括协议和主机地址信息,通常只包含文件夹名和文件名,甚至只有文件名。链接到同一目录下,只输入要链接的文件名。链接到下级目录中的文件,先输入目录名,然后加“/”,再输人文件名。链接到上一级目录中的文件,先输入“../”,再输入目录名/文件名本地链接书签链接电子邮件链接站点根目录imagespagesindex.html02.html01.htmlbeijing.jpgima1.jpgimg2.jpg1、在index.html文件中调用ima1.jpg的路径怎么写？2、02.html要链接到index.html路径怎么写？。。。4.超链接建立超链接本地链接网络链接链接目标为本地计算机的不同文件,常用相对路径来表示位置,也称为相对URL链接。相对路径分为根相对路径和文档相对路径。根相对路径:以站点根目录“/”为起始目录。文档相对路径:以当前文档所在路径为起始目录,进行相对文档查找,不用包括协议和主机地址信息,通常只包含文件夹名和文件名,甚至只有文件名。链接到同一目录下,只输入要链接的文件名。链接到下级目录中的文件,先输入目录名,然后加“/”,再输人文件名。链接到上一级目录中的文件,先输入“../”,再输入目录名/文件名本地链接书签链接电子邮件链接P33页绝对路径的盘符/,而不是\/(斜杠）和\（反斜杠）在widows和dos系统中用\表示文件的路径在UNIX和linux中用的是/表示文件路径在编程语言中路径用/，\表示转义字符。C:\windows\notepad.exeC:\\windows\\notepad.exe作业1、根据下图上文字建立网页： 2022级2班9.14学习到此4.超链接建立超链接本地链接网络链接链接目标为远程网络服务器上的资源的超链接,常用绝对路径来表示链接目标的位置,需要填写完整的URL地址(包括协议名、主机名、文件所在主机上的路径以及文件名)绝对路径:给出目标文件的完整URL地址,包括传输协议在内,一般格式为 protocol：Hostname:port/path/。端口号为默认时可省略不写(http默认端口号为80,ftp默认端口号为21）网络链接书签链接电子邮件链接作业1、根据下图上文字建立网页：5.超链接建立超链接本地链接网络链接书签链接电子邮件链接b.建立书签链接a.建立书签书签链接书签链接建立书签建立书签链接格式:< a href=”#书签名”>链接源功能:建立由链接源指向链接目标为书签的书签链接,若要从其他网页进行书签链接,则需要在链接目标中的“#书签名”前加上书签所属的网页文件名。书签链接的目标为网页内的其他位置的超链接,使用时需要先建立书签,再为书签建立链接。格式:< a name=”书签名">书签内容功能:在书签内容位置处建立name属性中所指定的书签名,书签名是代表“书签内容”的有意义的简短字符串,用于标明书签链接的位置书签链接5.超链接建立超链接本地链接网络链接书签链接电子邮件链接书签链接书签（锚点）链接格式:< a href=”#ID名”>链接源功能:建立由链接源指向链接目标为ID名的书签链接,若要从其他网页进行书签链接,则需要在链接目标中的“#ID名”前加上书签所属的网页文件名。ID名是整个网站的唯一性以字母开头，可以用数字和一些字符，不要用中文命名锚点链接作业如果要链接到另一个文件下的书签，书签链接为链接原1、根据下图上文字建立网页：5.超链接建立超链接本地链接网络链接格式:< a href=" mailto：邮件地址 cc=抄送者邮箱& subject=邮件主题&body=邮件内容”>链接源功能:使点击者启动默认的电子邮件客户端软件,并向指定的邮件地址编辑发送邮件中的电子邮件协议名称与电子邮件地址是必写项,邮件主题是可选项 bcc=密送者的邮箱地址如果邮件地址后有两个及以上参数加上问号再跟第一个参数。参数直接用&隔开电子邮件链接书签链接电子邮件链接作业1、根据下图上文字建立网页：更改链接颜色在body标签下设置链接颜色、Text：设置文本颜色Link：可连接文本颜色Vlink：已被访问过链接颜色Alink：正在被访问链接颜色作业：完成下发的TASK4中的作业要求：利用记事本编辑网页，按照要求保存为HTML文件，自己预览后提交。有问题及时反馈练习。4插入多媒体Part three多媒体1插入图像2插入声音和视频3插入背景音乐多媒体文件格式图像文件类型:bmp、jpg、GIF和PNG格式等音频文件类型:WAV、MP3、MID1、RA和RM格式等视频文件类型:AV1和SWF格式等4插入AVI视频文件一、Mate标签格式:功能:对HTML文件进行说明，文件的所有权及采用的字符集网页特效1）name项：常用的选项有Keywords(关键字) ，description(网站内容描述)，author(作者)，robots(机器人向导)等。2）http-equiv项：可用于代替name项，常用的选项有Expires(期限)，Pragma(cache模式)，Refresh(刷新)，Set-Cookie(cookie设定)，Window-target(显示窗口的设定)，content-Type(显示字符集的设定)等。3）content项：根据name项或http-equiv项的定义来决定此项填写什么样的字符串。二、参数解析：三、应用1、告诉浏览器网页所识别的文件类型及语言类型，比如说，我们要让浏览器识别HTM/HTML类型的简体中文网面，我们可以这样写：< Meta http-equiv="Content-Type" content="text/html; charset=gb2312" >2、让一些搜索引擎搜索到你的网页，代码可以这样写：< Meta Name=" Keywords" Content="网页关键字" >< Meta Name=" description" Content="网页描述文字" >网页特效三、应用3、让一个页面过上一定的时间，自动转到另一个页面或者站点去，如：< Meta HTTP-equiv="refresh" content="6; url=http://hi./tesalo/" >content中的6表示时间，单位为秒，url=后面是你要转向的网址，若是与你当前网页在同一目录下，可以直接写上文件名，如：< Meta HTTP-EQUIV="refresh" content="6; url=page1.htm" >网页特效三、应用4、让网页每隔一段时间刷新一次，若要10秒刷新一次，代码这样写：网页特效插入声音和视频格式:< embed src="音频或视频文件URL地址">功能:在网页中播放插入的音频或视频文件src=“多媒体文件的地址”该属性为必要属性Height和width属性用于设置多媒体对象的高宽Loop属性用于设置播放的次数。若为true则无限重复播放，若为NO则播放一次。多媒体插入背景音乐格式:< bgsound src="音频文件URL地址”>功能:在网页中插入背景音乐。src=“声音文件的地址”声音文件可以为wav/midi/mp3格式文件Loop属性用于设置播放的次数。若为infinite则将循环播放。多媒体插入AVI视频文件格式:< img dynsrc="AⅥI视频文件URL地址">在网页中插入AVI视频文件多媒体背景图像属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮格式:功能:在网页背景中插入指定的图像文件，默认为平铺用css的style来设置Background-repeat=“图像重复”（repeat|repeat-x| repeat-y|norepeat）如：背景图像图像标记属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮属性 功能width 设置图像显示的宽度,单位为像素或者百分比height 设置图像显示的高度,单位为像素或者百分比alt 图像的取代文字align 设置图像的位置或其他内容与图像的对齐方式boder 设置图像的边框大小vspace 设置图像顶部和底部与其他内容之间的间隔，单位为像素hspace 设置图像左侧和右侧与其他内容之间的间隔，单位为像素格式:< Img src="图像文件URL地址">功能:在网页中插入指定的图像文件插入图像图像的取代文字alt属性属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮格式:功能:有些浏览器只支持文本,不支持图像,则可以采取一些其他办法来替代图像。标签中的alt属性能够提供帮助。当浏览器不能显示图像或找不到图像时,它可以将alt引导的文本显示在屏幕上,从而替代看不到的图像Title:将鼠标放在图片上显示提示文本Img标签设定图像的高度和宽度 height/width属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮格式:功能:标签中还提供了两个属性, height和widt,用来设定图像的高度和宽度,二者可取像素值或百分比注意：图像所占的磁盘空间较少,则在网上传输所需的时间就比较短。因此,可以充分利用这两个属性,先在网页上建立一个占用磁盘空间较小的图像,然后再用这两个属性按比例放大,但倍数过大会模糊。所以要合适。同时需要使用小图片时，不要采用缩小图像的方法，这样网页传输的时间较长，应该用图像处理软件处理图像。Img标签设定图像的边框border属性属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮格式:功能:img标签的border属性可以给图像加一个边框,若 border项默认或取值为0时,图像没有边框。Img标签设定图像的边框border属性属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮格式:功能:img标签的border属性可以给图像加一个边框,若 border项默认或取值为0时,图像没有边框。Img标签设定图像的对齐方式align属性属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮格式:功能:在标签中使用aigm属性,可控制图像相对于字基准线(文字中线)的水平对齐方式,属性设置值见书44页Img标签设定图像与文之间的距离 vspace/ hspace属性属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮格式:功能:img标签中的 vspace和 hspace属性能够调整图像与其他文本之间的距离,两者均取像素值。设定语法格式如下:n,m为数值,单位为像素。其中, vspace为调整图像与上下文本的距离; hspace为调整图像与左右文本的距离。Img标签把文字排在图像下面属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮格式:功能:如果文本还没有填满图像周围的空间,就希望从图像下面重新开始另一行文本时,普通换行标签就不起作用了,它只能在图像旁边另起一行,而不能把文本排到图像下面去,这就需要在标签中使用 clear属性来满足这一要求① clear=left文本在图像下面另起一行,用于图像在左边的情况②cear=rght文本在图像下面另起一行,用于图像在右边的情况;③ clear-all文本在图像下面另起行处。Img标签作业：完成下发的TASK8 中的作业要求：利用记事本编辑网页，按照要求保存为HTML文件，自己预览后提交。有问题及时反馈练习。5项目列表Part five(1)有序列表功能:建立一个有序列表,每一个列表项可进行自动换行,编号会随属性设置自动进行调整（3）定义列表功能:建立一个定义列表,也称为描述列表,列表项分为概念部分和定义解释部分。(2)无序列表功能:建立一个无序列表,也称为符号列表,各列表项没有先后顺序之分,项与项可进行自动换行(4)目录列表和菜单列表功能:这两种列表格式和使用方式与无序列表完全一样5.HTML列表格式如下列表项一列表项二...属性见下表可以设置嵌套标记有序列表5.HTML列表属性 类型type 设置编号的类型,默认时为1(阿拉伯数字),还可设置为A(大写字母),a(小写字母),I(大写罗马数字),i(小写罗马数字）start 设置编号的起始值,但无论用什么类型,属性值必须为数字。格式如下:列表项一列表项二...属性见下表可以设置嵌套标记无序列表5.HTML列表属性 类型type 设置符号的类型,默认时为disc(●),还可设置为 circle(o),square（■）背景颜色：000220 灰白色：D6D6D6灰色：808080 列表项颜色：007700格式如下：概念一概念一定义概念二概念二定义定义列表5.HTML列表可以设置嵌套标记背景颜色：022000 灰白色：686846浅蓝色：008877目录列表格式如下：<|i>列表项一列表项二...菜单列表格式如下:列表项一列表项二...目录列表和菜单列表5.HTML列表这两种列表格式和使用方式与无序列表完全一样可以设置嵌套标记5.HTML列表作业：完成下发的TASK3中的作业要求：利用记事本编辑网页，按照要求保存为HTML文件，自己预览后提交。涉及到的颜色，有提示的根据提示设置，没有的自行设置，所有颜色都可以用英文或者6位16进制数表示。用16进制数表示时格式为#000000。有问题及时反馈练习。6表 格Part six1、先检查标签书写是否正确（双标记是否忘记结束标记）2、属性及属性值是否正确，只能是数字的是否设置为百分比，中文的属性值必须加英文状态的引号，”宋体”body bady3标记之间的嵌套，不能交叉标记********cellspacingcellpaddingg6、表格表格格式数据单元格表格标题表头单元格表头单元格数据单元格数据单元格功能:建立一个由表格标题和若干行列组成的表格,但当页面用了过多表格时,页面加载速度会受到一定的影响......表格中的行表头单元格，内容自动加粗创建一个表格......标记属性属性 功能width 设置表格的宽度,单位为像素或百分比height 设置表格的高度,单位为像素或百分比align 设置表格在页面中的水平对齐方式background 设置表格的背景图片bgcolor 设置表格的背景颜色border 设置表格边框的宽度,单位为像素,不指定属性值时默认为1,省略该属性或指定该属性值为0时,不显示表格边框。bordercolor 设置表格边框颜色cellspacing 设置单元格之间的间距,单位为像素cellpadding 设置单元格内容与单元格边界间的距离,单位为像素6、表格设置表格边框border6、表格设置表格边框的颜色：bordercolorBordercolorlight/bordercolordark6、表格设置表格的背景颜色或者背景图像Bgcolor=颜色 background=图像路径/文件名6、表格设置表格的尺寸：width/height取指为窗口的百分比或者像素6、表格设置表格的对齐位置：align取指为left/right/center6、表格设置表格的格框线宽度：cellspacing取指为像素，默认为26、表格设置表格的框线与内容的间距：cellpadding6、表格设置表格的边框显示状态：frame6、表格显示整个表格边框 不显示表格边框 只显示表格的上下边框 只显示表格的左右边框 只显示上边框 只显示下边框 只显示左边框 只显示右边框 设置表格的边框显示状态：frame6、表格设置表格的分割线的显示状态：rules6、表格显示所有分格线 所有分割线不显示 只显示组与组的分隔线 只显示行与行的分隔线 只显示列与列额分隔线 1 23 45标记属性属性 功能 默认值height 设置表格行的高度align 设置表格行内容的水平对齐方式valign 设置表格行内容的垂直对齐方式,取值为top/middle/bottom middlebgcolor 设置表格行的背景颜色bordercolor 设置表格行的边框颜色6、表格和标记属性属性 功能width 设置单元格的宽度,单位为像素或百分比height 设置单元格的高度,单位为像素或百分比align 设置单元格中数据的水平对齐方式 left center rightvalign 设置单元格中数据的垂直对齐方式 top middle bottombgcolor bgcolor设置单元格的背景颜色background 设置单元格的背景图片bordercolor 设置单元格的边框颜色rowspan 设置单元格在列内合并的行数colspan 设置单元格在行内合并的列数6、表格表格的分组标记 功能…. 设置表头的属性，属性与th标签一致…… 设置表格其他单元格的共有属性，属性与TD标签一致6、表格表格的列分组6、表格标记 功能 表格按列分组span 该组包含的列数align 改组列中的对齐方式Align属性定义所有夸列中单元格的内容水平方向的位置，center、right、left标记 功能 表格的标题align 标题位置 top bottom作业：完成下发的TASK5中的作业要求：利用记事本编辑网页，按照要求保存为HTML文件，自己预览后提交。有问题及时反馈练习。7框 架Part serven7、框架1定义框架格式如下< title>网页标题< frame src=“网页URL地址一”>...功能:将浏览器窗口划分成多个不同的显示区域,并在每个显示区域内独立显示不同网页的一种技术,包含框架的网页称为框架集。2框架集基本标记属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮标记 属性 功能 rows 在浏览器窗口从上至下划分多个显示区域,单位为像素或百分比,可用“*”表示剩余值cols 在浏览器窗口从左至右划分多个显示区域,单位为像素或百分比,可用“*”表示剩余值frameboder 设置是否显示边框,“0”表示不显示边框,“1”表示显示边框boder 设置边框粗细bordercolor 设置边框颜色标记 属性 功能 src 指定当前显示区域中初始时显示的网页,值为相对URL或绝对URLname nane指定当前显示区域的子窗口的名称noresize 指定多个不同的显示区域是否可以通过拖动框架边框在浏览器中调整显示区域的大小说明:< frameset>…标记取代了普通网页的…标记它们不可同时出现。7、框架2Frameset属性 rows cols属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮7、框架2Frameset属性 rows cols属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮7、框架水平/垂直分割窗口属性 rows/cols(1)格式row=“值1,值2,…值N”et cols-“值1,值2,…,值n”(2)说明①rows后面的值,说明窗口横向分隔的情况:cols后面的值,说明窗口纵向分隔的情框况②各参数值之间用逗号分隔,依次表示各个子窗口的高度(宽度)③rows和cols可以用数字、百分比和剩余值及这三种方式的混合方式来表示◆数字,表示子窗口高度(宽度)所占的像素点数◆百分比(%).表示子窗口高度(宽度)占整个浏览器窗口高度(宽度)的百分比◆剩余值(*).表示当前所有窗口设定之后的剩余部分,当符号“*”只出现一次即其他子窗口的大小都有明确的定义时,表示该子窗口的大小将根据浏览器窗口的大小而进行自动调整,当持号“*”出现一次以上时,表示按比倒分览器口的剩余空间一例如,< frameset cols=“40%,2*,*”>表示将浏览器窗口分割为三列,第一个子窗口在第1列,窗口宽度为整个浏览器窗口宽度的40%:第二个子窗口在第二列,占浏览器窗口剩余空间的2/3,即其宽度为整个浏览器窗口宽度的40%:第三个子窗口占剩余空间的1/3,宽度为整个浏览器窗口宽度的20%.2Frame属性 rows cols属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮7、框架在窗口框架建立起来后,应在各个子窗口内放入相应的信息。子窗口的初始化是用标签来描述的。屏幕上的每一个子窗口均对应一个标签。用标签中的属性链接相应的文件,该文件的内容就显示在标签对应的窗口之中, 1.src属性是用于指定要导入到某个子窗口的HML文件的位置,其语法格式如下:2.定义子窗口名称属性namename属性是用来指定窗口的名称,此属性是可选的。当完成定义子窗口的名称后,便可在超链接中,指定显示网页的子窗口。其语法格式如下< frame name=”子窗口名称”>3.控制框架滚动条属性 scrollingscrolling属性用于描述该窗口是否设有滚动条。该属性是可选的,其设置语法格式如下:< frame scrol1ing=yes或no或auto>各个设置值所代表的意义按顺序为显示,不显示和自动设置,默认方式是mo2Frame属性 scrolling属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮7、框架4.子窗口大小的调整属性 noresizenoresize属性是一个标志,没有取值。它说明浏览者是否可以自行用鼠标调整窗口的大小。如果设定了 noresize属性,则窗口不能调整。如果处于默认方式,则可以自行调整窗口的大小。5.设置边距属性 marginwidth/marginheightmarginwidth属性,用来控制窗口内显示的内容与窗口左右边缘的距离。该属性是取一个像素值,默认值为1,该属性是可选的marginheight属性,用来控制窗口内显示的内容与上下边缘的距离。该属性是取一个像素值,默认值为1,该属性是可选的。2超链接的target属性属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮7、框架 用 target属性定义窗口的名称,必须使用字母/数字字符;否则窗口的名称将被忽略。但是,有几个特定的窗口的名称例外,这几个窗口的名称有特殊含义,它们是 _blank,_self，_parent,_ top(1) target=“_blank”当将 arget属性设置为bank时,若单击超链接后,将以打开另一个窗口的方式显示网页(2)target=“_self”当将target属性设置为_self时,则将在同一个窗口中显示链接的网页(3) target=“_parent"当将 target属性设置为 parent时,若单击超链接后,该链接网页将导入目前子窗口的上层框架。若没有上层,则导入在同一个窗口中。(4)当将 target属性设置为_top时,则将脱离目前的窗口框架,在最上层的窗口框架中,显示链接的网页。2Frame属性 scrolling属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮7、框架4.子窗口大小的调整属性 noresizenoresize属性是一个标志,没有取值。它说明浏览者是否可以自行用鼠标调整窗口的大小。如果设定了 noresize属性,则窗口不能调整。如果处于默认方式,则可以自行调整窗口的大小。5.设置边距属性 marginwidth/marginheightmarginwidth属性,用来控制窗口内显示的内容与窗口左右边缘的距离。该属性是取一个像素值,默认值为1,该属性是可选的marginheight属性,用来控制窗口内显示的内容与上下边缘的距离。该属性是取一个像素值,默认值为1,该属性是可选的。2Frameset属性属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮7、框架3浮动框架属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮属性 功能src 指定在窗口中显示另一个页面的文件路径width 指定浮动框架的宽度,单位为像素height 指定浮动框架的高度,单位为像素scrolling 指定浮动框架是否出现滚动条,值为auto(自动)、yes(出现)和no(不出现)frameborder 指定浮动框架区域边框的宽度,单位为像素,值为“00”时表示没有边框格式： 功能:也称为内联框架,可以放在网页中的任何位置,用于在一个页面中嵌入一个框架窗口来显示另一个页面的内容7、框架3浮动框架属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮7、框架作业：完成下发的框架布局的作业要求：利用记事本编辑网页，按照要求保存为HTML文件，自己预览后提交。有问题及时反馈练习。8表 单Part eightHTML是利用表单(Fom)来设计交互界面的.表单则是接受浏览者在网页中的操作,并传递给服务器中的程序(例如CG1程序).它是动态的,有输入框及按钮等。使用表单并配合CG程序,网页能够知道浏览者做了哪些事情,然后针对这些事情适当地加以回应,就可以做成一个具有交互功能的网页了。本章的内容就是要介绍,如何制作表单让自己的网页和浏览者之间进行互相交流.7、表单1表单表单标签是成对标签。在首标签和尾标签之间的内容就是一个表单。表单form为浏览者在屏幕上建立一张表格,表格中有明确的文字提示,使浏览者可以在表格上输入自己的信息,然后使用提交按钮,将浏览者的信息传送给服务器。表单form中的HTML代码要完成两件事情,一是指出CGl的路径和名称,二是要将表单输入的信息传递给CGI。CGI(Common Gateway Interface) 是 WWW 技术中最重要的技术之一，有着不可替代的重要地位。CGI 是外部应用程序（CGI 程序）与 WEB 服务器之间的接口标准，是在 CGI 程序和 Web 服务器之间传递信息的过程。CGI 规范允许 Web 服务器执行外部程序，并将它们的输出发送给 Web 浏览器，CGI 将 Web 的一组简单的静态超媒体文档变成一个完整的新的交互式媒体。7、表单1定义表单标记及其属性属性 功能action 指定处理表单数据的URL地址,其值通常为动态网页文件的路径,可以设置为空链接method 指定将表单数据提交给服务器的传送方式,值为post(一般用于传送大容量数据或需要保密的信息)和get(不能传送大容量数据,且数据传送不安全,易被截取)name 定义表单的名称target 定义表单数据结果显示的目标窗口格式:< form action=“执行CGI程序的URL地址” method=”数据传送方式">…功能:在网页中建立一个表单,定义信息的收集范围注意：所有的表单控件都必须包含在 ...标记中7、表单1定义表单标记及其属性格式:< form action=“执行CGI程序的URL地址” method=”数据传送方式">…功能:在网页中建立一个表单,定义信息的收集范围2表单控件标记及其属性格式:< Input type=”输入控件类型">。功能:在已建好的表单中建立一个指定类型的输入控件属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮控件名称 控件类型Text 文本框Password 密码框Radio 单选按钮Checkbox 多选按钮submit 确定提交按钮Reset 重置按钮Image 图像按钮file 文件选择输入框7、表单2表单控件标记input及其属性格式:< Input type=”输入控件类型">。功能:在已建好的表单中建立一个指定类型的输入控件，其他属性如下属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮属性 控件名称 控件类型name 指定各个控件的名称,方便CGI程序对其输入控件的引用size 设置输入窗口的宽度,控件类型为文本框、密码框和文件域时可使用value 控件类型为文本框、密码框、文件域、单选框和复选框时,用于设置输入控件提交的值;控件 类型为提交按钮或重置按钮时,用于设置按钮上显示的文本checked 设置单选框和复选框的初始状态,指定表示选中,不指定表示未选中maxlength 设置文本框和密码框可输入的最大字符数7、表单2文本框text及其属性格式:< Input type=”输入控件类型">。功能:在已建好的表单中建立一个指定类型的输入控件，其他属性如下属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮属性 控件名称 控件类型size 设置输入窗口的宽度,控件类型为文本框、密码框和文件域时可使用value 用于设置输入文本框中默认的值;maxlength 设置文本框和密码框可输入的最大字符数7、表单2表单控件标记input及其属性属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮7、表单2提交submit和重置按钮reset及其属性当type= submit时,浏览器会在相应的位置产生一个提交按钮。当用户单击该按钮时浏览器就会将表单的输入信息传送给服务器。提交按钮的name属性是可以默认的,除name属性外,它还有一个可选的属性 value,用于指定显示在提交按钮上的文字。 value属性的默认方式“提交查询内容”。在一个表单中必须有提交按钮,不然将无法向服务器传送信息.当 type= reset时,浏览器会在相应位置产生一个重置按钮。当用户单击该按钮时,浏览器就会清除表单中所有的输入信息而恢复到初始状态。重置按钮的name属性也是可以默认的。除name属性外,它也有一个可选的属性 value,用于指定显示在清除按钮上的文字,vale属性的默认方式是“重置”。属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮7、表单2表单控件标记属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮7、表单2密码框password属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮7、表单2单选按钮radio属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮7、表单3其他表单控件及其属性②列表框 格式如下:< select name=”名称">< option>列表项一< option>列表项二< option>列表项三>功能:在已建好的表单中建立一个指定列表框属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮①多行文本框格式;< Textarea name=“名称”rows=“行数" cols=“列数”>文本内容功能:在已建好的表单中建立一个指定多行多列的文本框7、表单7、表单3列表框常用属性属性size 设置列表框显示的列表项数,如省略此属性或取值为1时,列表框为下拉式列表框multiple 指定时表示可以选择多项,省略时只能选择单项selected 只能用在< Option>标记中,表示默认选中当前项value 只能用在标记中,表示当前项的取值4Lable标签属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮7、表单使用lable标记可做为光标选择对象语法格式：…… 例如：用户名： 4生成分组标签属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮7、表单利用fieldset和legend标签生成分组标签语法格式：分组名称 例如： 基本信息 用户名： 4Get 和post属性属性 控件名称 控件类型type text 单行文本框password 密码框file 文件域radio 单选框checkbox 复选框submit 提交按钮reset 重置按钮button 普通按钮7、表单Method制定表单的运行方式。属性值有get个post。默认是get。 Get一般是从服务器获取信息，因此传递给服务器的反馈信息长度不能超过255个字符，而且安全性不高 ，提交后会在地址栏显示输入信息（控件需要设置name属性才能收集信息） post一般是向服务器发送信息，反馈信息长度不受限制，而且安全性较高 ，提交后不会在地址栏显示输入信息（控件需要设置name属性才能收集信息） 一个测试网站地址https:///api/html/signin作业：完成下发的TASK6 中的作业要求：利用记事本编辑网页，按照要求保存为HTML文件，自己预览后提交。有问题及时反馈练习。9网页的动态效果Part nine多媒体1Mate标记2插入声音和视频3插入背景音乐4插入AVI视频文件一、Mate标签格式:功能:描述HTML网页文档的属性，例如网页字符集、网页语言、关键字、页面描述、网页作者等网页特效1） 2） 主要格式网页特效1）name项：常用的选项有Keywords(关键字) ，description(网站内容描述)，author(作者)，robots(机器人向导)等。2）http-equiv项：可用于代替name项，常用的选项有Expires(期限)，Pragma(cache模式)，Refresh(刷新)，Set-Cookie(cookie设定)，Window-target(显示窗口的设定)，content-Type(显示字符集的设定)等。3）content项：根据name项或http-equiv项的定义来决定此项填写什么样的字符串。二、参数解析：三、应用1、告诉浏览器网页所识别的文件类型及字符集，比如说，我们要让浏览器识别HTM/HTML类型的简体中文网面，我们可以这样写：< Meta http-equiv="Content-Type" content="text/html; charset=gb2312" >可以简写为< meta charset=gb2312" >其中常见字符集有：UTF-8值unicode字符编码GB2312值国标码 GBK值扩展国标码网页特效三、应用2、让一些搜索引擎搜索到你的网页，代码可以这样写：< Meta Name=" Keywords" Content="网页关键字" >< Meta Name=" description" Content="网页描述文字" >< Meta Name=“ author” Content=“网页的作者" >网页特效三、应用3、让一个页面过上一定的时间，自动转到另一个页面或者站点去，如：< Meta HTTP-equiv=“refresh” content=“6; url=路径" >content中的6表示时间，单位为秒，url=后面是你要转向的网址，若是与你当前网页在同一目录下，可以直接写上文件名，如：< Meta HTTP-EQUIV="refresh" content="6; url=page1.htm" >让网页每隔一段时间刷新一次，若要2秒刷新一次，代码这样写：< Meta HTTP-EQUIV="refresh" content=“2" >网页特效插入声音和视频格式:< embed src="音频或视频文件URL地址">功能:在网页中播放插入的音频或视频文件src=“多媒体文件的地址”该属性为必要属性Height和width属性用于设置多媒体对象的高宽Loop属性用于设置播放的次数。若为true则无限重复播放，若为NO则播放一次。多媒体插入背景音乐格式:< bgsound src="音频文件URL地址”>功能:在网页中插入背景音乐。src=“声音文件的地址”声音文件可以为wav/midi/mp3格式文件Loop属性用于设置播放的次数。若为infinite则将循环播放。多媒体插入AVI视频文件格式:< img dynsrc="AⅥI视频文件URL地址">在网页中插入AVI视频文件多媒体10CSS基础知识Part teenCSS与HTML的关系CSS式表( Style sheets)技术诞生于1996年,全称是层叠样式表( Cascading Style Sheets)。样式就是格式,对网页来说,例如文字的大小、颜色及图片的位置等,都是网页显示信息的样式。层叠是当在HTML文件中引用多个定义样式文件(CSS文件)时,若多个样式文件间所定义的样式发生冲突,则将依据层次处理样式表是HTML的“表兄弟”。由于最初的HTML标准还不尽人意,用HML制作网页就像是用画笔绘制一幅图画,只有那些对网页制作痴迷且执着的人才可能精确地实现预定的结果。正是在这种情况下,样式表技术诞生了。样式表的目的是为了对布局、字体、背景和其他图文效果实现更加精确的控制样式表的宗旨就是将结构和格式分离。样式表将定义结构和定义格式的两个部分相互分离,从而使网页设计人员能够对网页的布局施加更多的控制。HTML仍可以保持简单明了的初衷,而样式表代码独立出来后,则从另一个角度控制网页外观。利用样式表,可以将站点上所有的网页都指向某个CSS文件,用户只需要修改CSS文件中的某一行,那么整个站点都会随之发生改变。这样,通过样式表就可以将许多网页的风格格式同时更新,不用再一页一页地更新了。CSS+DIV基本语法CSS语法由选择符,属性和属性取值构成,分为内嵌样式表、内部样式表和外部样式表三种。格式:选择符{属性:值}说明:属性和取值由大括号括起来,属性与取值之间用冒号分隔;当属性取值由多个单词构成时,要用引号将属性的取值括起来;对一个选择符指定多个属性时,不同属性之间用分号分隔,可采用分行方式书写选择符组把相同属性和值的多个选择符写在一起,相互之间用逗号进行分隔,以便减少对样式的重复定义类选择符对相同标记进行分类定义为不同样式,在标记和自定义类名之间加上英文句点符号。使用时在HTML文件中通过标记的 CLASS属性指定不同类即可。这种方式的定义还可以在自定义类名前省略HTM标记,以便将一种样式应用到不同的标记中。ABDC04链接到外部样式表格式:< link rel=Stylesheet "type="text/ css" href="外部样式表文件URL地址”>标记必须放在标记内,外部样式表的文件扩展名为css03导入外部样式表格式:@ import”外部样式表文件URL地址；功能:在< style>标记中导入一个外部样式02内部样式表格式:< style type="text/css">内部样式表功能:在当前HTML文件中定义并应用内部样式表。< style>标记必须放在下01内嵌样式（行内样式）直接在HTML内容部分的标记中通过 style属性来定义样式,可以直接对某个标记进行单独定义容CSS+DIVAB格式:<标签名称 style="样式属性:属性值;样式属性:属性值…">功能:可以直接在HTML代码行中加入样式规则。这种方法适用于指定网页内的某一小段文字的显示风格。不过,利用这种方法定义样式时,其效果只可以控制该标签如何在网页中加入CSS01在行内直接加入样式B02把样式表嵌入到文件头语法:如何在网页中加入CSS功能:在标签中,用设置 style属性的方法,一次只能控制一个标签的样式,实在显示不出css对网页设计有什么特别的效果。第二种方法是在文件头嵌入样式表规则的方法。浏览器在整个HTML网页中都执行该规则。如果想对网页一次性加入样式表,就可采用该方法。这种方法就是将所有的样式表信息都列于HTML文件的头部B02把样式表嵌入到文件头如何在网页中加入CSS03链接到样式表语法:创建一个普通的网页,但不使用< style>规则,而是在HTML文件头部使用标签。< title>…如何在网页中加入CSS功能:想要达到集中管理网站网页样式的目的时,就必须将样式定义在独立的CSS文件中,并将该文件链接或输入到要运用样式的HTML文件上。这种方法就是将多个HTML文件链接到一个样式表文件上。这个外部的样式表将设定所有网页的规则。如果改变样式表文件中的某一个细节,所有网页都会随之改变。说明:①*.css为预先编写好的样式表文件。②外部样式表文件中不能含有任何如同或< style>这样的HTML标签。样式表仅仅是由样式表规则或声明组成的。③在href属性中可以使用绝对URL或相对URL。④在外部样式表文件中,不必须使用注释标签。⑤如同发布HTML文件那样,将这个CSS文件发布到服务器中。在网页被打开时,浏览器将按照链接标签将含有链接外部样式表文件的HTML网页按照样式表规则显示。C04输入样式表语法:如何在网页中加入CSS说明:① Import语句后的“;”是必需的。②要输入的样式表文件的扩展名为cssD样式的优先级内联样式>内部样式内联样式>外部样式思考当同时有内部样式和外部样式时，哪个优先呢？A容器标签：DIV标题标签：H1—H6段落标签：p表格标签：table,tr,td水平线标签：hr预格式化标签：pre表单标签：form注：块级元素独占一行，可设置宽度，高度，边框，内填充和外边距等所有盒子信息块元素与行内元素01块级元素B02行内元素图片标签：img超链接标签：a文本修饰标签：b sub sup del i em strong u换行标签：br容器元素：span lable注：行内元素不能设置宽度和高度行内元素可以设置边框线样式行内元素可以设置填充样式行内元素可以设置左右方向的外边距样式块元素与行内元素AB格式:< div id/ class="名称">…功能:用于定义文档中的分区或节,使文档成为更加独立、不同的部分。id和 class属性用于标记div标签,不需要为每个标签都定义id和 class属性,通常只选择应用一种02DVI应用语法:< div style="内部样式">…功能:定义内容样式, style属性是样式中的内部样式和01标签AB格式:< span id=指定样式名称>…或者< span class=指定样式名称>…功能:标签主要用来定义网页上的区域,通常用于比较大范围的设置,而标签也可以用在区段的定义,不过一般都是用在网页中某一个小文件段落。02DVI和span①在和区域内的对象与区域外的上下文会自动换行;而在和区域内的对象与区域外的上下文不会自动换行。和01标签②与标签可同时使用,但建议标签可包含,但最好不要包含标签,否则会造成标签的区域不完整,而形成断行的现象。CSS格式选择器 声明快比如：h2 {color:blue;font-family:宋体;font-size:18px;}元素选择器：H1，p,tr,td等标签元素ID选择符：#ID名{}类选择器：.类名{}分组选择器：h1.p{}#par,p,tr,td{}通用选择器：*{}CSS简单选择器简单选择器是根据标签名称，ID名类别来选择元素CSS组合选择器后代选择器 div p子选择器 div>p元素选择器：H1，p,tr,td等标签元素ID选择符：#ID名{}类选择器：.类名{}分组选择器：h1.p{}#par,p,tr,td{}通用选择器：*{}CSS简单选择器简单选择器是根据标签名称，ID名类别来选择元素04Class类选择符语法: 说明:(1)*.a1…*.an定义的类选择符名称,通常在定义样式时指定给出样式的名称。其适用范围是整个HTML文件中所有由cass类选择符所引用的设置。“*”符号也可以用HTML内的标签替代(即标签1…标签n),此外“*”符号,在设置可以省略。使用时<元素 class=a1>类名称不能以数字开头class和ID类选择符功能:class类选择符用于指定标签属于何种样式类。或者说明:(2)标签1.a1…标签n.anHTML的标签名称,也可以用HTML内的标签替代。其不同点在于,若在定义 class类选择符前加上HTML的标签时,其适用范围将只限于该标签所包含的内容。04ID类选择符语法: 说明:(1)#a1…#an定义的ID类选择符名称,通常在定义标签时指定给出ID的名称。使用时<元素 ID=a1>ID名不能以数字开头，class和ID类选择符id类选择符与clas两者之间最大的区别在于定义样式名称前的符号。用cas定义为“米样式名称”;用id定义时,为“#样式名称”或者说明:(2)标签1#a1…标签n#anHTML的标签名称, 其不同点在于,若在ID选择符前加上HTML的标签时，其使用范围将只限于标签所包含的内容。ADB01可以归类CSS的规则可以多个HTML标签采用同一个样式,例如h1,p{font- family;黑体}这项规则设定所有被和标签包含的网页内容将用黑体显示。02样式表的规则具有继承性样式表的规则具有继承性03情景选择如果想让所有斜体显示的文字(即被和标识的文字)都以红色显示,但条件是只有当这些斜体显示的文字出现在通常的段落文字(即被标识的文字)内时。这就需要使用情景选择来实现。通过情景选择可设定一个可以执行选择说明的情景。带情景选择的样式表的格式如下情景标签 标识符{属性1:属性值1；属性2:属性值2；}标签 .class类名称{属性1:属性值1；属性2:属性值2；}标签#ID类名称{属性1:属性值1；属性2:属性值2；}CSS的几个特性作业：完成下发的TASK9 中的作业要求：利用记事本编辑网页，按照要求保存为HTML文件，自己预览后提交。有问题及时反馈练习。11CSS的属性Part teenCSS的属性字体样式控制图文布局背景颜色与图像超链接字体属性Font-family语法格式如下:font- family:<字体1>,<字体2>…,<字体n>字体风格Font-style语法格式如下:font- style:normal|italic|oblique分别表示正常、斜体、倾斜显示字体变形Font-variant语法格式如下:font- variant：normal|small-caps字体加粗Font-weight语法格式如下:font- weight：normal/bold/bolder/lighter/100~900字体样式CSS的属性字体颜色color语法格式如下:color：#******或者color字体大小Font-size语法格式如下:font- size：绝对尺寸、关键字、相对尺寸、比列尺寸绝对尺寸单位有：ex/in/cm/mm/pt/px字符大小写Font-transform语法格式如下:Font-transform：uppercase/lowercase/capitalize/none文本修饰text-decoration语法格式如下:text-decoration：underline/overline/line-through/blink/none字体样式控制图文布局背景颜色与图像超链接字体样式D04字体属性font语法：font:font-style |font-weight |font-variant|font-size| font-family属性与属性之间用空格分隔，使用font属性必须有字体和字号两个属性，顺序最好不变，可以有缺省属性，不然font属性不能使用。CSS的属性功能:font属性可以同时设置与文字有关的属性，比如字体、字号等CSS的属性字体样式控制图文布局背景颜色与图像超链接字符间距Word-spacingLetter-spacing语法格式如下:Word-spacing:normal|长度单位Letter-spacing ：normal|长度单位分别表示单词间距和字母间距设置行距Line-height语法格式如下:line-height：normal|数字|长度单位|比列文本对齐Text-alignvertical-align语法格式如下:Text-align：left|center|rightText-valign:首行缩进text-indent语法格式如下:text-indent：数字|百分比图文布局CSS的属性字体样式控制图文布局背景颜色与图像超链接链接文字A:link语法格式如下:a:link{ }已链接文字语法格式如下:a:visited{ }表示已单击超链接后文字的样式单击超链接语法格式如下:a:active{ } 表示鼠标单击超链接时文字样式鼠标移动到超链接文字上语法格式如下:a:hover{ }表示鼠标移动到超链接文字上是文字的样式超链接A{ }表示超链接的样式注意：设置超链接样式时。这四个属性的前后位置不能发生变化。否则有些样式无法正常显示010302背景颜色属性保留文字的格式和动画效果不变，请不要删除文本框，直接把文本框中的文字替换即可。字体样式控制图文布局背景颜色与图像超链接02背景图像属性语法格式如下:background-color:颜色语法格式如下:background-image:url(url路径）|none0302语法格式如下:list-style-img:url(url路径）|none项目符号属性03CSS的属性010304背景重复属性Background-repeat:no-repeat|repeat-x|repeat-y|repeat背景图像的位置Background-position:top(center/bottom)|left(center/right)固定背景图像Background-attachment:scroll|fixed字体样式控制图文布局背景颜色与图像超链接CSS的属性CSS的属性4Html标签中的盒子原理元素内容（可以是文本，图片，表格，div块等元素）宽度为300像素，高度自适应元素内容（可以是文本，图片，表格，div块等元素）宽度为200像素，高度自适应15px15px5px15px15px15px2px15px5pxId=boxId=rightId=leftborderpaddingmarginCSS的属性4Css中的盒子原理元素内容（可以是文本，图片，表格，div块等元素）宽度为300像素，高度自适应元素内容（可以是文本，图片，表格，div块等元素）宽度为200像素，高度自适应15px15px5px15px15px15px2px15px5pxId=boxId=rightId=left语法规则：border-width:thin|medium|thick|长度单位Border-（top,right,bottom,left）-width语法规则：margin-（上，右，下，左）：长度|百分比|auto边框宽度语法：border-color边框边界的设置边框颜色CSS的属性4边框的设置语法规则：padding-(top,right,bottom,left):长度或者百分比语法规则：border:边框宽度 边框样式 边框颜色(顺序保持一致）其中边框样式必须设置，其他两项可任选Border-top/border-right/border-bittom/border-left内边界：padding语法：border-style：none|solid|double|dotted|dashed|groove|ridge|inset|outset边框属性border边框样式CSS的属性CSS的属性背景图像+文字图像780*200左侧内容总宽度大概为200px左侧内容总宽度剩余宽度Foot部分导航条4-5个高度50pxCSS的属性谢谢您的聆听 展开更多...... 收起↑ 资源预览