文章目录
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 ）。
3973
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
