HTML&CSS实验(2)---掌握HTML输入元素、框架和meta元素的使用方法
【实验题目】HTML&CSS实验(2)
【实验目的】掌握HTML输入元素、框架和meta元素的使用方法。
----------------------个人作业，如果有后辈的作业习题一致，可以参考学习，一起交流，请勿直接copy
本次实验的内容详细有关标签用法可以参考http://w3school.com.cn/来学习
因为代码内容较长，所以没有展示出来，想学习参考的同学可以评论留言，我会发送具体代码以供学习参考，或者找到自己喜欢的网页查看源码，可以方便快捷地提升自己的html水平，多浏览和学习优秀的网页，是提高自己应用能力和审美排版的绝好方法（但是请不要不带说明地全盘复制或直接商用）
····如果要完成步骤4的提交任务，可以提交给外部链接：http://172.18.187.11:8080/lab/html2/edit.jsp。
【实验内容】
1、用框架（frameset和frame）实现下图（比例自己定，浏览器可能要设置为兼容模式）：
完成后用文件frame.html保存该网页并截屏浏览器(ctrl+alt+PrintScreen)：
----------------------------------截图如下---------------------------------------
2、在iframe实现下图iframe的高度和宽度自己定，用了一个具有4个单元格的table放置四个iframe ：
完成后用文件iframe.html保存该网页并截屏浏览器(ctrl+alt+PrintScreen)：
----------------------------------截图如下---------------------------------------
（可能由于浏览器设置问题，这里的英文字体与样例不一致，或者也可以通过style来实现）
3、修改模板blog.html实现下面输入页面(尽量类似，包括选项和提示文字)：
* 不要使用placeholder属性
完成后把结果保存到blog.html，并截屏浏览器：
----------------------------------截图如下---------------------------------------
4、输入内容并点击保存后，需要得到如下内容：
你提交的内容如下:
title:去扎龙湿地看丹顶鹤跳舞
keywords:黑龙江 扎龙 湿地 丹顶鹤 南麂 土著 旅
layout:layout3
background:bk4
group:[grp1, grp4]
content:扎龙湿地位于黑龙江齐齐哈尔市东南30公里处，总面积约21万公顷，为亚洲第一、世界第四，也是世界最大的芦苇湿地，是中国首个国家级自然保护区，主要保护丹顶鹤等珍禽及湿地生态系统。景区内湖泽密布，苇草丛生，是水禽等鸟类栖息繁衍的天然乐园。世界上现有鹤类15种，中国有9种，扎龙有6种；全世界丹顶鹤不足2000只，扎龙就有400多只。 每年四五月或八九月，约有二三百种野生珍禽云集于此，遮天蔽地，蔚为壮观，是游览湿地的最佳季节。而过不了多久，丹顶鹤就要南迁去苏北盐城了。
save:保存
截屏当前浏览器：
5、点击步骤4中的退出按钮，说明出现的结果与点击保存按钮有什么不同，原因是什么：
l 不同处：保存----
退出----
只有最后一行的值不同；因为在编码中input值的name和value的值不同，且两者都是input的标签，会上传表单内的内容。
点击复位按钮看现象，说明它的功能是什么：
l 清空text和textare属性标签下输入的内容，返回至网页的初始状态。
6、每个网页都是某种编码的文本文件（可以用记事本的“另存为”进行转换），常用的编码有ansi（中文windows下为gb2312）和utf-8。我们可以用meta元素提示浏览器网页采用了什么编码，请设计一个简单实验，让网页给出的提示(utf-8)与网页本文文件实际使用的编码(ansi)不一致时出现乱码，然后截屏浏览器：
得到上面结果时网页实际用的编码和提示浏览器使用的编码分别是什么？
-------- 实际使用了ANSI编码，但是mate提醒浏览器使用了UTF-8编码
说明有哪些纠正方法可以看到正常的网页文字：
----在浏览器中，查看源码，在mate的charset属性中修改为正确的编码类型
----直接删去编码相关的语句，浏览器自行识别
----在浏览器设置中勾选对应的正确编码（如UTF-8）
----部分网页可能针对某个浏览器编程，（可能）会出现乱码，修改浏览器兼容性设置可以纠正这一错误
----有时候可能因为在html编码中style设置了字体（比如本次实验中就设置了“宋体”），但是浏览器没有这种字体，可能会出现乱码，下载对应的字体可以解决这种情况下的乱码问题
* 有些浏览器会自动找到所用编码。
【完成情况】
是否完成了这些步骤？(√完成 ×未做或未完成)
1 [√ ] 2 [√ ] 3 [√ ] 4 [√ ] 5 [√ ] 6 [√ ]
【实验体会】
写出实验过程中遇到的问题，解决方法和自己的思考;并简述实验体会（如果有的话）。
前两个输入部分可以使用textarea或者input的text类型，因为这里是单行输入，所以选择了input实现。Input中的text类型默认的宽度太短，无法实现样例中的等长样式，尝试了使用“width”属性，提示HTML5中不支持，使用“size”属性是可行可支持的。但是考虑到使用size属性“可能”会影响到text内容的输入提交长度，采取了内联style来实现：style="width:680px"。
这次实验基本尝试了form表单的各种标签和属性，自己在W3C上查找的时候，也发现了很多标签属性的用法，虽然现在在实验过程中还没有使用，也只做过几行的测试，希望今后能够在比较大的编程实现中灵活应用这些标签属性。
在设计页面展示的过程中，自己想了各种办法，但是通过已学的内容和自己能找到的标签找不到能够实现样例那样的边框嵌入文字的表现形式，自己通过能找到的一些style和属性修改，马马虎虎做出了如下的一个比较简单的框线展示，调整了字体和文字大小，边框类型（测试为chrome浏览器）
(此后 发现：<legend>标签可以实现这一功能【组合表单中的相关元素】（仅用于表单<form>）)
