基于html5的响应式web设计专题等多个文件中级课件

上传人：汤*** IP属地：北京上传时间：2023-03-16 格式：PPTX 页数：71 大小：401.02KB 积分：20 举报 版权申诉

已阅读5页，还剩66页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML（HyperTextMarkupLanguage，超文本标记语言）是表示网页的一种规范（或者是一种标准），它通过标记符定义了网页内容的显示格式。在文本文件的基础上，增加了一系列描述文本格式、颜色等的标记，再加上声音、动画甚至视频等等，形成精彩的画面。主要内容一.HTML基本语法与基本结构二.文本格式的应用三.在网页中使用图片四.在网页中使用超链接五.表格与框架的应用六.表单的应用1.HTML基本语法<FONTsize=”1”color=”red”>基本语法</FONT>开始标记结束标记网页内容属性及属性值记事本2.HTML文档的编辑环境网页编辑软件记事本一.HTML基本语法与基本结构3.HTML文档的基本结构<HTML><HEAD><TITLE>网页标题，显示在浏览器的标题栏中</TITLE><METAname=属性名content=属性值><BGSOUNDsrc=背景音乐文件名loop=重复次数></HEAD><BODYbgcolor=背景色background=背景图文件名

bgproperties=”fixed”text=正文色

link=未访问超链色vlink=已访问超链色alink=活动超链色>

这里是页面上显示的内容。是网页的主要部分。

</BODY></HTML>举例习题1写出HTML文件的总体结构。在HTML中，标题标记<TITLE>和<META>标记有何作用。一.HTML基本语法与基本结构通常文本是网页的主体，所以文本格式的应用就是网页设计过程中最基本、最关键的问题之一，下面将就文本的段落格式、文字的显示效果等问题进行详细的讨论。

记事本二.HTML文本格式的应用

文本段落格式二.HTML文本格式的应用

（1）标题标记符<Hn>（2）分段标记符<P>（3）换行标记符<BR>（4）水平线标记符<HR>（5）分节标记符<DIV>（6）段落居中标记符<CENTER>

文本段落格式二.HTML文本格式的应用

（1）标题标记符<Hn>…</Hn>功能：设置文档标题，n取1至6的整数，结束标记不可省。1级标题最大。属性：align:设置对齐方式，取值left|right|center,缺省值为left。格式：<Hnalign=对齐方式>标题文字</Hn>举例：

文本段落格式二.HTML文本格式的应用

（2）分段标记符<P>…</P>功能：将文档划分成段落，结束标记</P>可省略。

属性：align:设置对齐方式，取值left|right|center,缺省值为left。格式：<Palign=对齐方式>文字

举例1举例2（3）换行标记符<BR>

功能：在文档中强制断行，但不分段，无结束标记。格式：文字<BR>举例文本段落格式二.HTML文本格式的应用

（4）水平线标记符<HR>功能：在网页中添加粗为2像素的水平线，无结束标记。

属性：size:水平线的粗细程度，取值为整数，缺省值为2px。width:水平线的长度，取值既可以是像素，也可以是百分比。noshade:缺省的水平线为带阴影的3D线,该属性设置不带阴影。color:设置水平线的颜色。align:设置对齐方式，取值left|right|center缺省值center。格式：<HRalign=对齐方式size=粗细width=宽度color=颜色noshade>

举例

文本段落格式二.HTML文本格式的应用

（5）分节标记符<DIV>…</DIV>功能：文档分节标记符，可将位于<DIV></DIV>之间的段落设置为一节。设置多个段落对齐，方法为使用<DIV>标记符将要设置的段落包起来，然后在DIV标记符中使用align属性。结束标记不能省。

属性：align:设置对齐方式，取值left|right|center,缺省值为left。举例：

（6）段落居中标记符<CENTER>

…<CENTER>

格式的嵌套原则如果所设置的格式是相容的，则取格式的叠加效果。如果所设置的格式是冲突的，则取最近格式的效果。不同标记符的开始标记和结束标记不能交错举例二.HTML文本格式的应用

2.文本的显示效果二.HTML文本格式的应用

（1）字体控制标记符<FONT>（2）字体样式标记符2.文本的显示效果二.HTML文本格式的应用

（1）字体控制标记符<FONT></FONT>功能：控制字符的显示样式，结束标记不可省。格式：

<FONTsize=大小color=颜色face=字体>文字</FONT>size设置字体大小，取绝对值时，可取1到7（3为缺省值），且其值越大，文字显示越大；取相对值时，+1表示比默认字体大1号，反之亦然。color设置文字的颜色，默认值为黑色，其值可取颜色名称或十六进制值。face设置字体样式。可指定一个或几个字体名称(用逗号隔开)，中文默认值为“宋体”，英文默认字体为“TimesNewRoman”。举例2.文本的显示效果二.HTML文本格式的应用

（2）字体样式标记符标记符功能标记符功能<B></B>粗体<STRIKE></STRIKE>删除线<I></I>斜体<S></S>删除线<U></U>下划线<SUB></SUB>下标<BIG></BIG>大字体<SUP></SUP>上标<SMALL></SMALL>小字体<TT></TT>固定宽度常用物理字符样式2.文本的显示效果二.HTML文本格式的应用

常用逻辑字符样式

标记符功能<ADDRESS></ADDRESS>网页设计者或维护者的信息，通常显示为斜体<CITE></CITE>表示文本属于引用，通常显示为斜体<CODE></CODE>表示程序代码，通常显示为固定宽度字体<DFN></DFN>表示定义了的术语，通常显示为黑体或斜体<EM></EM>强调某些字词，通常显示为斜体<KBD></KBD>表用户的键盘输入，通常显示为固定宽度字体<SAMP></SAMP>表示文本样本，通常显示为固定宽度字体<STRONG></STRONG>特别强调某些字词，通常显示为粗体<VAR></VAR>表示变量，通常显示为斜体举例3.列表格式

(1)有序列表(2)无序列表(3)定义列表二.HTML文本格式的应用

(1)有序列表<OLtype=符号类型start=列表开始值><LItype=符号类型value=列表项值>列表项1</LI><LItype=符号类型value=列表项值>列表项2</LI><LItype=符号类型value=列表项值>列表项3</LI></OL>OLtype取值为1|A|a|i|I，缺省值为1。（常用）start列表的数字序列的起始值，取值为任意整数。LItype列表项数字序列样式，取值为1|A|a|i|Ivalue列表项的起始值，以获得非连续的数字序列，取值为任意整数。二.HTML文本格式的应用

(2)无序列表<ULtype=符号类型

><LItype=符号类型

>列表项1</LI><LItype=符号类型

>列表项2</LI><LItype=符号类型

>列表项3</LI></UL>

ULtype设置无序列表的项目符号样式，取值为disc（实心圆、缺省值）|circle（空心圆）|square（方块）。（常用）LItype设置列表项的项目符号样式，取值为disc（实心圆、缺省值）|circle（空心圆）|square（方块）。（不常用）二.HTML文本格式的应用

(3)定义列表<DL><DT><DD></DL>定义列表的制作需要以下几个标记符：列表标记符<DL>…</DL>，用来指定定义列表的开始与结尾；术语标记符<DT>，用来指定第一层数据；描述标记符<DD>，用来指定第二层数据。举例二.HTML文本格式的应用

用HTML标记设计如图所示的列表。二.HTML文本格式的应用

1.Web页图像基础（1）网页中常用的图形文件格式1）GIF格式：(GriphicInterchangeFormat图形交换格式)采用无损压缩算法；可高度压缩图像，但只能包含256色，因此只适合于线条图以及使用大块纯色的图片；具有透明色的特点；可支持动画效果，即所谓的动画GIF（AnimatedGIF）。2）JPEG格式：(JointPhotoGraphicsExpert，联合图形专家组图片格式)采用有损压缩来减小图片文件的大小，因此用户将看到随着文件的减小，图片的质量也降低了，这也是该格式的典型特点，即可以控制图片的压缩比率；能支持几乎所有颜色，因此适合于使用真彩色或平滑过渡的照片和图片；不具有透明色的特点；不支持动画效果。三.在网页中使用图形1.Web页图像基础（1）网页中常用的图形文件格式3）PNG格式：(PortableNetworksGraphics，可移植的网络图片格式)它适用于任何类型、任何颜色深度的图片；采用无损压缩算法减小文件大小，同时保留图片中的透明区域。4）矢量格式：前几种格式均为位图格式。所谓位图格式就是指用图片上每一点的信息描述图像，而矢量格式则是用线条和填充色等数学信息来描述图像；矢量图要比位图文件小的多，但表现力丝毫不逊色。支持矢量动画。三.在网页中使用图形1.Web页图像基础（2）常见图形图像处理软件

Photoshop2)

Firework3)

Flash（3）网页中使用图像的原则

尽可能使图形图像文件小

使图像的尺寸适当，不可太大

采用正确的图像格式

控制图像的数量和质量

合理使用动画三.在网页中使用图形2.<IMG>标记符三.在网页中使用图形功能：在网页中插入图片或视频。属性：（1）插入图片lsrc:设置图像文件的位置，取值为要插入图像的文件名（相对路径和绝对路径）。alt:表示图像的简单文本，用于不能显示图像或图像显示时间过长时显示文字。

举例2.<IMG>标记符三.在网页中使用图形（2）设置图像的高和宽lwidth:设置图像的宽度，取值为像素数或百分数。lheight:

设置图像的高度，取值为像素数或百分数。（3）设置图像边框l

border:设置图像边框效果，取值是像素数。（4）设置图片周围空白l

hspace:设置图像周围水平方向空白。取值为像素数。l

vspace:

设置图像周围垂直方向空白。取值为像素数。举例2.<IMG>标记符三.在网页中使用图形（5）设置图像的对齐格式l

图像在页面中的对齐方法：<DIValign=”center”><IMGsrc=””></DIV>

或

<Palign=”center”><IMGsrc=””></P>举例2.<IMG>标记符三.在网页中使用图形（5）设置图像的对齐格式l

图像与文本的对齐方式align:

控制图像与周围内容的对齐方式。取值如下：

top-----图像与文本顶端对齐垂middle-----图像与文本底部中间对齐直absmiddle-----图像与文本完全中间对齐

bottom(缺省值)-----图像与文本底部对齐水left-----图左字右平right-----图右字左

举例1

举例21.超链接<A>…</A>四.超链接功能：创建超链节。结束标记不能省。属性：

href:用来指定超链接目标。

name:书签名target：用来指定超链接的目标框架名。_blank_self

四.超链接与图像映像1）本地网页链接例：源网页为Index.htm<Ahref="Folder2/interest.htm">兴趣</A>源网页为photo.htm<Ahref="../index.htm">返回首页</A><Ahref="../Folder2/interest.htm">兴趣</A>源网页为favorite.htm<Ahref="../index.htm">返回首页</A><Ahref="../Folder1/photo.htm">相册</A><Ahref="interest.htm">兴趣</A>四.超链接与图像映像2）外部链接所谓外部链接是指建立链接的源网页与待链接的目标网页不在同一站点内。创建这样的超链接必须使用绝对路径，例如下面的代码创建了连接到“搜狐”主页的超链接：例：<Ahref=””>链接到“搜狐”</A>四.超链接与图像映像3）书签链接建立书签链接的步骤如下：建立书签(锚点)在需要跳转到的每一个位置插入具有name属性的<A>标记，在<A>与</A>之间不需要任何文字，name属性的值就是该书签的名称。例如，插入名为top的书签代码为：<Aname=”top”>目录</A>

建立超链接在需要建立书签链接的位置插入具有href属性的<A>标记。例如链接到名为top的书签的超链接代码为：

<Ahref=”#top”>返回目录</A>

举例四.超链接与图像映像4）电子邮件链接如果将<A>标记的href属性的值指定为“mailto:邮件地址”，那么就可以连接到指定的电子邮件。例如使用下面的代码可以设置电子邮件超链接：<Ahref=””>请与本书的作者联系</A>四.超链接与图像映像5）链接到多媒体对象如果将<A>标记的href属性的值指定为其它文件，那么就可以连接到指定的其它类型的文件。例如使用下面的代码可以设置视频文件和音乐文件的超链接：<P><Ahref="2357.jpg">打开图片</A></P><P><Ahref="钢琴.mp3">播放音乐</A></P>

举例1.表格的基本构成

<TABLE><CAPTION>表格标题</CAPTION><TR><TH>第一行第一个单元格</TH><TH>第一行第二个单元格</TH>

……</TR><TR><TD>第二行第一个单元格</TD><TD>第二行第二个单元格</TD>

……</TR></TABLE>

举例五.表格2.表格标记符及其属性

五.表格（1）<TABLE></TABLE>

功能：定义整个表格，表格中的所有内容都必须位于<TABLE>和</TABLE>之间。

属性：

1）边框与分隔线

frame：控制表格最外层的四条框线，其取值如下表：2.表格标记符及其属性

五.表格值

意义值

意义void缺省值，无边框above仅有上边框lhs仅有左边框below仅有下边框rhs仅有右边框hsides仅有上、下边框box包含全部四个边框vsides仅有左、右边框border包含全部四个边框（1）<TABLE></TABLE>1）边框与分隔线

2.表格标记符及其属性

五.表格（1）<TABLE></TABLE>1）边框与分隔线

rules：控制是否显示及如何显示单元格之间的分隔线。值：none为缺省值，表示无分隔线。

rows表示仅有行分隔线。

cols表示仅有列分隔线。

all表示包括所有分隔线。Bordercolor:设置表格边框颜色。

举例2.表格标记符及其属性

五.表格（1）<TABLE></TABLE>2）控制单元格空白

cellspacing：控制单元格之间的空白。取值为像素

cellpadding：控制表格分隔线与数据之间的空白。其取值为像素数。举例

3）控制表格的高度或宽度

Width:

设置表格列宽，可取像素值或百分比值。

height:

设置表格行高，可取像素值或百分比值。2.表格标记符及其属性

五.表格（1）<TABLE></TABLE>3）表格在页面中的对齐方式

align：控制表格在页面中的对齐方式，（left|center|right）。例如：<TABLEalign=”center”>

注：教材P48Valign属性的讨论

4）设置表格背景色与背景图

bgcolor：设置背景颜色。

background：设置背景图案。

2.表格标记符及其属性

五.表格（2）<CAPTION></CAPTION>

功能：定义表格标题，表格标题位于<CAPTION>和</CAPTION>之间。属性：

align：设置表格标题的位置，取值为(top|bottom)，top为缺省值。

2.表格标记符及其属性

五.表格（3）<TR>

功能：定义表格行。结束标记可以省略。属性：

1）设置表格行对齐方式

align：控制表格整行内容的水平对齐。值：center表示单元格内容水平方向居中对齐。

left为缺省值，表示单元格内容左对齐。

right表示单元格内容右对齐。

举例

2.表格标记符及其属性

五.表格（3）<TR>

属性：

1）设置表格行对齐方式

valign：控制表格整行内容的垂直对齐。值：top表示数据靠单元格顶部。

bottom表示数据靠单元格底部。

middle为缺省值，表示数据靠单元格的垂直方向居中。2.表格标记符及其属性

五.表格（3）<TR>

2）设置表格行宽度和高度

height：控制当前行的高度，其取值为像素数。

width：控制当前行的宽度，其取值为像素数。

3）设置表格行背景色和背景图

bgcolor：设置当前行的背景颜色。

background：设置当前行的背景图案。

4）bordercolor:设置当前行的边框颜色

2.表格标记符及其属性

五.表格(4)<TH>

功能：定义表格行列标题单元格内容。结束标记可以省略。属性：

1）合并单元格

rowspan：行合并，其取值表示纵向方向上合并的行数。

colspan：列合并，其取值表示横向方向上合并的列数。

举例2.表格标记符及其属性

五.表格(4)<TH>2）单元格对齐方式

align：控制表格标题单元格内容的水平对齐。

valign：控制表格标题单元格内容的垂直对齐。

3）设置单元格高度和宽度

height：控制单元格高度，其取值为像素数。

width：控制单元格宽度，其取值为像素数。

4）设置单元格背景色和背景图

bgcolor：设置背景颜色。

background：设置背景图案。习题2_3：请画出下面HTML文件在浏览器中的显示效果

<TABLEborder="1"><TR><TDcolspan=3>aaa <TD>bbb <TD>ccc<TR><TD>ddd <TDrowspan=3>eee <TD>fff<TDrowspan=2colspan=2>ggg<TR><TD>hhh <TD>iii<TR><TD>jjj <TD>kkk <TD>mmm <TD>nnn<TABLE>

五.表格aaabbbcccdddeeefffggghhhiiikkkmmnnnjjj练习题：请编写HTML文件，完成下表。

五.表格1.什么是框架网页六.框架网页所谓框架网页是指将浏览器窗口划分为不同的部分，每部分加载一个独立的网页，从而获得在一个浏览器窗口同时显示多个网页的特殊效果。另外，通过为超链接指定目标框架，可以实现页面导航功能。

举例2.框架的结构六.框架<HTML><HEAD></HEAD><FRAMESETrows="64,*"><FRAME><FRAME>

<BODY><P>此网页使用了框架，但您的浏览器不支持框架。

</BODY></NOFRAMES></FRAMESET></HTML>3.常用标记符及其属性

六.框架（1）<FRAMESET>…</FRAMESET>功能：设置框架集网页，结束标记不能省略。属性：rows：设置横向框架的数量和高度。cols：设置纵向框架的数量和宽度。3.常用标记符及其属性

六.框架（1）<FRAMESET>…</FRAMESET>rows和cols的值有以下三种方式：像素值百分数

n*(n>=1)：表示浏览器窗口的剩余部分。例如：

cols=”30%,*”cols=”*,*,*”cols=”*,2*,3*”cols=”*,200,3*”3.常用标记符及其属性

六.框架（1）<FRAMESET>…</FRAMESET>提示：

rows和cols的取值个数确定了<FRAME>标记的个数。

rows和cols各个值之间用“，”号分开，且不能有空格。

rows和cols一般不同时使用，如果需要构造同时包含纵横框架的网页，可用网页的嵌套。

3.常用标记符及其属性

六.框架（2）<FRAME>属性：src：指定框架中显示的页面。name：设置框架名称，与<A>标记的target属性配合，可完成目标框架的超链结。例：<Ahref=”外部网页名”target=”目标框架网页”></A>注：target的取值也可为以下特殊框架：_top：表示将超链接的目标文件装入整个浏览器窗口。_self：表示将超链接的目标文件装入当前框架，此值为缺省值。_blank：表示将超链接的目标文件装入一个新的浏览器窗口。3.常用标记符及其属性

六.框架（2）<FRAME>属性：frameborder：控制是否显示框架边框。其中值1为缺省值，表示生成3D边框；而0表示不显示边框。scrolling：控制是否在框架内加入滚动条。其中值：

yes同时加入垂直和水平滚动条；

no不加入垂直和水平滚动条；

auto为缺省值，表示需要时加入滚动条。noresize：控制框架的位置和大小固定不变。该属性不需要任何取值。例：<FRAMEnoresize>3.常用标记符及其属性

六.框架（2）<FRAME>属性：marginheight：控制框架内容和框架左右边框之间的距离，其取值为像素数。marginwidth：控制框架内容和框架上下边框之间的距离，其取值为像素数。

3.常用标记符及其属性

六.框架（3）<NOFRAME>…</NOFRAME>

包含了框架不能正常显示时的替代内容，<NOFRAME>和</NOFRAME>必须成对使用，且必须包含一个<BODY>标记符。

4.框架网页的应用

六.框架（1）创建框架集网页举例（2）指定初始化网页举例（3）创建创链接并指定目标框架举例

六.框架

P73习题4

AAABBBCCC六.框架

P73习题4

<HTML><HEAD><TITLE>习题2_4</TITLE></HEAD><FRAMESETcols="*,*"><FRAMEname="left"scrolling="no"noresizetarget="rtop"src="AAA.htm"><FRAMESETrows="*,2*"><FRAMEname="rtop"target="rbottom"src="BBB.htm"><FRAMEname="rbottom"src="CCC.htm"></FRAMESET></FRAMESET></HTML>1.什么是表单

七.表单所谓表单是指用于实现客户端（网页浏览者）与服务器端（网页拥有者）之间信息交互的一种页面元素，在WWW上它被广泛用于各种信息的搜索和反馈。常见的表单有用户登录、搜索引擎、注册、用户留言等。

举例2.表单的构成

文本框复选框单选框按钮选项菜单多行文本七.表单3.表单及表单域标记符

七.表单（1）表单标记符<FORM>…</FORM>功能：在网页中添加表单，结束符不可省。且表单不能嵌套。语法及属性：<FORMaction=”服务器端程序的URL”method=”get|post”></FORM>3.表单及表单域标记符

七.表单（2）<INPUT>…</INPUT

>控件名称Type属性值控件名称Type属性值单行文本框text提交按钮submit密码框password重置按钮reset复选框checkbox自定义按钮button单选按钮radio不同控件的type值如下表3.表单及表单域标记符

七.表单（2）<INPUT>…</INPUT>单行文本框

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

基于html5的响应式web设计专题等多个文件中级课件

文档简介

温馨提示

最新文档

评论

基于html5的响应式web设计专题等多个文件中级课件

文档简介

温馨提示

最新文档

评论

相关文档