【网页基础】前端网页入门之了解网站的基本结构（一）

最新推荐文章于 2024-05-16 14:27:48 发布

jessica__lu

最新推荐文章于 2024-05-16 14:27:48 发布

阅读量1.5k

点赞数 2

分类专栏：网页基础文章标签：前端网页网页基础

本文链接：https://blog.csdn.net/jessica__lu/article/details/85797342

版权

网页基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天决心开始学习python爬虫，但是在正式学习爬虫之前，有必要先了解一下要爬的网页的基本情况~由此也就开始更文章之旅，当作一种记录，同时如果能对其他跟我一样的初学者有半点帮助，那我真是会喜出望外的！当然最重要的是！！！本人刚刚开始起步，有不对之处，还望各位高手指正！！！

开始正文~~~~~

本文目的：①了解前端页面的基本构成

②简单制作一个网页

Part1:网页的构成三大块：

一.HTML

相当于房子的结构，规划哪里是客厅哪里是卧室

二.CSS

相当于房子的样式，房间装修成什么样，墙壁涂成什么颜色

三.JavaScript(相较于前两种在爬虫中使用的不高）

相当于房子的功能，各电器发挥的作用

Part2:基础的命令及含义

<div>相当于框架部分
<p>相当于写文字的内容
<li>相当于列表，1,2,3,4,5那种列表
<img>标签之后可以插入一张图
<h1> <h6>代表不同字号的标题
<a href = "">此标签可以把各种链接写进来

在py中新建一个html的项目后如上图所示，

其中图片文字信息都会加载到body中，是网页中可见的部分，

head部分会加title以及css样式信息，是给浏览器看的，对于我们是不可见的

Part3:学习写一个网页

依葫芦画瓢写了一个网页，效果图是这样的：

源代码如下：

（jpg格式的是我的本地图片，大家放到自己那试验时替换成自己喜欢的图片即可~当然你可能还要自己写个css包）

<!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">
        <img 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>
                <img src="images/0001.jpg" width="100" height="90">
                <h3>The balh</h3>
                <p>Say something</p>
            </li>
            <li>
                <img src="images/0002.jpg" width="100" height="90">
                <h3>The balh</h3>
                <p>Say something</p>
            </li>
            <li>
                <img src="images/0003.jpg" width="100" height="90">
                <h3>The balh</h3>
                <p>Say something</p>
            </li>
            <li>
                <img src="images/0004.jpg" width="100" height="90">
                <h3>The balh</h3>
                <p>Say something</p>
            </li>
        </ul>
    </div>
    <div class="footer">
        <p>&copy;mugglecoding</p>
    </div>
</body>
</html>

jessica__lu

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
5
评论
【网页基础】前端网页入门之了解网站的基本结构（一）

今天决心开始学习python爬虫，但是在正式学习爬虫之前，有必要先了解一下要爬的网页的基本情况~由此也就开始更文章之旅，当作一种记录，同时如果能对其他跟我一样的初学者有半点帮助，那我真是会喜出望外的！当然最重要的是！！！本人刚刚开始起步，有不对之处，还望各位高手指正！！！开始正文~~~~~本文目的：①了解前端页面的基本构成 ②简单制作一个网页Par...
复制链接

扫一扫

专栏目录