网站首页实战教程html,Python实战课程1-1练习:创建一个网页

news/2024/5/20 21:21:12/文章来源:https://blog.csdn.net/weixin_29533307/article/details/117866749

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

bc22bcd15799?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

下面开始吧!

1.创建html文件

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

bc22bcd15799?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

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

bc22bcd15799?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

新建的html文件已经有了

和的标签。

Tips:

2. 编辑html文件

网页的

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

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

bc22bcd15799?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

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

bc22bcd15799?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

Tips:

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

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

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

·Header

·Main-content

·Footer

按照这样的框架用

bc22bcd15799?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

3. 填充html文件header内容

标签,导航标签。

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

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

bc22bcd15799?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

bc22bcd15799?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

bc22bcd15799?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

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

bc22bcd15799?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

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

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

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

bc22bcd15799?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

bc22bcd15799?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

然后在

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

bc22bcd15799?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

bc22bcd15799?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

图片按照大小要求在网页中被排版

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

bc22bcd15799?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

bc22bcd15799?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

5. 填充html文件footer内容

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

bc22bcd15799?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

要求特殊符号的 footer

bc22bcd15799?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

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

6. PyCharm查看html网页效果

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

bc22bcd15799?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

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

创建网页小结

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

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

bc22bcd15799?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

附录:

最后附上源代码(这节课的内容较少,代码中没有注释,注释是个好习惯!)

bc22bcd15799?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

bc22bcd15799?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

(本节完,待续。。。)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_726531.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

tplogincn服务器无响应,tplogin.cn网站打不开怎么办?

问:设置tplink路由器时,tplogin.cn网站进不去,无法对路由器进行设置,请问如何解决?答:tplogin.cn是tplink路由器的管理页面地址(登录地址),正常情况下,电脑/手机连接tplin路由器后&a…

附录5-SEO优化

SEO(Search Engine Optimization)搜索引擎优化,可以利用搜索引擎的规则提高网站再搜索引擎内的自然排名 我们现在用搜索引擎搜索1 此时 晋江文学城 的排名就要比 百度汉语 的排名高 不过这个应该不是自然排名 在前端中使用TDK三个标签进行SEO优化 T title 标题D …

几个常用的免费高清无版权图片网站

https://www.pexels.com https://pixabay.com https://www.ssyer.com/home https://unsplash.com https://stocksnap.io https://magdeleine.co https://visualhunt.com

网站⭐Windows下,将xampp升级为https

文章目录 🟥 将SSL文件放置到服务器中🟧 修改httpd.conf文件1️⃣ 去除如下的#2️⃣ 替换 Directory 中的内容3️⃣ 添加字段🟨 修改httpd-ssl.conf文件🟩 重启 apache🟥 将SSL文件放置到服务器中 在C:\SOFT\xampp\apache\conf(找到你的目录)文件夹下新建文件夹:…

python模拟登录网站_python模拟登录http basic authentication网站

当访问需要认证的网站时会提示输入正确的用户和密码如果密码错误会返回401的状态码401 Authorization Required 通过python脚本模拟登录#!/usr/bin/python #-*-coding:utf-8-*- import urllib2 #登录的用户名和密码 username "root" password "redhat" u…

tomcat网站根目录在哪里_学习织梦网站必需会的一件事:织梦网站数据备份

学习织梦网站必需会的一件事:织梦网站数据备份任务:宝塔面板织梦网站备份织梦CMS程序运行环境:PHPMySQL所以无论是备份还是还原,都涉及2个部分,一个是web文件的备份,一个是数据库的备份。做好数据备份是站长…

1. Jenkins 学习——传统网站部署流程

传统网站部署的流程 传统的网站部署,大家在运维过程中,网站部署是运维的工作之一,网站部署的流程大致分为: 需求分析—原型设计—开发代码—提交测试—内网部署—确认上线—备份数据—外网更新-最终测试,如果发现外网…

2. Jenkins 学习——目前主流网站部署的流程

目前主流网站部署的流程 目前主流网站部署方法,通过Hudson/Jenkins工具平台实现全自动部署测试,是一个可扩展的持续集成引擎,是一个开源软件项目,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能。Jenkins非…

php 开启phalocn 扩展_宝塔BT面板+wordpress如何开启Memcached缓存,让网站飞起来

宝塔BT面板wordpress如何开启Memcached缓存,让网站飞起来,主要减少查询,提升网站访问速度,降低卡顿的风险,减轻服务器压力今天有个朋友让我给他安装调试Memcached,也是一个wordpress站点,之前因…

java动漫网站开题报告_基于Java的动漫网站的设计与实现(JSP,SQL)

基于Java的动漫网站的设计与实现(JSP,SQL)(任务书,开题报告,外文翻译,毕业论文15000字,程序代码,SQLserver数据库,答辩PPT)摘 要随着科技的迅速发展,计算机技术已应用到社会的各个领域。随着计算机技术和通信技术的迅速发展,网络的规模也逐渐增大&#…

php刷网站关键词排名,刷百度快速排名 提升百度网站关键词快速排名上首页-环企优站...

静态URL是什么:URL的定义,是指网页地址或者网页 链接。一般通过URL中是否带有“?”、“ ”“”“php” 9;asp ;等字符来分辩 ,换句话说就是不带有任何 参数的URL,就是静态URL。 静态URL在搜索 引擎上有一定的好处。可 以更加方便…

php网站上传后打不开了,phpcms上传服务器后,后台打不开怎么办

phpcms上传服务器后怎么打不开后台?如果有报错信息,一般情况是需要改配置文件的。操作步骤如下:1、把网站打包通过FTP上传到服务器,服务器解压。2、数据库导出在导入服务器数据库。注意编码格式。3、网站程序解压完成修改配置文件…

爬取某网站景区列表并保存为csv文件

爬取某网站景区列表并保存为csv文件 网址:http://www.halehuo.com/jingqu.html 经过查看可以发现,该景区页面没有分页,不停的往下拉,页面会进行刷新显示后面的景区信息 通过使用浏览器调试器,发现该网站使用的是post请求,使用ajax传输数据 请求参数: 响应数据: 经过以上分析,…

查看网站收录情况

site:www.nfgjhr.com ,其中,不带www的收入录要比带www的要高。

化工网站开发_贵州省化工技术研发中心招聘简章

推荐课程贵州省事业单位2020年招考(公共基础知识)网课贵州教师招考网课 《教育综合知识》全新上线贵州省化工技术研发中心是在市场监管局依法注册的企业,主营业务为矿产和植被资源的高效利用研发、固体废弃物的综合利用及污染防控技术开发、技术交流与成果应用转化、…

mfc 弹出ocx与页面相对_网站404页面有什么用处

404页面是网站优化中必不可少的基础优化之一,404页面是客户端在浏览网页时,服务器无法正常提供信息,或是服务器无法回应,且不知道原因所返回的页面。当用户输入了错误的链接时,返回的页面,它会告诉浏览者其…

php源码仿三一重工,织梦仿三一重工大气企业网站php源码

★模板介绍★源码名称:仿三一重工大气企业网站php源码仿三一重工大气企业网站php源码,测试完整无错,兼容主流浏览器。模板包含安装说明,并包含测试数据。本模板基于DEDECms 5.7 GBK设计,需要 UTF-8版本的请自己转换。★…

SEO:使用prerender-spa-plugin预渲染解决seo问题

文章目录原理适合哪种网站实践技术栈具体实践本地部署线上部署遇到的问题原理 项目在本地打包的时候,挑选几个需要seo的页面路由,通过无头浏览器去爬取这些路由对应的渲染好的页面,然后将生成的.html文件打包到dist文件中,然后部署…

SEO:服务端动态渲染

原理 整体架构 seo-server 的具体实现逻辑 服务端对请求的 user-agent 进行判断,浏览器端直接给 SPA 页面,如果是爬虫,给经过动态渲染的 html 页面 方案 这里又分为两个方案: 方案1:node 对请求的 user-agent 进…