文档文本内容
~ 2025年教师资格证·《信息技术》~
计 算 机 网 络 技 术 5 / 5
主讲老师 孙珍珍
粉笔教师教育 粉笔教师第七节 网页设计基础P173
一、HTML基础
使用 HTML 编写的超文本文档称为 HTML 文档
u总结下
一、HTML基础
（二）HTML文档结构
2.HTML开始和结束的标签是：<html>……</html>
3.头部标签：<head>……</head>
ü 标题标签：<title>……</title>
4.主体标签：<body>……</body>，浏览器正文中显示的内容
（三）基本语法
1.标签分类：双标签、单标签、注释标签
2.标签属性
ü <标签名 属性名="属性值" >内容</标签名>P176
二、HTML标签
（一）文本类标签
1.标题标签 <hn> 「 <h1>级别最高，<h6>级别最低 」P178
（一）文本类标签
2.段落标签<p>P178
（一）文本类标签
3.特殊文本标记
Ø<br/> 换行；<strong>加粗；<em>倾斜；<ins>下划线；
Ø<sup>上标；<sub>下标；<del>删除线；书上无
试题巩固
（2019 下·高中）一段 HTML 代码如下图所示，该代码在浏览器中的显示效果为（ ）。P179
（二）图像标签
格式：
u
（1）src属性，指明图像的地址
（2）alt属性
ü 图像无法显示时，在原位置用文本代替
（3）width和height属性
ü 设置图像宽和高P179
（二）图像标签
格式：
uP180
（三）超链接标签
格式：
u
1.href属性-目标资源的地址
"#" 表示空链接
（1）"http://xxxxx"用于链接到本地浏览器的网页
（2）"file:///xxxxxx"用于链接到本地服务器中的文件
（3）"mailto:xxxxx"用于链接到电子邮件
2.target属性
Ø" _self "表示在当前标签页中加载目标资源，默认，可省
Ø"_blank"表示在新的标签页中加载目标资源P180
（三）超链接标签
【例】P180
（三）超链接标签
【例】P181
（三）超链接标签
【例】书上无
试题巩固
（2019上·初中）在网页制作过程中插入邮件地址的超链接，下列语句正确的是（ ）。
A. <a href="http://dongfang@163.com">与我联系</a>
B. <a href="email:dongfang@163.com">与我联系</a>
C. <a href="mailto:dongfang@163.com">与我联系</a>
D. <a href="telnet://dongfang@163.com">与我联系</a>P182
（四）表格标签
格式：
u
1.表格主体 <table>
2.行标签 <tr>
3.单元格标签 <td>
4.表头标签 <th>
5.标题标签 <caption>P183
（四）表格标签
【例】P183
（四）表格标签
6.跨行属性 （rowspan） 跨列属性（colspan）
合并x行：rowspan="x"
合并y列：colspan="y"书上无
试题巩固
（2019 上· 高中）某网页制作的界面如图所示，下列选项正确的是（ ）。
A.该网页的标题是QQ浏览器截图
B.该网页中插入的图片的宽度是280px
C.该网页中插入的表格的宽度是280px
D.该网页中插入了一个3行2列的表格P184
（五）表单标签P185
（五）表单标签
2.<label>标签：用于为表单元素提供标签或描述性文本
Øfor 属性与对应输入控件的 id 属性匹配，当点击标签时，焦点会自动转移到对应的输入控件上。P185
（五）表单标签
3. <input> 标签
（1）文本框：type 属性值为“text”，placeholder 属性表示提示文本
（2）密码框：type 属性值为“password”，用户输入的文本以圆点或星号的形式显示P185
（五）表单标签
（3）单选按钮：type 属性值为“radio”，有相同的name属性。checked表示默认选中。
（4）复选按钮：type 属性值为“checkbox”，有相同的name属性。书上无
试题巩固
（2023 下·初中）某浏览器部分页面显示效果如图所示，与其对应的 HTML 代码是（ )。
A. <textarea rows= "4" name= "a1" cols="5"> 语文 
 数学 </textarea>
B. <input type= "radio" name="r1" value="chinese" checked> 语文 <br>
<input type="radio" name="r1" value="maths"> 数学 <br>
C. <select size="4" name="s1" multiple>
<option value="01"> 语文 </option>
<option value="02"> 数学 </option>
</select>
D. <input type="checkbox" name="c1" value="chinese" checked> 语文 <br>
<input type="checkbox" name="c1" value="maths"> 数学 <br>P186
（五）表单标签
（5）提交按钮：type 属性值为“submit”，用value 属性指定按钮上显示的文本
（6）重置按钮：type 属性值为“reset”，用value 属性指定按钮上显示的文本书上无
试题巩固
（2022 下·高中）如下图所示是一个表单的截图，若要达到点击“提交”按钮时表单信息传送到服
务器的效果，“提交”按钮的 HTML 语句正确的是（ ）。
A. <input type="label" value=" 提交 ">
B. <input type="submit" value=" 提交 ">
C. <input type="option" value=" 提交 ">
D. <input type="input" value=" 提交 ">P187
（五）表单标签
4.select标签，用于创建下拉菜单
Ø包含多个 <option> 标签，每个 <option> 定义了下拉列表中的一个选项。P187
（六）画布标签
1.创建画布
2.添加边框
3.使用JavaScript来绘制图像
效果显示：
u书上无
试题巩固
（2019下·初中）某网页的部分HTML5代码如图所示，其功能是绘制一个蓝色的圆。那么图中被
涂抹部分的代码是（ ）。
A.id
B.src
C.name
D.styleP188
（七）多媒体类标签
1.嵌入音频
格式：
u
【例】P189
（七）多媒体类标签
添加音频的另外两种方法：
u
Ø<bgsound src="音频地址" loop="infinite">
ü 仅适用于IE浏览器
ü loop属性表示播放的次数，若值为infinite或-1则表示无限循环
Ø<embed src="音频地址" autostart="true" loop="true">
ü autostart属性表示是否自动播放，若值为true则表示自动播放
ü loop属性表示播放的次数，若值为true则表示无限循环书上无
试题巩固
（2022 上·高中）进入网站页面后，可实现循环播放网页背景音乐bg.mid的网页代码是（ ）。
A.<sound src = "bg.mid" loop="true">
B.<bgsound src ="bg.mid" loop="1">
C.<bgsound src = "bg.mid" loop="infinite">
D.<embed src ="bg.mid" autostart =" true" >P189
（七）多媒体类标签
2.嵌入视频
格式：
u
【例】书上无
试题巩固
（2020下·高中）有一个视频文件“movie.mp4”，其帧宽度是640个像素，帧高度是480个像素。
下图是一段HTML5代码，在支持HTML5的浏览器中浏览该段代码，显示的视频内容宽度和高度是
（ ）。
A.320像素，240像素
B.320像素，320像素
C.320像素，480像素
D.640像素，480像素P190
三、CSS
（一）在HTML中添加样式
1.行内（内联）样式 【在主体标签中，写在普通标签内】
Ø格式：
【例】P190
（一）在HTML中添加样式
2.内嵌（内部）样式 【在头部标签中，写在成对的<style>标签内】
Ø格式：
【例】P191
（一）在HTML中添加样式
3.链接（外部）样式 【在头部标签中，写在<link />标签内】
Ø格式：
【例】
1-1.cssP192
（二）CSS的选择器
1.标签选择器 【无前缀，直接使用标签名】
2.类选择器 【以"."前缀+自定义名称，用class属性实现】
3.ID选择器 【以"#"前缀+自定义名称，用id属性实现】书上无
试题巩固
（2020下·初中）若使用“中小学信息技术教师”几个字居中呈现，则图中的缺失位置代码应填入
（ ）
A.id="a"
B.class="a"
C.style="a"
D.center="a"P194
（二）CSS的选择器
4.伪类选择器 【某选择器 + 以":"分隔 + 伪类标识】
（1）静态伪类选择器 （用于设置链接样式）
Ølink：链接访问前
Øvisited：链接访问后
（2）动态伪类选择器 （用于所有元素）
Øhover：鼠标悬停元素上
Øactive：鼠标点击元素时
Øfocus：元素获得焦点时书上无
4.伪类选择器书上无
试题巩固
（2017下·初中）下列选项中实现“鼠标指针停留在超链接文字上时，链接文字颜色变红”功能的
CSS 语句是（ ）。
A. a:hover{color:#0000FF}
B. a:hover{color:#FF0000}
C. a:visited{color:#0000FF}
D. a:visited{color:#FF0000}书上无
试题巩固
（2022下·初中）若要使用网页链接文字在鼠标指向时文字背景色为黄色，效果下图所示，下列
CSS语句正确的是（ ）
A.<style type="text/css"> B.<style type="text/css">
.a:link {color: #FF0000;} .a:link {color: #FF0000;}
.a:visited {color: #00FF00;} .a:visited {color:#00FF00;}
.a:hover {color: #FF00FF;} .a:hover {color: #FF00FF;background-color:yellow;}
</style> </style>
D.<style type="text/css">
C.<style type="text/css">
.a:link {color: #FF0000;background-color:yellow;}
.a:link {color: #FF0000;}
.a:visited {color: #00FF00;}
.a:visited {color: #00FF00; background-color:yellow;}
.a:hover {color: #0000FF; }
.a:hover {color: #FF00FF; }
</style>
</style>P194
四、JavaScript
说明：language="Javascript" 与 type="text/javascript" 的功能一致
u书上无
试题巩固
（2022 上·初中）下列脚本语句中能弹出如图所示对话框的是（ ）。
A. <script language="Javascript"> alert("网页存在安全风险！"); </script>
B. <script language="Javascript"> confirm("网页存在安全风险！"); </script>
C. <script language="Javascript"> prompt("网页存在安全风险！"); </script>
D. <script language="Javascript"> window.open(" 网页存在安全风险！ "); </script>书上无
试题巩固
（2017下·高中）下列网页制作脚本语句中，能弹出如图所示对话框的是（ ）。
A. <script language= "JavaScript" > alert("欢迎参加信息技术学科考试! ")；< /script>
B. <script language= "JavaScript" > confirm("欢迎参加信息技术学科考试! ")；< /script>
C. <script language= "JavaScript" >prompt("欢迎参加信息技术学科考试! ")；< /script>
D. <script language= "JavaScript" >window.open("欢迎参加信息技术学科考试! ")；</script>下
节
内
容在 粉 笔
遇 见 不 一 样 的 自 己
粉笔教师教育 粉笔教师
