Python爬虫 认识HTML

认识HTML

网页一般由三部分组成，分别是 HTML（超文本标记语言）、CSS（层叠样式表）和 JScript（活动脚本语言）。

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。

HTML 是整个网页的结构，相当于整个网站的框架。带“＜”、“＞”符号的都是属于 HTML 的标签，并且大部分标签都是成对出现的。

一、HTML基础标签

（1）标题

HTML 标题是通过<h1> - <h6> 标签来定义的。

<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>
<h4>这是标题4</h4>
<h5>这是标题5</h5>
<h6>这是标题6</h6>

（2）段落

HTML 段落是通过标签 <p> 来定义的。

<p>这是一个段落</p>

（3）链接

HTML 链接是通过标签 <a> 来定义的。

<a href="https://www.baidu.com">这是通往百度的链接</a>

（4）图像

HTML 图像是通过标签 <img> 来定义的。

<img src="/images/pic.png" width="200" height="100" />

二、HTML表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。

（1）普通表格

<h1>一列:</h1>
    <table border="5">
      <tr>
        <td>100</td>
      </tr>
    </table>

<h1>一行三列:</h1>
    <table border="5">
      <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
      </tr>
    </table>

<h1>两行三列:</h1>
    <table border="5">
      <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
      </tr>
      <tr>
        <td>400</td>
        <td>500</td>
        <td>600</td>
      </tr>
</table>

（2）带标题和表头的表格

<h1>人员信息</h1>
<table border="4">
    <caption style="font-size: 150%;font-family: KAITI;color: red">人员信息表</caption>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>喝水</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>唱歌</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>男</td>
        <td>睡觉</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>男</td>
        <td>吃饭</td>
    </tr>
</table>

效果如下：

 

 

三、HTML列表

HTML 支持有序、无序列表。

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用 <ul> 标签

有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

列表项使用数字来标记。

<h3>有序列表</h3>
    <ol>
        <li>有序列表第一行</li>
        <li>有序列表第二行</li>
        <li>有序列表第三行</li>
        <li>有序列表第四行</li>
    </ol>

<h3>无序列表</h3>
    <ul>
        <li>无序列表第一行</li>
        <li>无序列表第二行</li>
        <li>无序列表第三行</li>
        <li>无序列表第四行</li>
    </ul>

效果如下：

 

四、HTML区块

HTML 可以通过 <div> 和 <span>将元素组合起来。

<div style="width: 500px">
    <div style="background-color: #ff359b;width: 500px;height: 50px"><h1 style="text-align: center">这是我当前的标题</h1></div>
    <div style="background-color: darkorange;height: 250px;width: 100px;float: left;">
        <b style="font-size: 20px">语文成绩</b><br>
        <b style="font-size: 20px">数学成绩</b><br>
        <b style="font-size: 20px">英语成绩</b><br>
        <b style="font-size: 20px">政治成绩</b><br>
        <b style="font-size: 20px">历史成绩</b><br>
        <b style="font-size: 20px">地理成绩</b><br>
        <b style="font-size: 20px">物理成绩</b><br>
        <b style="font-size: 20px">化学成绩</b><br>
        <b style="font-size: 20px">生物成绩</b><br>
    </div>
    <div style="background-color: #666666;height: 250px; width: 400px;float: left"></div>
    <div style="background-color: #ff305a;height: 30px; width: 500px;text-align: center;float:left">欢迎访问</div>
</div>

效果如下：

 

 

 五、HTML表单和输入

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

注意:表单本身并不可见。

<form action="">
    请输入账号: <input type="text" name="user"><br>
    请输入密码: <input type="password" name="password">
</form>

<input type="submit"> 定义了提交按钮。

当用户单击确认按钮时，结合相关代码，表单的内容会被传送到服务器。

<form>
    Username: <input type="text" name="user">
     <input type="submit" value="Submit">
</form>            

<button class="but" type="submit">登录</button>