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