5.3 KiB
[TOC]
任务描述
本关的任务是编写一个带超链接的网页，显示效果如下：
点击之后进入链接的新页面，效果如下：
为完成以上网页制作，请大家认真阅读以下内容：
相关知识
#####属性的概念
为了灵活设置HTML元素的显示效果，HTML提供了非常丰富的标签属性，通常简称HTML属性。
【8-11回应】为什么改这一段定义呢？属性的作用是“为了灵活设置HTML元素的显示效果”，我感觉应该是CSS才是为了设置显示效果。属性只是提供附加信息，比如title属性就不是为了设置效果。
HTML属性位于开始标签，其基本的结构如下：
<标签名 属性名="属性值"> 元素内容 </标签名>
下面是关于属性的一些要点：
- 属性在开始标签中规定。
- 属性是以名称/值对的形式出现，比如：name="value"。
- 一个标签可以包含多个属性。
- HTML属性不会展现到网页上。
属性示例：对齐方式
<h1 align="right">这是一个右对齐的一级标题<h1>
显示效果如下：
本例是一个右对齐的标题，开始标签中包含了对齐信息。align是属性名；right是属性值，代表右对齐，还有left和center等对齐方式。
属性示例：超链接
<a href="https://www.educoder.net/">这是一个链接，点击之后将在当前标签页中打开</a>
<a href="https://www.educoder.net/" target="_blank">这是一个链接，点击之后将在新标签页打开</a>
显示效果如下：
点击链接之后，效果如下：
本例是一个链接，使用<a>标签定义。包含了三个属性：
href是属性名，是Hypertext Reference的简写，属性值一般是一个链接地址；title属性提供元素额外信息，当悬浮鼠标在内容上时会呈现；target="_blank"代表在新标签页中打开链接，若没有指明该属性，将在当前页面打开链接。
属性示例：背景颜色
<body bgcolor="yellow">
<h1 align="center">背景色彩属性</h1>
</body>
显示效果如下：
本例，通过属性设置了主体<body>的背景色，属性名bgcolor即background color的简写。
其他常用属性
我们还会用到一些常用的属性，如下表所示：
| 属性 | 值 | 含义 | ------------ | ------------ | | class | 自定义的元素类名 | 元素的类名 | id | 自定义的元素id名 | 元素的唯一的id | style | 元素内联样式 | 元素的样式 | title | 额外信息内容 | 元素的额外信息
为大家对表中属性有一个印象，我们来看如下例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML——属性</title>
<STYLE TYPE="text/css">
.study {
color: #DF462C;
}
</STYLE>
</head>
<body bgcolor="#FDFDDF">
<h1 class="study">HTML 属性</h1>
<p style="font-size:1.5em;">`style`可以直接指定元素的内联样式。</p>
<p id="newText"></p>
<script type="text/javascript">
document.getElementById("newText").innerHTML="id属性必须唯一，用于JavaScript选中之后进行相关操作。本例展示的是添加文本内容";
</script>
</body>
</html>
显示效果如下：
本例看似很多，其实不复杂，我们一一来看：
<h1>中指定了class属性值为study，之后在<STYLE>中设置了其样式；- 第14行
<p>指定了style属性，在此我们设置了字体大小； - 第15行
<p>指定了id属性值为newText，之后使用JavaScript选择id添加了文本内容。
以上三点的使用，涉及到我们之后学到的知识，在此大家可以先作为了解。
**【修改意见】： 1、这个表可以列出一些更直观的属性 2、“值”这一列感觉没说清楚，是不是应该给出一些具体值的实例？ **
【8-11回应】 这样举例子，我感觉问题在于篇幅稍大，涉及之后的知识点较多，所以一开始没有举例。不过举例学员能更直观的了解属性。看如何权衡。
我们将在之后的实训过程中，在使用到相应属性的实例时，为大家进行详解。
注意事项
关于属性，有两点需要提示大家：
-
属性使用小写英文字母更加符合规范；
-
属性值可以用双引号或单引号包含，例如：
title=' 他说"你好" '这种情况，属性值如果包含双引号，那么最外层就用单引号。
任务要求
学习完以上知识，是不是迫不及待想亲手试一试呢？ 请你在右侧的编辑器中直接制作HTML页面，具体要求是：
- 在第8行的
<h1>开始标签中加入居中属性值； - 在第9行中，补充
<a>开始标签中的属性名，使链接起作用。
今天很短，但今天很重要，漂亮的今天，不仅可以把昨天的辉煌变成明天的辉煌，更可以把昨天的失败变成明天的成功。
