爬虫基础——html常见标签

目录

0.标签概括

1.标题标签

2.文本标签

3.图片标签

4.链接

5.容器

6.表格

7.class 属性

---

0.标签概括

信息有很多不同的展现形式，比如标题、文本、图片、链接、表格、类等等。

1.标题标签

比如：

<h1>这是一个一级标题</h1>

<h2>这是一个二级标题</h2>

<h3>这是一个三级标题</h3>

<h4>这是一个四级标题</h4>

数字越小，表示标题层级越大，或者直观来说，标题的字号越大，标题层级越大。但是HTML只定义信息而CSS会对网页修饰，因此字号不一定能够准确判定标题的层级。不加CSS修饰的结果如下:

 

2.文本标签：<p>和</p>

比如:

<p>给岁月以文明</p>

<p>而不是给文明以岁月</p> 

不同<p>标签之间默认换行，如果向手动换行，可以在文本中加入<br>。

比如：

<p>给岁月以文明<br>而不是给文明以岁月</p>

这个标签只有起始标签，没有配对的闭合标签

格式化内容：<b>,<i>,<u>

<p>给<b>岁月</b>以文明</p>（给包含的文字加粗）

<p><i>而不是给</i>文明以岁月</p>（让包含的文字变成斜体）

<p>给<u>岁月</u>以文明</p>（给包含的文字加斜体）

3.图片标签：<img src="">

这个和<br>一样，不需要闭合标签

src必须赋予值，配上图片的路径，才能知道图片来自哪里

图片来自其他链接的写法：

<img src="images.weserv.nl/?url=……"width = "500px" height ="600px">(px表示像素)

4.链接：

<a heref = "https://baidu.com"target="_self">百度</a>（加入链接)

默认是在当前页面直接跳转，如果想从空白页跳转可以写成:

<a heref = "https://baidu.com"target="_blank">百度</a>

5.容器：<div>和<span>

<div style="background-color:red;">

      <a href ="https://baidu.com">div元素下的链接1</a>

      <a href = "https://baidu.com">div元素下的链接2</a>

</div>

<span style ="background-color:red;">

       <a href ="https://baidu.com">span元素下的链接1</a>

       <a href = "https://baidu.com">span元素下的链接2</a>

</span>

二者的区别是 <div>是块级元素，一行只能由一块，否则换行

<span>是内联元素，一行能有很多个

列表：

有序列表<ol>(是ordered list 的简称)

<ol>    

    <li>语文</li>(li是list item的简写)

    <li>数学</li>

    <li>英语</li>

</ol>

无须列表<ul>(unordered list)

<ul>

    <li>语文</li>

    <li>数学</li>

     <li>英语</li>

</ul>

6.表格：

<table border="1">(表示表格的标签，里面会嵌套一些和表格相关的元素,boder表示边框)

       <thead>(表示表格的头部，比如表格的第一行)

                  <tr>(表示表格行)(table row)

                          <td>表头1</td>

                          <td>表头2</td>

                  </tr>

       <tbody>(表示表格的主体)

                  <tr>(表示表格行)

                          <td>111</td>(table data:表示一行里一个单元格里的数据)

                          <td>222</td>

                  </tr>

                   <tr>

                           <td>333</td>

                           <td>444</td>

                   </tr>

       </tbody>

       </thead>

</table>

7.class 属性

(主要是为了便于区分，后面的内容是文章的哪一块)

<p class="content">给岁月以文明</p>(表示文章文本)

<p class="content">而不是给文明以岁月</p>

<p class ="review">五星好评！</p>(表示文章的评论)