文章目錄
- html
- 基礎
- 標簽和下劃線
- 無序列表和有序列表
- 表格
- 加邊框
- html的屬性
- a標簽（網站）
- target屬性
- 換行線和水平分割線
- 圖片
- 設置寬高width，height
- html區塊——塊元素與行內元素
- 塊元素與行內元素
- 塊元素舉例
- 行內元素舉例
- 表單
- from標簽
- type屬性
- placeholder屬性
- value屬性
- span標簽的應用
- radio選項
- label標簽
- for屬性
- checkbox多選
- submit屬性
- from標簽
- css
- css三種導入方式
- 選擇器
- 元素選擇器、類選擇器、ID選擇器、通用選擇器
- 子元素選擇器（嵌套），后代選擇器
- 后代選擇器示例
- 偽類選擇器
- css屬性
import requests
response = requests.get( "http://books.toscrape.com/")
if response.ok:print(response.text)
else:print("請求失敗")
有User-Agent
import requests
headers = {
"User-Agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36 Edg/116.0.1938.62"
}
response = requests.get("https://movie.douban.com/top250",headers=headers)
print(response.status_code)
from bs4 import BeautifulSoup
import requests
headers = {"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/116.0.0.0"
}
response = requests.get("http://books.toscrape.com/", headers=headers)
content = response.text
soup = BeautifulSoup(content,"html.parser")
all_prices = soup.find_all("p",attrs={"class": "price_color"})
# for price in all_prices:
# print(price)
for price in all_prices:# print(price.text)# print(price)# print(price.string)print(price.string[2:])
from bs4 import BeautifulSoup
import requests
headers = {"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/116.0.0.0"
}
for start_num in range(0,250,25):response = requests.get(f"https://movie.douban.com/top250?start={start_num}", headers=headers)html = response.textsoup = BeautifulSoup(html,"html.parser")all_titles = soup.findAll( "span",attrs={"class":"title"})for title in all_titles:title_string=title.stringif "/" not in title_string:print(title_string)
html
基礎
標簽和下劃線
無序列表和有序列表
表格
加邊框
html的屬性
a標簽（網站）
target屬性
1.self鏈接在當前窗口打開
2.blank鏈接在新窗口打開
3.parent鏈接在父窗口打開
4.top鏈接在頂層窗口打開
換行線和水平分割線
換行是br，水平分割線是hr
圖片
設置寬高width，height
html區塊——塊元素與行內元素
塊元素與行內元素
塊元素舉例
用于結構或布局
-------------------------------------------------------------a
------------------------------------------------------------------------a
行內元素舉例
用于內聯樣式化文本，給文本的一部分用樣式或標記
表單
from標簽
type屬性
input標簽，type屬性規定了input的類型
w3cschool.cn/html5/html5-input.html
可以在網站輸入內容
placeholder屬性
value屬性
自動填寫“請輸入內容”
span標簽的應用
radio選項
加入gender只能選一個，不加可以全部勾選
label標簽
for屬性
for一般與id綁定
password屬性
checkbox多選
submit屬性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=html, initial-scale=1.0"><title>html練習</title>
</head>
<body><form><label>用戶名:</label><input type="text" placeholder="請輸入用戶名"><br><br><label for="pwd">密碼:</label><input type="password" id="pwd" placeholder="請輸入密碼"><br><br><label>性別:</label><input type="radio" name="gender">男<input type="radio" name="gender">女<input type="radio" name="gender">其他<br><br><label>愛好:</label><input type="checkbox" name="hobby">唱歌<input type="checkbox" name="hobby">跳舞<input type="checkbox" name="hobby">RAP<input type="checkbox" name="hobby">籃球<br><br><input type="submit"></form><form action="#"></form>
</body>
</html>
#需要為服務器，即api
from標簽
提交后具體數據存到哪里
就是from中action屬性
css
<!DOCTYPE html>
<html>
<head><style>p {color: blue; /* 將所有 price_color 類的文本改為藍色 */font-size: 16px;}</style>
</head>
<body><p>這是一個應用css樣式的文本</p>
</body>
</html>
css三種導入方式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=html, initial-scale=1.0"><title>html練習</title><!-- <link rel="stylesheet" href="./style.css" --><style>p {color: blue; /* 將所有 p 標簽的文本改為藍色 */font-size: 16px;}h2 {color: green;}</style>
</head>
<body><p>這是一個應用css樣式的文本</p> <h1 style="color: red;">這是一個一級標題使用內聯樣式</h1><h2>這是一個二級標題，應用外部樣式</h2><h3>這是一個三級標題，應用外部樣式</h3>
</body>
</html>
選擇器
元素選擇器、類選擇器、ID選擇器、通用選擇器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h2{color:aqua;} /* 元素選擇器 */.highlight{background-color: yellow;}#header{font-size: 55px;} /* id選擇器 */*{font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;}/* 通用選擇器 */</style>
</head>
<body><h1>不同類型的css選擇器</h1><h2>這是一個元素選擇器示例</h2><h3 class="highlight">這是一個類選擇器示例</h3> <h3>這是另一個類選擇器示例</h3><h4 id="header">這是一個id選擇器示例 </h4></body>
</html>
子元素選擇器（嵌套），后代選擇器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father>.son{color:yellowgreen;}/* 子元素選擇器 */</style>
</head>
<body>
后代選擇器示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#header{font-size: 55px;} /* id選擇器 */.father>.son{color:yellowgreen;}/* 子元素選擇器 */</style>
</head>
<body><div class="father"><p class="son">這是一個子元素選擇器示例</p>
</div>
<div><p class="grandson">這是一個后代選擇器示例</p>
</div>
</body>
</html>
后代包含子代，子代不包含孫子代，之所以后代選擇器每變色是英文grandson不是子代
偽類選擇器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#header{font-size: 55px;} /* id選擇器 */#element:hover{background-color: purple;}</style>
</head>
<body><h3 id="element">這是一個偽類選擇器示例</h3></body>
</html>
鼠標懸浮背景顏色會變
css屬性
background-color
font-size
font-family
font-weight
菜鳥教程網站
runoob.com/cssref/css-reference.html#font
![[新能源]新能源汽車快充與慢充說明](http://pic.xiahunao.cn/[新能源]新能源汽車快充與慢充說明)
![C++基礎 [三] - 面向對象三](http://pic.xiahunao.cn/C++基礎 [三] - 面向對象三)
)
