网页设计-HTML分析

上传人：宋*** IP属地：重庆上传时间：2023-07-16 格式：PPT 页数：50 大小：905.50KB 积分：12 举报 版权申诉

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

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

文档简介

6.1HTML基础知识

HTML(HypertextMarkupLanguage)超文本标记语言一种描述文档结构的标记语言，它使用一些约定的标记对WWW上的各种信息进行标注。当用户浏览WWW上的信息时，浏览器会自动解释这些标记的含义，并按照一定的格式在屏幕上显示这些被标记的文件。任何可以运行浏览器的计算机都能阅读并显示HTML文件，不管其操作系统是什么，显示结果相同。HTML文件的后缀名为.htm或.html的文件。

标记：组成HTML的“命令”。在HTML中，标记用符号“<”和“>”括起来。作用：标注各种元素的输出格式。7/15/20231网页设计—HTML分析全文共50页，当前为第1页。一个HTML文件的例子<HTML><HEAD><TITLE>西北工业大学</TITLE></HEAD><BODYbgcolor=yellow><P>我的第一个主页</P></BODY></HTML>

演示7/15/20232网页设计—HTML分析全文共50页，当前为第2页。

HTML标记分类：(1)单边；(2)双边。单边标记：单边标记元素为开放式标记，不需要用结束标记来包含文本。如<BR>表示回车换行。双边标记：双边标记元素提供了开始和结束，将文本包含在其中，故也称为容器(container)。如<HTML>与</HTML>、<HEAD>与</HEAD>等。

说明：

1.“<”和“>”之间是标记元素名及其参数。标记元素往往都带有若干参数，用以表明元素的属性，属性是对标记更详细的规定，并具有不同的取值。

2.标记元素不区分大小写。

格式：

<标记属性>输出内容</结束标记>7/15/20233网页设计—HTML分析全文共50页，当前为第3页。6.2HTML语言结构HTML文件的基本结构：<html>HTML文件开始<head>文件头开始

头信息部分</head>文件头结束<body>文件体开始

正文部分

</body>文件体结束</html>HTML文件结束说明：HTML文件由头信息和正文两部分组成，其中，用<>包围的是HTML语言标记，控制网页中各种元素的显示状态。7/15/20234网页设计—HTML分析全文共50页，当前为第4页。6.2.1

HTML文档的头信息举例：<html><head><title>

这是一个头文件的例子</title></head><body>

正文部分</body></html>演示7/15/20235网页设计—HTML分析全文共50页，当前为第5页。说明：

1)用<tit1e>和</tit1e>标记括起来的部分是网页的标题，其内容被显示在浏览器窗口的标题条中。

2)在头部分还可以定义类(class)及嵌入程序。

title的长度没有限制，但一般情况下它的长度不应超过64个字符。

title标记只能出现在文件头中。

title标记格式：<title>文件标题</title>7/15/20236网页设计—HTML分析全文共50页，当前为第6页。6.2.2页面排版

1.标题字体

标题字体标记：<hn>h1〜h6表示6种大小标题字体。举例：<html><head><title>标题大小</title></head><body><h1>这是一号标题</h1><h2>这是二号标题</h2><h3>这是三号标题</h3><h4>这是四号标题</h4><h5>这是五号标题</h5><h6>这是六号标题</h6></body></html>演示7/15/20237网页设计—HTML分析全文共50页，当前为第7页。hn标记的对齐属性：格式：<hnalign=#>#：left——文本内容为左对齐

center—文本内容为中间对齐

right——文本内容为右对齐举例：

<html><head><title>标题对齐属性</title></head><body><h2align=left>二号标题居左显示</h2><h3align=center>三号标题居中显示</h3><h4align=right>四号标题居右显示</h4></body></html>演示7/15/20238网页设计—HTML分析全文共50页，当前为第8页。

2.文字字体

字体的大小格式：

<fontsize

=n>···</font>

从1～7共有7级字体。

字体的颜色格式：

<fontcolor=#>···</font>

#在000000～FFFFFF(十六进制)之间，前两位代表红色(red)，中间两位代表绿色(green)，后两位代表蓝色(blue)，每种色彩为256级颜色，通过配比不同的红、绿、蓝三种颜色的分量可以得出不同的颜色。常用颜色代码如表所示。7/15/20239网页设计—HTML分析全文共50页，当前为第9页。

颜色

RGB

颜色

RGB

黑色(Black)000000

红色(Red)FF0000

白色(White)FFFFFF

粉红色(Fuchsia)FF00FF

灰色(Gray)808080

茶色(Maroon)800000

银色(Silver)C0C0C0

紫色(Purple)800080

深蓝色(Navy)000080

蓝绿色(Teal)008080

蓝色(Blue)0000FF

绿色(Green)008000

浅蓝色(Aqua)00FFFF

橄榄色(Olive)808000

浅绿色(Lime)00FF00

黄色(Yellow)FFFF00颜色代码表7/15/202310网页设计—HTML分析全文共50页，当前为第10页。字体样式粗体与斜体粗体标记：<strong>···</strong>或<b>···</b>斜体标记：<em>···</em>或<I>···</I>或<cite>···</cite>

上标与下标上标标记：<sup>···</sup>下标标记：<sub>···</sub>

大字体与小字体大字体标记：<big>···</big>小字体标记：<small>···</small>

下划线与删除线下划线标记：<u>···</u>删除线标记：<strike>···</strike>或<s>···</s>7/15/202311网页设计—HTML分析全文共50页，当前为第11页。3.文字效果标记

文字闪烁

文字闪烁标记：<blink>···</blink>注意：IE不支持此效果，而Netscape支持。

背景色与背景图背景色标记：<bodybgcolor=#>背景图标记：<bodybackground=“src”>

7/15/202312网页设计—HTML分析全文共50页，当前为第12页。举例：<html><head><title>

文字字体与效果

</title></head><body><b>加粗字体</b><br><cite><u>斜体加下划线</u></cite><br><fontsize=7>7号字体</font><br><fontcolor=blue><s>蓝色加删除线</s></font><br>

上标字体E=mc<sup>2</sup><br>

下标字体H<sub>2</sub>O<br></body></html>演示7/15/202313网页设计—HTML分析全文共50页，当前为第13页。4.转行标记

格式：<br>作用：强迫文字转行。举例：

沧海笑，滔滔两岸潮<br>

浮沉随浪，只记今朝<br>

苍天笑，纷纷世上潮<br>

谁负谁胜出，天知晓<br>

江山笑，烟雨遥<br>

涛浪淘尽，红尘俗世几多娇<br>

清风笑，竟惹寂寥<br>

豪情还胜了一襟晚照<br>

苍生笑，不再寂寥<br>

豪情仍在，痴痴笑笑···<br></body></html>演示7/15/202314网页设计—HTML分析全文共50页，当前为第14页。

关闭转行标记格式：<nobr>···</nobr>

作用：关闭文字转行功能，改由滚动条控制。举例：

<html><head><title>关闭文字转行</title></head><body><nobr>

沧海笑，滔滔两岸潮浮沉随浪，只记今朝苍天笑，纷纷世上潮谁负谁胜出，天知晓江山笑，烟雨遥涛浪淘尽，红尘俗世几多娇苍生笑，不再寂寥豪情仍在，痴痴笑笑···</nobr></body></html>演示7/15/202315网页设计—HTML分析全文共50页，当前为第15页。分段标记格式：<P

>···</P

功能：对文本进行分段操作，且段与段之间有一空行。断行标记格式：<pre

>···</pre

功能：通知浏览器，在输出时，对<pre></pre>中内容的格式不做修改地输出。7/15/202316网页设计—HTML分析全文共50页，当前为第16页。举例：

关于分段与断行

</title></head><body><p>这是文章的第一段，这里使用了段标记</p><p>这是文章的第二段，这里使用了段标记。<br>并在此使用了行标记。

<br><br>请留意，这里使用了两个行标记。</p><p>以下将使用预格式文本标记，请留意。

<pre>我们成功地按照所输入的文本格式得到输出。请比较程序与所显示的结果。</pre></p></body></html>演示7/15/202317网页设计—HTML分析全文共50页，当前为第17页。水平线标记格式：<hr>

作用：分割文档。举例：

<html><head><title>关于水平线标记的使用</title></head><body><p>星期一的课程</p><p>8:00—9:50DataStructure<br>10:20—12:00Mathematk8<br>2:30—4:20Html</p><hr><p>星期二的课程</p></body></html>演示7/15/202318网页设计—HTML分析全文共50页，当前为第18页。5.居中标记格式：<center>···</center>功能：对整段文本进行居中。举例：

<html><head><title>居中标记的应用</title></head><body><h3align=center>网页浏览器是基于屏幕显示窗口大小的

</h3><center><p>可以看到，center标记的作用与在标记中定义对齐属性是同样有效的</p><p>但是，可以控制所有在其中的标记的对齐方式为中央对齐</p></center></body></html>演示7/15/202319网页设计—HTML分析全文共50页，当前为第19页。6.特殊符号

举例：

特殊符号HTML表示法<<>>""&&演示7/15/202320网页设计—HTML分析全文共50页，当前为第20页。6.2.3列表格式1.无序列表

列表格式：格式1：格式2：格式3：<UL><MENU><LH><LI><LI><LI>┆┆┆<LI><LI><LI></UL></MENU></LH>

列表项标记属性：type格式1：<ULtype=#>格式2：<LItype=#>其中#表示符号名称：disk实心圆点(默认设置)chrcle空心圆点square实心方块7/15/202321网页设计—HTML分析全文共50页，当前为第21页。

举例：

无序列表

</title></head><body><ul><li>列表项

<litype=disk>列表项1<litype=circle>列表项2<litype=square>列表项3</ul></body></html>演示7/15/202322网页设计—HTML分析全文共50页，当前为第22页。2.有序列表

列表格式：

列表项标记属性：

1)type数字形式属性：用type属性选择列表项符号格式的数字。

数字type=11，2，3，···

小写字母type=aa，b，c，···

大写字母type=AA，B，C，···

小写罗马字母type=ⅰⅰ，ⅱ，ⅲ，···

大写罗马字母type=ⅠⅠ，Ⅱ，Ⅲ，···2)start起始数字属性：所有标号均从最小数字开始，若要改变标号起始数字，可用start属性，其格式：

<OLstart=#>#代表起始数字7/15/202323网页设计—HTML分析全文共50页，当前为第23页。举例：

有序列表

</title></head><body><oltype=a><li>第1章

<li>第2章

<li>第3章

<li>第4章

</ol></body></html>演示7/15/202324网页设计—HTML分析全文共50页，当前为第24页。3.定义型列表(definitionlists)

列表格式：

定义型列表用标记括起来，并使用标记对文本进行缩排。

举例：

<html><head><title>定义型列表</title></head><body><dl><dt>标题一<dd>以下的文字将比标题一低若干个格，并该段文字会左对齐，形成一文字块，使得标题一处于明显突出的位置

<dt>标题二

</dl></body></html>演示7/15/202325网页设计—HTML分析全文共50页，当前为第25页。4.列表嵌套

举例：<html><head><li>Web图像处理Firework<title>列表嵌套</title></ol></head><li>专家级网页编制<body><oltype=i><ul><li>脚本编辑<li>互联网学习的步骤<li>动态服务器页面编制

<ul><li>掌握高级协议

<li>掌握初步的知识</ol><ol></ul><li>配置电脑联网<li>关于Windows的作用

<li>拨号接入Internet<dl><li>进阶学习<dt>Win9X系列<dd>Win9X的两个

</ol>版本主要针对普通用户，是游戏的好平台

<li>网页编制的三大工具<dt>Win2000系列<dd>Win2000主

<oltype=a>要针对企业级用户，基于WinNT发展而来

<li>网页织梦Dreamweaver</dl></ul><li>流光异彩Flash</body></html>演示7/15/202326网页设计—HTML分析全文共50页，当前为第26页。6.3表格与框架6.3.1创建表格1.创建标记表格由<table>标记开始，</table>标记结束，其内容有<tr>,<th>,<td>标记定义，边框类型由<border=#>标记属性指定，#为数字，默认为0。

<tr>···</tr>：说明表格的一行。

<td>···</td>：说明表格的列数及相应的单元格，一般在<tr>···</tr>标记之内。

<th>···</th>：定义表格的标题行，其定义的单元格的内容有“居中”和“粗体”的效果。7/15/202327网页设计—HTML分析全文共50页，当前为第27页。

举例：

<html><head><title>定义表格</title></head><body><center><h2>手机价格行情</h2><tableborder=3><tr><th>产品</th><th>价格</th><th>折扣</th></tr><tr><td>Nokia8850</td><td>4500</td><td>9折</td></tr><tr><td>Nokia8810</td><td>2600</td><td>85折</td></tr></tableborder=3></body></html>演示7/15/202328网页设计—HTML分析全文共50页，当前为第28页。有时表格的某些单元格中没有内容，为使边框仍可见，需要使用符号“ ；”。

举例：

<html><head><title>定义表格</title></head><body><center><h2>手机价格行情</h2><tableborder=3><tr><th>产品</th><th>价格</th><th>折扣</th></tr><tr><td>Nokia8850</td><td>4500</td><td>9折</td></tr><tr><td>Nokia8810</td><td>2600</td><td> </td></tr></tableborder=3></body></html>演示1演示27/15/202329网页设计—HTML分析全文共50页，当前为第29页。

TABLE标记的常用属性：border：设置表格边框的宽度。格式：<tableborder=#>#为数字，默认为0。width：设定整个表格的宽度，可以像素为单位(绝对方式)，也可用占浏览器窗口的百分比来定义(相对方式)。格式：<tableborder=#width=300>——绝对方式

<tableborder=#width=80%>——相对方式bgcolor：设置单元格的背景颜色。格式：<tablebgcolor=#>···</table>align：用来控制表格本身在页面上的对齐方式。其取值可是left(左对齐)、center(居中对齐)、right(右对齐)。7/15/202330网页设计—HTML分析全文共50页，当前为第30页。2.<caption>标记

caption标记设置表格标题。

caption标记必须紧接在table开始标记之后放在第一个tr标记之前。通过该标记所定义的表格标题一般显示在表格的上方，而且其水平方向是居中对齐。在caption标记之间加入其它对字体进行加重显示的标记，可使表格的标题突出显示。如：

<tablewidth=75%border=1><caption> <h2>表格标题强调</h2></caption><tr> ……</tr></table>7/15/202331网页设计—HTML分析全文共50页，当前为第31页。6.3.2框架框架能够将页面分成数个独立变化的窗口，每个窗口可显示不同的Web页。

语法：<frameset><noframes>···</noframes> <framesrc="URL"> ···</frameset>

其中：(1)<noframes>...</noframes>中的内容显示在不支持分框的浏览器窗口中。(2)<frameset>：指定分框，并可嵌套，分区中各部分显示的内容用<frame>指定。

说明：分框可以将窗口横向分成几个部分，也可以纵向分成几个部分，还可以混合分框。7/15/202332网页设计—HTML分析全文共50页，当前为第32页。1.垂直划分——纵向框架

纵向框架：用<framesetcols=#>指定，

#：为一百分数，规定各框占主窗口的百分比；为一整数，指定各框的绝对大小。2.水平划分——横向框架

横向框架：用<framesetrows=#>指定，

#：为一百分数，规定各框占主窗口的百分比；为一整数，指定各框的绝对大小。

举例：在index.htm中将主窗口分成50%，30%，20%的几个区域，各区域的内容分别为left.htm，middle.htm，right.htm。7/15/202333网页设计—HTML分析全文共50页，当前为第33页。index.htm：<html><head><title>纵向框架</title></head><framesetcols="50%,30%,20%"><framesrc="left.htm"><framesrc="middle.htm"><framesrc="right.htm"></frameset></html>left.htm：<html><head><title>left.htm文件</title></head><body><palign=left>这里是左框架</p></body></html>middle.htm：<html><head><title>middle.htm文件</title></head><body><palign=center>这里是中框架</p></body></html>right.htm：<html><head><title>right.htm文件</title></head><body><palign=right>这里是右框架</p></body></html>演示1演示27/15/202334网页设计—HTML分析全文共50页，当前为第34页。3.混合划分——框架的嵌套

框架的嵌套：将窗口横纵几个区域。

举例：将窗口分成20%，80%，然后将右边区域再分成分别占40%和60%的上下两个区域。

<html><head><title>框架</title></head><framesetcols="20%,80%"><framesrc="left.htm"name=f1><framesetrows="40%,60%"><framesrc="middle.htm"name=f2><framesrc="right.htm"name=f3></frameset></frameset></html>演示7/15/202335网页设计—HTML分析全文共50页，当前为第35页。6.4表单设计

表单用来将用户数据从浏览器传递给Web服务器。利用表单可以建立一个录入界面，也可以对数据库进行查询。

表单的操作是与服务器进行交互的操作，服务器端的操作是通过服务器端的程序来实现的。ASP程序在服务器端工作，通过服务器端的编译动态地送出HTML文件给客户端，它负责处理HTML文件与运行在服务器端的程序之间的数据交换。Web服务器HTML文档浏览器数据7/15/202336网页设计—HTML分析全文共50页，当前为第36页。

1.表单的标记

格式：

<formmethod=*action="URL">

···

<inputtype=submit><inputtype=reset>

</form>

method：指定表单数据的提交方式，*代表GET或POST，表示浏览器与服务器之间的通信方式。

GET：默认方式，用户提交的内容显示在提交后的新页面中，它的信息长度不超过255个字符，适合传输少量数据。

POST：数据流，不显示，输入的数据放入数据缓冲区，它对传送给服务器的信息长度没有限制，适合传输较大量数据。

action：指出该表单所对应处理程序的位置。其参数值为程序的URL。

举例：

<formaction=getinfo.aspmethed=POST>···</form>7/15/202337网页设计—HTML分析全文共50页，当前为第37页。

表单中提供给用户的输入形式

<inputtype=*name=#>*代表text,password,checkbox,radio,image,hidden,submit,reset之一的输入元素类型。

#代表表单元素的名称，即所附信息同时发给服务器的一个信息名称。

注意：<input>必须嵌套在表单中。

表单中主要的控件元素

①按钮：单选按钮(radio)，提交按钮(submit)，复位按钮(reset)，图像字段(image)。

②选择框：复选框按钮(checkbox)。

③文本框：文本输入框(text)，密码输入(password)。

④下拉菜单：<selectname=*>

</select>7/15/202338网页设计—HTML分析全文共50页，当前为第38页。2.提交与复位按钮

(1)提交按钮(submit)

格式：<inputtype=submitvalue=“#”>

作用：控制将表单的内容发送给服务器。

type：按钮的动作属性。

#：按钮上显示的文本，如“提交表单”。

(2)复位按钮(reset)

格式：<inputtype=resetvalue=“#”

作用：清除表单中已填写的内容，恢复为初始值。

type：按钮的动作属性。

#：按钮上显示的文本，如“重新填写”。7/15/202339网页设计—HTML分析全文共50页，当前为第39页。3.文字输入和密码输入

格式：<inputtype=*value="#"size=n1maxlength=n2>

*：为text(文字输入)或password(密码输入)。

#：为文本的初始值。

n1：文本框的长度。

n2：文本框的最大长度。7/15/202340网页设计—HTML分析全文共50页，当前为第40页。举例：

<html><head><title>提交、复位按钮和文字密码输入</title></head><body><table>

请填入您相关的资料：

<formaction=getinfo.aspmethed=POST><tr><td>姓名：</td><td><inputtype=textname=姓名size=10></td></tr><tr><td>电子邮件地址：</td><td><inputtype=textname=电邮maxlength=15></td></tr><tr><td>主页网址：</td><td><inputtype=textname=网址value=http://></td></tr><tr><td>密码：</td><td><inputtype=passwordname=密码><br></td></tr><tr><td><inputtype=submitvalue="提交表单"></td><td><inputtype=resetvalue="重新填写"></td></tr></form></table></body></html>演示7/15/202341网页设计—HTML分析全文共50页，当前为第41页。4.单选按钮和复选框

(1)单选按钮

格式1：<inputtype=radiovalue="#">

格式2：

<inputtype=radiocheckedvalue="#">value：当该项被选中并提交后，浏览器要传送给服务器的数据，该属性是不可缺省的。

checked：初始状态被选中，用于指定默认值。

(2)复选框

格式1：<inputtype=“checkbox”value="#">

格式2：

<inputtype=“checkbox”checkedvalue="#“>value属性与checked属性同单选按钮。复选框使用户可以同时选中表单的一个或几个复选项作为输入信息。7/15/202342网页设计—HTML分析全文共50页，当前为第42页。举例：<html><head><title>单选按钮与复选框</title></head><body><formaction="reg1.asp"method=POST>选择一种你喜爱的水果:<br><inputtype=radioname=水果value="香蕉">香蕉<br><inputtype=radioname=水果checkedvalue="草莓">草莓<br><inputtype=radioname=水果value="橘子">橘子<br>选择你所喜爱的运动:<br><inputtype="checkbox"name=ra1checkedvalue="足球">足球<br><inputtype="checkbox"name=ra2checkedvalue="篮球">篮球<br><inputtype="checkbox"name=ra3value="排球">排球<br><inputtype=submitvalue="提交"><inputtype=resetvalue="重设"></form></body></html>演示7/15/202343网页设计—HTML分析全文共50页，当前为第43页。6.5嵌入图片、声音和视频图像1.嵌入图片

格式：<imgsrc="#">#：图片的URL，可用相对路径和绝对路径表示。

属性：

width：设定图片的显示宽

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

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

网页设计-HTML分析

文档简介

温馨提示

最新文档

评论

网页设计-HTML分析

文档简介

温馨提示

最新文档

评论

相关文档