first commit

4 years ago · b8d53d910d
commit b8d53d910d
5 changed files with 226 additions and 0 deletions
--- a/attr.md
+++ 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
+<h1 align="right">这是一个右对齐的一级标题<h1>
+```
+
+显示效果如下：
+
+![](/attachments/download/169790)
+
+本例是一个右对齐的标题，开始标签中包含了对齐信息。`align`是属性名；`right`是属性值，代表右对齐，还有`left`和`center`等对齐方式。
+
+##### 属性示例：超链接
+```html
+<a href="https://www.educoder.net/">这是一个链接，点击之后将在当前标签页中打开</a>
+
+<a href="https://www.educoder.net/" target="_blank">这是一个链接，点击之后将在新标签页打开</a>
+```
+显示效果如下：
+![](/attachments/download/169834)
+
+点击链接之后，效果如下：
+
+![](/attachments/download/169835)
+
+本例是一个链接，使用`<a>`标签定义。包含了三个属性：
+1. `href`是属性名，是`Hypertext Reference`的简写，属性值一般是一个链接地址；
+2. `title`属性提供元素额外信息，当悬浮鼠标在内容上时会呈现；
+3. ` target="_blank"`代表在新标签页中打开链接，若没有指明该属性，将在当前页面打开链接。
+
+
+##### 属性示例：背景颜色
+
+```html
+<body bgcolor="yellow">
+    <h1 align="center">背景色彩属性</h1>
+</body>
+```
+
+显示效果如下：
+![](/attachments/download/169793)
+
+本例，通过属性设置了主体`<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>
+```
+
+显示效果如下：
+
+![](/attachments/download/169836)
+
+本例看似很多，其实不复杂，我们一一来看：
+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>`开始标签中的属性名，使链接起作用。
+
+
+---
+
+今天很短，但今天很重要，漂亮的今天，不仅可以把昨天的辉煌变成明天的辉煌，更可以把昨天的失败变成明天的成功。
+
+![](/attachments/download/169823)
--- a/index.html
+++ b/index.html
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Hello world</title>
+  </head>  
+    <!--------- Begin-------->
+
+  <body>
+    <!--用HTML语言向世界打声招呼吧！-->
+    <h1></h1>
+    <p></p>
+  </body>
+    <!--------- End-------->
+
+</html>
--- a/p.html
+++ b/p.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<head>
+    <meta charset="utf-8">
+    <title>Hello World</title>
+</head>
+<html>
+    <body bgcolor="yellow">
+        <h1 align="center">这是一个一级标题</h1>
+        <p>这是第1个段落。</p>
+        <p>这是第2个段落。</p>
+    </body>
+</html>
--- a/result.html
+++ b/result.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Hello world</title>
+  </head>
+  <body bgcolor="F6F3D6">
+    <!--用HTML语言向世界打声招呼吧！-->
+    <h1 align="center">Hello World</h1>
+    <p align="center">动手改变世界</p>
+  </body>
+</html>
--- a/step1.py
+++ b/step1.py
@ -0,0 +1,28 @@
+# -*- coding: utf-8 -*-
+
+from pyquery import PyQuery as pq
+
+f = open("step1/index.html", encoding='utf-8')
+# f = open("../step1/result.html", encoding='utf-8')
+
+html = f.read()
+f.close()
+
+doc = pq(html)
+
+tag = input()
+
+result = ''
+if tag == 'h1' or 'p':
+    result = doc(tag).text()
+
+if tag == 'align':
+    h1Align= doc('h1').attr('align')
+    pAlign= doc('p').attr('align')
+    result = (h1Align and pAlign)
+
+if tag == 'bgcolor':
+    result = doc('body').attr('bgcolor')
+
+# print(result),
+print (result, end='')