HTML实验报告.docx
武夷学院实验报告课程名称：电子商务网站设计与开发项目名称：基于HTML的网页设计一、实验预习部分：（一）实验原理：HTML：HTML是HypertextMarkupLanguage的缩写，即超文本标记语言。HTML是一种用来制作超文本文档的简单标记语言，其包含各类命令，这些命令用于说明并组织网页上的文字、图形、动画、声音、表格、链接等。一个结构完整的HTML文档就是一个网页，而一个HTML文档就是由一系列HTML命令构成。通常，把HTML命令称为HTML标签（HTMLtag）。HTML标签：HTML标签是构成网页的最基本和最重要的元素，其主要用于控制网页的内容格式和样式。标签是由两个尖括号和包围的关键词。HTML属性：在HTML标签中可以通过设置属性来改变页面内容显示的效果，其格式为属性="值”，若有多个属性，则各属性之间用空格进行分隔，属性之间无先后顺序。单标签中可以直接添加属性，如Vimgwidth="80”/,双标签中的属性设置必须放置在开始标签中，如fontcoIOr="red”face="黑体”设置字体及颜色font0HTML文本：网页中的信息主要通过文本内容（同时辅助适当的图片和多媒体）进行传递，所以文本内容显示的效果是决定网页成功与否的关键。合理地使用文本元素和相关属性，可以大大提高页面内容的可阅读性，使页面更具亲和力。HTML图像：插入图片到网页插入图片的标签是单标签img,通过src属性的值确定所插入图片的路径。从技术上讲，img标签并不会在网页中插入图像，而是从网页上链接图像。img标签创建的是被引用图像的占位空间。HTML超链接：超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当把鼠标指针移动到网页中的某个链接上时，通常情况下箭头会变为一只小手。通过使用a标签在HTML中创建链接。有两种使用a标签的方式：通过使用href属性-创建指向另一个文档的链接通过使用name属性创建文档内的书签HTML表格：表格由table标签来定义。每个表格均有若干行（由tr标签定义），每行被分割为若干单元格（由td标签定义）。字母td指表格数据（tabledata）,即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。二、实验过程记录部分：1、了解HTML文档结构：用记事本编写HTML文档（1）启动记事本。（2）用记事本编写如下HTML代码。<html><head><title>我的第一个网页<title><head><body><111>标题<小1><p>第一段文字vp>vp>第二段文字vp><body><html>（3）将文件另存为l-l.htm。保存HTML文件时，可以选择文件扩展名为.htm或者是.html,其含义是一样的。（4）在浏览器中运行HTML文档。双击I-Lhtm文件，默认的浏览器将启动并显示HTML文档运行结果2、HTML基本标签、属性设置的编码方法：示例<html><head>（头部部分）<metahttp-equiv=wContent-Type,content="text/html”;CharSet=gb2312>（设置文字格式）<title>显示在浏览器标题栏中的标题<title><head><body>（主体部分）<center><111>欢迎光临</111><fbntsize=7color=red>旅管3班<font><center><body><html><html>与<html>标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。正如您所了解的那样，文档的头部由<head>标签定义，而主体由<body>标签定义。<head>标签用于定义文档的头部，它是所有头部元素的容器。<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。<title>元素是用来定义文档的标题。<body>元素定义文档的主体。body元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)<meta>元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。<metahttp-equiv="Content-Type”content=wtext/html,;CharSet=gb2312>和<fontsize=7color=red>是对属性的设置编码3、文本、图像、超链接、表格等基本元素的设计方法：文本设计换行vbr>居中对齐<center>原样显示文字<pre>段落<p>水平分割线<hr>字体设置<fontface="隶书"SiZe="+3"color="green,>图像设计插入图片到网页<imgsrc="白猫黑猫.gif”/>设置图片的高度和宽度<imgsrc="abc.gif"width="100"height="100”>给图片添加提示文字<imgsrc="白猫黑猫.gif”title="邓小平说的”>给图片添加替代文字<imgsrc="pic/白猫黑猫.gif"alt="邓小平说的是不管是黑猫还是白猫”/>超链接新的窗口打开链接<ahref="httpwww.w"target="_blank"x/a>锚定义锚：<aname="anl”>跳到这里<a>跳转到锚：<ahref="#anl”>跳到锚anl<a>用图片作为超链接：<ahref="链接地址"><imgsrc="a.jpg"><a>表格定义行<tr>定义表头单元格<th>定义单元格<td>实验操作成绩（百分制）实验指导教师签字：三、实验结果与讨论:根据实验过程可知HTML的基本结构分为3个部分：1、VHTML>.</HTML>文档标记，这个标记是全部文档内容的容器，VHTML>是开始标记，<HTML>是结束标记，它们分别是网页的第一个和最后一个标记，其他标记代码都位于这两个标记之间。2、<HEAD>.</HEAD>首部标记，首部标记VHEAD>.<HEAD>用于提供与Web页有关的各种信息。在首部标记中，可以使用VTlTLE>.</TTrLE>标记来指定网页的标题，VSTYLE>和vSTYLE>标记来定义CSS样式表，使用VSCRlPT>和<SCRIPT>标记来插入脚本，等等。3、VBODY>.</BoDY>正文标记，正文标记包含了文档的内容，文字、图像、动画、超链接以及其他HTML元素均位于该标记中。掌握基本标签、属性设置的编码方法：在HTML标签中可以通过设置属性来改变页面内容显示的效果，其格式为属性="值”，若有多个属性，则各属性之间用空格进行分隔，属性之间无先后顺序。单标签中可以直接添加属性，如VimgWidth="80”/>,双标签中的属性设置必须放置在开始标签中，11<fontcolor=,red,face="黑体”>设置字体及颜色<font>0按照属性的作用，可以大致将属性分为以下几类：表现属性：用来控制页面内容的表现效果，如高度、宽度、边框等。事件属性：用来添加行为，一般要结合JaVaSCriPt来实现，如OnmoUSeOver、OneIiCk等。标记属性：用来标记某个标签，如id、name等。级联样式属性：是指使用级联样式表，如style、CIaSS等。其他属性：指以上几类属性以外的属性，如type、VaIUe等。掌握文本、图像、超链接、表格等基本元素的设计方法:网页中的信息主要通过文本内容（同时辅助适当的图片和多媒体）进行传递，所以文本内容显示的效果是决定网页成功与否的关键。合理地使用文本元素和相关属性，可以大大提高页面内容的可阅读性，使页面更具亲和力。表格用于组织二维数据，其基本内容包括行和列（单元格）每一对table和table代表一个表格每一对tr和tr代表一行每一对td和td代表一个独立的单元格单元格就是填充数据的地方实际上，一个标准的表格应包括标题、表头组、表身组和表尾组。HTML使用超级链接与网络上的另一个文档相连。点击链接可以从一张页面跳转到另一张页面。几乎可以在所有的网页中找到链接。实验报告成绩（百分制）实验指导教师签字:
