分题型基础补全计划（一）—— HTML 篇

URL 样式

题型：使用 http://localhost:8080/web01/test.jsp?user=admin&password=admin 进行访问 WEB 应用时候，下列说法哪个是错误的：( )

A. 表示访问的 web 应用的主机名是 localhost，服务端口是 8080 端口
B. URL 地址中包含了两个参数 user 与 password
C. 使用 HTTP 协议进行访问
D. 使用 POST 请求方法

我的答案: D

Get 方法：查询键值对被附加在 URL 地址后面一起发送到服务器，如：

1	scheme://login:password@address:port/path_to_resource?query_string#fragment

Post 方法：发送给服务器端的数据保存在信息的 body 中

1	http://localhost:8090/api/query?id=3

HTTP 报文头

题型：(单选题) 在 HTTP 请求报文中，发送给服务器的消息主体的媒体类型保存在（）中。

A. Accept
B. Accept-Language
C. User-Agent
D. Content-Type

我的答案: D

Http 报头分为：通用报头请求报头响应报头实体报头

Accept 属于请求头，代表发送端（客户端）希望接受的数据类型
Content-Type 属于实体头，代表发送端（客户端 | 服务器）发送的实体数据的数据类型

1 2	Accept:text/xml； Content-Type:text/html

背景颜色与背景图像（body）

题型 1：在下列的 HTML 中，哪个可以添加背景颜色？

A <body color="yellow">
B <background>yellow</background>
C <body bgcolor="yellow">
D <body background="yellow">

我的答案: C

设置背景颜色

1	<body bgcolor="sample_color"></body>

题型 2：在下列的 HTML 中，哪个可以插入背景图像？

A <body background="background.gif">
B <background img="background.gif">
C <img src="background.gif" background>
D <img src="background.gif" body>

我的答案: A

设置背景图像

1	<body background="sample.png"></body>

超链接的使用（a）

题型 1：如何制作电子邮件链接？

A <a href="xxx@yyy">
B <mail href="xxx@yyy">
C <a href="mailto:xxx@yyy">
D <mail>xxx@yyy</mail>

我的答案: C

使用超链接制作电子邮件链接

1	<a href="mailto:sample@qq.com">

题型 2：如何在新窗口打开链接？

A <a href="url" new>
B <a href="url" target=" _blank" >
C <a href="url" target="new">
D <a href="url" >

我的答案: B

在新窗口打开链接

1	<a href="sample-url" target=" _blank" >

题型 3：要将页面的当前位置定义成名为 "vbpos" 和锚，其定义方法正确的是

A <a href=:vbpos"></a>
B <a href="#vbpos">vbpos</a>
C <a name=vbpos>
D <a name="vbpos"></a>

我的答案: D

*name 参数：用于指定锚（anchor）的名称

注：在 HTML5 中，其效果等同于 id；为了与之前版本网页页面的兼容性，此参数保留了下来；可以把 id 属性视作是 name 属性的升级版本

<a href="#C1">第一章</a>
<a href="#C2">第二章</a>
<a id="#C3">第三章</a>
<a id="#C4">第四章</a>

呈现效果：

第一章第二章第三章第四章

列表标签的使用

题型 1：如何产生带有数字列表符号的列表？

A <ul>
B <dl>
C <ol>
D <list>

我的答案: C

有序列表（ol-li）

<ol>
    <!-- 呈现：
	1. sample_line1
    2. sample_line2
    3. sample_line3 
	-->
    <li>sample_line1</li>
    <li>sample_line2</li>
    <li>sample_line3</li>
</ol>

type 参数：1、a、A、i、I (罗马数字)，表示列表前缀的格式
start 参数：属性值位数字，表示从 type 类型的第几个数字开始

<ol type="A" start="3">
    <!-- 呈现：
	C. sample_line1
    D. sample_line2
    E. sample_line3 
	-->
    <li>sample_line1</li>
    <li>sample_line2</li>
    <li>sample_line3</li>
</ol>

题型 2：如何产生带有圆点列表符号的列表？

A <dl>
B <list>
C <ol>
D <ul>

我的答案: D

无序列表（ul-li）

<ul>
    <!-- 呈现效果：
	· sample_line1
    · sample_line2
    · sample_line3 
	-->
    <li>sample_line1</li>
    <li>sample_line2</li>
    <li>sample_line3</li>
</ul>

type 参数：属性值有 disc（实心圆默认）、circle（空心圆）、square（实心正方形）、none（取消前缀）

<ul type="none">
    <!-- 呈现效果：
	sample_line1
    sample_line2
    sample_line3 
	-->
    <li>sample_line1</li>
    <li>sample_line2</li>
    <li>sample_line3</li>
</ul>

自定义列表 *（dl-dt-dd）**

<h4>~哇咔咔，我是可有可无的标题~</h4>
<dl>
    <dt>一级boss1</dt>
    	<dd>二级喽喽1-1</dd>
    	<dd>二级喽喽1-2</dd>
    <dt>一级boss2</dt>
    	<dd>二级喽喽2-1</dd>
    	<dd>二级喽喽2-2</dd>
</dl>

呈现效果：

~ 哇咔咔，我是可有可无的标题～

一级 boss1: 二级喽喽 1-1; 二级喽喽 1-2
一级 boss2: 二级喽喽 2-1; 二级喽喽 2-2

需要注意，在自定义列表中，dt 与 dd 在呈现效果上有一个缩进（tab）的效果。其余两种类型的列表，需要使用 <list> 嵌套完成。
区别简析：自定义列表相比之下，有缩进、无前缀

文本区与字体标签的使用

题型 1：在下列的 HTML 中，哪个可以产生文本区（textarea）

A <textarea>
B <input type="textarea">
C <input type="textbox">
D <input type="text">

我的答案: A

文本区（textarea）

用于定义多行输入

1
2
3

<textarea rows="2" cols="25">
在Hyperの个人博客，交流技术、分享生活。
</textarea>

呈现效果：

题型 2：若要以加粗宋体、12 号字显示 “vbscript” 以下用法中，正确的是

A <b><font size=12>vbscript</b></font>
B <b><font face="宋体" size=12>vbscript</font></b>
C <b><font size=“宋体”size=12>vbscript</b></font>
D <b><font size="宋体" fontsize=12>vbscript</b></font>

我的答案: B

字体标签（font）

规定采用字体的类型、大小、颜色等
- face 参数：采用什么字体
- color 参数
- size 参数：指定大小（默认 3），注意只能为 1~7 中的整数值

1	<font face="verdana" color="red" size=4>sample text</font>

呈现效果：

表格与表单的使用

题型 1：要使表格的边框不显示，应设置 border 的值是

A 1
B 0
C 2
D -1

我的答案: B

表格标签（table）

border 参数：规定围绕表格的边框的宽度

<table border="3">
  <tr>
    <th>Level1</th>
    <th>Level2</th>
  </tr>
  <tr>
    <td>小boss</td>
    <td>大boss</td>
  </tr>
</table>

呈现效果：

Level1	Level2
小 boss	大 boss

题型 2：如果要表单提交信息不以附件的形式发送，只要将表单的 “MTME 类型” 设置为

A text/plain
B password
C submit
D button

我的答案: A，本题中 MTME 类型意义不明（没有查到具体是什么定义），暂且认为指的是传输的数据格式

表单标签（form）

表单标签用于收集用户输入
- input 参数：text（纯文本） radio（单选按钮输入） submit（提交按钮）
- action 参数：定义在提交表单时执行的动作，一般为提交目标网页
- method 参数：post 或 get
- name 参数：为输入字段设置名称

<form action="sample_action_page.php" method="GET">
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
<br>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
<br>
<input type="submit" value="Submit">
</form>

呈现效果：

内嵌标签与隐藏域的使用

题型 1：在网页中若要播放名为 demo.avi 的动画，以下用法中，正确的是

A <Embed src="demo.avi" autostart=true>
B <Embed src="demo.avi" autoopen=true>
C <Embed src="demo.avi" autoopen=true></Embed>
D <Embed src="demo.avi" autostart=true></Embed>

我的答案: A，应为 D

内嵌标签（embed）

定义嵌入的插件

1	<Embed src="sample_video.mp4" />

题型 2：在 HTML 中，要创建一个隐藏域，则应设置 <input> 标签的 type 属性为

A text
B div
C hidden
D adio

我的答案: C

隐藏域

对用户不可见，其目的主要有：收集或发送信息、确认用户身份（sessionkey）、在表单具有多个提交按钮时，使用隐藏域予以区分、多表单虽不能同时提交，但可利用隐藏域将其联系起来、存放全局变量（供 js 使用）等，可见 html 中隐藏域 hidden 的作用介绍及使用示例_HTML/Xhtml_网页制作_脚本之家 (jb51.net)

<!-- 基本语法 -->
<input type="hidden" name="field＿name" value="value">
<!-- 示例 -->
<p hidden>我会隐身哦</p>

呈现效果（看不见喔）：

URL 样式

Get 方法：查询键值对被附加在 URL 地址后面一起发送到服务器，如：

Post 方法：发送给服务器端的数据保存在信息的 body 中

HTTP 报文头

Http 报头分为：通用报头 请求报头 响应报头 实体报头

背景颜色与背景图像 **（body）**

设置背景颜色

设置背景图像

超链接的使用 **（a）**

使用超链接制作电子邮件链接

在新窗口打开链接

*name 参数：用于指定锚（anchor）的名称

列表标签的使用

有序列表 **（ol-li）**

无序列表 **（ul-li）**

自定义列表 *（dl-dt-dd）**

~ 哇咔咔，我是可有可无的标题～

文本区与字体标签的使用

文本区 （textarea）

字体标签 **（font）**

表格与表单的使用

表格标签 **（table）**

表单标签 **（form）**

内嵌标签与隐藏域的使用

内嵌标签 **（embed）**

隐藏域

Http 报头分为：通用报头请求报头响应报头实体报头

背景颜色与背景图像（body）

超链接的使用（a）

有序列表（ol-li）

无序列表（ul-li）

文本区（textarea）

字体标签（font）

表格标签（table）

表单标签（form）

内嵌标签（embed）