2(商务)超文本标记语言课件_第1页
2(商务)超文本标记语言课件_第2页
2(商务)超文本标记语言课件_第3页
2(商务)超文本标记语言课件_第4页
2(商务)超文本标记语言课件_第5页
已阅读5页，还剩46页未读， 继续免费阅读

下载本文档

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

文档简介

简单的web网页设计内容提要：3.1认识HTML3.2字体3.3表格3.4表单3.5图像3.6超链接1.什么是HTML HTML是HyperTextMarkupLanguage（超文本标记语言）的缩写，它是构成Web页面（Page）的主要工具，是用来表示网上信息的符号标记语言。2.HTML的作用

①格式化文本。

②建立超链接。

③创建列表。

④插入图像。

⑤建立表格。⑥加入多媒体。3.1认识HTML3.HTML的编辑环境 任何文本编辑器，包括记事本、写字板、Word、WPS等编辑程序。不过在保存时，一定要用纯文本方式存盘。

3.1认识HTML4.HTML文件的组成一个HTML文件可由下列3部分组成。

①标记(tag)

②文字与图形资料③统一资源定位器URL标记

HTML文件由标记和被标记的内容组成。就像一个排版程序，它将网页的内容排成理想的效果。

P：Paragraph（段落）

IMG：Image（图像）表示形式：大多数成对出现

<标记>受标记影响的内容</标记><标记>3.1认识HTML每个标记都用“<”和“>”围住，以表示这是HTML代码而非普通文本。注意，“<”与标记名之间不能留有空格或其它字符。在标记名前加上“/”表示为其结束标记标记的属性标记只是规定这是什么信息（文本，图片），但怎样显示或控制这些信息，就需要在标记后面加上相关的属性来表示（可以用多个标记（属性）来共同作用）。<标记属性1=属性值属性2=属性值…>受影响的内容</标记>例如：<FONTsize=3color=red>属性示例</FONT>3.1认识HTML需要注意的是：

①并不是所有的标记都有属性，如换行标记就没有。

②根据需要可以用该标记的所有属性，也可以只用需要的几个属性，在使用时，属性之间没有顺序。多个属性之间用空格隔开。属性和标记一样，都不区分大小写。常用：大写字母表示标记小写字母表示属性3.1认识HTML4.HTML文件的基本结构

HTML文件是一种纯文本格式的文件，HTML文件包括头部（head）和主体（body）。文件的基本结构为：

<HTML><HEAD><TITLE>网页的标题</TITLE></HEAD><BODY>

网页正文

</BODY></HTML>3.1认识HTML说明：

①HTML文件以<HTML>开头，以</HTML>结尾。

②<HEAD>…</HEAD>：表示这是网页的头部。可以包括网页的标题部分：<TITLE>…</TITLE>；<meta>:文件相关信息，不显示，被搜索引擎登录（P45－3.2）。

③<BODY>…</BODY>：表示网页的主体即正文部分。

④HTML语言并不要求在书写时缩进，但为了程序的易读性，建议网页设计制作者使标记的首尾对齐，内部的内容向右缩进几格。3.1认识HTML图2-1例2-1的显示效果

3.1认识HTML【例】简单的HTML文件。

<HTML><HEAD><TITLE>简单的HTML文件</TITLE></HEAD><BODY>

最简单的网页

</BODY></HTML>5.注释标记浏览器会忽略此标记中的文字（可以是很多行）而不作显示。通常使用“注释”为文中的不同部分加上说明，以方便日后阅读和修改。

<!--注释内容-->

注释内容不局限于一行，长度也不受限制。即结束标识符不必与开始标识符在同一行上。3.1认识HTML在多数网页中，文档是核心内容，所以要经常设置文档的格式。

1.标题格式

2.字体格式

3.段落格式

4.会移动的文字5.特殊字符3.2字体1.标题格式

这里的标题是指页面中文本的标题，而不是用<TITLE>…</TITLE>定义的网页标题。在页面中，标题是一段文字内容的核心，所以总是用加强的效果来表示。网页中的信息可以分为主要点、次要点，可以通过设置不同大小的标题，为文章增加条理。标题文字标记的格式为：

<Hnalign=对齐方式>标题文字</Hn>3.2字体1～6的整数值1:最大6:最小Leftcenterright缺省显示宋体。在一个标题行中无法使用不同大小的字体。【例】标题格式设置<HTML><HEAD><TITLE>设置标题</TITLE></HEAD><BODY><H1>第1级标题（H1）</H1><H2>第2级标题（H2）</H2><H3>第3级标题（H3）</H3><H4align=left>第4级标题（H4）（居左）</H4><H5align=center>第5级标题（H5）（居中）</H5><H6align=right>第6级标题（H6）（居右）</H6></BODY></HTML>图2-3设置标题文字大小

3.2字体2.字体格式

<FONTsize=数字face=字体名color=颜色>文字

</FONT>

说明：<FONT>标记的属性包括：size、face、color。

①size属性用来设置文字的大小。数字的取值范围从1～7，size取1时最小，取7时最大。

②face属性用来设置字体。如黑体、宋体、楷体_GB2312、隶书、TimesNewRoman等。这里的字体名字就是在Word的“字体”工具栏中显示的字体名。③color属性用来设置文字颜色3.2字体【例】使用<FONT>标记设置字体<HTML><HEAD><TITLE>使用FONT标记</TITLE></HEAD><BODY><H1>设置文字的属性</H1><FONTsize=1color=cyan>1号字青色</FONT><FONTsize=2color=green>2号字绿色</FONT><FONTsize=3face=幼圆color=orange>3号幼圆桔黄色</FONT><FONTsize=4face=隶书color=crimson>4号隶书深红色</FONT><FONTsize=5face=黑体color=greenyellow>5号黑体黄绿色</FONT><FONTsize=6face=方正舒体color=dodgerblue>6号方正舒体水蓝色</FONT><FONTsize=7face=华文彩云color=lavender>7号华文彩云淡紫色</FONT></BODY></HTML>3.2字体说明：

①<FONT>和<Hn>区别见标记对象用法文字大小n取值加粗<FONT>正文<FONTsize=n>文字</FONT>n=1～7，取1时最小不<Hn>标题<Hn>文字

</Hn>n=1～6，取1时最大自动3.2字体②<FONT>标记直接作用其后的文字，可在文件中多处设定，使网页中文字的颜色绚丽多彩。当<BODY>与<FONT>标记同时对文字颜色进行定义时，<FONT>标记优先。设置字型字型就是文字的风格，如加粗、斜体、带下划线、上标、下标等。（成对标记）<B>加粗<I>斜体<U>带下划线<TT>标准打印机字体<S>带删除线<SUB>下标<SUP>上标<BIG>大字体文本<SMALL>小字体文本3.2字体逻辑风格标记（自学）【例】使用字型标记设置文字的风格。<HTML><HEAD><TITLE>设置字型</TITLE></HEAD><BODY><B>黑体</B><I>斜体</I><U>带下划线</U><TT>标准打印机字体</TT><STRIKE>带删除线</STRIKE><SUB>下标</SUB><SUP>上标</SUP><BIG>大字体</BIG><SMALL>小字体</SMALL></BODY></HTML>

3.2字体3.段落格式标记在HTML文档中，无法用多个回车、空格、〈Tab〉键来调整文档段落的格式。

（1）强制换行标记<BR>：强制文本换行，不会在行与行之间留下空行。换行标记单独使用，可使页面清晰、整齐。3.2字体

（2）段落标记<P>……</P>：定义一个新段落的开始。两段之间多一空行。可省略结束标记。强制换段标记的格式为：<P>

说明：段落标记<P>的属性align用来设置段落的对齐方式，缺省时默认为left。一个强制换段标记<P>可以看作是两个强制换行标记<BR><BR>。【例】换行与换段标记的使用。<HTML><HEAD><TITLE>强制换行、换段标记的使用</TITLE></HEAD><BODY><H2align=center><FONTcolor=blue>学生之家</FONT></H2>

新    闻

        

学习窗口

<P>健康信箱<BR>

聊天室

<Palign=center>来信

</BODY></HTML>图2-6换行与换段标记的使用3.2字体（3）水平线<HR>在页面中插入一条水平标尺线，可以使文字分隔开。当浏览器执行HTML文件中的<HR>标记时，换行，并加入一条水平线段。格式：

<HRalign=对齐方式size=横线粗细

width=横线长度color=横线颜色noshade>3.2字体【例】水平线标记。<HTML><HEAD><TITLE>水平线段标记的应用</TITLE></HEAD><BODY><CENTER><H3>水平线</H3></CENTER><HR><HRalign=leftsize=6width=320><HRalign=centersize=8width=60%color=blue><HRalign=rightsize=8width=360color=red><HRsize=4width=80%color=#CD061F><HRsize=5noshade><HRwidth=70%noshade></BODY></HTML>3.2字体（4）预格式化<PRE>……</PRE>使用预格式化标记格式化的文本在浏览器中显示的效果与其在编辑器中书写的效果完全一致。P52-3.93.2字体（5）特殊符号特殊字符所替代的字符说明&特殊字符的开始;特殊字符的结束Lt<小于号Gt>大于号Quot"双引号amp 空格4.会移动的文字美观，增强文字的吸引力自学3.2字体3.3表格1.简单表格制作2.表格对齐3.表格边框与颜色4.跨栏与跨列5.表格的作用1.简单表格制作（示例）每一个主页都可以用表格来组织信息（排版定位）定义：(eg1)

<TABLE>……</TABLE>定义表格

<TH></TH>表头单元

<TD></TD>表格单元

<TR>表格换行属性：宽度，高度，颜色，边框等P56

3.3表格表格标题Caption对齐方式ALIGN行、表头与单元格tr

thtd水平对齐ALIGN垂直对齐VALIGN3.3表格<tableborder="1"><caption>格式</caption><tralign="CENTER"><td>目的</td><td>这是个用来实验的表格</td></tr></table>2.跨栏与跨列属性：ROWSPAN:跨越行数COLSPAN：跨越列数分栏拼接图像内容的凹陷与突起可以做按钮等3.3表格3.表格作用3.4图像1.图像格式2.标记与属性1.格式

GIF格式、JPEG和PNG格式。

GIF格式文件最多只能显示256种颜色，这使得它很少用于存储照片。优点在于制作透明、隔行和动画效果。

JPEG格式文件可以拥有计算机所能提供的最多种颜色，适合存放高质量的彩色图片、照片。另外，JPEG格式文件采用压缩方式存储文件信息，相同的图片，所占空间比GIF文件小，所以下载时间较短，浏览速度较快。但是，存在压缩损失。

PNG结合了以上有点。3.4图像2.图片标记（示例）使用图片标记，可以把一幅图片加入到网页中。用图片标记还可以设置图片的替代文本、尺寸、布局等属性。格式为：<IMGsrc=文件名alt=说明width=xheight=yborder=nhspace=hvspace=valign=对齐方式>3.4图像名称说明src指出要加入图片的文件名，即“图片文件的路径\图片文件名”。alt在浏览器尚未完全读入图片时，在图片位置显示的文字。width宽度（像素数或百分数）。通常只设为图片的真实大小以免失真，若需要改变图片大小最好事先使用图片编辑工具。height设定图片的高度（像素数或百分数）。hspace设定图片边沿空白，以免文字或其它图片过于贴近。设定图片左右的空间水平方向空白像素数。vspace设定图片上下的空间border设定边框align对齐/布局方式，或图片与文字的对齐方式。

(1)图片的尺寸width和height属性可以设置图片的大小，width和height属性的值可取像素数，也可取百分数（浏览器窗口）。如果不设定图片的尺寸，图片将按照其本身的大小显示。

(2)图片的布局所谓布局，就是图片放在网页中的位置，以及图片与文本的排放关系。align属性。left图片居左，文本在图片的右边center图片居中right图片居右，文本在图片的左边top图片的顶部与文本对齐middle图片的中央与文本对齐bottom图片的底部与文本对齐3.5超链接1.超链接分类：内部链接，外部链接2.标记：

<Ahref=……name=……target=……>……</A>①href为超文本引用，它的值为一个URL，是目标资源的有效地址。②name指定当前文档内的一个字符串作为链接时可以使用有效的目标资源的地址。③target设定链接被按后结果所要显示的窗口。3.实现超链接（1）创建指向本地其他页面的链接

<Ahref="目标文件的路径/目标文件名.html">热点</A>①链接到同一目录内的网页文件，其格式为：

<Ahref="目标文件名.html">热点</A>

②链接到下一级目录中的网页文件，其格式为：

<Ahref="子目录名/目标文件名.htm">热点</A>

③链接到上一级目录中的网页文件，其格式为：

<Ahref="../目标文件名.html">热点</A>

其中“../”表示退到上一级目录中。（2）指向其他服务器上的网页的链接<Ahref=“URL”>热点</A>例：<Ahref=“http://”>链接进入搜狐</A>（3）建立图片的链接<Ahref=地址><IMGsrc=图片文件名></A>（4）创建指向本页中的链接（书签链接）要在当前页面内实现超链接，需要定义两个标记：一个为超链接标记，另一个为书签标记。

<Ahref="#记号名">热点</A>

单击”热点”，将跳转到“记号名”开始的文本。书签就是用<A>标记对该文本作一个记号。如果有多个链接，不同目标文本要设置不同的书签名，书签名在<A>的name属性中定义。

<Aname=“记号名”>目标文本附近的字符串

</A>【例】链接<HTML><HEAD><TITLE>学生之家</TITLE></HEAD><BODYlink=redalink=bluevlink=green><Aname="0"></A><H2align=center><B>欢迎来到“学生之家”</B></H2><FONTsize=3color=purple><CENTER>

<Ahref="#news">新闻</A>    <Ahref="#study">学习园地</A>    <Ahref="#health">健康信箱</A>    <P></CENTER></FONT>

<Aname="news"></A>新闻<BR><BR><DIValign=right><Ahref="#0">返回</A></DIV><P><Aname="study"></A>学习园地<BR><BR><DIValign=right><Ahref="#0">返回</A></DIV><P><Aname="health"></A>健康信箱<BR><BR><DIValign=right><Ahref="#0">返回</A></DIV><P></BODY></HTML>（5）播放音乐与视频格式：MIDI,WAV,AU和MOV,AVI播放：<Ahref=“a.mid”>播放a.mid</A>自动载入播放：<EMBEDSRC=文件地址>3.6表单1.表单的概念用于实现网页浏览者与服务器之间信息交互的一种元素：商品订单，用户调查等。表单是用来收集信息的域的集合。域：文本框，单选按钮，复选框，下拉式菜单以及按钮等。2.应用表单标识符：<FORM>可以包含其他元素格式<body><form>

姓名：<input>建立一个输入框？

</form></body>表单输入标记Input<body><form><input><inputname=“username”type=text><inputname=“password”type=password><inputtype=submit

value=“submitme”></form></body>不带属性的文本框带属性的文本框密码框文本区普通文本框一般不能输入超过一行的文本标识符：<textarea>……</textarea><form> <textareaname=“comments” cols=40rows=10></textarea></form>窗体按钮按钮SubmitImage(图形按钮)Reset（复原按钮）<inputtype=submit

value=“submitme”><inputtype=image

src=“a.gif”>按钮上的文字按钮上的图片复选框<inputname=“username”type=text><inputname=“mycheck”type=checkboxvalue=“yes”>checked单选按钮<inputname=“sex”type=radiovalue=”male”><inputname=“sex”type=radiovalue=”female”>下拉式列表框用于代替复选框和单选按钮每次显示／选择一个选项<select>,<option><selectname=“sex”><optionvalue=“male”>male<optionvalue=“female”selected>female</selcet><inputtype=submitvalue=“submitme”>下拉式列表框的名字滚动列表框

Size属性将一个下拉式列表框转变成一个滚动列表框，指定了一次可在屏幕上显示多少选项。<selectname=“sex”size=2><optionvalue=“male”>male

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

温馨提示

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

最新文档

评论

0/150

提交评论