文章目录
1 Web前端开发概述
第1关:
1、所有的浏览器对同一个CSS样式的解析都相同,因此页面在不同浏览器下的显示效果完全一样。 (B、错)
2、URL(英文Uniform Resource Locator的缩写)中文译为“统一资源定位符”。URL其实就是Web地址,俗称“网址”。(A、对)
3、 HTTP”是一种详细规定了浏览器和万维网服务器之间互相通信的规则 (A/对)
4、 下列选项中,( A、Linux )不是Web浏览器
5、张同学正在家里通过拨号上网访问新浪主页,此时,他自己的计算机是( B、浏览器)。
第2关:Web前端开发相关的技术
1、 编程要求
- 仿照上面的示例,在右侧编辑器中的Begin - End区域内补充代码,具体要求是:
- 在
<head></head>
之间添加网页标题的设置,标题文字为“我的第一个网页”; - 在
<body></body>
之间添加一级子标题的设置,子标题文字为“初识HTML”,<h1>
标签的align属性取值设置为左对齐。
2、 代码运行
<!DOCTYPE html>
<html>
<!-- ********* Begin ********* -->
<head>
<meta charset="utf-8"/>
<title>我的第一个网页<title>
</head>
<body>
<h1 align="left">初识HTML</h1>
</body>
<!-- ********* End ********* -->
</html>
web编程训练-html5-文档头部
第1关:页面标题及字符集的设置
1、 编程要求
根据提示,在右侧编辑器补充代码,在右侧编辑器中的Begin - End区域内补充代码,具体要求是:
- 设置网页标题,标题文字为“设置标题”;
- 设置页面的字符编码格式为utf-8。
2、 代码展示:
<!DOCTYPE html>
<html>
<head>
<!-- ********* Begin ********* -->
<title>设置标题</title>
<meta charset="utf-8">
<!-- ********* End ********* -->
</head>
<body>
<h1 align="center">元信息的设置</h1>
</body>
</html>
第2关:元信息的设置
1、 编程要求
- 在之间为浏览器提供10秒后跳转至百度首页https://www.baidu.com/的元信息;
- 在之间为浏览器设置页面失效期,失效时间是2021年12月31日8点整(注意时间格式,其星期要按照实际值);
- 在之间为搜索引擎设置网页关键词,关键词分别为“前端”、“元信息”、“网页跳转”、“失效期”、“搜索关键词”(请按此顺序列出关键词)。
2、 代码展示
<!DOCTYPE html>
<html>
<head>
<title>设置标题</title>
<meta charset="utf-8"/>
<!-- ********* Begin ********* -->
<meta http-equiv="refresh" content="10;url=https://www.baidu.com/"/>
<meta http-equiv="expires" content="Fri,31 Dec 2021 08:00:00 GMT"/>
<meta name="keywords" content="前端,元信息,网页跳转,失效期,搜索关键词"/>
<!-- ********* End ********* -->
</head>
<body>
<h1 align="center">元信息的设置</h1>
</body>
</html>
第3关:link标签
1、 编程要求
- 根据提示,在右侧编辑器中的Begin - End区域内补充代码,以链接外部css样式表,外部样式表文件的url地址是https://www.educoder.net//api/attachments/2306844。
2、代码展示
<!DOCTYPE html>
<html>
<head>
<title>设置标题</title>
<meta charset="utf-8"/>
<!-- ********* Begin ********* -->
<link rel="stylesheet" type="text/css" href="https://www.educoder.net//api/attachments/2306844">
<!-- ********* End ********* -->
</head>
<body>
<h1 align="center">元信息的设置</h1>
</body>
</html>
web知识训练-html5文档头部标签及属性
第1关:web知识训练-html5文档头部标签及属性
1、在HTML中,网页标题文字应放置在( A、<title></title>
标记之间)
2、 关于title标签的用法,下列说法正确的是(C、title标签设置的标题可作为默认快捷方式或收藏夹的名称 )。
3、下列link标签的属性中,( B、rel )可用于指定当前文档与引用的外部文档的关系。
4、 如果设置页面刷新、失效期等元信息,可对meta标签添加相应的name属性。(B、错误)
5、 包含在头部标签之间的内容不会在浏览器窗口中显示出来。(A、正确)
web知识训练-html5-文本控制类标签
第1关:web知识训练-html5-文本控制类标签
1、 在下列选项中,显示内容的大小和浏览器默认文本的大小基本相同的是(
C、<h4>
)。
2、 在下列选项中,用于产生一条水平线的标签是( A、<hr>
)。
3、 关于标签的嵌套,下列选项中正确的是(
A、
<P>
<B>
这样嵌套正确吗?
</B>
</P>
4、 <sub></sub>
标签作用的元素将以上标形式显示。(B、错误)
5、 <mark></mark>
标签作用的元素会以黄色背景效果显示。(A、正确)
html5-文本控制类标签
第1关:html5-网页背景及标题段落标签
1、 编程要求:
- 为网页添加背景图像,图像的url地址为https://www.educoder.net/api/attachments/2308369
- 将文本“第一章 HTML5基础”设置为一级标题,采用居中对齐;
- 将文本“1.1 文本控制标签”设置为2级标题,采用左对齐。
- 在将文本“这是第1个段落。”设置为一个段落,采用两端对齐。
2、 代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题段落的设置</title>
</head>
<!-- ********* Begin ********* -->
<body background="https://www.educoder.net/api/attachments/2308369">
<h1 align="center">第一章 HTML5基础</h1>
<h2 align="left">1.1 文本控制标签</h2>
<p align="justify">这是第1个段落。</p>
</body>
<!-- ********* End ********* -->
</html>
第2关:html5-水平线和换行的设置
1、 编程要求
- 在一级标题文字“第一章 HTML5基础”下方添加一条水平线,水平线的属性要求如下:
(1)为水平线标签添加size属性,取值为3
(2)为水平线标签添加width属性,取值为400
(3)将水平线的颜色设置为蓝色
(4)去掉水平线的阴影效果 - 在水平线的下方使用换行标签添加一个空行
2、 代码展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平线的设置</title>
</head>
<body background="https://www.educoder.net/api/attachments/2308369">
<h1 align="center">第一章 HTML5基础</h1>
<!-- ********* Begin ********* -->
<hr size="3" width="400" color="blue" align="center" noshade/>
<br/>
<!-- ********* End ********* -->
<h2 align="left">1.1 文本控制标签</h2>
<p align="justify">这是第1个段落。</p>
</body>
</html>
第3关:html5-文本修饰
1、 编程要求
- 采用font标签为一级标题文字“第一章 HTML5基础”添加“黑体”字体和“红色”显示
- 分别采用加粗、斜体、下划线、上标和下标标签为相应的文字添加显示效果
2、 代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平线的设置</title>
</head>
<body background="https://www.educoder.net/api/attachments/2308369">
<h1 align="center">
<!-- ********* Begin ********* -->
<font color="red" face="黑体">第一章 HTML5基础</font>
<!-- ********* End ********* -->
</h1>
<hr size=3 width=400 Align=center color=blue noshade/>
<br/>
<h2 align="left">1.1 文本控制标签</h2>
<!-- ********* Begin ********* -->
<b>这是加粗显示的文字</b>
<i>这是斜体显示的文字</i>
<u>这是带下划线的文字</u>
X<sup>3</sup>-2Y<sub>2</sub>=1
<!-- ********* End ********* -->
</body>
</html>
html5-图像的运用
第1关:新媒体新闻网页的设计
1、 实现效果:
2、 代码展示:
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>新媒体新闻网页的设计</title>
</head>
<!-- ********* Begin ********* -->
<body background = "https://www.educoder.net/api/attachments/2308369">
<h2 align="center"><font face="微软雅黑">新媒体的大势所趋</font></h2>
<p align="center"><font color="#979797" size="2">更新时间:2021年11月18日14时08分 来源:<font color="blue">开源社区</font></font></p>
<hr size="2" color="#CCCCCC">
<p>近年来,随着<font color="blue">移动互联网</font>的火爆,公众号、微博、今日头条、抖音等一大批社交平台的火爆带动了新媒体运营行业的发展,运营人在企业中的价值也不断的被放大和受到重视,很多企业在做线上这块时都会考虑<font color="blue">“两微一抖”</font>,也就是我们所说的新媒体+短视频运营。因此也就催生了大量对新媒体+短视频运营人的需求岗位。</p>
</body>
<!-- ********* Begin ********* -->
</html>
第2关:带插图的新媒体新闻网页的设计
1、 实现效果:
2、 代码展示:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>新媒体新闻网页的设计</title>
</head>
<body background="https://www.educoder.net/api/attachments/2308369">
<h2 align="center"><font face="微软雅黑">新媒体的大势所趋</font></h2>
<p align="center"><font color="#979797" size="2">更新时间:2021年11月18日14时08分 来源:<font color="blue">开源社区</font></font></p>
<hr size="2" color="#CCCCCC" />
<p>
<!-- ********* Begin ********* -->
<img src="https://www.educoder.net/api/attachments/2334243" title="这是一张插图" width="150" height="100" align="left" hspace="30" alt="新媒体插图">
<!-- ********* End ********* -->
近年来,随着<font color="blue">移动互联网</font>的火爆,公众号、微博、今日头条、抖音等一大批社交平台的火爆带动了新媒体运营行业的发展,运营人在企业中的价值也不断的被放大和受到重视,很多企业在做线上这块时都会考虑<font color="blue">“两微一抖”</font>,也就是我们所说的新媒体+短视频运营。因此也就催生了大量对新媒体+短视频运营人的需求岗位。</p>
</body>
</html>
web知识训练-html5-图像的运用
1、 下列选项中,不适合作网页图像的文件格式是(D、bmp )。
2、 如果想为网页添加背景图,可在body标签中添加(A、background )属性。
3、下列选项中,哪个不是相对路径的表示方式( c:/pic/images/ch_cook1.gif )。
4、 title属性用于设置网页标题。 B、错误
5、 下列选项中,哪个不是img标签的属性( A、href )。