目錄
- HTML（上）
- 瀏覽器
- HTML
- 什么是HTML
- HTML的作用
- 撰寫HTML的規范
- HTML結構
- HTML常用標簽
- head內常用標簽
- 基本標簽
- meta標簽
- body內常用標簽
- 基本標簽
- 特殊字符
- div標簽和span標簽
- img標簽
- a標簽
- 串列
- 無序串列
- 有序串列
- 標題串列
- 無序串列
- 表格
- head內常用標簽
- HTML標簽速記
- 塊級標簽
- 行內標簽
HTML（上）
瀏覽器
- 瀏覽器也是一個客戶端
#這是一個服務器，我們通過瀏覽器就可以訪問的到服務器發送的"hello"
import socket
sk = socket.socket()
sk.bind(('127.0.0.1',8080))
sk.listen(5)
while True:
conn,addr = sk.accept()
data = https://www.cnblogs.com/yanjiayi098-001/p/conn.recv(1024)
conn.send(b"HTTP/1.1 200 ok\r\n\r\n") #必須要加上這一句，不然瀏覽器不認識
conn.send(b"hello")
conn.close()
- 瀏覽器不通過服務端也可以渲染文本
HTML
什么是HTML
HTML全稱HyperText Markup Language，超文本標記語言，是一種描述性的標記語言，
- 超文本：音頻、視頻、圖片
- 標記：<英文單詞或者字母>稱為標記，一個HTML頁面都是由各種標記組成，
HTML的作用
負責描述檔案語意的語言
撰寫HTML的規范
1）所有標記元素都要正確的嵌套，不能交叉嵌套，eg：
<h1><a></a></h1>
2）所有標記都必須小寫
3）所有標記都必須關閉
- 雙標簽：
<h></h1> - 單標簽：
<img src=https://www.cnblogs.com/yanjiayi098-001/p/“URL” />
4）所有屬性值必須加引號，eg：<h1 id="head"></h1>
5）所有屬性必須有值：<a href="https://www.cnblogs.com/yanjiayi098-001/p/02.html" target="_blank">首頁</a>
HTML結構
用pycharm新建一個HTML檔案，檔案會自動生成如下代碼的一個HTML模板
<!DOCTYPE html>
<!--檔案宣告頭，告訴瀏覽器它應該用什么版本的html去決議以下代碼-->
<html lang="en">
<!--檔案的開始標記和結束標記，lang="en"表示用英語或者其他國家的語言，在它們之間是檔案的頭部（head）和主體（body）-->
<head>
<!--定義了HTML檔案的開頭部分，不會再瀏覽器的檔案視窗顯示-->
<meta charset="UTF-8">
<!--HTML的編碼格式-->
<title>Title</title>
<!--網頁標題，在瀏覽器標題欄顯示-->
</head>
<body>
<!--文本主體，他們之間的文本是可見的網頁主題內容-->
</body>
</html>
HTML常用標簽
head內常用標簽
基本標簽
| 標簽 | 意義 |
|---|---|
<title></title> |
定義網頁標題 |
<style></style> |
定義內部樣式表 |
<script></script> |
定義JS代碼或引入外部JS檔案 |
<link/> |
引入外部樣式表檔案 |
<meta/> |
定義網頁原資訊 |
meta標簽
<meta http-equiv="refresh" content="2;URL = https://www.cnblogs.com/yanjiayi098-001/">
<!--2秒過后跳到 https://www.cnblogs.com/yanjiayi098-001 網頁-->
<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
<!--對網頁并沒有什么影響，就是給網頁關鍵字,便于搜索引擎機器人查找資訊和分類資訊用的-->
<meta name="description" content="老男孩教育Python學院">
<!--這個也沒有什么影響，就是給網頁一個描述,便于搜索引擎機器人查找資訊和分類資訊用的-->
<meta http-equiv="content-Type" charset=UTF8">
<!--指定檔案的編碼型別-->
<meta http-equiv="x-ua-compatible" content="IE = edge">
<!--告訴IE以最高級模式渲染檔案-->
body內常用標簽
基本標簽
<b>加粗</b>
<i>斜體</i>
<u>下劃線</u>
<s>洗掉</s>
<p>段落標簽，寫在這個標簽內的東西就是一個段落</p>
<h1>1號標題</h1>
<h2>2號標題</h2>
<h3>3號標題</h3>
<h4>4號標題</h4>
<h5>5號標題</h5>
<h6>6號標題</h6>
<br>
<!--這是一個換行標簽-->
<hr>
<!--這是一個水平線標簽-->
特殊字符
<!--空格-->
>
<!--大于號(>)-->
<
<!--小于號(<)-->
&
<!--&符號-->
¥
<!--人民幣(￥)符號-->
©
<!--著作權符號-->
®
<!--注冊符號-->
div標簽和span標簽
div標簽:
<div>
<!--塊級標簽，無意義，通過CSS樣式為其賦予不同的表現-->
</div>
span標簽:
<span>
<!--行內標簽，無意義，通過CSS樣式為其賦予不同的表現-->
</span>
**塊級標簽與行內標簽的區別**
塊級標簽：另起一行開始渲染元素
行內標簽：不需要另起一行
如果單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響，他們是專門為定義CSS樣式而生的
注意：
? 塊級標簽可以嵌套行內標簽或者某些塊級標簽
? 行內標簽不能嵌套塊級標簽
? p標簽不能嵌套塊級標簽，也不能嵌套p標簽
img標簽
<img src="https://www.cnblogs.com/yanjiayi098-001/p/圖片的路徑" alt="圖片未加載成功時的提示" title="滑鼠懸浮時提示資訊">
<img src="https://img.uj5u.com/2020/09/24/100709241611061.jpg" alt="故宮" title="美麗的故宮" >
a標簽
a標簽又叫做超鏈接標簽
所謂的超鏈接是指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個檔案，甚至是一個應用程式
我們就先拿另一個網頁舉例
href屬性指定目標網頁地址，該地址可以有幾種型別：
絕對URL - 指向另一個站點（比如 href="http://www.jd.com）
相對URL - 指當前站點中確切的路徑（href="index.htm"）
錨URL - 指向頁面中的錨（href="https://www.cnblogs.com/yanjiayi098-001/p/#top"）
<a href="https://www.cnblogs.com/yanjiayi098-001/" target="_blank">點我會跳轉哦！</a>
<!--target="_blank"表示重新打開一個網頁進行跳轉-->
<a href="https://www.cnblogs.com/yanjiayi098-001/" target="_self">點我會跳轉哦！</a>
<!--target="_self"表示就在當前網頁進行跳轉-->
<a href="https://www.cnblogs.com/yanjiayi098-001/">點我會跳轉哦！</a>
<!--默認target="_self"-->
<a href="https://www.cnblogs.com/yanjiayi098-001/p/#b1">點我回到加粗</a>
<!--b1是id屬性，#b1表示回到id屬性為b1的這個位置，這個位置就是<b id = "b1">加粗</b> -->
<a href="https://www.cnblogs.com/yanjiayi098-001/p/body內常用標簽.html">點我轉到這個網頁哦！</a>
<!--他會跳到 body內常用標簽.html 網頁-->
串列
無序串列<ul></ul>
<ul type="disc">
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ul>
type屬性：
- type="disc"(實心圓點，默認值)
- type="circle"(空心圓圈)
- type="square"(實心方塊)
- type="none"(無樣式)
有序串列<ol></ol>
<ol type="1" start="3">
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ol>
type屬性：
- 1 數字串列，默認值
- A 大寫字母
- a 小寫字母
- Ⅰ大寫羅馬
- ⅰ小寫羅馬
start屬性：
start="3"只能寫數字，表示從第3個開始
標題串列<dl></dl>
<dl>
<dt>標題1</dt>
<dd>內容</dd>
<dt>標題2</dt>
<dd>內容1</dd>
<dd>內容2</dd>
</dl>
表格
<table>
<thead>
<tr>
<th>序號</th>
<th>姓名</th>
<th>愛好</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>yjy</td>
<td>跳舞</td>
</tr>
<tr>
<td>2</td>
<td>wwb</td>
<td>唱歌</td>
</tr>
</table>
<!--
看到 <table> 就說明接下來是一個表格
<thead>是表格的表頭
<tr>表示一行，而在這一行中又有<th>
<th>表示表頭的內容，表示整個一列的屬性，eg：姓名
同理<tr>中的<td>就表示表格內容，按照<th>的要求寫就行了，eg：姓名就寫人名
-->
屬性：
- border: 表格邊框 eg：border="6"
- cellpadding: 內邊距 eg：cellpadding="8"
- cellspacing: 外邊距 eg：cellspacing="2"
- width: 像素 百分比 eg：width="100%"
以上這些屬性要在<table>中設定
- rowspan: 單元格豎跨多少行（上下合并單元格） eg：rowspan="3"
- colspan: 單元格橫跨多少列（左右合并單元格） eg：colspan="2"
以上這些屬性要在<td>中設定
HTML標簽速記
塊級標簽
| 標題 | h1 | h2 | h3 | h4 | h5 | h6 |
|---|---|---|---|---|---|---|
| 串列 | ul | ol | li | dl | dt | dd |
| 排版標簽 | p | div | hr | center | pre | |
| 表格 | table | |||||
| 表單 | form |
行內標簽
| 字體 | b | i | sup | sub | u |
|---|---|---|---|---|---|
| 排版 | span | br | |||
| 超鏈接 | a | ||||
| 圖片 | img |
補充
- 文本級標簽：p、span、a、b、i、u、em，
- 容器級標簽：div、h系列、li、dt、dd
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/120052.html
標籤：Html/Css
上一篇：1.css選擇器
下一篇：淺嘗https