python3 爬虫相关学习6：html 和 css 简要回顾

因为要学爬虫，需要了解下html内容，我之前大概看过，这算是回顾下

以下html简单回顾内容，跟着这个地址的教程看了一遍，感谢

https://www.w3school.com.cn/html/html_jianjie.asphttps://www.w3school.com.cn/html/html_jianjie.asp

CSS Id 和 Class选择器_w3cschoolCSS Id 和 Classid 和 class 选择器如果你要在 HTML 元素中设置 CSS 样式，你需要在元素中设置 "id" 和 "class" 选择器。id 选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML 元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以 # 来定义。以下的样式规则应用于元素属性 id = "para1":_来自CSS 教程，w3cschool编程狮。https://www.w3cschool.cn/css/css-id-class.html

下面是笔记

目录

1 html

2 常用标签

3 基本格式

4 基本结构

5 属性

5.1 属性的写法

5.2 属性的两种写法

5.3 比如  style属性

6 一些特殊的 tag 或属性

6.1 网页背景图

6.2 插入图片

6.3 超链接

6.4 一些其他的tag

6.5 强行段落内分行

6.6 table相关

6.7  列表相关

7 div 和 span 与 类 和ID

7.1 类

7.2  id 与格式

8 html 与 Css

8.1 一个简单的css例子

8.2 css文件的作用

8.3 html 网页样式生效的优先级

测试的原始文件

---

1 html

• 超文本标记语言
• hypertext, 指的就是html 可以传递 文本之外的，比如声音，图片等信息
• 结构性标记语言
• 非编程语言
• 为啥不是编程语言呢？因为主要是用于展示，没有其他编程的循环，条件等逻辑？可以表达数据，但是无法进行计算把？我理解

2 常用标签

• 注释：
• 文件头   
• 文件主体   
• 标题 
     

• 段落

• 链接     
• 图片    
• 空行，换行
     
• 分割线   

  ---

• “块级元素”译为 block level element
• “内联元素”译为 inline element
• div 典型的块级元素，是一种容器
• span 内联元素

3 基本格式

• 绝大多数标签tag都是成对出现的，有开始tag 和 结束tag
• 少数tag 只有一半 比如 
   

  ---

4 基本结构

    内容  < / tag> 

• 属性写在开始tag里
• 内容写在  开始tag 和结束tag之间

下面是例子

• 标题  
• 链接     
• 图片    

5 属性

5.1 属性的写法

• 属性写在开始tag里
• 可以些多个属性，用空格分隔
• 一般同一个属性只能有1个
• 同一个属性里有多个属性值，用字典的形式写    ="key1: value1; key2:value2;"

5.2 属性的两种写法

据说是淘汰的老写法，但是依然生效

• 格式是  属性=""
•   
•  

新的写法，格式都写在 style里，

• 格式是  
• style="key1:value1 ; key2:value2"
• 可以包含多个属性值，字典的;分割

5.3 比如  style属性

   

• 一个tag里可以有多个属性，但是同一个属性只能有1个
• 只能有1个 style 属性
• 这个style里可以设置多个 属性值，用字典的key:value 形式写

6 一些特殊的 tag 或属性

6.1 网页背景图

• 可以设置居中不平铺
• background-repeat="no-repeat" background-attachment="fixed"
• 实际测试发现,  gif 一定会被平铺，而jpg等是可以的

实测

• 写法1 ：用style写，发现不好使，也许是语法有错误

• 写法2：直接写3个属性，好使

6.2 插入图片

6.3 超链接

• 格式
• href= ""
• name 是开发者自己方便的，网页上不显示
• 打开百度
• href引用内容： 相对路径，绝对路径的，还有网址都可以
• 下面是效果
• href 只在鼠标停留时菜显示 悬浮内容

6.4 一些其他的tag

Written by Donald Duck.
 
Visit us at:

Example.com

Box 564, Disneyland

USA

The Scream by Edward Munch. Painted in 1893.

6.5 强行段落内分行

 看我一段内强行分行
了，对不对？

6.6 table相关

• th 字段名，加粗显示
• tr 行
• td 内容

    

         
学号
         
成绩
    
    

         
101
         
90
    
    

         
102
         
95
    

6.7  列表相关

• ul 无序列表
• ol 有序列表
• dl 自定义列表

       
 语文
       
 数学
       
 英语
       
计算机




       
 语文
       
 数学
       
 英语
       
计算机

7 div 和 span 与 类 和ID

7.1 类

• 我现在的理解，div 就是为了方便，设置 多个块级内容的 格式皮肤，span同理
• 可以用于 div 块级格式
• 可以用于 span级别的格式
• 类可以被多个 元素使用，但是id只能被一个元素使用

注意下面的例子
下面这2个例子都是转的，直接拿来用下，
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 

London

London is the capital city of England. 
It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants.

 

 span

My Important Heading

7.2  id 与格式

• # myheader
• id=myheader

My Header

8 html 与 Css

8.1 一个简单的css例子

• html里可以直接引用外部的css文件

css1.css的内容

body {
  background-color: lightblue;
}

h1 {
  color: blue;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

8.2 css文件的作用

• Css最大的作用是可以独立于单个的html，相当于一个公用的网页皮肤
• 作为外部文件引用
• 可以作为很多html的外部格式

8.3 html 网页样式生效的优先级

html 本身也可以在内部设定格式，也可以引用外部的css,

但是优先级不一样

• 优先级最高：本tag内部的设定的格式
• 优先级中：更高上级，比如 body设定的格式
• 优先级最低：外部文件css

测试的原始文件

html1.html

 
 "网页1"







 "1级标题"






 "2级标题"
 "3级标题"
 "这是一句话"
 "4级标题"4
 "这是另外一句话"
  看我一段内强行分行
 了，对不对？


WWF 的目标是：构建人与自然和谐共存的世界。
以下内容引用自 WWF 的网站：

五十年来，WWF 一直致力于保护自然界的未来。
世界领先的环保组织，WWF 工作于 100 个国家，
并得到美国一百二十万会员及全球近五百万会员的支持。



WHO 成立于 1948 年。
WHO 成立于 1948 年。
WHO 成立于 1948 年。
WHO World Health Organization 成立于 1948 年。


Written by Donald Duck.
 
Visit us at:

Example.com

Box 564, Disneyland

USA


The Scream by Edward Munch. Painted in 1893.
This text will be written from right to left


    

         
学号
         
成绩
    
    

         
101
         
90
    
    

         
102
         
95
    





       
 语文
       
 数学
       
 英语
       
计算机




       
 语文
       
 数学
       
 英语
       
计算机





    
Coffee
    
Black hot drink
    
Milk
    
White cold drink



打开百度