最近在网易课堂上学习python的一个实战课程,正好简书也是我喜欢的一个平台,不妨在这里提交作业分享心得。第一个小练习是做一个简单的网页,最终呈现的效果如下:
下面开始吧!
1.创建html文件
将homework文件夹下载到本地,里面包含了创建网页所需的.css文件,images文件夹和已经写好的.html文件。创建文件夹副本重新命名,删除其中的.html文件,打开PyCharm创建一个新的以homwork命名的html文件,然后开始自己的创作编辑。
然后打开PyCharm在1_1homework文件夹下新建一个以homework命名的空白的html文件
新建的html文件已经有了<head>和<body>的标签。
Tips:
<head>和<body>中所包含的内容有不同的作用。<head>标签中的信息传递给浏览器,对于浏览者不可见;<body>标签中的信息在网页中可见。
2. 编辑html文件
网页的<head>部分可以直接引入写好的css样式,这里引入css样式的方法是用
<link>标签链接一个外部样式表:
其中的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
按照这样的框架用<div></div>标签分隔三部分内容,样式分别为“header”,“main-content”,“footer”赋值到class
3. 填充html文件header内容
<div></div>可以嵌套内容,因此写好基本代码后,可以继续填充header,加入图片<img>标签,导航<ul></ul>标签,链接<a>标签。
<img>标签中使用的素材由相对路径导入,方法同上。导航标签<ul>样式是"nav",其中有两层标签,<li></li>表示列表,<a></a>表示链接跳转到其他页面,因为这里没有编写其他链接网页,href的值都为“#”。
4. 填充html文件main-content内容
填充好header部分,再来填充main-content的标签,方法如上。需要加入内容标题”The blah”,字号样式用标签<h2>,还可以用<hr>在html网页中创建一条水平线,水平分割线(horizontal rule)可以在视觉上将文档分割成各个部分。这个标签比较特殊,不是成对的。
然后在<ul>标签中嵌套<li>和<img>标签,<ul>标签的样式为“photos”,其中<img>标签有两个必须属性:src和alt,分别赋值为图片的url和替代文本。另外因为要求图片大小为150*150,在这里对width和height属性分别赋值。
然后填充文字内容,这里找了一段《瓦尔登湖》的原文。标签的空格和换行都会保留,将文字排版好对齐之后复制到PyCharm中。
5. 填充html文件footer内容
最后是footer部分,需要关注特殊符号的写法,如图最后形成效果
关于这点可以查看网站:http://www.w3school.com.cn/tags/html_ref_entities.html
6. PyCharm查看html网页效果
保存代码,然后就可以在当前的html文件跟前面一样通过浏览器查看最终效果。
创建网页小结
1.首先确定网页的结构,通过编辑html文件可以形成网页的框架,里面成对的标签可以嵌套使用,使网页层次丰富而分明,而标签的属性可以更细化网页内容的的规范;导入css文件,通过里面各种样式装饰网页。
2.以上用到的主要标签和属性总结
附录:
最后附上源代码(这节课的内容较少,代码中没有注释,注释是个好习惯!)