人机交互原理及应用第二次实验报告
引言
网页是构成网站的基本元素，是承载各种网站应用的平台。在因特网的早起，受限于网络速度和电脑性能，人们上网时仅能浏览简单的带有少量图片的超文本网页。随着光纤网络，计算机图形学的发展，网站慢慢地发沉正我们现在看到的图文并茂的样子，通过动态网页技术，用户也可以与其他用户或者网络管理者进行交流，也有一些网站提供电子邮件服务或在线交流服务。
网页已经成为人们网路生活中必不可少的一部分。网页发展到今天，既有其简单易用的一面，也有其拓展丰富变化多样的一面。学习网页的基础语言HTML也是学习人际交互的重要内容。本次实验使用的工具为WebStorm。利用WebStorm制作厦门大学主页。
过程
第一步：网页的基本设置
网页基础
HTML 指的是超文本标记语言，而不是一种编程语言。在还没开始网页之前，我们需要用了解一些基础的tag。HTML是利用tag对页面文字进行编辑。"<"和">"之间的文字会被识别为“标签”，用于对其他文字进行操作。
<!DOCTYPE html>：告诉浏览器这是一个“HTML”文件。
<html">：标记HTML的开始。lang是tag的属性，用于设置html的语言。"lang"是language的缩写。
<head></head>：为html文档设定头部。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。搜索引擎也可通过头部进行检索。
<meta>：设定文档的语言。
<title>：设定网页标题。
<body>：标记html的部分
注：（1）大部分tag一般会有有一个</>进行结尾，但是也有部分tag不需要。
（2）在标签内可以使用各种属性对标签属性进行自定义。
第二步：编辑文字内容
文字一般是一个网页的主要内容，html也提供了多种tag对文字进行编辑。
利用<h1>-<h6>tag我们设定这部分文字是一个标题，浏览器可能根据这些对文字进行强调。我用background-color设定文字背景为蓝色，用font color设定字体颜色为白色。这部分一般建议是用在css中设定，但是我们只是为了学习html，先暂时使用。
在html中我们通过<p></p>来定义段落，告诉浏览器这是一段文字（paragraph）浏览器便根据自身特性来展示。对于大段文字这是一种很常用的标签。style里面有很多标签。这里我用line-height设置两倍行间距。
<a></a>标记的文字说明该部分是一个链接，可以跳转到其他部分。标签内href=则是你想要跳转的部分，我在这里设定“#”为空。
编辑文字
文字效果
注：html文件在编辑的时候回自动跳过空白符和换行符，想要在文字上描述则需要使用&emsp和
才能识别。
第三步：添加图像
只有文字网页显得单调，添加图像能够使网页变得更加美观。现代一个好看的网页几乎都要利用图片进行点缀。接下来我们为网页添加一个图片。
利用<img>为网页添加图片。请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。height和width是指图片的长和宽。
使用图片
图片效果
第四步：增加网页功能
fieldset 元素可将表单内的相关元素分组。
<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。我们利用fieldset来展现一个新闻版块。legend标签显示为整个fieldset的标题。
fieldset
fieldset效果
利用表格也能够促进读者阅读。我们用表格来放置近期活动。<tr>表示一行，<td>表示一列。这是一个两行五列的表格。
table
table效果
第五步：编辑页脚
<footer> 元素应当含有其包含元素的信息。
footer
footer效果
结果
厦门大学主页
总结
html是一种标记语言，学习html并不难，将HTML的各种标签多翻阅几遍就可以算作入门。但是让网页变得更好看则需要更多的设计。
人机交互是在机器单调代码和人的整体美学感受之间进行设计。这样的过程需要投入大量的心思设计，也需要我们在日常生活中培养美学感受。
网友评论