Python爬虫之初识Html

最新推荐文章于 2024-09-16 00:18:01 发布

Fanchenjjj

最新推荐文章于 2024-09-16 00:18:01 发布

阅读量536

点赞数

分类专栏：爬虫文章标签： html 爬虫 css

本文链接：https://blog.youkuaiyun.com/fanchen0218/article/details/130159578

版权

爬虫专栏收录该内容

4 篇文章

订阅专栏

HTML

前言

网站：

把所有的网站资源文件（HTML,CSS,JS,图片,视频等）整合到一起(的一个文件夹)

WEB前端：HTML+CSS+JavaScript

HTML：结构标准，超文本标记语言，负责通过标签来表达网页的页面结构。

css：外观标准，层叠样式表标记语言，负责通过属性标记来表达网页的外观效果。

重点：

我们学习HTML与CSS不是为了写样式，而是了解HTML标签的结构，CSS中的选择器也就是长什么样子即可，为了后面的正则、xpath与bs4做铺垫准备

一、什么是HTML？

超文本标记语言

(1) 标签也叫做标记

(2) html是由标签/标记和内容组成的

(3) 标签是由标签名称和属性组成的

实例：

<人身高=“两米” 体重=“180斤”></人>

扩展：

使用协议为 http超文本传输协议

普通文本：文字内容

超文本：视频、音频、图片、文字…

二、HTML的主体标签

实例

<!DOCTYPE html>  #H5的头   声明文档类型 为html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/TDT/xhtml1-strit.dtd">  #之前的头文件 现在不用
<html>
<head>
	<title>标题内容</title>
  	<meta charset="UTF-8"> #设置字符集
</head>
<body>
  	放html的主体标签
</body>
</html>

html:文件是网页，浏览器加载网页，就可以浏览
head:头部分，网页总体信息
- title:网页标题
- meta：网页主体信息，会根据name(author/description/keywords)
- link:引入外部文件
- style：写入CSS
- script：写入JS
body:身体部分，网页内容

三、HTML的标签

标签分为：
单标签/单标记

如：<br /> /<br >

双标签/双标记

如: <p></p>

1、文本标签

<div></div> 块标签作用是设定字、画、表格等的摆放位置
<p></p> 段落标签自成一段会将上下的文字和它保持一定的距离
<h1>-</h6> 标题标签字体加粗自占一行
(!!!题目超过六会显示为文本)

2、图片标签

<img /> :在网页中插入一张图片

属性：

src：图片名及url地址 (必须属性)
alt: 图片加载失败时的提示信息
title：文字提示属性
width：图片宽度
height：图片高度

实例:

<img src="图片地址" title="文字提示" alt="图片加载失败显示得信息" width="宽" height="高" border="边框" />

注意：

如果宽和高只给一个那么为等比缩放如果俩个都给那么会按照你所给的宽和高来显示

3、路径

相对路径
- ./ 当前
- …/ 上一级
绝对路径(了解)
- 一个固定得链接地址(如域名)
- 从根磁盘一直到你的文件得路径

4、超链接

<a href=“链接地址” title=“提示信息” target=“打开方式”>点击显示得内容</a>

属性：

href必须，指的是链接跳转地址

target:

_blank 新建窗口得形式来打开

_self 本窗口来打开(默认)

title：文字提示属性（详情）

5、列表

无序列表
```
<ul>
	<li></li>  
</ul>
```
有序列表
```
<ol>
 	<li></li>
</ol>
```

自定义列表

<dl>
  	<dt>列表头</dt>
  	<dd>列表内容</dd>
</dl>

6、 HTML注释

多行注释：

快捷键：选中内容 ctrl+/

注释的作用：

代码的调试
解释说明

四、iframe

1、定义和用法

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

2、使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

<iframe src="链接"></iframe>

<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持，iframe 是不可见的。</p>

</body>
</html>

五 TABLE表格

table表格

1、属性：

width 宽
height 高
border 边框

2、标签：

tr 行标签

th 列头标签
td 列标签

实例：

<table>
  <tr>
    <th>我是表头</th>
    <th>我是表头</th>
    <th>我是表头</th>
  </tr>
  <tr>
    <td>我是单元格</td>
    <td>我是单元格</td>
    <td>我是单元格</td>
  </tr>
</table>

六 FORM表单

标签： <form></form>

1、 form属性

action	提交的地址
method	提交的方式
	get
		(1) 默认不写 为get传参  url地址栏可见
		(2) 长度受限制 （IE浏览器2k火狐8k）
		(3) 相对不安全
	post
		(1) url地址栏不可见 长度默认不受限制
		(2) 相对安全

2、input 标签

<input> 表单项标签input定义输入字段，用户可在其中输入数据。

如：

<input type="text" name="username">

3、 select 标签创建下拉列表。

属性：

name属性:定义名称,用于存储下拉值的

内嵌标签：

<option> 下拉选择项标签,用于嵌入到<select>标签中使用的;

属性：

value属性:下拉项的值

4、input 标签

type属性:表示表单项的类型:

值如下:

text:单行文本框
password:密码输入框
submit:提交按钮