对一段代码或者一行特别需要注意的代码注释
不要疯狂的注释,太啰嗦,漂亮的代码自己会说话
欢迎小伙伴们关注讨论技术问题,今天的问题是你还觉得怎么写怎么更优雅,包括框架代码也可以。
什么学习HTML?
理解HTML代码是制作网页的基本技能。在互联网高度发达的今天,网页制作技术开始变的和修图、处理视频一样重要。
第一,学会制作网页就可以把自己想要展示的信息让其他人使用浏览器观看,无论是文字、照片还是视频都可以通过浏览器观看,甚至是分享自己制作的小游戏。
第二,理解网页运行的基本原理后可以更好的浏览他人的网页,寻找有用信息,更合理的使用第三方工具,简单高效的制作自己的网页。
HTML学习难度与重要性
HTML代码本身非常容易理解,使用也非常简单,但是单纯使用HTML代码写出的网页效果和我们平时看到的网页相差甚远。要想做出一个漂亮的页面,我们还需要CSS和JavaScript的帮助。
HTML、CSS、JavaScript这些不同的代码都有什么作用呢?简单来说,HTML代码可以为网页提供基本内容,比如文字、图片、音乐、视频等。CSS代码可以为页面安排布局,比如标题的位置、字体、颜色、大小等,笼统的说就是为HTML代码添加的内容增加样式信息,例如修改位置、尺寸、颜色等属性。JavaScript代码可以为页面提供交互(互动)功能,例如通过按钮控制页面内容的隐藏、出现,或者为多张图片添加轮播功能等。
对比起来,HTML的学习难度最低,但作用是最重要的,因为一切页面的基础是内容,没有内容,样式与交互都不存在。
认识HTML基本结构
第一行 <!DOCTYPE HTML>
第二行 <html>
第三行 <head>
第四行 </head>
第五行 <body>
第六行 </body>
第七行 </html>
以上七行代码是一个网页文件的HTML代码的基本结构。
大家观察一下可以发现一个规律,每一行的内容都是写在“<>”里面的。原因说来话长,先记住就行。每个写在“<>”里面的内容叫做“标签”。以后“标签”这个词会经常出现。
第一行<!DOCTYPE HTML>标签指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令(这句话可以暂时不必理解)。重要的是这句傲娇的代码只能存在在HTML代码的第一行!
第二行<html>标签与第七行的</html>标签是一对,“<html>”叫做开始标签,“</html>”叫做结束标签。他们之间的区别在于结束标签比开始标签多一个“/”。这是HTML代码的一个重要规律,以后我将要学到的大部分标签都是这样的,可能浏览器有些强迫症吧,如果没有结束标签它会很不舒服,有可能会消极怠工而产生麻烦(不能正常显示)。不过遗憾的是<!DOCTYPE HTML>太傲娇,至今没有另一半。<html> 与 </html> 标签限定了文档的开始点和结束点。
第三行与第四行组成一对,叫做“head”标签。顾名思义,这个“头”标签里的内容统领全局,比如控制布局与样式的CSS代码文件和添加互动功能的JavaScript代码文件在这里添加或导入;搜索页面用的关键词信息在这里添加;页面信息的编码方式也是由此指定;浏览器窗口的标题也在这里显示。
第五行与第六行组成一对,叫做“body”标签。用来显示所有的页面内容信息。
画个图来表示一下这四个标签的层级关系(就是谁包含谁的意思,或者谁在谁的势力范围内出现):
边学边练------写一个最简单的页面
正所谓万丈高楼平地起,下面我们就动手做我们的第一个网页文件。
工具:电脑,安装一个浏览器(IE 火狐 谷歌浏览器都可以),确定“记事本”工具可用。
有了以上工具我们就可以写了。
Step1 新建一个.txt文件。
操作如下:
(1)选择合适的磁盘,比如D盘或F盘新建一个文件夹,命名为“网页”。点击进入。
(2)在空白处点击鼠标右键新建一个文本文件,命名为“第一个页面”。这时我们就有了一个“第一个页面.txt”文件了。
如果你的电脑不显示“.txt”这样的文件后缀,可以在屏幕左上方寻找“查看”菜单,如图2
图 2
点击后,出现如下菜单如图3,点击“选项”。
图 3
点击“查看”,去掉“隐藏已知文件类型的扩展名”选项前的“对号”,如图4所示。这时就能显示或修改文件后缀了。
图 4
Step2 添加内容
(1)双击打开“第一个页面.txt”文件,把HTML基本结构共七行代码输入进去。
(2)保存,关闭文件,在“第一个页面.txt”文件上点击鼠标右键,选择“重命名”,将“.txt”修改为“.html”。这时,系统会提示,如图1,大胆点“是”。
图 1
这时我们的文件就变成了html网页文件了。
我们双击这个文件发现浏览器内一片空白,这就好比我们在桌子上摆了个碟子,里面并没有放美食。浏览器中的一片白就是空碟子的颜色,而HTML基本结构就是这个碟子。
下面我们往碟子里加点东西。
Step3 添加内容
(1)在“第一个页面.html”文件上点击鼠标右键,选择“打开方式”,选择“记事本”,如果没有“记事本”选项,请点击“选择其他应用”,点击选择最下面的“更多应用”,选择“记事本”。下一次选择“打开方式”时,“记事本”就会出现了。
(2)在<head></head>标签之间添加“<title>学习写第一个网页</title>”。在<body></body>之间添加“<h1>第一个网页</h1>”;“<p>随着学的内容越来越多,网页就会越来越漂亮了!</p>”完成如图5
图 5
(3)保存,关闭,双击打开!效果如图6
图6
今天的边学边做就到这里,下一次会详细解释<head>标签、<body>标签中常出现的子标签以及它们各自的作用。
第二篇《边学边做网页篇——<head>标签里装点啥?》http://mp.toutiao.com/preview_article/?pgc_id=6738988870622249479
面的制作一直是 Python 的痛!使用 Python 制作桌面端界面是非常痛苦的过程(又难学又难看)。不过,Python 已经出现了几个基于web前端的库,他们的基本机制大同小异,如果对 界面操作性没有太大要求,那么这些库就比较适合你 。
这个系列基于 pywebio 的一系列实战应用,让我们从实战中学习这个库的使用!
如果对你有帮助,记得转发推荐给你的好友!
你的点赞、收藏是对我的最大鼓励!
本节源码回复"pywebio"即可获取
本节最终效果动图:
安装库:
pip install -U pywebio
先输出一段内容试试效果:
import pywebio
import pywebio.output as output
def main():
output.put_html('表格显示程序')
if __name__=='__main__':
pywebio.start_server(main, port=8080, debug=True, cdn=False,auto_open_webbrowser=True)
执行这段脚本,如无意外你的浏览器就启动了一页,地址是 http://localhost:8080 :
如果你不熟悉 html 的各种标签,你可能连基本的排版都做不到。
这还好,pywebio 还支持 markdown:
def main():
output.put_markdown('# 表格显示程序')
output.put_markdown('功能如下:')
output.put_markdown("""
- 选择文件
- 自动加载输出表格一部分内容
""")
只有输出操作是满足不了需求,界面上很多输入操作。
选择文件就是一种输入操作(用户输入内容到界面上):
import pywebio
import pywebio.output as output
import pywebio.input as input
def main():
output.put_markdown('# 表格显示程序')
output.put_markdown('功能如下:')
output.put_markdown("""
- 选择文件
- 自动加载输出表格一部分内容
""")
file = input.file_upload('选择一个excel文件','.xlsx')
看看效果:
点击右边的"Browse"按钮,即可从弹窗中选择excel文件。
点击提交按钮后,之前的代码就会继续往下执行。
有了文件内容,我们用 pandas 读取:
import pywebio
import pywebio.output as output
import pywebio.input as input
import pandas as pd
def main():
output.put_markdown('# 表格显示程序')
output.put_markdown('功能如下:')
output.put_markdown("""
- 选择文件
- 自动加载输出表格一部分内容
""")
file = input.file_upload('选择一个excel文件','.xlsx')
df = pd.read_excel(file['content'])
output.put_html(df.head(10).to_html())
看看效果:
最终的代码如下:
import pywebio
import pywebio.output as output
import pywebio.input as input
import pandas as pd
def main():
output.put_markdown('# 表格显示程序')
output.put_markdown('功能如下:')
output.put_markdown("""
- 选择文件
- 自动加载输出表格一部分内容
""")
file = input.file_upload('选择一个excel文件','.xlsx')
df = pd.read_excel(file['content'])
output.put_html(df.head(10).to_html())
只是加载数据太没趣了?下一节将进一步改进,加载数据后可以对数据查询
推荐阅读:
*请认真填写需求信息,我们会在24小时内与您取得联系。