HTML&CSS实验(2)

最新推荐文章于 2023-06-01 20:00:37 发布

Pseudo_Programmer

最新推荐文章于 2023-06-01 20:00:37 发布

阅读量1.3k

点赞数

分类专栏：移动web应用设计文章标签：移动web应用设计

本文链接：https://blog.csdn.net/Pseudo_Programmer/article/details/78519726

版权

移动web应用设计专栏收录该内容

9 篇文章 3 订阅

订阅专栏

【实验目的】

掌握HTML输入元素、框架和meta元素的使用方法。

【实验工具】

浏览器和编辑器。三种可选编辑方式：
（1）本地调试（记事本），如果要完成步骤4的提交任务，可以提交给外部链接：http://172.18.187.11:8080/lab/html2/edit.jsp
（2）在线调试：http://172.18.187.11:8080/lab/html2/index.jsp

【实验内容】

1、用框架（frameset和frame）实现下图（比例自己定，浏览器可能要设置为兼容模式）：

* 完成后用文件frame.html保存该网页并截屏浏览器(ctrl+alt+PrintScreen)。

运行后截屏浏览器如下：
这里写图片描述

源代码如下：

<!DOCTYPE  html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <base target="_blank">
    <title>框架</title>
</head>
<frameset cols="40%,30%,30%"> 

  <frameset rows="50%,50%">
    <frame src="http://www.sysu.edu.cn">
    <frame src="http://www.163.com/">
  </frameset>
    <frame src="http://www.sohu.com/">
    <frame src="http://www.sina.com.cn/">
</frameset>
</html>

2、在iframe实现下图iframe的高度和宽度自己定，用了一个具有4个单元格的table放置四个iframe ：
这里写图片描述
完成后用文件iframe.html保存该网页并截屏浏览器(ctrl+alt+PrintScreen)：

运行后截屏浏览器如下：

源代码如下：

<!DOCTYPE  html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <base target="_blank">
    <title>框架</title>
</head>
<body>
  <h1>Show a page with iframe</h1>
  <table border="1">
     <tr>
      <td>
        <iframe width="800" height="400" frameborder="1" scrolling="yes" src="http://www.sysu.edu.cn">
        </iframe>
      </td>

      <td>
        <iframe width="800" height="400" frameborder="1" scrolling="yes" src="http://www.sohu.com/">
        </iframe>
      </td>  
     </tr>
     <tr>
      <td>
        <iframe width="800" height="400" frameborder="1" scrolling="yes" src="http://www.163.com/">
        </iframe>
      </td>
      <td>
        <iframe width="800" height="400" frameborder="1" scrolling="yes" src="http://www.sina.com.cn/">
        </iframe>
      </td>  
     </tr>
  </table>
</body>
</html>

3、修改模板blog.html实现下面输入页面(尽量类似，包括选项和提示文字)：
* 不要使用placeholder属性
这里写图片描述
完成后把结果保存到blog.html，并截屏浏览器：

运行后截屏浏览器如下：

部分源代码如下：

 <form action="edit.jsp" method="post">
  <fieldset>
  <legend>修改博客</legend>  
  <br/><br/>
  <label for="title">标题：</label>
      <input id="title"  name="title" type="text" style="width:600px;height:30px"> 
   <br/><br/>
   <label for="keywords">关键字：</label>
      <input id="keywords" name="keywords" type="text" style="width:600px;height:30px">
   <br/><br/>
   布局：
      <input name="layout1" type="radio" value="layout1"><img src="code/layout1.jpg"/>
      <input name="layout2" type="radio" value="layout2"><img src="code/layout2.jpg"/>
      <input name="layout3" type="radio" value="layout2"><img src="code/layout3.jpg"/>
   <br/><br/>
   背景：
      <select name="background" > 
        <option value="bk1">背景1</option>
        <option value="bk2">背景2</option>
        <option value="bk3">背景3</option>
        <option value="bk4">背景4</option>
     </select> 
   <br/><br/>
   适合群体：
       <input name="group" type="checkbox" value="grp1"> 学前班
       <input name="group" type="checkbox" value="grp2"> 小学生
       <input name="group" type="checkbox" value="grp3"> 中学生
       <input name="group" type="checkbox" value="grp4"> 成年人
   <br/><br/>
      <label for="content">内容：</label>
         <textarea rows="6" cols="40" name="content" id="content" ></textarea>
   <br/><br/>
   <input name="save" type="submit" value="保存">
   <input name="exit" type="submit" value="退出">
   <button name="reset" type="reset"> 复位</button>
  </fieldset>
  </form>

4、输入内容并点击保存后，需要得到如下内容：
你提交的内容如下:
title:去扎龙湿地看丹顶鹤跳舞
keywords:黑龙江扎龙湿地丹顶鹤南麂土著旅
layout:layout3
background:bk4
group:[grp1, grp4]
content:扎龙湿地位于黑龙江齐齐哈尔市东南30公里处，总面积约21万公顷，为亚洲第一、世界第四，也是世界最大的芦苇湿地，是中国首个国家级自然保护区，主要保护丹顶鹤等珍禽及湿地生态系统。景区内湖泽密布，苇草丛生，是水禽等鸟类栖息繁衍的天然乐园。世界上现有鹤类15种，中国有9种，扎龙有6种；全世界丹顶鹤不足2000只，扎龙就有400多只。每年四五月或八九月，约有二三百种野生珍禽云集于此，遮天蔽地，蔚为壮观，是游览湿地的最佳季节。而过不了多久，丹顶鹤就要南迁去苏北盐城了。
save:保存

运行后截屏浏览器如下：

5、点击步骤4中的退出按钮，说明出现的结果与点击保存按钮有什么不同，原因是什么：
运行后截屏浏览器如下：

说明：点击保存save和点击退出exit只有最后一行的值不同。因为在编码中input值的name和value的值不同，但两者都是input的标签，会上传表单内的内容，因此只有最后一行不同。

点击复位按钮看现象，说明它的功能是什么：
运行后截屏浏览器如下：

说明：当点击复位按钮时，网页会恢复到初始位置，清空text和textare属性标签下输入的内容。

6、每个网页都是某种编码的文本文件（可以用记事本的“另存为”进行转换），常用的编码有ansi（中文windows下为gb2312）和utf-8。我们可以用meta元素提示浏览器网页采用了什么编码，请设计一个简单实验，让网页给出的提示(utf-8)与网页本文文件实际使用的编码(ansi)不一致时出现乱码，然后截屏浏览器：
运行后截屏浏览器如下：

得到上面结果时网页实际用的编码和提示浏览器使用的编码分别是什么？
说明：得到上面结果时网页实际用的编码是ANSI编码类型，但mate元素提示浏览器使用了UTF-8编码类型。

说明有哪些纠正方法可以看到正常的网页文字：
方法如下：
（1）在浏览器中，查看源码，在mate的charset属性中修改为ANSI正确的编码类型
（2）直接删去编码相关的语句，让浏览器自行识别。
（3）在浏览器设置中勾选对应的正确编码（如UTF-8）。
（4）部分网页可能针对某个浏览器编程，（可能）会出现乱码，修改浏览器兼容性设置可以纠正这一错误。
（5）有时候可能因为在html编码中style设置了字体（比如本次实验中就设置了“宋体”），但是浏览器没有这种字体，可能会出现乱码，下载对应的字体可以解决这种情况下的乱码问题。
* 有些浏览器会自动找到所用编码。

【完成情况】

是否完成了这些步骤？(√完成 ×未做或未完成)
1 [√ ] 2 [√ ] 3 [√ ] 4 [√ ] 5 [ √] 6 [√ ]

【实验体会】

（1）在完成修改blog.html步骤时，前两个输入部分可以使用textarea或者input的text类型，因为这里是单行输入，所以选择了input实现。由于Input中的text类型默认的宽度太短，无法实现样例中的等长样式，最后通过百度，才采取了内联元素style来实现：即：style=”width:600px;height:30px
（2）在实验过程中，由于有些输入需要进行换行操作，后来通过翻看ppt发现使用br元素可以成功实现。
（3）看起来一样的网页页面，可能是通过不同的方法实现的，在学习过程中应该不断地学习和积累。
（4）在实验过程中发现：frame元素只有遵循先列后行的规则网页才能正确的显示。