HTML初識
△HTML:
超文本標記語言，是一種用於創建網頁的標記語言，不是編程語言,沒有邏輯
本質上是瀏覽器可識別的規則
我們按照規則寫網頁，瀏覽器根據規則渲染我們的網頁。對於不同的瀏覽器，對同一個標簽可能會有不同的解釋。（兼容性問題）
網頁文件的擴展名：.html或.htm（沒有區別）
網頁文件的擴展名：.html或.htm（沒有區別）
我們按照規則寫網頁，瀏覽器根據規則渲染我們的網頁。對於不同的瀏覽器，對同一個標簽可能會有不同的解釋。（兼容性問題）
網頁文件的擴展名：.html或.htm（沒有區別）
△css：
層疊樣式表是一種用來表現HTML等文件樣式(效果)的計算機語言
JavaScript：
簡稱“JS”，是一種屬於網絡的腳本語言
常用來為網頁添加各式各樣的動態功能,為用戶提供更流暢美觀的瀏覽效果
通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的
△jQuery：
jQuery是一個快速、簡潔的JavaScript框架，它封裝JavaScript常用的功能代碼
△boodstarp(JQ+css):
bootstrap：簡潔、直觀、強悍的前端開發框架
它在jQuery的基礎上進行了更為個性化的完善，形成一套自己獨有的網站風格，並兼容大部分jQuery插件。
△B/S (前端/后端)
Web服務的本質：
瀏覽器發請求 --> HTTP協議 --> 服務端接收請求 -->
服務端返回響應 --> 服務端把HTML文件內容發給瀏覽器 --> 瀏覽器渲染頁面
瀏覽器內嵌了一個socket客戶端，默認TCP鏈接
△瀏覽器自帶socket客戶端，自己編寫的服務端也可以為瀏覽器服務
from socket import *
jd_server = socket()
jd_server.bind(("",8001))
jd_server.listen(5)
conn,client_add = jd_server.accept()
from_client_msg = conn.recv(1024)
print(from_client_msg.decode())
conn.send("nihao".encode())
conn.close()
jd_server.close()
按照HTTP協議加載瀏覽器能看懂的數據：
conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
conn.send(b"nihao")
HTTP/1.1 200 OK:
HTTP/1.1 是一個規范
200 代表請求成功
OK 表示一切正常
conn.send(b"<h1>nihao</h1>") #用標題包裹數據，更好看一些
標簽一般形成一個結構寫在文件里，這個文件就是HTML文件
HTTP/1.1 是一個規范
conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
conn.send(b"nihao")
pycharm中創建一個html文件（英文名，不要空格）
你會發現，整個結構都直接生成好了,因為不管什么瀏覽器，文檔結構都是這樣的
html文件可以在pycharm中就能打開
△自己寫一個服務器
當瀏覽器來連服務器時,把HTML文件發送給瀏覽器
from socket import *
s = socket()
s.bind(("",8881))
s.listen(5)
new_s, addr = s.accept()
data = new_s.recv(1024)
print(data.decode())
new_s.send(b"HTTP/1.1 200 OK\r\n\r\n")
with open("test.html","rb") as f:
data = f.read()
new_s.send(data)
new_s.close()
s.close()
HTML文檔結構
△最基本的HTML文檔：
<!DOCTYPE html>
<html lang="zh-CN">
<!--這個lang表示語言，zh-CN是中文的意思，就是說，你整個文檔的內容以中文為主-->
<!--如果以英文為主，就寫成lang='en'，用谷歌之類打開，它會認為是英文的，自動給翻譯（如果設置了自動翻譯的話）-->
<head>
<meta charset="UTF-8">
<title>標題</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>:HTML文件聲明，聲明為HTML5文檔
<html>、</html>:是文檔的開始標記和結束的標記。是HTML頁面的根元素，在它們之間是文檔的頭部（head）和主體（body）
<head>、</head>:定義了HTML文檔的開頭部分。它們之間的內容不會在瀏覽器的文檔窗口顯示。包含了文檔的元（meta）數據，配置信息等，是給瀏覽器看的，你看到的是在body標簽里面寫的
<title>、</title>:定義了網頁標題，在瀏覽器標題欄顯示
<body>、</body>:之間的文本是可見的網頁主體內容
注意：對於中文網頁需要使用 <meta charset="utf-8"> 聲明編碼，否則會出現亂碼
有些瀏覽器會設置 GBK 為默認編碼，則你需要設置為 <meta charset="gbk">
△瀏覽器頁面調試工具 F12
Elements（元素）：對瀏覽器看來，所有標簽都是元素
標簽對文本進行了標記，所以HTML叫超文本標記語言
瀏覽器有識別標簽的機制
HTML標簽格式
標簽分類定義
塊級/內聯:判斷依據為顯示的web中獨占至少一行的body中的標簽
塊級標簽(行外標簽,獨占一行):
塊級標簽能夠包含內聯標簽,和某些塊級標
<h1>一級標題</h1> 標題標簽
<br> 換行標簽
<hr> 換行橫線標簽
<p> 段落標簽
第一章內容
</p>
<div style="color:green"> </div> 換行文檔分區標簽
<ul> 無序列表標簽
<li>茶</li> 列表內容標簽
</ul>
<ol type="I" start="2"> 有序列表標簽
li>梅</li>
</ol>
<dl> 無標識標簽
<dt>河北省</dt>
<dd>邯鄲</dd>
</dl>
<table border="1"> 表格線框寬度 表格標簽
<tr> 定義行 第一行
<th>Month</th> 表頭加粗的內容
<th>Savings</th>
</tr>
<tr> 第二行
<td>January</td> 表內容
<td>$100</td>
</tr>
</table>
內聯標簽(行內標簽,不獨占一行):
不能包含塊級標簽
<img width="200" height="200" src="timg.jpg" alt="稍等片刻" title="李孝利"> 圖片標簽
<a href="">跳到底部</a> 超鏈接標簽
<span style="color:blue">藍色</span> 文檔標簽
全封閉標簽:
<title>網頭</title> 網頭標簽
<h1>一級標題</h1> 標題標簽
<a href="">跳到底部</a> 超鏈接標簽
<p>我的車是 <span style="color:blue">藍色</span> 的。</p> 段落標簽 文檔分區標簽
<div style="color:green"> </div> 換行文檔分區標簽
<p> 段落標簽
第一章內容
</p>
<ul> 無序列表標簽
<li>茶</li>
</ul>
<ol type="I" start="2"> 有序列表標簽
li>梅</li>
</ol>
<dl> 無標識標簽
<dt>河北省</dt>
<dd>邯鄲</dd>
</dl>
<table border="1"> 表格線框寬度 表格標簽
<tr> 定義行 第一行
<th>Month</th> 表頭加粗的內容
<th>Savings</th>
</tr>
<tr> 第二行
<td>January</td> 表內容
<td>$100</td>
</tr>
</table>
自封閉標簽:
<meta> 元信息標簽
<link rel="icon" href="圖標文件路徑"> 網頭圖標標簽
<br> 換行標簽
<hr> 換行橫線標簽
<img width="200" height="200" src="timg.jpg" alt="稍等片刻" title="李孝利"> 圖片標簽
head內常用標簽（了解）：
<meta /> 標簽 元信息
用處:標簽位於文檔的頭部,提供的信息是用戶不可見的,是一個自封閉標簽,全封閉標簽,可提供有關頁面的元信息（meta-information）
有一下關鍵字:
charset=
ontent="3"
定義文檔字符編碼和更新頻度的描述:
<meta charset="utf-8" content="3"/>
三秒刷新
<meta http-equiv="Refresh" content="2;url=https://www.baidu.com"/>
自動跳轉
http-equiv=
瀏覽器內核（渲染引擎）：渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式信息
渲染引擎是兼容性問題出現的根本原因，大部分渲染效果差不多
<meta http-equiv="Refresh">
<meta http-equiv="X-UA-Compatible" cotent="IE=edge">
IE比較個色
name="keyword" content="搜索關鍵字"
"keywords" 是一個經常被用到的名稱。它為文檔定義了一組關鍵字
某些搜索引擎在遇到這些關鍵字時，會用這些關鍵字對文檔進行分類
<meta name="keywod" content="古風，武俠，悟道"/>
name="description" content="網站描述信息"
設置網站描述信息，用於在搜索引擎搜索時，顯示網站基本描述信息
<meta name="description" content="這是一個古風網站"/>
觸屏縮放
name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/>
device-width：設備寬度
- initial-scale=1.0，初始顯示縮放比例。
- minimum-scale=0.5，最小縮放比例。
- maximum-scale=1.0，最大縮放比例。
- user-scalable=yes，是否支持可縮放比例（觸屏縮放）
<title>網頭</title> 標簽
link 標簽 網頭圖標
<link rel="icon" href="圖標文件路徑"/>
body內常用標簽
<h1> <h1>標簽 標題
<body>
hehe #body中沒有包裹的就是普通文本顯示
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題,大聖</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
</body>
br標簽 換行
<h1>123</h1>
<br>
<h2>4<br>5</h2>
123
4
5
注意點:直接回車、空格等空白內容都被認為是一個空格
hr 標簽 一行橫線
<h2>1<hr>2</h2>
1
----------------------------------
2
a 標簽 超鏈接
錨點：頁面內容進行跳轉（在自己的頁面跳）
<body>
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<h1 id="i1">第一章 XXX</h1>
<p> #段落標簽
第一章內容
</p>
不加href屬性,就是普通文本顯示
<a>古風</a>
加上href屬性,不加值文字有顏色效果,還有下划線,並且點擊后會刷新當前的html頁面
<a href="# ">跳到底部</a>
加上href屬性,並且加上值
<a href="http://www.baidu.com" target="_self" >baidu</a>
跳轉對應網址的頁面
未訪問之前是藍色的字體顏色
訪問之后是紫色的字體顏色
target屬性:
_self:在當前標簽頁打開 href屬性值的那個網址
_blank:在新的標簽頁打開 href屬性值的那個網址
p標簽 段落
<p>
第一章內容
</p>
span標簽 文檔分區
<p>我的車是 <span style="color:blue">藍色</span> 的。</p>
如果不對 div和span 應用樣式，那么 span 元素中的文本與其他文本不會任何視覺上的差異
div標簽 換行文檔分區
div是一個塊級元素。這意味着它的內容自動地開始一個新行
可以把文檔分割為獨立的、不同的部分
<div style="color:green"> #字體為綠色
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
<div style="background: red">內容</div> #背景為綠色
ul標簽 無序列表
興趣愛好:
<ul> #<ul>作為無序列表的聲明
<li>茶</li>
<li>酒</li>
<li>棋</li>
</ul>
ol標簽 有序列表
君子:
<ol type="I" start="2"> #<ol> 標簽定義有序列表,有序列表的各個列表項有先后順序，
<li>梅</li> #所以會使用數字進行標識
<li>蘭</li>
<li>竹</li>
<li>菊</li>
</ol>
dl標簽 無標識表
<dl>
<dt>河北省</dt> 表頭
<dd>邯鄲</dd> 內容
<dd>石家庄</dd>
<dt>山西省</dt>
<dd>太原</dd>
<dd>平遙</dd>
</dl>
河北省
邯鄲
石家庄
山西省
太原
平遙
tble標簽 表格
<table border="1"> 表格線框寬度
<tr> 定義行 第一行
<th>Month</th> 表頭加粗的內容
<th>Savings</th>
</tr>
<tr> 第二行
<td>January</td> 表內容
<td>$100</td>
</tr>
</table>
表格由 table 元素以及一個或多個 tr、th 或 td 元素組成
tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元
border:規定表格邊框的寬度
img標簽 圖片
<img width="200" height="200" src="timg.jpg" alt="稍等片刻" title="李孝利"/>
src屬性:圖片路徑 必須寫
alt屬性:圖片加載失敗或者正在加載時提示的內容
title屬性:鼠標懸浮時顯示的內容
# 不常用,通過css來控制
width:設置寬度
height:設置高度