第1关：web知识训练-html5文档头部标签及属性
1、在HTML中，网页标题文字应放置在（ A、<title></title>标记之间）
2、 关于title标签的用法，下列说法正确的是（C、title标签设置的标题可作为默认快捷方式或收藏夹的名称 ）。
3、下列link标签的属性中，（ B、rel ）可用于指定当前文档与引用的外部文档的关系。
4、 如果设置页面刷新、失效期等元信息，可对meta标签添加相应的name属性。（B、错误）
5、 包含在头部标签之间的内容不会在浏览器窗口中显示出来。（A、正确）
第1关：页面标题及字符集的设置
任务描述
本关任务：编写一个带有页面标题和页面字符格式设置的网页。
相关知识
为了完成本关任务，你需要掌握：1.title标签，2.meta标签关于页面字符格式的设置。
title标签
title标签用于定义HTML页面的标题。它是双标签，开始和结束标签之间的内容就是要设置的页面标题。 它的作用是：
- 在浏览器的标题栏中显示标题
- 标题可以用作默认快捷方式或收藏夹的名称
- 标题还可以作为搜索引擎结果中的页面标题
应用时注意：
- 一个网页只能有一个标题
- 标题名称的长度不超过64个字符数
- 标题标记对之间不允许有其它的标签存在
用法示例： <title>个人网页</title>
charset属性
在html5中，可直接通过meta标签的charset属性设置页面的字符编码格式。在理论上，可以使用任何字符编码，但并不是所有浏览器都能够解释它们。常用的编码有：
- ISO-8859-1：国际标准化组织针对不同的字母表/语言定义的标准字符集（ 拉丁字母表的字符编码），是浏览器默认的字符集
- utf-8：Unicode 联盟开发的标准，utf-8 是网页和电子邮件的首选编码。
- gb2312：信息交换用汉字编码字符集，中国国家标准总局1980年发布。适用于汉字处理、汉字通信等系统之间的信息交换。
用法示例： <meta charset="gb2312"/>
编程要求
根据提示，在右侧编辑器补充代码，在右侧编辑器中的Begin - End区域内补充代码，具体要求是： 1.设置网页标题，标题文字为“设置标题”； 2.设置页面的字符编码格式为utf-8。
测试说明
补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。需要说明的是由于测试的要求，希望所有标签和属性使用小写字符。
<!DOCTYPE html>
<html>
<head>
<!-- ********* Begin ********* -->
<title>设置标题</title>
<meta charset="utf-8">
<!-- ********* End ********* -->
</head>
<body>
<h1 align="center">元信息的设置</h1>
</body>
</html> 第2关：元信息的设置
任务描述
本关任务：编写一个带有元信息的网页。
为了完成本关任务，你需要掌握：1.<meta/>的作用，2.<meta/>的属性及用法。
meta标签的作用
meta标签用于定义页面的元信息，可重复出现再头部标签中。它是单标签，通过“名称/值”的形式成对使用其属性。 meta标签主要分为两大类，一类对页面进行设置，另一类对搜索引擎进行设置。
- 对页面进行设置的格式：
<meta http-equiv="名称" content="值"/> - 对搜索引擎进行设置的格式：
<meta name="名称" content="值"/>
http-equiv/content
http-equiv/content属性对用于设置刷新、失效期、 cookie等页面信息。
用法示例：
- 页面停留20秒后跳转到www.educoder.net
<meta http-equiv="refresh" content="20;url=www.educoder.net"/>
- 网页于2020年7月26号8点过期
<meta http-equiv ="expires" content="Thur,26 Jul 2020 08:00:00 GMT"/>
- 设置cookie并进行页面缓存
<meta http-equiv ="set-cookie" content="cookievalue = xxx; expires= Thur,26 Jul 2020 08:00:00 GMT; path=/">
name/content
http-equiv/content属性对用于设置关键字、简介、作者、机器人向导、 版权、编辑器等。
用法示例：
- 用于标注网页的作者和Email
<meta name = "author" content = "刘明，Liuming@sina.com" />
- 为搜索引擎提供网站简介
<meta name ="description" content ="网站简介"/>
- 为搜索引擎提供关键字
<meta name="keywords" content="漫步时尚广场,时尚,购物,影视,餐饮"/>
- 为搜索引擎提供编辑器类型
<meta name="generator" content="Dreamweaver CS6"/>
- 为搜索引擎提供提供最新版本信息
<meta name="revised" content="David,2020/8/8"/>
编程要求
根据提示，在右侧编辑器中的Begin - End区域内补充代码，具体要求是： 1.在<head></head>之间为浏览器提供10秒后跳转至百度首页https://www.baidu.com/的元信息； 2.在<head></head>之间为浏览器设置页面失效期，失效时间是2021年12月31日8点整(注意时间格式，其星期要按照实际值)； 3.在<head></head>之间为搜索引擎设置网页关键词，关键词分别为“前端”、“元信息”、“网页跳转”、“失效期”、“搜索关键词”（请按此顺序列出关键词）。
测试说明
补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。需要说明的是由于测试的要求，标签属性取值要加西文双引号，所有标签和属性使用小写字符。失效日期中“星期”和“月份”的英文缩写首字母大写。
<!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标签
任务描述
本关任务：编写一个带有链接外部样式表的网页。
相关知识
为了完成本关任务，你需要掌握：link标签及其属性。
link标签
link标签可引用外部文件。它是单标签，一个页面允许使用多个link标签引用多个外部文件。 它的作用是：
- 指定引用外部文档的地址
- 指定当前文档与引用的外部文档的关系
- 说明引用外部文档的类型
<link/>标签的语法格式： <link href="" rel="" type=""/>
格式说明：
- href设置外部文档的地址
- rel设置当前文档与引用的外部文档的关系
- type设置外部文档的类型。
用法示例：链接一个外部样式表 <link rel="stylesheet" type="text/css" href="theme.css" />
编程要求
根据提示，在右侧编辑器中的Begin - End区域内补充代码，以链接外部css样式表，外部样式表文件的url地址是https://www.educoder.net//api/attachments/2306844。
测试说明
补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。
<!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> 
2597
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
