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

今天决心开始学习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>

 

发布了5 篇原创文章 · 获赞 2 · 访问量 2098
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览