Python / 03 HTML 与 CSS 基础入门

HTML 与 CSS 基础入门

正所谓,知己知彼,百战不殆。我们爬虫的爬取对象,就是各式各样的网页,只有对网页的基本内容达到熟悉的程度,才能顺利的书写我们的爬虫程序。

1. HTML 基础

  • HTML(HyperText Markup Language)是一种超文本标记语言;

  • CSS(Cascading Style Sheets)简称为层叠样式表。

大家如果只是看这两个名字的定义,估计仍然是一头雾水。这俩东西到底是干啥的?

我给大家举一个例子就明白了,大家应该都画过画吧,即使没有亲自画过应该也见过。毕竟吃猪肉和见猪跑你总得占一样吧。

在画画的时候,我们首先会拿画笔勾勒出图形的样式骨架,之后会涂上一些好看的颜色让画变的更美观。我们写网页的时候也是一样的道理,HTML 就相当于画笔,用于勾勒页面的骨架。CSS 则是好看的颜色,让页面的样式更加美观。

下面我们来认识一下页面的骨架 HTML:

Tips: 可以新建一个 txt 文件,将下面的代码复制进去,然后将文件的后缀名改为 .html ,然后使用浏览器打开就可以看到效果:

HTML 的标题

<!DOCTYPE html>  
<html><head>  
	 <title>欢迎访问慕课网</title>  
<head><body><h>这是一个标题</h>  
		 <h3>  
		 <bold>这是一个加粗的标题</bold>  
		 </h3><!-- 段落 -->  
		 <P>这是一个段落</P>   
		 <button>这是一个按钮</button>  
	 </body></html>

效果如下图所示:

HTML 中添加图片

<!DOCTYPE html>
<html>

<head>
    <title>欢迎访问慕课网</title>
    <head>

        <body>

            <h>这是一个标题</h>
            <h3>
                <bold>这是一个加粗的标题</bold>
            </h3>

            <!-- 段落 -->
            <P>这是一个段落</P>
            <button>这是一个按钮</button>


            <!-- 下面是慕课网图片 -->
            <img src="https://www.imooc.com/static/img/index/logo.png" alt="图片无法显示!">
            <!-- 超链接 -->
            <a href="https://www.imooc.com/">慕课网</a>
        </body>

</html>

效果如下图所示:

有序列表和无序列表

<!DOCTYPE html>
<html>

<head>
    <title>欢迎访问慕课网</title>
    <head>

        <body>

            <h>这是一个标题</h>
            <h3>
                <bold>这是一个加粗的标题</bold>
            </h3>

            <!-- 段落 -->
            <P>这是一个段落</P>

            <br>
            <br>
            <br>

            <button>这是一个按钮</button>
            <!-- 下面是慕课网图片 -->
            <img src="https://www.imooc.com/static/img/index/logo.png" alt="图片无法显示!">
            <img src="h" alt="图片无法显示!">

            <!-- 属性 href -->
            <a href="https://www.imooc.com/">慕课网</a>
            <!-- 列表 -->
            <ul>
                <li>无序列表</li>
                <li>无序列表</li>
                <li>无序列表</li>
                <li>无序列表</li>
                <li>无序列表</li>
            </ul>
            <ol>
                <li>有序列表</li>
                <li>有序列表</li>
                <li>有序列表</li>
                <li>有序列表</li>
                <li>有序列表</li>
                <li>有序列表</li>
            </ol>
        </body>

</html>

效果如下图所示:

表格

<!DOCTYPE html>
<html>

<head>
    <title>欢迎访问慕课网</title>
    <head>

        <body>

            <h>这是一个标题</h>
            <h3>
                <bold>这是一个加粗的标题</bold>
            </h3>

            <!-- 段落 -->
            <P>这是一个段落</P>

            <br>
            <br>
            <br>

            <button>这是一个按钮</button>
            <!-- 下面是慕课网图片 -->
            <img src="https://www.imooc.com/static/img/index/logo.png" alt="图片无法显示!">
            <img src="h" alt="图片无法显示!">

            <!-- 属性 href -->
            <a href="https://www.imooc.com/">慕课网</a>
            <!-- 列表 -->
            <ul>
                <li>无序列表</li>
                <li>无序列表</li>
                <li>无序列表</li>
                <li>无序列表</li>
                <li>无序列表</li>
            </ul>
            <ol>
                <li>有序列表</li>
                <li>有序列表</li>
                <li>有序列表</li>
                <li>有序列表</li>
                <li>有序列表</li>
                <li>有序列表</li>
            </ol>


            <!-- 表格 -->
            <table>
                <thead>
                    <tr>
                        <td>a</td>
                        <td>b</td>
                        <td>c</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>001</td>
                        <td>002</td>
                        <td>003</td>
                    </tr>
                </tbody>

            </table>
        </body>

</html>

效果如下图所示:

表单

<!DOCTYPE html>
<html>

<head>
    <title>欢迎访问慕课网</title>
    <head>

        <body>

            <h>这是一个标题</h>
            <h3>
                <bold>这是一个加粗的标题</bold>
            </h3>

            <!-- 段落 -->
            <P>这是一个段落</P>

            <br>
            <br>
            <br>

            <button>这是一个按钮</button>
            <!-- 下面是慕课网图片 -->
            <img src="https://www.imooc.com/static/img/index/logo.png" alt="图片无法显示!">
            <img src="h" alt="图片无法显示!">

            <!-- 属性 href -->
            <a href="https://www.imooc.com/">慕课网</a>
            <!-- 列表 -->
            <ul>
                <li>无序列表</li>
                <li>无序列表</li>
                <li>无序列表</li>
                <li>无序列表</li>
                <li>无序列表</li>
            </ul>
            <ol>
                <li>有序列表</li>
                <li>有序列表</li>
                <li>有序列表</li>
                <li>有序列表</li>
                <li>有序列表</li>
                <li>有序列表</li>
            </ol>


            <!-- 表格 -->
            <table>
                <thead>
                    <tr>
                        <td>a</td>
                        <td>b</td>
                        <td>c</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>001</td>
                        <td>002</td>
                        <td>003</td>
                    </tr>
                </tbody>

            </table>

            <!-- 表单 -->
            <form>
                <div>
                    <label>aaaa</label>
                    <input type="text" name="ssss" placeholder="ssssss">
                </div>
                <input type="submit" name="submit" value="提交">
            </form>
        </body>

</html>

网页显示结果如下:

2. CSS 基础

我们知道 CSS 是负责页面的样式,让页面更加的美观,那么 CSS 到底是如何让页面更加的美观呢,我们一起来看一下:

首先,我会给大家一个没有添加任何样式的 HTML,然后,我们一步一步的添加不同的样式来展示层叠样式表的效果。

首先,我们需要给 HTML 添加样式,但是,HMTL 有那么多标签,怎么给指定的标签或者一组标签更改样式那。这就引入了选择器的概念。通过选择器我们可以定位到 HTML 里的任何一个元素。

<!DOCTYPE HTML>
<html>
<head>
<title>CSS</title>

</head>
<body>
<p>Hello world!</p>
</body>
</html>

可以看到页面中只有 Hello world!这样的文本,并没有任何样式,如下图所示。下面我们就来给 Hello world!增加一些样式。

使用选择器选择 p 标签

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
   background: grey; //增加灰色背景
   color:white;     //改变字体颜色为白色
   font-size:  10pt;  //设置字体大小为10pt
} //使用选择器选择p标签

</style>
</head>
<body>
<p>hello world!</p>
</body>
</html>

我们通过选择器选择了 P 标签,然后给这个标签增加了灰色背景,字体为蓝色,字体大小为 10pt。

效果如下图:

背景

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
    background: grey; //添加灰色到背景颜色
}
</style>
</head>
<body>
<p>hello world!</p>
</body>
</html>

效果如下:

字体

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
    background: grey;
    font-size:  30pt; //调大字体到30pt
}
</style>
</head>
<body>
<p>hello world!</p>
</body>
</html>

效果如下所示:

颜色

<!DOCTYPE HTML>
<html>
	<head>
		<title>Example</title>
	</head>
	<body>
	</body>
</html>

最终效果,如下图所示:

Tips:CSS,其实有很多内容。我只是列出了最常用的五个部分来讲,这些内容其实基本涵盖了我们几乎所有的爬虫课所需要的知识。其他的更多高级内容,请大家移步到慕课网的相关内容进行学习。

3. 小结

这一个小节,我们通过几个小例子,熟悉了 Html 和 CSS 的基本使用。读者朋友们可以按照上述步骤,在自己的本机进行练习,来观察页面的样式和字体的变化。