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

写法1 ：用style写，发现不好使，也许是语法有错误
<body style="background-image: url("E:\work\FangCloudV2\personal_space\2learn\python3\xiaogou.jpg") ;background-repeat:no-repeat; background-attachment: fixed; ">
写法2：直接写3个属性，好使

<body background="E:\work\FangCloudV2\personal_space\2learn\python3\xiaogou.jpg" background-repeat="no-repeat" background-attachment="fixed">

6.2 插入图片

<p></p>
<img src="E:\work\FangCloudV2\personal_space\2learn\python3\xiaogou.jpg" width="100" height="150"></img>
<br />   
</body>

6.3 超链接

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

6.4 一些其他的tag

<address>
Written by Donald Duck.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

6.5 强行段落内分行

<p> 看我一段内强行分行<br /> 了，对不对？
</p>

6.6 table相关

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

<table border="1">
    <tr>
         <th>学号</th>
         <th>成绩</th>
    </tr>
    <tr>
         <td>101</td>
         <td>90</td>
    </tr>
    <tr>
         <td>102</td>
         <td>95</td>
    </tr>

</table>

6.7 列表相关

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

<ul>
       <li> 语文</li>
       <li> 数学</li>
       <li> 英语</li>
       <li>计算机</li>

</ul>

<ol>
       <li> 语文</li>
       <li> 数学</li>
       <li> 英语</li>
       <li>计算机</li>

</ol>

7 div 和 span 与类和ID

7.1 类

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

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

<div class="cities">

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>

<body>

<div class="cities">
<h2>London</h2>
<p>
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.
</p>
</div> 

</body>
</html>

span

<!DOCTYPE html>
<html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>

<h1>My <span class="red">Important</span> Heading</h1>

</body>
</html>

7.2 id 与格式

# myheader
id=myheader

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>

8 html 与 Css

8.1 一个简单的css例子

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

<body >
<link rel="stylesheet" type="text/css" href="E:\work\FangCloudV2\personal_space\2learn\python3\css1.css">

</body >

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

<html>
<head> 
<h> "网页1"</h>
</head>



<body >
<link rel="stylesheet" type="text/css" href="E:\work\FangCloudV2\personal_space\2learn\python3\css1.css">

<h1 style="background-color:red ; text-align:center ; font-size:24px;  "> "1级标题"</h1>
<br>
<hr />
<br />
<hr>
<h2 style="text-align:center"> "2级标题"</h2>
<h3style="text-align:center"> "3级标题"</h3>
<p  > "这是一句话"</p>
<h4 style="text-align:center"> "4级标题"<sub>4</sub></h4>
<p> "这是另外一句话"</p>
<p>  看我一段内强行分行<br /> 了，对不对？
</p>

<p>WWF 的目标是：<q>构建人与自然和谐共存的世界。</q></p>
<p>以下内容引用自 WWF 的网站：</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来，WWF 一直致力于保护自然界的未来。
世界领先的环保组织，WWF 工作于 100 个国家，
并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>
<br />
<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>
<p><dfn title="World Health Organization">WHO</dfn> 成立于 1948 年。</p>
<p><dfn><abbr title="World Health Organization">WHO</abbr></dfn> 成立于 1948 年。</p>
<p><dfn>WHO</dfn> World Health Organization 成立于 1948 年。</p>

<address>
Written by Donald Duck.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
<bdo dir="rtl">This text will be written from right to left</bdo>

<table border="1">
    <tr>
         <th>学号</th>
         <th>成绩</th>
    </tr>
    <tr>
         <td>101</td>
         <td>90</td>
    </tr>
    <tr>
         <td>102</td>
         <td>95</td>
    </tr>

</table>


<ul>
       <li> 语文</li>
       <li> 数学</li>
       <li> 英语</li>
       <li>计算机</li>

</ul>

<ol>
       <li> 语文</li>
       <li> 数学</li>
       <li> 英语</li>
       <li>计算机</li>

</ol>


<dl>
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

<p></p>
<a href="https://www.baidu.com" name="111">打开百度</a>

<p></p>
<img src="E:\work\FangCloudV2\personal_space\2learn\python3\xiaogou.jpg" width="100" height="150"></img>
<br />   
</body>

<!--
注释呢？
空格呢？
关闭空元素 
 <a  属性> 内容  </a> 
 <br >   <br />  带斜杠的后者更保险，空行 ?  空元素，不需要结束标签
 <hr >  <hr /> 带斜杠的后者更保险，横线?
https://www.w3school.com.cn/tags/index.asp
https://www.w3school.com.cn/tags/html_ref_standardattributes.asp
<body bgcolor="grey">   过期了
<head> 里标题？网页标题？
align="center"  过期了
<p  style="color:red ;color pink" style="color:blue">  只能有1个style，否则只有第1个style生效，第一个style内部分号隔离，只有最后的属性生效，所以是pink


好像css的优先级低于html的内部格式style字典，因为这个可以是通用的，相当于 装饰函数？
文件内部的格式更优先，允许个性化的可能
<link rel="stylesheet" type="text/css" href="E:\work\FangCloudV2\personal_space\2learn\python3\css1.css">

内部某部分的style
内部同意style
外部css

<head>

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

style="background-color:gray" 
background="http://5b0
style="background-image:"http://5b0

<body style="background-image: url("E:\work\FangCloudV2\personal_space\2learn\python3\xiaogou.jpg") ;background-repeat:no-repeat;  background-attachment: fixed; ">

<body background="E:\work\FangCloudV2\personal_space\2learn\python3\xiaogou.jpg"  background-repeat="no-repeat" background-attachment="fixed">

div 块？ block?

http://5b0988e595225.cdn.sohucs.com/images/20180906/279f28c8a1184f2dbc8d3564824125d3.gif
“块级元素”译为 block level element，“内联元素”译为 inline element
-->


</html>