Python实战课程1-1练习：创建一个网页

最近在网易课堂上学习python的一个实战课程，正好也是我喜欢的一个平台，不妨在这里提交作业分享心得。第一个小练习是做一个简单的网页，最终呈现的效果如下：

下面开始吧！

1.创建html文件

将homework文件夹下载到本地，里面包含了创建网页所需的.css文件，images文件夹和已经写好的.html文件。创建文件夹副本重新命名，删除其中的.html文件，打开PyCharm创建一个新的以homwork命名的html文件，然后开始自己的创作编辑。

然后打开PyCharm在1_1homework文件夹下新建一个以homework命名的空白的html文件

新建的html文件已经有了和的标签。

Tips:

和中所包含的内容有不同的作用。标签中的信息传递给浏览器，对于浏览者不可见；标签中的信息在网页中可见。

2. 编辑html文件

网页的部分可以直接引入写好的css样式，这里引入css样式的方法是用

标签链接一个外部样式表：

其中的rel标签属性用来规定当前文档与被链接文档之前的关系，stylesheet表示样式表；type属性规定被链接文档的MIME（Multipurpose Internet Mail Extensions，多用途互联网邮件扩展）类型；href这个属性经常被使用，值是url，也就被链接文档的位置。

具体可参见网站：http://www.w3school.com.cn/tags/tag_link.asp

Tips:

1.敲出属性关键字时IDE中会有提示回车即可快速输入。

2. href输入的链接为相对路径，即文件夹中已经存在的css文件（homework.css）

网页body部分的框架分为三块

·Header

·Main-content

·Footer

按照这样的框架用

标签分隔三部分内容，样式分别为“header”，“main-content”，“footer”赋值到class

3. 填充html文件header内容

可以嵌套内容，因此写好基本代码后，可以继续填充header，加入图片标签，导航

标签，链接标签。

标签中使用的素材由相对路径导入，方法同上。导航标签

样式是"nav"，其中有两层标签，
表示列表，表示链接跳转到其他页面，因为这里没有编写其他链接网页，href的值都为“#”。



现在可以用浏览器查看一下初步效果


4. 填充html文件main-content内容


填充好header部分，再来填充main-content的标签，方法如上。需要加入内容标题”The blah”，字号样式用标签

，还可以用

---

在html网页中创建一条水平线，水平分割线（horizontal rule）可以在视觉上将文档分割成各个部分。这个标签比较特殊，不是成对的。





然后在

标签中嵌套
• 和标签，
  标签的样式为“photos”，其中标签有两个必须属性：src和alt，分别赋值为图片的url和替代文本。另外因为要求图片大小为150*150，在这里对width和height属性分别赋值。
  
  
  图片按照大小要求在网页中被排版

  然后填充文字内容，这里找了一段《瓦尔登湖》的原文。标签的空格和换行都会保留，将文字排版好对齐之后复制到PyCharm中。

  
  

  5. 填充html文件footer内容
  

  最后是footer部分，需要关注特殊符号的写法，如图最后形成效果

  
  要求特殊符号的 footer

  关于这点可以查看网站：http://www.w3school.com.cn/tags/html_ref_entities.html

  
  footer用了另外的特殊符号和我的昵称

  6. PyCharm查看html网页效果
  

  保存代码，然后就可以在当前的html文件跟前面一样通过浏览器查看最终效果。

  
  我的网页就初步创建好啦！

  创建网页小结
  

  1.首先确定网页的结构，通过编辑html文件可以形成网页的框架，里面成对的标签可以嵌套使用，使网页层次丰富而分明，而标签的属性可以更细化网页内容的的规范；导入css文件，通过里面各种样式装饰网页。
  

  2.以上用到的主要标签和属性总结

  

  附录：

  最后附上源代码（这节课的内容较少，代码中没有注释，注释是个好习惯！）

  
  

  
  

  （本节完，待续。。。）