课时07 第一节课程：认识网页的构成

最新推荐文章于 2024-04-05 15:45:28 发布
最新推荐文章于 2024-04-05 15:45:28 发布
阅读量514 收藏
点赞数
分类专栏： -----四周爬虫系列
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GeekLeee/article/details/52723397
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>the blah</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <div class="header">
        <image src="images/blah.png">
        <ul class="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Site</a></li>
            <li><a href="#">Other</a></li>
        </ul>
    </div>
    <div class="main-content">
        <h2>Article</h2>
        <ul class="article">
            <li>
                <image src="images/0001.jpg" width="100" height="90">
                <h3><a href="#">themeone</a></h3>
                <p>something to say</p>
            </li>
            <li>
                <image src="images/0002.jpg" width="100" height="90">
                <h3><a href="#">themeone</a></h3>
                <p>something to say</p>
            </li>
            <li>
                <image src="images/0003.jpg" width="100" height="90">
                <h3><a href="#">themeone</a></h3>
                <p>something to say</p>
            </li>
            <li>
                <image src="images/0004.jpg" width="100" height="90">
                <h3><a href="#">themeone</a></h3>
                <p>something to say</p>
            </li>
        </ul>
    </div>
    <div class="footer">
        <p>GeekLee</p>
    </div>
</body>
</html>
效果图： 
<!DOCTYPE html>
<html lang="en">
<head> <!--head部分,填入给浏览器看的内容(以下文字部分均为注释)-->
    <meta charset="UTF-8">
    <title>The blah</title>
    <link rel="stylesheet" type="text/css" href="homework.css"> <!--引用文件夹中的css样式:homework.css-->
</head>
<body> <!--body部分,填入在网页上可见的内容,也就是给人看的内容-->
    <div class="header"> <!--第一个div,对应header头部部分,使用class=""引用css中对应的样式-->
        <img src="images/blah.png"> <!--引用logo图片-->
        <ul class="nav"> <!--使用ul标签构建导航模块,并且引用导航样式-->
            <li><a href="#">Home</a></li>  <!--使用三个li标签套嵌a标签,创建3个带链接的导航栏-->
            <li><a href="#">Site</a></li>
            <li><a href="#">Other</a></li>
        </ul>
    </div>
    <div class="main-content"> <!--第二个div,对应content内容部分-->
        <h2>The Beach</h2>  <!--使用h2标签实现标题样式-->
        <hr>  <!--使用hr标签实现水平分割线,需要注意的是这个标签比较特殊,在html中只有开始标签<hr>,没有结束标签</hr>-->
        <ul class="photos"> <!--使用ul标签构建图片模块,并且引用图片样式-->
            <li><img src="images/0001.jpg" width="150" height="150" alt="Pic1"></li> <!--使用三个li标签套嵌img标签,创建3个并列的图片,图片限定了宽高;alt是 img标签的属性,是图片的文字提示-->
            <li><img src="images/0003.jpg" width="150" height="150" alt="Pic2"></li>
            <li><img src="images/0004.jpg" width="150" height="150" alt="Pic3"></li>
        </ul>
        <p> <!--p标签实现一段文字的效果-->
            stretching from Solta to Mljet, and this unique cycling trip captures the highlights with an ideal
            balance of activity, culture and relaxation. Experience the beautiful island of Korcula with its picturesque old town,
            the untouched beauty of Vis, and trendy Hvar with its Venetian architecture. In the company of a cycling guide,
            this stimulating journey explores towns and landscapes, many of which are on UNESCO's world heritage list.
            Aboard the comfortably appointed wooden motor yacht,
            there is ample time between cycles to swim in the azure waters and soak up the ambience of seaside towns.
        </p>


    </div>
    <div class="footer">  <!--第三个div,对应footer页脚部分-->
        <p>&copy; Mugglecoding</p> <!--&copy;是©的固定写法-->
    </div>
</body>
</html>
效果图如下：
GeekLeee
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Python实战——1_1.网页制作
wangishero的专栏
05-15 1万+
Python实战——1_1.网页制作引言网页的组成部分： CSS样式 - 给结构以装饰 Html - 结构部分 JavaScript- 功能实现 代码部分第一部分为网站的基本结构（在IDE中新建网页后既给出）<!DOCTYPE html> <html lang="en"> <head><!--head部分,填入给浏览器看的内容(以下文字部分均为注释)--> <meta charset="UT
课时07 第一节课程：认识网页的构成.flv
11-01
从基础爬虫到商业化应用爬虫，本套课程满足你的所有需求。本课程是一门面向企业实际需求，专为零基础想入门并进阶中级python爬虫工程准备。
使用python开发一个简易的网页
07-27 9784
接下来，我们可以使用 PyQt5 中的 QWebEngineView 控件来实现浏览器的基本界面。以下是一个基本的 Python 代码示例，该示例创建一个带有地址栏和用于浏览网页的控件的简单浏览器窗口。这个例子中，我们创建了一个工具栏来放置前进、后退、刷新和添加到书签的按钮，并将它们连接到相应的操作。
如何使用Python制作网站？
weixin_34372728的博客
06-14 6639
网站/ Web应用程序包含两个主要部分。前端：客户端。后端：服务器端。前端/客户端只不过是您在浏览器上看到的用户，即网页，布局，图像以及按钮和徽章等小部件。设计我们需要的任何网站/ Web应用程序的前端 HTML：在我们的网页上添加标题，文字，段落等元素。这是一个普通HTML网站的常规网站：很平淡无聊，不是吗？为了使事物更好看并添加颜色，我们使用称为CSS或层叠样式表的内容来...
python制作简单网页_怎么用python简单的制作一个网页
weixin_36199877的博客
03-02 3万+
用python简单的制作一个网页的方法和详细的操作步骤如下：1、首先，打开sublime text 3并创建一个新的PY文件，如下图所示。2、其次，import os，因为涉及系统文件的路径，因此首先在此处导入系统模块，如下图所示。3、接着，html = open("E:\\Download\\new\\new.html", "w")，创建一个变量，然后设置文件名，注意用w写方式，创建一个新的HT...
Python制作网页Day 1（一个简单的网页）
April_town的博客
07-02 2万+
一个简单的网页。为了让aaaaaa传入html中显示出来，我们需要在两文件之间用一个变量联系起来，这个变量命名随意（最好与原变量name区分开来），如namex，它的作用是接受name所赋的字符，然后在html中替换{{namex}}。当我们打开网页并在网址后添加"/haha"时，仍然无法成功看到结果，因为我们还需要把0.0.0.0这一地址更改成电脑在局域网下的IP地址，这样就可以在本机查看运行结果。在网址后添加"/haha"，得到与上一次一样的运行结果。
一年级数学上册第八单元：认识钟表第一课时课件.ppt
10-21
这份“一年级数学上册第八单元：认识钟表第一课时课件”旨在帮助孩子们初步了解和掌握时间的概念，特别是钟表的基本结构和读时方法。 首先，通过猜谜语的方式引入主题，激发学生的学习兴趣。谜语中的“好朋友”指的...
《认识人民币》第一课时.ppt
12-04
《认识人民币》第一课时是...总的来说，《认识人民币》第一课时是一门综合性的课程，它结合了数学、社会学、经济学和文化知识，旨在帮助孩子们建立对货币和经济的基本理解，同时培养他们的实践操作能力和逻辑思维能力。
二年级数学上册第一单元：长度单位12认识线段第一课时课件.ppt
10-19
在二年级数学的学习中，第一单元重点讲解了长度单位，特别是对线段的认识。线段是几何学中最基本的概念之一，它是指两个端点之间的连线，具有一定的长度且不向两端无限延伸。在这个课件中，学生将学习如何使用长度...
python制作简单网页_用python制作简单网页
weixin_39750195的博客
11-21 3909
Django项目是一个定制的框架，可以和Python一起相结合制作网页。Django框架是用于创建模型的对象关系映射，也是为最终用户设计完美的管理界面。学习python语言的朋友可能尝试过用Django做一个网站，有的朋友可能会用bootstrap的CSS库来做，事实上做的还挺好看的。本文给大家介绍的是一个简单的网页制作，利用python Django来做的，下面我们一起来看看吧。1 、创建一个d...
python入门教程（runoob网页版制作）chm
03-15
python经典入门教程，python经典入门教程 python经典入门教程python经典入门教程
python web网页制作 豆瓣250部高分电影
10-07
python web网页制作 豆瓣250部高分电影，可用于Python web练习用，程序亲测有效
python可以开发网页吗_请问python可以进行web开发，可是网页是什么网页？
weixin_39703926的博客
11-21 907
Python是可以开发网站的，国内的豆瓣就是典型的Python开发的；使用python Django做网页的步骤：1 、创建一个django项目（使用django-admin.py startproject MyDjangoSite ）2、建立视图from django.http import HttpResponsedef hello(request): return HttpResponse(...
python制作简单网页_Python制作简单的网页爬虫
weixin_31495637的博客
02-10 256
1 top/anlu.html" title="安陆历史天气查询2 top/badong.html" title="巴东历史天气查询3 top/baokang.html" title="保康历史天气查询4 top/caidian.html" title="蔡甸历史天气查询5 top/changyang.html" title="长阳历史天气查询6 top/chibi.html" title="赤壁...
你如何使用Python制作网站？
很酷的站长的博客
01-13 8175
在本文中，我们将讨论如何使用Python制作网站。Python 是一种 1991 年的编程语言，在过去十年中越来越受欢迎。如今，Python编码器在计算机行业中的需求量很大。Python是一种通用编程语言，这意味着它几乎可用于开发任何类型的计算机程序，包括网站。它是一种使任何开发人员受益的编程语言，因为它学习起来非常简单，同时对于一些最复杂的应用程序来说仍然足够强大。如果你想学习如何用Python设计一个网站，你需要熟悉语言以及网站是如何工作的。
Python实战1_1：做一个自己的网页
热门推荐
开发学习者
06-22 4万+
参加了Python实战课程，此为第一节课的练习总结成果HTML代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>The Blah</title> <link rel="stylesheet" type="text/css" href="homework.css"> </head> <
基于python的网站设计,python网站开发教程
最新发布
yuuuuuuuu77的博客
04-05 1456
要掌握 Django，必须了解 Django 的 MTV 模型，这是非常重要的内容，不管是 Django1 还是 2 以及后面正在更新的 3 系列，MTV 模型是永远不会变的。M：「Model」 模型，数据管理T：「Template」 模板，网页展示V： 「View」 视图，逻辑控制这三者是 Django 的网页的运行机制，下面单独介绍下 MTV 每个模板的功能。Model 模型，是负责管理数据的。每个网站都需要有数据库用于存储网站数据，网站需要展示数据时，也需要从数据库查询并读取数据。
2个Python学习网站制作教程
python爬虫人工智能大数据
03-15 947
最近次条总结了一些2个Python学习网站制作教程的一些核心技术，这里整理了下一些目录，分别是两个网站，大部分技术都在前端，熟悉前端的话直接可以查看网页源码对应去了解学习...
入门指南：HTML文档构建与网页设计基础
- 课程详细规划了章节，第一部分着重于网页和网站的概念，包括网页的定义（作为互联网上的文件，通常以index或default开头），以及网站作为一个包含相关网页集合的概念。此外，还会介绍首页的作用和常见结构。 2. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值