HTML实验报告.docx

《HTML实验报告.docx》由会员分享，可在线阅读，更多相关《HTML实验报告.docx（5页珍藏版）》请在课桌文档上搜索。

1、武夷学院实验报告课程名称：电子商务网站设计与开发项目名称：基于HTML的网页设计一、实验预习部分：（一）实验原理：HTML：HTML是HypertextMarkupLanguage的缩写，即超文本标记语言。HTML是一种用来制作超文本文档的简单标记语言，其包含各类命令，这些命令用于说明并组织网页上的文字、图形、动画、声音、表格、链接等。一个结构完整的HTML文档就是一个网页，而一个HTML文档就是由一系列HTML命令构成。通常，把HTML命令称为HTML标签（HTMLtag）。HTML标签：HTML标签是构成网页的最基本和最重要的元素，其主要用于控制网页的内容格式和样式。标签是由两个尖括号和包

2、围的关键词。HTML属性：在HTML标签中可以通过设置属性来改变页面内容显示的效果，其格式为属性=值”，若有多个属性，则各属性之间用空格进行分隔，属性之间无先后顺序。单标签中可以直接添加属性，如Vimgwidth=80”/,双标签中的属性设置必须放置在开始标签中，如fontcoIOr=red”face=黑体”设置字体及颜色font0HTML文本：网页中的信息主要通过文本内容（同时辅助适当的图片和多媒体）进行传递，所以文本内容显示的效果是决定网页成功与否的关键。合理地使用文本元素和相关属性，可以大大提高页面内容的可阅读性，使页面更具亲和力。HTML图像：插入图片到网页插入图片的标签是单标签img

3、,通过src属性的值确定所插入图片的路径。从技术上讲，img标签并不会在网页中插入图像，而是从网页上链接图像。img标签创建的是被引用图像的占位空间。HTML超链接：超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当把鼠标指针移动到网页中的某个链接上时，通常情况下箭头会变为一只小手。通过使用a标签在HTML中创建链接。有两种使用a标签的方式：通过使用href属性-创建指向另一个文档的链接通过使用name属性创建文档内的书签HTML表格：表格由table标签来定义。每个表格均有若干行（由tr标签定义），每行被分割为若干单元格（由

4、td标签定义）。字母td指表格数据（tabledata）,即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。二、实验过程记录部分：1、了解HTML文档结构：用记事本编写HTML文档（1）启动记事本。（2）用记事本编写如下HTML代码。我的第一个网页标题第一段文字vpvp第二段文字vp（3）将文件另存为l-l.htm。保存HTML文件时，可以选择文件扩展名为.htm或者是.html,其含义是一样的。（4）在浏览器中运行HTML文档。双击I-Lhtm文件，默认的浏览器将启动并显示HTML文档运行结果2、HTML基本标签、属性设置的编码方法：示例（头部部分）（设置

5、文字格式）显示在浏览器标题栏中的标题（主体部分）欢迎光临旅管3班与标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。正如您所了解的那样，文档的头部由标签定义，而主体由标签定义。标签用于定义文档的头部，它是所有头部元素的容器。中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。元素是用来定义文档的标题。元素定义文档的主体。body元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。和是对属性的设置编码3、文本、图像、超链接、表格等基本元素的设计方法：文

6、本设计换行vbr居中对齐原样显示文字段落水平分割线字体设置图像设计插入图片到网页设置图片的高度和宽度给图片添加提示文字给图片添加替代文字超链接新的窗口打开链接锚定义锚：跳到这里跳转到锚：跳到锚anl用图片作为超链接：表格定义行定义表头单元格定义单元格实验操作成绩（百分制）实验指导教师签字：三、实验结果与讨论:根据实验过程可知HTML的基本结构分为3个部分：1、VHTML.文档标记，这个标记是全部文档内容的容器，VHTML是开始标记，是结束标记，它们分别是网页的第一个和最后一个标记，其他标记代码都位于这两个标记之间。2、.首部标记，首部标记VHEAD.用于提供与Web页有关的各种信息。在首部标记

7、中，可以使用VTlTLE.标记来指定网页的标题，VSTYLE和vSTYLE标记来定义CSS样式表，使用VSCRlPT和标记来插入脚本，等等。3、VBODY.正文标记，正文标记包含了文档的内容，文字、图像、动画、超链接以及其他HTML元素均位于该标记中。掌握基本标签、属性设置的编码方法：在HTML标签中可以通过设置属性来改变页面内容显示的效果，其格式为属性=值”，若有多个属性，则各属性之间用空格进行分隔，属性之间无先后顺序。单标签中可以直接添加属性，如VimgWidth=80”/,双标签中的属性设置必须放置在开始标签中，11设置字体及颜色0按照属性的作用，可以大致将属性分为以下几类：表现属性：用

8、来控制页面内容的表现效果，如高度、宽度、边框等。事件属性：用来添加行为，一般要结合JaVaSCriPt来实现，如OnmoUSeOver、OneIiCk等。标记属性：用来标记某个标签，如id、name等。级联样式属性：是指使用级联样式表，如style、CIaSS等。其他属性：指以上几类属性以外的属性，如type、VaIUe等。掌握文本、图像、超链接、表格等基本元素的设计方法:网页中的信息主要通过文本内容（同时辅助适当的图片和多媒体）进行传递，所以文本内容显示的效果是决定网页成功与否的关键。合理地使用文本元素和相关属性，可以大大提高页面内容的可阅读性，使页面更具亲和力。表格用于组织二维数据，其基本内容包括行和列（单元格）每一对table和table代表一个表格每一对tr和tr代表一行每一对td和td代表一个独立的单元格单元格就是填充数据的地方实际上，一个标准的表格应包括标题、表头组、表身组和表尾组。HTML使用超级链接与网络上的另一个文档相连。点击链接可以从一张页面跳转到另一张页面。几乎可以在所有的网页中找到链接。实验报告成绩（百分制）实验指导教师签字: