目錄
HTML簡介
1.1 web本質
- 瀏覽器發請求
- HTTP協議（服務端在發送數據之前，需要先發送報頭）
- 服務端接收請求
- 服務端返回響應
- 服務端把HTML文件內容發給瀏覽器
- 瀏覽器渲染頁面
import socket
s = socket.socket()
s.bind(('127.0.0.1', 8080))
s.listen(5)
while True:
print('服務端已啟動...')
conn, addr = s.accept()
data = conn.recv(1024)
conn.send(b"HTTP/1.1. 200 ok\r\n\r\n")
conn.send(b"Hello World :)")
conn.close()
1.2 HTML本質
-
超文本標記語言（Hypertext Markup Language, HTML）：一種用於創建網頁的標記語言。
-
本質：是瀏覽器可識別的規則，我們按照規則寫網頁，瀏覽器根據規則渲染我們的網頁。對於不同的瀏覽器，對同一個標簽可能會有不同的解釋。（兼容性問題）
-
網頁文件的擴展名：
.html或.htm（在古老的計算機時代，不能用html四位的擴展名 : /）
1.3 HTML誤區
-
HTML是一種標記語言（markup language），它不是一種編程語言。
-
HTML使用標簽來描述網頁。
1.4 HTML文檔結構
最基本的HTML文檔：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>css樣式優先級</title>
</head>
<body>
</body>
</html>
-
<!DOCTYPE html>聲明為HTML5文檔。<!DOCTYPE>聲明必須是 HTML 文檔的第一行，位於 標簽之前。<!DOCTYPE>聲明不是 HTML 標簽；它是指示 web 瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令。
-
<html>、</html>是文檔的開始標記和結束的標記。是HTML頁面的根元素，在它們之間是文檔的頭部（head）和主體（body）。 -
<head>、</head>定義了HTML文檔的開頭部分。它們之間的內容不會在瀏覽器的文檔窗口顯示，包含了文檔的元（meta）數據。 -
<title>、</title>定義了網頁標題，在瀏覽器標題欄顯示。 -
<body>、</body>之間的文本是可見的網頁主體內容，放在或外的文本內容也會默認放入中。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sdhasd</title> <style> </style> <link rel="stylesheet" href="01.css"/> <meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉"> <meta name="description" content="老男孩教育Python學院"> </head> <body> <div> aa </div> </body> 猜猜我在body的外面會顯示嗎？<!--會顯示--> </html> 猜猜我在body的外面會顯示嗎？<!--會顯示-->
注意：對於中文網頁需要使用 聲明編碼，否則會出現亂碼。有些瀏覽器會設置 GBK 為默認編碼，則你需要設置為 。
1.5 HTML標簽格式
<body>
>>>標簽的書寫，
雙標簽，<head></head>
單標簽 <meta charset="UTF-8">
>>>標簽里面的語法/屬性
<標簽名 屬性名="屬性值"></標簽名>
<標簽名 屬性名="屬性值" />
<標簽名 id="屬性值" class="屬性值 屬性值 屬性值"></標簽名>
<標簽名 >內容</標簽名>
<標簽名 屬性名="內容"/>
</body>
1.6 HTML注釋
<!--注釋內容-->
1.7 HTML標簽
- 標題標簽
- 段落標簽
- 鏈接標簽
- 錨點
- id屬性/class屬性
- 圖片標簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--行內標簽-->
<!--塊級標簽-->
<!--標題標簽-->
<h1 id="h1">我是標題1</h1>
<h2>我是標題2</h2>
<h3>我是標題3</h3>
<h4>我是標題4</h4>
<h5>我是標題5</h5>
<h6>我是標題6</h6>
<h7>我是標題7</h7>
我是標題7
<!--段落標簽-->
<p>我是p</p>
<p>我是p</p>
<!--a標簽，鏈接標簽, href="鏈接的地址"
第一種情況：target屬性默認是_self,如果是self就會覆蓋當前的html,
第二種情況：如果target屬性默認是_blank，就會重新打開窗口
-->
<a href="02.html" target="_blank">首頁</a>
<a href="02.html" target="_self">首頁</a>
<!--錨點-->
<a href="#h1">首頁</a>
<!--id屬性，
id="屬性值"，如果是id屬性，屬性值必須全頁面唯一
class屬性
class屬性可以全局不唯一
<a class="a b c k"></a>
-->
<!--img 圖片標簽
src="圖片的地址"
alt="當圖片不能加載的時候，就會顯示，還有給搜索引擎提示我們圖片的內容"
title="當我們的鼠標懸浮在圖片上的時候，就會顯示"-->
<img src="http://s9.rr.itc.cn/r/wapChange/20174_1_21/a7o3k08442035758542.jpg" alt="">
<img src="1.jpg" alt="">
<img src="2.jpg" alt="dasdasd">
<img src="1.jpg" title="這是你們的老婆">
</body>
</html>
- 無序列表標簽
- 有序列表標簽
- 標題列表
- 表格標簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--無序列表標簽
disc（實心圓點，默認值）
circle（空心圓圈）
square（實心方塊）
none（無樣式）
-->
<ul class="a" type="circle">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!--有序列表標簽
type屬性：
1 數字列表，默認值
A 大寫字母
a 小寫字母
Ⅰ大寫羅馬
ⅰ小寫羅馬
-->
<ol type="A" start="2">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<!--標題列表-->
<!--標題1-->
<!--nie-->
<!--nei-->
<!--挑剔-->
<!--nier-->
<!--strs="23456789abcdefghik"-->
<!--5-->
<!--標題列表-->
<dl>
<dt>標題1</dt>
<dd>內容1</dd>
<dt>標題2</dt>
<dd>內容1</dd>
<dd>內容2</dd>
</dl>
<!--表格標簽
border: 表格邊框.
cellpadding: 內邊距
cellspacing: 外邊距.
width: 像素 百分比.（最好通過css來設置長寬）
rowspan: 單元格豎跨多少行
colspan: 單元格橫跨多少列（即合並單元格）
-->
<table border="1" cellpadding="20" cellspacing="20" >
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>sex</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">egon</td>
<td>39</td>
<td>男</td>
</tr>
<tr>
<td colspan="2">egon</td>
<td>39</td>
<td>男</td>
</tr>
<tr>
<td>egon</td>
<td>39</td>
<td>男</td>
</tr>
</tbody>
</table>
</body>
</html>
1.8 特殊字符
| 內容 | 對應代碼 |
|---|---|
| 空格 |   |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版權 | © |
| 注冊 | ® |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
普通文本
<br>
<b>加粗</b>
<br>
<i>斜體</i>
<br>
<u>下划線</u>
<br>
<s>刪除</s>
<!--換行-->
<a href="">a</a>
<br>
<a href="">a</a>
<br>
<a href="">a</a>
<!--水平線-->
<hr>
<div>我是塊級</div>
<span>我是行內</span>
<span>我是行內</span>
<!--html中特殊符號-->
<span>我是 行內</span>
<!--空格 -->
<!--> >-->
<!--< <-->
<!--& &-->
<!--¥ ¥-->
<!--版權 ©-->
<!--注冊 ®-->
<!--<script>-->
<!--alert("123")-->
<!--</script>-->
<hr>
<hr>
<hr>
<hr>
<hr>
1<span>
¥
版權 ©
注冊 ®
</body>
</html>
注意：<br>表示換行、<hr>表示水平線。
1.9 div標簽和span標簽
- div標簽用來定義一個塊級元素，並無實際的意義。主要通過CSS樣式為其賦予不同的表現。
- span標簽用來定義內聯(行內)元素，並無實際的意義。主要通過CSS樣式為其賦予不同的表現。
2.0 塊級元素vs行內元素
- 所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。如果單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。
這兩個元素是專門為定義CSS樣式而生的。