静态网页设计_第1页
静态网页设计_第2页
静态网页设计_第3页
静态网页设计_第4页
静态网页设计_第5页
已阅读5页，还剩27页未读， 继续免费阅读

下载本文档

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

文档简介

第二章静态网页设计学习要求

掌握HTML的基本概念掌握HTML的框架及其基本元素学习重点表格（table）标签的使用表单（form）的使用Html结合脚本语言的一些常用小技巧HTML-Internet中的语言

HTML(HyperTextMarkupLanguage):超文本标记语言(WWW上通用的发布语言)功能：使用各种基础的印刷元素例如标题、文字、表格、列表、照片、插图等来发布在线的文档。通过超文本链接使用户能够方便地在各种信息之间切换。设计一种表单控件来控制网上的各种传输、远程服务等功能，象查询信息、订购货物等。在文档中可以直接包含视频剪辑、音效片断和其他的应用程序。HTML简史

TimBerners-Lee最初在CERN开发了HTML，这种语言由于NCSA的Mosaic浏览器使用而广为流传。20世纪90年代，Web网络的兴起，使得HTML空前繁荣，HTML被发展成了许多个版本。制作公认的HTML语言规范：IETFHTML2.0W3CHTML3.2HTML4.0HtmlHTML文件

纯文本文件，以htm或html为扩展名，除了一些基本的文字外还包含了一些标签。浏览器对这些标签进行解释，显示出文字、图像、动画以及播放出声音。查看HTML源代码在浏览器中打开一个网页点击“查看”菜单项点击“源代码”项一个独立窗口就把创建此网页的源代码显示出来例2_01使用HTML创建基本网页

HTML编辑器记事本（以html或htm作为文件扩展名保存）可视化网页编辑器MicrosoftFrontPage2000MacromediaDreamweaver

HTML组成

标记

<></>元素（标签）属性构建网页框架

<html>

<head>

<title></title>

</head>

<body>

</body>

</html><html></html>：标识网页的开始和结束<head><title></title></head>：头部字段包含一些不出现在浏览器中的网页信息（除了不可缺省的<title>元素）注：<title>标记用以区别网页，当网页载入浏览器之后，其标题出项在标题域中。

<head>标记必须出现在<html>标记的开始符号之后，而在主体部分之前<body></body>：主体部分存放页面的内容标识加入HTML注释：用<!--and-->标记将注释文字括起来，此标记可以跨行使用。创建文本

控制文本显示的常用标记：换行标记<br>：标记后的正文不另起一行，显示效果上另起一行。段落标记<p>：标记后面的正文将另起一段。<p>的唯一属性是align，用以调准文字位置（left，center，right）。添加标题<h1><h2><h3><h4><h5><h6>：所有的标题均以粗体显示。不同的标记代表不同的标题尺寸：<h1>最大，<h6>最小。标题标记也包含align属性，使标题文字在水平方向对齐。创建文本

改变文字外观<font>：size属性：定义域是从1到7，7最大。也可以在尺寸标示符前加“+”、“-”号以从默认位置的尺寸开始来增减现有尺寸。color属性：规定了文本的颜色。face属性：改变文字的显示方式。给出了一个用逗号分割的字体样式列表，各种字体是按作者的喜好程度排列的。如果浏览器没有列表中的第一种字体，则会依次选用第二种，第三种……。应用粗体和斜体<b><i>加入图像

语法：<img>属性：<src>：规定了图像的位置。<alt>=text：替换文本。目前，大部分浏览器支持.gif和.jpg文件。alt属性给出了不可装载图像的替换文本。有效的替换文本应给出图像的功能而不是图像的描述。width和height：如果不使用这些尺寸，浏览器将以默认尺寸（图像初始保存时的大小）显示图像。<align>对齐图像：改变图像水平（left、right）和垂直（top、middle、bottom）的对齐方式。hspace和vspace：定义在文字和图像之间的空格数目（与空格象素的数目有关）。创建超级链接语法：<a>...</a>属性href：保存了链接所联系的地址。创建文字链接是通过在<a>标记种插入文字来完成的。<ahref="">Thisisalinktosohu</a>target="_blank"<a></a>标签和Jscript和Vbscript结合使用的一些小技巧创建列表无序列表：语法：<ul>...</ul>内容：包含一个或多个<li>元素来定义列表项。type属性：编号样式。取值disc|square|circle（实心圆|方框|空心圆）。有序列表：每个元素按数字顺序标号。语法：<ol>...</ol>内容：包含一个或多个<li>元素来定义列表项。type属性：编号样式。取值1|a|A|i|I（十进制数|小写字母|大写字母|小写罗马数字|大写罗马数字）创建表格<table>

<!--定义表格><tr>

<!--定义表行><th></th>

<th></th>

<!--定义表头><tr><td></td><td></td>

<!--定义单元格></table>创建表单表单：是浏览器用来收集用户的信息，实现与用户交互的场所。表单的处理过程：当用户单击提交按钮时，输入在表单中的信息就会上传到服务器中，然后由服务器的有关程序进行处理，处理后将用户提交的信息存储在服务器端的数据库中，或者将有关信息返回到浏览器上。表单FORM的语法：<formaction=活动method=方法>各种表单域……<inputtype=submit><inputtype=reset></form>表单的发送方法：决定表单的输入如何发送到服务器get方法（缺省值）：把表单信息合并成一个字符串放在“action”所规定的URL的末尾发送给服务器。post方法：将表单数据作为http请求的一部分，表单输入在请求体中。创建表单表单的输入域input语法：<inputtype=类型name="名称">其中：type为输入框的类型，name用来命名该输入框。type类型：text（单行文本框）：用户可以在其中输入字符或者单行文本。value属性：设置初始时显示在文本域中的文本，但是用户可以更改这些文本。size属性：设置文本域的宽度（字符为单位）例2_10password（密码域）：与文本域不同的是输入文本时，以"*"显示。textarea（文本区）：可以输入多行文本。可以使用rows和cols属性来设置文本区域的行数和字符宽度。创建表单checkbox（复选框）：一般以分组的形式出现，具有相同name属性的复选框属于相同的组。默认时不被选中。为了在初始时将复选框标记为选中，可以使用checked属性。当数据被传到服务器时，value属性用来帮助识别相应的复选框。radio（单选框）：具有相同name属性的单选框属于相同的组。选项互斥。创建表单submit（提交按钮）：用来在点击时将数据发送出去处理。value属性值为按钮提供了文本。reset（重置按钮）：清除所有的文本域并且将所有其它的表单元素复位到相应的默认值。button（按钮）：定义了一个用于客户端编程的按钮。"value"给出了按钮的文本标签，"onclick"事件通常用于定义按钮被激活时所采取的行为。<inputtype=buttonvalue="ChangeCase"onClick=window.open…………">hidden（隐藏域）：允许我们在表单中包含数据，但又不向用户显示。这在跨越几个HTML文档的表单应用中特别有用。用户的输入可以被隐藏<input>从一个表单送到另一个表单。注：域的隐藏是指它不在浏览器中显示出来，但是任何人还是可以通过查阅HTML文档的源文件来找到隐藏域的。块级元素的使用DIV：定义了一个通用块级容器，使作者能够为块的内容提供样式或语言的信息。SPAN：在段和行内元素中，文本级的<SPAN>就相当于<DIV>。块级元素的使用address：为文档提供联系信息。包括文档维护者的名字、连向该维护者主页的链接、E-mail地址、通信地址和电话号码等。所有这些信息都将使用户可以方便地与文档维护者联系。块级元素的使用应用中划线<strike>：标记插入和删除文字<ins>标记用于在原文中插入文字。<del>标记用于在原文中删除文字。块级元素的使用

pre（预排版）的使用浏览器遇到HTML中几个连续的空格字符，会删去其它空格而只保留一个空格的位置。使用<pre>可维持键入的空格数。包含在pre标记中的字符会按照HTML源码的格式输出到浏览器上。组件的使用JavaApplet的使用语法：<appletcode=""></applet>Marquee的使用语法：<marquee>xx</marquee>效果：xx会从屏幕一边跑到另外一边。组件的使用Embed的使用

人人文库> 全部分类> 行业资料 > 管理策划

温馨提示

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

最新文档

评论

0/150

提交评论