commit b8d53d910d2bd8e2eaf42044928a7e2eeaf3cbae Author: planet <985981442@qq.com> Date: Tue Jul 21 22:55:37 2020 +0800 first commit diff --git a/attr.md b/attr.md new file mode 100644 index 0000000..8d7840c --- /dev/null +++ b/attr.md @@ -0,0 +1,158 @@ +[TOC] + +--- + +#### 任务描述 +本关的任务是编写一个带超链接的网页，显示效果如下： + +![](/attachments/download/169787) + +点击之后进入链接的新页面，效果如下： + +![](/attachments/download/169833) + +为完成以上网页制作，请大家认真阅读以下内容： + +#### 相关知识 + +#####属性的概念 + +为了灵活设置HTML元素的显示效果，HTML提供了非常丰富的标签属性，通常简称HTML属性。 + +**【8-11回应】为什么改这一段定义呢？属性的作用是“为了灵活设置HTML元素的显示效果”，我感觉应该是CSS才是为了设置显示效果。属性只是提供附加信息，比如`title`属性就不是为了设置效果。** + +HTML属性位于开始标签，其基本的结构如下： + +`<标签名属性名="属性值">` `元素内容` `` + +下面是关于属性的一些要点： +- 属性在开始标签中规定。 +- 属性是以名称/值对的形式出现，比如：name="value"。 +- 一个标签可以包含多个属性。 +- HTML属性不会展现到网页上。 + + +##### 属性示例：对齐方式 +```html +

这是一个右对齐的一级标题

+``` + +显示效果如下： + +![](/attachments/download/169790) + +本例是一个右对齐的标题，开始标签中包含了对齐信息。`align`是属性名；`right`是属性值，代表右对齐，还有`left`和`center`等对齐方式。 + +##### 属性示例：超链接 +```html +这是一个链接，点击之后将在当前标签页中打开 + +这是一个链接，点击之后将在新标签页打开 +``` +显示效果如下： +![](/attachments/download/169834) + +点击链接之后，效果如下： + +![](/attachments/download/169835) + +本例是一个链接，使用``标签定义。包含了三个属性： +1. `href`是属性名，是`Hypertext Reference`的简写，属性值一般是一个链接地址； +2. `title`属性提供元素额外信息，当悬浮鼠标在内容上时会呈现； +3. ` target="_blank"`代表在新标签页中打开链接，若没有指明该属性，将在当前页面打开链接。 + + +##### 属性示例：背景颜色 + +```html + +
背景色彩属性
+ +``` + +显示效果如下： +![](/attachments/download/169793) + +本例，通过属性设置了主体``的背景色，属性名`bgcolor`即`background color`的简写。 + +##### 其他常用属性 +我们还会用到一些常用的属性，如下表所示： + +| 属性 | 值 | 含义 +| ------------ | ------------ | +| class | 自定义的元素类名 | 元素的类名 +| id | 自定义的元素id名 | 元素的唯一的id +| style | 元素内联样式 | 元素的样式 +| title | 额外信息内容 | 元素的额外信息 + + +为大家对表中属性有一个印象，我们来看如下例子： + +``` + + + + + HTML——属性 + + + +
HTML 属性
+
`style`可以直接指定元素的内联样式。
+
+ + + + +``` + +显示效果如下： + +![](/attachments/download/169836) + +本例看似很多，其实不复杂，我们一一来看： +1. `
`中指定了`class`属性值为`study`，之后在`