网页设计与实践HTML

专题小论文题目网页设计与制作实践介绍——HTML院别__________________________专业电子商务年级_________________________学生_________________________学号__________________________指导教师间的文字受其控制下面请看常用逻辑标签的实例htmlhead1；五16字体的逻辑类型/宜1；10/headbodypreem标签em用于强调的文本，一般显示为斜体字〈/emstrong标签〈strong》用于特别强调的文本，显示为粗体字/strongcite标签cite用于引证和举例，通常是斜体字/citecode标签code用来指出这是一组代码〈/code〉small标签〈small》规定文本以小号字显示/smallbig标签〈big〉规定文本以大号字显示/bigsamp标签〈samp显示一段计算机常用的字体，即宽度相等的字体/sampkbd标签:〈kbd由用户输入文本，通常显示为较粗的宽体字/kbd var标签var用来表示变量，通常显示为斜体字〈/var〉dfn标签dfn表示一个定义或说明，通常显示为斜体字/dfn sup标签12sup2/sup=144sub标签硫酸亚铁的分子式是Fesub2/subS0sub4/sub/pre/body

九、小结本文主要介绍了HTML的基本语法规则，以及HTML的部分常用控制标记这些知识是网页开发人员应当掌握的基本知识，如果只是单纯的依赖于所见即所得的网页开发工具来进行网页制作，那就还算不上真正的页面编辑专家，因为所见即所得的页面开发工具还不是很完善，仍然需要人的参与才能发挥出它的优势当然，耍成为一名真正的专业网页开发专家，还需要有良好的创意和审美观，这样才能够做出优秀的页面但是，我们在日常的网页创作中仅使用HTML来进行页面开发是不够的，这会使我们常常受到限制参考文献《网页制作》人民邮电出版社，2001年10月张长富，李匀著，《信息技术》江苏科学技术出版社，2001年〈1〉乔春源，樊天岳等《网页设计与Web数据库发布技术》清华大学出版社魏应彬著二一五年十二月HTML摘要进入二十一世纪，互联网进一步普及，人们的网络生活进一步丰富，网络已经成为人们之间沟通交流的另一种方式网页设计作为用户界面交互设计的延伸，是在新的媒体和新的技术支持实现一个全新的设计创作领域设计创作网页与循环其特有的特点和结构思路，具备可实际行和外观时尚网页分为静态网页和动态网页两种静态页面是网页的代码都在页面中，不需要执行asp,php,jsp,.net等程序生成客户端网页代码的网页静态页面不能自主管理发布更新的页常见的静态页面以.html、.htm为扩展名的动态网页是最常用的网站建设的一种表达形式，其优点在于可以根据先前所制定好的程序界面，根据用户的不同请求返回相应的数据首先是基于静态网页的html超文本标记语言，本论文将对网页设计的开发语言开展研究和讨论在网页设计与制作语言的基础上,着重使用HTML作为工具语言进行网页设计与制作的实际操作关键词网页设计；制作；HTML；目录

一、HTML概述HTML的英语意思是HypertextMarkedLanguage,即超文本标记语言，是一种用来制作超文本文档的简单标记语言超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作.HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准.用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，自1990年以来HTML就一直被用作WWW（是WorldWideWeb的缩写，也可简写WEB、中文叫做万维网）的信息表示语言，使用HTML语言描述的文件，需要通过WEB浏览器显示出效果所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单HTML的普遍应用就是带来了超文本的技术一一通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面与世界各地主机的文件链接直接获取相关的主题如下所示通过HTML可以表现出丰富多彩的设计风格图片调用＜IMGSRC=〃文件名〃》文字格式＜F0NTSIZE=〃+5〃C0L0R=〃#00FFFF〃＞文字＜/F0NT＞通过HTML可以实现页面之间的跳转页面跳转〈AHREF=〃文件路径/文件名〃X/A＞通过HTML可以展现多媒体的效果声频（EMBEDSRC=〃音乐地址〃AUTOSTART=true＞视频＜EMBEDSRC=〃视频地址“AUTOSTART=true〉从上面我们可以看到HTML超文本文件时需要用到的一些标签在HTML中每个用来当作标签的符号都是一条命令、它告诉浏览器如何显示文本这些标签均由〃〈〃和〃＞〃符号以及一个字符串组成而浏览器的功能是对这些标记进行解释，显示出文字、图像、动画、播放声音这些标签符号用“＜标签名字属性》”来表示HTML只是一个纯文本文件创建一个HTML文档，只需要两个工具，一个是HTML编辑器，一个WEB浏览器HTML编辑器是用于生成和保存THML文档的应用程序WEB浏览器是用来打开WEB网页文件，提供给我们查看WEB资源的客户端程序

二、HTML基本结构一个HTML文档是由一系列的元素和标签组成.元素名不区分大小写.HTML用标签来规定元素的属性和它在文件中的位置，HTML超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息下面是一个最基本的html文档的代码1—

1.htmlHTML-------------------------------------------------------------开始标签HEAD----------------------------------------------------------1头部标签〈TITLE〉一个简单的HTML示例〈/TITLE〉/HEAD---------------------------------------------------------BODY-------------------------------------------------------------1文件主体CENTER|〈Hl欢迎光临我的主页/Hl〉|BRHRF0NTSIZE=7C0L0R=red|这是我第一次做主页I/FONT|/CENTER|/BODY------------------------------------------------------------/HTML------------------------------------------------------------结尾标签HTMLX/HTML》在文档的最外层，文档中的所有文本和html标签都包含在其中，它表示该文档是以超文本标识语言HTML编写的事实上，现在常用的Web浏览器都可以自动识别HTML文档，并不要求有标签,也不对该标签进行任何操作，但是为了使HTML文档能够适应不断变化的Web浏览器，还是应该养成不省略这对标签的良好习惯〈HEADX/HEAD》是HTML文档的头部标签，在浏览器窗口中，头部信息是不被显示在正文中的,在此标签中可以插入其它标记,用以说明文件的标题和整个文件的一些公共属性若不需头部信息则可省略此标记，良好的习惯是不省略〈title〉和〈/title》是嵌套在〈HEAD》头部标签中的，标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏BODYX/BODY标记一般不省略，标签之间的文本是正文，是在浏览器要显示的页面内容上面的这几对标签在文档中都是唯一的，HEAD标签和BODY标签是嵌套在HTML标签中的

三、HTML的标签及属性对于刚刚接触超文本的朋友，遇到的最大的障碍就是一些用和“”括起来的句子，我们称它为标签，是用来分割和标签文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面标签通过指定某块信息为段落或标题等来标识文档某个部件属性是标志里的参数的选项，HTML的标签分单标签和成对标签两种成对标签是由首标签〈标签名》和尾标签〈/标签名》组成的，成对标签的作用域只作用于这对标签中的文档单独标签的格式〈标签名》，单独标签在相应的位置插入元素就可以了，大多数标签都有自己的一些属性,属性要写在始标签内，属性用于进一步改变显示的效果，各属性之间无先后次序，属性是可选的，属性也可以省略而采用默认值;其格式如下〈标签名字属性1属性2属性3…〉内容〈/标签名字〉作为一般的原则，大多数属性值不用加双引号但是包括空格、％号，#号等特殊字符的属性值必须加入双引号为了好的习惯，提倡全部对属性值加双引号如£0118010片“#££00£/£2©6=宋体$126=30”〉字体设置/font注意事项输入始标签时，一定不要在“〈”与标签名之间输入多余的空格，也不能在中文输入法状态下输入这些标签及属性，否则浏览器将不能正确I、HTML颜色的设定U!的识别括号中的标志命令，从而无法正确的显示你的信息颜色值是一个关键字或一个RGB格式的数字在网页中用得很多，在此就先介绍一下颜色是由red”greenblue三原色组合而成的，在HTML中对颜色的定义是用十六进位的，对於三原色HTML分别给予两个十六进位去定义，也就是每个原色可有256种彩度，故此三原色可混合成16777216种颜色例如白色的组成是red=ff,green=ff,blue=ff,RGB值即为ffffff红色的组成是red=ff,green=OO,blue=OO,RGB值即为ffOOOO绿色的组成是red=00,green=ff,blue=00,RGB值即为OOffOO蓝色的组成是red=00,green=00,blue=ff,RGB值即为OOOOff黑色的组成是red=00,green=00,blue=00,RGB值即为000000

五、HTML的格式和样式HTML定义了一些文本格式的Tag,比如利用Tag,可以将字体变成粗体或者斜体从下面的示例，你可以了解各种文本格式Tag如何改变HTML文本的显示明Tagv b^

3.^^bold斜体italic文字当中划线表示删除v delay insa文字下划线表示插入c subA下标v supa上标c blockquotea ypre缩迸表示弓用Ia保留空格和换行y codea表示计尊机代同,等宽字体HTML样式style属性的作用提供了一种改变所有HTML元素的样式的通用方法样式是HTML4引入的，它是一种新的首选的改变HTML元素样式的方式通过HTML样式，能够通过使用style属性直接将样式添加到HTML元素，或者间接地在独立的样式表中（CSS文件）进行定义

六、HTML表单表单是一个包含表单元素的区域表单元素是允许用户在表单中比如文本域、下拉列表、单选框、复选框等等输入信息的元素表单使用表单标签＜form＞定义

七、HTML列表无序列表是一个项目的列表，此列项目使用粗体圆点典型的小黑圆圈进行标记无序列表始于〈Ul＞标签每个列表项始于Qi＞有序列表同样，有序列表也是一列项目，列表项目使用数字进行标记有序列表始于＜1＞标签每个列表项始于Gi＞标签Fram＜html＞＜frameset cols=25%,50%,25%〃＞＜frame src=//../asdocs/html_tutorials/Frame_a.html〃〉＜frame src=〃/asdocs/html_tutorials/Frame_b.html〃＞・・＜frame src=〃/asdocs/html_tutorials/Frame_c.・・＜/frameset＞＜/html＞

八、特定文字样式标签在有关文字的显示中，常常会使用一些特殊的字形或字体来强调、突出、区别以达到提示的效果在html中用于这种功能的标签可以分为两类，物理类型和逻辑类型

1、物理类型1粗体标签＜b＞放在＜b＞与＜/b＞标签之间的文字将以粗体方式显示2斜体标签＜i＞放在＜i＞与/i＞标签之间的文字将以斜体方式显示3下划线标签＜u＞放在〈u＞与＜/u＞标签之间的文字将以下划线方式显示

2、逻辑类型逻辑类型是使用一些标签来改变字体的形态和式样，以便产生一些浏览者习惯的或约定的显示效果，常用的逻辑类型标签有八种，放在标签之。