first commit

5 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='')