高级网络编程题——Worksheet 2: HTML

kkkk要努力呀

已于 2022-11-24 20:23:17 修改

阅读量222

点赞数

文章标签： html javascript 前端

于 2022-11-24 20:00:39 首次发布

本文链接：https://blog.csdn.net/qq_59100666/article/details/128021025

版权

Exercise1 ：将如下代码保存为.html文件，并在浏览器中打开它

<html> 
 <head> 
 <title>names and value</title> 
 </head> 
 <body> 
 <form> 
 <INPUT type="text" name="yourFname">Enter Your First Name<br> 
 <INPUT type="text" name="yourLname" value="Enter Your Last Name"><br> 
 <INPUT type="text" name="give your age" value="Enter Your Age"> 
 What is your age? 
 </form> 
 </body> 
<html>

运行结果如图：

Question 1： What is the difference between the three text boxes? Make sure you understand the difference between the name attribute, the value attribute and what is written outside the tag.（这三个文本框之间的区别是什么？确保您理解名称属性、值属性和在标记外部写入的内容之间的区别。）

solution:（如图）

The three text boxes are named "yourFname", "yourLname" and "give your age" respectively In the<input>tag, when the type is "text", the value of the value attribute represents the initial value displayed in the input box. Therefore, the first text box does not display content, and the second and third text boxes display corresponding values. Because the third text box lacks a<br>label, "What is your age?" No line breaks in browser

三个文本框分别被命名为“yourFname”、“yourLname”、“give your age”.在<input>标签中，当type为“text”时，value属性的值表示的是输入框中显示的初始值，因此第一个文本框不显示内容，第二第三个文本框分别显示对应的value。由于第三个文本框缺少<br>标签，所以“What is your age?”在浏览器中不会换行

Question 2： What happens if you change this tag <body> to <body bgcolor=ccffcc> ?

solution：The browser's background becomes the color of the "ccffcc"

Question 3： What happens if you add this tag after the body tag: <font face=arial> ?

(对比一下，左边为更改后的字体，右边为原先字体）

solution：The font becomes a "arial" font.

Question 4: What happens if you delete a <br> tag?

solution : After removing the newlines <br>, the content will not be output on the next row

Question 5： What happens if you add this before the first text box: <h2>Please add information</h2> ?

solution：The header "Please add information" will be output in front of the text box

Question 6: What happens if you do NOT include the closing tag i.e. </h2> ?

solution:The following content is marked as the header output.

Exercise 2: radio buttons

Save this into a notepad file with .html extension then open it in a browser:

<html>

<head>
    <title>names and value</title>
</head>

<body>
    <form>
        Choose one food type:<br>
        <input type=radio name=food value=pz>pizza<br>
        <input type=radio name=food value=ps>pasta<br>
        <input type=radio name=food value=bread> <br>
        <input type=radio name=food value=sl>salad<br>
    </form>
</body>
<html>

运行结果：

Question 1： Does the page display what is written in the value attribute (e.g. pz) or what is written after the tag (e.g. pizza)?

solution：The attribute value pz is not displayed, but what is written after the label is displayed.

Question 2: Can a user select more than one food type?

solution:NO

Question 3: Change the name of the last radio button (i.e. the one for the salad), from name=food to name=morefood. Can the user now select more than one food type (e.g. salad and pasta)?

solution:yes!(只改了最后一个radio button，所以只有salad可以成为多选，而其他的不能成为多选的选项，意思是，pizza、pasta、“空内容”无法同时选择其中两个）

Exercise 3: Drop down List/Box Save this into a notepad file with .html extension then open it in a browser:

<html>

<head>
    <title>names and value</title>
</head>

<body>
    <form>
        <select name=living>
            <option value=house>house
            <option value=flat>flat
            <option value=bungalow>bung
        </select>
    </form>
</body>
<html>

运行结果如图：

Question 1: Does the list show the word bungalow or bung?

solution:it show the word bung

Question 2: In Internet Explorer (IE), add a space followed by the word selected after bungalow. Save the file and refresh the browser. What has changed? [Note that this does not work in Mozilla Firefox.]

solution:没啥变化.....因为option会过滤掉空格（所以，如果想要实现空格效果，只能填充   这种空格，但是  受不同浏览器的字体影响较大，可以用&ensp; 空格代替）

如图：bung前面出现了空格