HTML 和CSS

1?HTML 介紹
1.1 web 服務本質
import socket

sk = socket.socket()

sk.bind(("127.0.0.1", 8080))
sk.listen(5)

while True:
conn, addr = sk.accept()
data = conn.recv(8096)
conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
conn.send(b"<h1>Hello world!</h1>")
conn.close()
瀏覽器發請求 --> HTTP協議 --> 服務端接收請求 --> 服務端返回響應 --> 服務端把HTML文件內容發給瀏覽器 --> 瀏覽器渲染頁面
1.2HTML是什么？
超文本標記語言（Hypertext Markup Language, HTML）是一種用于創建網頁的標記語言。
本質上是瀏覽器可識別的規則，我們按照規則寫網頁，瀏覽器根據規則渲染我們的網頁。對于不同的瀏覽器，對同一個標簽可能會有不同的解釋。（兼容性問題）
網頁文件的擴展名：.html或.htm
?1.3HTML文檔結構
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>css樣式優先級</title>
</head>
<body>

</body>
</html>
<!DOCTYPE html>聲明為HTML5文檔。
<html>、</html>是文檔的開始標記和結束的標記。是HTML頁面的根元素，在它們之間是文檔的頭部（head）和主體（body）。
<head>、</head>定義了HTML文檔的開頭部分。它們之間的內容不會在瀏覽器的文檔窗口顯示。包含了文檔的元（meta）數據。
<title>、</title>定義了網頁標題，在瀏覽器標題欄顯示。
<body>、</body>之間的文本是可見的網頁主體內容。
注意：對于中文網頁需要使用?<meta charset="utf-8">?聲明編碼，否則會出現亂碼。有些瀏覽器會設置 GBK 為默認編碼，則你需要設置為?<meta charset="gbk">。
1.4HTML標簽格式
HTML標簽是由尖括號包圍的關鍵字，如<html>,?<div>等
HTML標簽通常是成對出現的，比如：<div>和</div>，第一個標簽是開始，第二個標簽是結束。結束標簽會有斜線。
也有一部分標簽是單獨呈現的，比如：<br/>、<hr/>、< img src="1.jpg" />等。
標簽里面可以有若干屬性，也可以不帶屬性。
標簽的語法：
<標簽名屬性1=“屬性值1” 屬性2=“屬性值2”……>內容部分</標簽名>
<標簽名屬性1=“屬性值1” 屬性2=“屬性值2”…… />
幾個很重要的屬性：
id：定義標簽的唯一ID，HTML文檔樹中唯一
class：為html元素定義一個或多個類名（classname）(CSS樣式類名)
style：規定元素的行內樣式（CSS樣式）
1.5HTML注釋
<!注釋內容>
1.6標簽
<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位于 <html> 標簽之前。
<!DOCTYPE> 聲明不是 HTML 標簽；它是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。
2.常用標簽
2.1 head內常用標簽
標簽
意義
<title><title> 定義網頁標題
<style></style> 定義內部樣式表
<script></script> 定義JS代碼或引入外部JS文件
<link/> 引入外部樣式表文件或網站圖標
<meta/> 定義網頁原信息
Meta標簽
Meta標簽介紹：
<meta>元素可提供有關頁面的元信息（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞。
<meta>標簽位于文檔的頭部，不包含任何內容。
<meta>提供的信息是用戶不可見的。
meta標簽的組成：meta標簽共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不同的參數值，這些不同的參數值就實現了不同的網頁功能。?
1.http-equiv屬性：相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。

<meta http-equiv="content-Type" charset=UTF8">

<meta http-equiv="refresh" c

三種引入CSS樣式的方式
head內style標簽內部直接書寫CSS代碼
link標簽引入外部CSS文件
直接在標簽內通過style屬性書寫CSS樣式
ps:注意頁面css樣式通常都應該寫在單獨的css文件中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{color:red}
</style>
<link rel="stylesheet" href="css文件名">
</head>
<body>
<p style="color:deeppink">我是一個p標簽</p>
</body>
</html>

基本選擇器
標簽選擇器
ID選擇器
類選擇器
通用選擇器

基本選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*標簽選擇器所有span標簽的顏色都是紅色*/
span {
color: red;
}
id選擇器
#s1 {
font-size: 24px;
}
類選擇器
.c1 {
color: orange;
}
通用選擇器
* {
color: blue;
}
</style>
</head>
<body>
<span id="s1">span</span>
<div class="c1">div
<p>p
<span>span</span>
</p>
</div>
<div class="c1">div</div>
</body>
</html>

標簽通常都必須有的屬性
id 用來唯一標識標簽
class 標簽類屬性，可以有多個值
ps:你可以把它理解成Python面向對象的繼承

組合選擇器
后代選擇器
兒子選擇器
毗鄰選擇低
弟弟選擇器

組合選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代選擇器 div里面所有的span標簽都變成藍色子子孫孫*/
div span{
color: blue;
}
/*兒子選擇器*/
div>span {
color: red;
}
/*毗鄰選擇器對下不對上*/
div+span {
color: blue;
}
/*弟弟選擇器對下不對上*/
div~span {
color: deeppink;
}
</style>
</head>
<body>
<span>我是div上面的span</span>
<div>
<span>我是div里面的第一個span</span>
<p>我是div里面的第一個p
<span>我是div里面的第一個p里面的span</span>
</p>
<span>我是div里面的第二個span</span>
</div>
<span>我是div下面的第一個span</span>
<span>我是div下面的第二個span</span>
</body>
</html>

屬性選擇器
偽類選擇器
偽元素選擇器

屬性選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*只要有xxx屬性名的標簽都找到*/
[xxx] {
color: red;
}
/*只要標簽有屬性名為xxx并且值為1*/
[xxx='1'] {
color: blue;
}
/*規定p標簽內部必須有屬性名為xxx并且值為2的標簽*/
p[xxx='2'] {
color: green;
}
</style>
</head>
<body>
<span xxx="2">span</span>
<p xxx>我只有屬性名</p>
<p xxx="1">我有屬性名和屬性值并且值為1</p>
<p xxx="2">我有屬性名和屬性值并且值為2</p>
</body>
</html>

你可以給任意的標簽加任意的屬性名和屬性值

偽類選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link {
color: red;
}
a:hover {
color: yellow;
}
a:active {
color: black;
}
a:visited {
color: green;
}
input:focus {
background-color: red;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="http://www.xiaohuar.com">笑話網</a>
<a href="http://www.sogo.com">搜狗網</a>
<input type="text">
</body>
</html>

偽元素選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p:first-letter {*/
/*color: red;*/
/*font-size: 24px;*/
/*}*/
p:before {
content: '*';
color: green;
}
p:after {
content: '?';
color: deeppink;
font-size: 48px;
}
</style>
</head>
<body>
<p>繼承是CSS的一個主要特征，它是依賴于祖先-后代的關系的</p>
<p>繼承是CSS的一個主要特征，它是依賴于祖先-后代的關系的</p>
<p>繼承是CSS的一個主要特征，它是依賴于祖先-后代的關系的</p>
<p>繼承是CSS的一個主要特征，它是依賴于祖先-后代的關系的</p>
</body>
</html>

分組與嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
color: red;
}
p {
color: red;
}
span {
color: red;
}
/*分組*/
div,p,span {
color: blue;
}
/*嵌套:不同的選擇器可以共用一個樣式
后代選擇器與標簽組合使用*/
div p,span {
color: red;
}
</style>
</head>
<body>
<div>div</div>
<p>p</p>
<span>span</span>
</body>
</html>

選擇器優先級
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#p1 {
color: green;
}
.c1 {
color: aqua;
}
p {
color: red;
}
</style>
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<p id="p1" class="c1">p</p>
<p id="p1" class="c1" style="color: blue">p</p>
</body>
</html>

選擇器優先級
相同選擇器不同引入方式
就近原則誰越靠近標簽誰說了算
不同選擇器相同的引入方式
行內樣式 > id選擇器 > 類選擇器 > 標簽選擇器

樣式修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 100px;
}
p {
font-family: "Sitka Banner", "Arial", sans-serif
}
p {
font-size: 16px;
font-weight: lighter;
}
</style>
</head>
<body>
<div>div</div>
<div>div</div>
<p>以把多個字體名稱作為一個“回退”系統來保存。如果瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可</p>
</body>
</html>

如何修改標簽樣式
寬和高

文本顏色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
color: red;
color: rgb(0,0,255);
color: #FF6700;
color: rgba(0,0,255,0.8);
}
</style>
</head>
<body>
<p>以把多個字體名稱作為一個“回退”系統來保存。如果瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可</p>
</body>
</html>

文本屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
text-align: right;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-indent: 48px;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<p>以把多個字體名稱作為</p>
<a href="http://www.xiaohuar.com">笑話網</a>
</body>
</html>

背景屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 400px;
background-color: green;
background-image: url("1.png");
background-repeat: no-repeat;
background-position: center;
background: no-repeat center url("1.png") blue ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

背景圖片示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
height: 400px;
background-color: tomato;
}
.box {
height: 400px;
background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg");
background-attachment: fixed;
}
.c2 {
height: 400px;
background-color: red;
}
.c3 {
height: 400px;
background-color: fuchsia;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="box"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>

邊框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
/*border-width: 3px;*/
/*border-style: dashed;*/
/*border-color: deeppink;*/
border: 3px solid red;
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>

畫圓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 400px;
background-color: red;
border: 3px solid black;
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

display屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*div {*/
/*display: none;*/
/*}*/
/*inline將塊兒級標簽變成行內標簽*/
/*div {*/
/*display: inline;*/
/*}*/
/*span {*/
/*display: block;*/
/*}*/
/*將選擇的標簽既具有行內標簽特點又有塊兒級標簽的特點*/
span {
display: inline-block;
height: 400px;
width: 400px;
background-color: red;
border: 3px solid black;
}
</style>
</head>
<body>
<div>div</div>
<div>div</div>
<span>span</span>
<span>span</span>
</body>
</html>