第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>