python爬虫入门（三）之HTML网页结构

news2024/9/20 5:45:59

一、什么是HTML

1、网页的三大技术要素：

HTML	定义网页的结构和信息（骨架血肉）
CSS	定义网页的样式（衣服）
JavaScript	定义用户和网页的交互逻辑（动作）

2、一个最简单的HTML：用<>包围HTML标签

<!DOCTYPE HTML> ：告知浏览器文件类型是HTML

<html>：起始标签，表示开始（HTML文档的根）

<body>：表示文档的主体内容

</html>：闭合标签，表示结束

一个网页demo：保存文件（后缀.html）后，把文件拖进浏览器，或者右键选择用浏览器打开

浏览器就会进行渲染

<!DOCTYPE HTML>
<html>
   <body>
      <h1>
          这是一个标题
      </h1>
      <p>
          这是一段文字这是一段文字这是一段文字
      </p>
   </body>
</html>

3、如何查看网页的HTML源码

（1）浏览器点击右键->显示网页源代码->可以看到当前网页的HTML源码

（2）右键->检查->窗口左上角的小箭头图标->点击页面上任意一个东西时，都可以看到它对应哪一个HTML元素

二、HTML常见标签

1、<!DOCTYPE html> 告知浏览器要渲染HTML，展示给用户
2、缩进一般是2个或者4个，通过缩进可以让层级关系更加清晰
3、head定义文档的头部，放关于网页本身的信息，
  eg: title（网页的标题：展示在浏览器选项卡上的标题）
4、最小是六级标题，七级标题就是正常的文本了
5、刷新后效果才能更新，也可以在编辑器上安装一些能实时更新的插件（不同编辑器的插件名称不同）
6、<p>一行</p> <p>另起一行</p> 从而实现换行
  或者用<br>(</br>)换行标签
7、<b>加粗字体</b>
8、<i>把文本变成斜体</i>
9、<u>给文字加下划线</u>
10、<img src=""> 
   给网页加图片，必填属性src，它的值（scr即source）是指向图片的链接或者路径
   图片比较大时，可以用width或者height属性去指定图片的宽度或者高度 px是像素 空格分开
11、<a href="">添加超链接</a> 
   必填属性href，它的值是要跳转的目标网页的URL地址
   一般在当前窗口打开，要想在新窗口打开网页，可以指定一个target属性，target="_blank"
12、div和span都可以当成其他元素的容器，div独占一块，一行只能放一个div；
  而span一行可以有多个
  整体缩进tab，取消缩进shift+tab
13、<ol></ol> 有序列表ordered list （1.2. ...）
   <li>列表里面每一项都用这个标签</li> list item
   <ul></ul> 无序列表unordered list （小圆点）
14、<table> </table> 
    定义了表格本身
    <thead></thead> 头部（可以省略）
    <tbody></tbody> 主体
    <tr>数据</tr> 表格的行，table row，每一行都写tr
    数据里面是单元格td，几个单元格就写几个td
    给表格加边框 给table加个border的属性，把值设为1（值越大，表格的边宽就越宽）
15、可以给任意元素加上class，来定义元素的类，类在结合CSS和Javascript的时候会很有用

三、实战演练

<!DOCTYPE html>

<html>

  <head>
    <title>这是一个网页的标题</title>
  </head>

  <body>
    <div style="blackground-color: red;"> #把div里的HTML元素都加上一个红色的背景色
      <h1>
        我是一个一级标题
      </h1>
      <h2>
        我是一个二级标题
      </h2>
      <h6>
          我是一个六级标题
      </h6>
    </div>

  <p>
      这是一个文本段落这是<br>这是一个<i>文本段落</i>一个文本段落<br>这是<u>一个文本段落</u>这是一个文本段落
  </p>

  <p>
      这是<span>一个段落文本这是</span>一个<b>文本</b>段落<span>这是一个段落文本</span>这是一个文本段落这是一个段落文本
  </p>

  <a href="https://www.baidu.com" target="_blank">百度链接</a>

  <img src="C:\Users\zzr\Desktop\img'\你的名字.jpg" width="500px">

  <ol>
      <li>我是第一项</li>
      <li>我是第二项</li>
  </ol>
  <uo>
      <li>我是一项</li>
      <li>我是另二项</li>
  </uo>

  <table border="1" class="data-table">
      <thead>
        <tr>
            <td>头部1</td><td>头部2</td><td>头部3</td>
        </tr>
      </thead>
      <tbody>
        <tr>
            <td>111</td><td>111</td><td>111</td>
        </tr>
        <tr>
            <td>111</td><td>111</td><td>111</td>
        </tr>
        <tr>
            <td>111</td><td>111</td>
        </tr>
      </tbody>
  </table>

  </body>

</html>

代码所写的网页页面如下：