Web前端开发职业技能考试初级Web前端开发初级实操考试V10Word文档下载推荐.docx
《Web前端开发职业技能考试初级Web前端开发初级实操考试V10Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《Web前端开发职业技能考试初级Web前端开发初级实操考试V10Word文档下载推荐.docx（24页珍藏版）》请在冰豆网上搜索。
【效果图】
（1）打开index.html效果如图1所示。
图1-1
（2）点击“标签页2-资讯”，搜索结果显示为tab2.html，效果如图2所示。
图1-2
【代码：
搜索主页index.html】
<
!
（1）html>
--文档声明-->
html>
<
head>
<
metacontent="
text/html;
"
（2）="
utf-8"
>
--文档字符编码为utf-8-->
S
title>
搜索<
/title>
--设置文档标题为“搜索”-->
style>
.search_val{width:
400px;
margin-bottom:
20px;
}/*设置搜索框为400px，底部外边距为20px*/
a{margin-right:
20px}/*设置a链接的右边距为20px*/
/style>
/head>
body>
form（3）="
index.html"
method="
get"
<
inputtype="
text"
class="
search_val"
（4）"
value="
搜索"
/>
--提交按钮-->
/form>
table>
--在iframe框架中打开被链接文档tab1.html或tab2.html-->
tr>
td>
ahref="
tab1.html"
（5）>
标签页1-网页<
/a>
/td>
<
tab2.html"
标签页2-资讯<
/tr>
/table>
hr/>
--tab1.html显示在iframe中-->
iframename="
main"
id="
（6）width="
500px"
height="
280px"
frameborder="
0"
>
/iframe>
/body>
/html>
第一个标签页tab1.html】
DOCTYPEhtml>
charset="
body{font-size:
13px;
}/*设置页面字体大小为13px*/
p{width:
380px;
}/*设置p元素的宽度为380px*/
p,h3{margin:
0;
padding:
}/*设置内边距和外边距均为0*/
.noPic{width:
460px;
}/*设置类名为noPic的元素的宽度为460px*/
img{padding:
10px;
}/*设置图片的内边距为10px*/
tableborder="
width="
290px"
--设置无边框表格-->
<
td（7）>
--合并两列-->
（8）<
--设置标题“HTML”为三号标题-->
tdrowspan="
2"
<
--插入img文件夹下的logo.png图片-->
img（9）width="
40px"
p>
超文本标记语言，标准通用标记语言下的一个应用。
“超文本”就是指页面内可以包含图片、链接等...<
/p>
#"
http:
//HTML.com<
tdcolspan="
h3>
HTMLStandard<
/h3>
pclass="
noPic"
1.2IsthisHTML5?
Thissectionisnon-normative.Inshort:
Yes.Inmorelength:
theterm"
HTML5"
iswidelyusedasabuzzwordtorefer...<
//HTMLS<
1<
2<
3<
4<
第二个标签页tab2.html】
td{padding:
}/*设置td单元格的内边距为10px*/
450px;
}/*设置p元素的宽度为450px*/
p,h3{（10）}/*设置内边距和外边距均为0*/
实现实时Html编辑器<
给大家介绍一种很简单的无限制在线Html编辑器,实现所写即所得UI和样式实时刷新,JS代码也能进行热加载执行重新渲染,而且这些实现都非常简单...<
html中q标签（短的引用）的详细介绍<
本篇将介绍html中q标签（短的引用）的详细用法,有兴趣的朋友可以了解一下!
学习html其实就是学习标签的用法,今天小编要介绍的是...<
【问题】
（20分，每空2分）
进行静态网页开发，补全代码，在
（1）至（10）处填入正确的内容。
试题二（30分）
阅读下列说明、效果图、HTML代码和CSS代码，开发网页动态页面样式，填写
（1）至（15）代码。
这是“Web技术社区”网站，该网站致力于推广和分享各种前端技术，如HTML、CSS、JavaScript和jQuery，现在我们需要编写该网站首页样式。
项目名称为web_skill，包含首页index.html、css文件夹和img文件夹，其中，css文件夹包含index.css文件，img文件夹包含html.png、css.png、js.png和jquery.png图片。
首页（index.html）内容分为两部分，一是【网站介绍】，位于页面上端，内容为【欢迎语】和【网站内容介绍】，以文字的形式展示；
二是【技术介绍】，位于页面下端，展示四项【技术】，每项都包括【技术logo】和【技术特点】，以图片和列表的形式展示。
对页面样式进行设计，要求为：
（1）页面全局样式：
设置页面全局属性，页面外边距和内边距为“0”，字体为“宋体”，字体大小为“35px”。
为页面设置透明度动画，在页面加载时执行，透明度从“0”到“1”，动画持续时间为“1s”，动画次数为“1”次。
（2）
【网站介绍】样式：
为页面上端【网站介绍】部分添加背景颜色“#000000”，并设置宽度为“100%”、高度为“400px”、字体颜色为“#FFFFFF”。
另外，为【欢迎语】和【网站内容介绍】内容设置“绝对布局”、距顶部边缘“16%”、距左边缘“16%”、宽度为“68%”、文本内容“居中”。
（3）
【技术介绍】样式：
为页面下端【技术介绍】设置“弹性布局”、文本内容“居中”。
另外，为【技术】设置宽度为“17%”、外边距为“4%”；
为【技术logo】设置高度为“200px”、宽度为“200px”、边框颜色为“#000000”、边框为“1px、实线”、边框设置“20px圆角”；
为【技术特点】中列表设置文本内容“居左”。
图2-1
首页index.html】
DOCTYPEHTMLPUBLIC"
-//W3C//DTDHTML4.01Transitional//EN"
"
//www.w3.org/TR/html4/loose.dtd"
metahttp-equiv="
Content-Type"
content="
charset=utf-8"
/>
Web技术社区<
linkrel="
stylesheet"
type="
text/css"
href="
（1）"
divid="
introduction"
content"
h2>
欢迎来到XX网<
/h2>
br/>
本站包括了HTML、CSS、Javascript、jQuery等各种基础编程教程。
本站致力于推广各种前端技术，所有资源...<
/div>
（2）"
--第一张图片和列表-->
divclass="
card"
imgsrc="
img/html
升级会员 