python_day12_html

1： html是什麼

2： head标簽

3： body标簽

4: 超連結标簽<a half>,<img>

5：清單标簽 <ol>,<ul>,<dl>

6：表單标簽<form>

7：表格标簽<table>

HTML 是什麼？

htyper text markup language 即超文本标記語言

超文本: 就是指頁面内可以包含圖檔、連結，甚至音樂、程式等非文字元素。

# 使用python将網址打開

<code>import</code> <code>socket</code>

<code>sk</code><code>=</code><code>socket.socket(socket.AF_INET,socket.SOCK_STREAM)</code>

<code>sk.listen(</code><code>5</code><code>)</code>

<code>while</code> <code>True</code><code>:</code>

<code> </code><code>conn,addr</code><code>=</code><code>sk.accept()</code>

<code> </code><code>while</code> <code>1</code><code>:</code>

<code> </code><code>conn.sendall(</code><code>'HTTP/1.1 201 OK\r\n\r\n'</code><code>.encode(</code><code>'utf-8'</code><code>))</code>

<code> </code><code>conn.sendall(data)</code>

<code> </code><code>conn.close()</code>

<code> </code><code>except</code> <code>Exception as E:</code>

<code> </code><code># print(E)</code>

<code> </code><code>break</code>

标簽語言：通過 <> 标記的就是标簽語言

# 重新整理頁面，跳轉頁面需要注意引号

<code><</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"Refresh"</code> <code>content</code><code>=</code><code>"2;URL=https://www.baidu.com/"</code><code>></code>

# 網頁的描述資訊

<code><</code><code>meta</code> <code>name</code><code>=</code><code>"description"</code> <code>content</code><code>=</code><code>"京東JD.COM"</code><code>></code>

# 搜尋關鍵字

<code><</code><code>meta</code> <code>name</code><code>=</code><code>"Keywords"</code> <code>content</code><code>=</code><code>"網上購物,"</code><code>></code>

# icon圖

<code><</code><code>link</code> <code>rel</code><code>=</code><code>"icon"</code> <code>href</code><code>=</code><code>"//www.jd.com/favicon.ico"</code> <code>mce_href</code><code>=</code><code>"//www.jd.com/favicon.ico"</code> <code>type</code><code>=</code><code>"image/x-icon"</code><code>></code>

3：body标簽

<code><</code><code>p</code><code>>内容</</code><code>p</code><code>> #帶換行跟間距</code>

<code><</code><code>strong</code><code>>内容</</code><code>strong</code><code>> # 也是加粗</code>

<code><</code><code>strike</code><code>> 内容 </</code><code>strike</code><code>> # 給内容加個橫線</code>

<code><</code><code>hr</code><code>> # 浏覽器的一個橫線</code>

<code><</code><code>div</code><code>>内容</</code><code>div</code><code>> # 跟普通寫的一樣</code>

<code></</code><code>br</code><code>> # 換行符自閉合标簽</code>

# 塊級标簽㠌套

# 内聯标簽㠌套隻能㠌套内聯标簽

塊級标簽：<p><h1><table><ol><ul><form><div>

block（塊）元素的特點

總是在新行上開始；

寬度預設是它的容器的100%，除非設定一個寬度。

它可以容納内聯元素和其他塊元素

内聯标簽：<a><input><img><sub><sup><textarea><span>

inline 元素的特點

和其他元素都在一行上；

寬度就是它的文字或圖檔的寬度，不可改變

内聯元素隻能容納文本或者其他内聯元素

# 彈框

<code><</code><code>script</code><code>></code>

<code> </code><code>alert(内容)</code>

<code></</code><code>script</code><code>></code>

特殊字元

&nbsp # 一個空格

&lt# 一個小于号

&gt# 大于号

&copy# 一個圈裡加個C

4: 超連結标簽

# img

<code><</code><code>img</code> <code>src</code><code>=</code><code>"123.png"</code> <code>alt</code><code>=</code><code>"error"</code><code>> # src圖檔位址 alt當圖檔不存在的時候提示</code>

<code># height="300" width="400" 同時也可以直接設定寬度，高度</code>

<code><</code><code>img</code> <code>src</code><code>=</code><code>"123.png"</code> <code>alt</code><code>=</code><code>"error"</code> <code>height</code><code>=</code><code>"300"</code> <code>width</code><code>=</code><code>"400"</code><code>> # 不推薦這麼用, 可以直接使用css來配置</code>

# a

<code> </code><code><</code><code>a</code> <code>href</code><code>=</code><code>"http://blog.51cto.com/xiong51"</code> <code>>my blog</</code><code>a</code><code>> # href 跳轉位址中間是名稱</code>

<code> </code><code># target="_blank" # 在新的視窗打開超連結,不加就是原位址上打開</code>

5：清單标簽

# 有序清單

# 無序清單這個用得是最多的

# 自定義清單

1、表單用于向伺服器傳輸資料。

2、表單能夠包含 input 元素，比如文本字段、複選框、單選框、送出按鈕等等。

3、表單還可以包含textarea(文本)、select(多選)和 label 元素。

一、表單屬性

　　HTML 表單用于接收不同類型的使用者輸入，使用者送出表單時向伺服器傳輸資料，進而實作使用者與Web伺服器的互動。表單标簽, 要送出的所有内容都應該在該标簽中.

action: 表單送出到哪. 一般指向伺服器端一個程式,程式接收到表單送出過來的資料（即表單元素值）作相應處理，比如https://www.sogou.com/web

method: 表單的送出方式 post/get get為預設選項

get: 1.送出的鍵值對.放在位址欄中url後面. 2.安全性相對較差. 3.對送出内容的長度有限制.

post:1.送出的鍵值對不在位址欄. 2.安全性相對較高. 3.對送出内容的長度理論上無限制.

get/post是常見的兩種請求方式.

二、表單元素 <input type="元素" name="這裡是鍵">

<code> </code><code>text 明文格式的框 </code>

<code> </code><code>password 密文格式的框</code>

<code> </code><code>checkbox 多選框</code>

<code> </code><code>radio 多選框, 與checkbox差別配置name鍵之後,每次隻能單選一個值</code>

<code> </code><code>submit 送出</code>

<code> </code><code>buttion 隻有格式,送出需要配合css使用</code>

<code> </code><code>checked: radio 和 checkbox 預設被選中</code>

<code> </code><code>readonly: 隻讀. text 和 password</code>

<code> </code><code>disabled: 對所用input都好使.</code>

checkbox # 當有多個選項鍵相同可以選擇多個值

radio # 當有多個選項鍵相同隻能選擇一個值

# 例如

<code><</code><code>p</code><code>>愛好: 音樂<</code><code>input</code> <code>type</code><code>=</code><code>"checkbox"</code> <code>name</code><code>=</code><code>"hobby"</code> <code>value</code><code>=</code><code>"music"</code><code>>&nbsp; 跑步<</code><code>input</code> <code>type</code><code>=</code><code>"checkbox"</code> <code>name</code><code>=</code><code>"hobby"</code> <code>value</code><code>=</code><code>"run"</code><code>></</code><code>p</code><code>></code>

<code><</code><code>p</code><code>>性别: 男<</code><code>input</code> <code>type</code><code>=</code><code>"radio"</code> <code>name</code><code>=</code><code>"sex"</code> <code>value</code><code>=</code><code>"man"</code><code>>&nbsp;女<</code><code>input</code> <code>type</code><code>=</code><code>"radio"</code> <code>name</code><code>=</code><code>"sex"</code> <code>value</code><code>=</code><code>"woman"</code><code>></</code><code>p</code><code>></code>

# 送出選項 value為自定義名稱

# button 選項如果不在自定義名稱 value='' 那麼它在頁面上顯示的就是一個框

# 給這個框弄成隻能看不能輸入的

<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>readonly</code><code>=readonly> # 屬性=屬性的可以直接簡寫 <</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>readonly></code>

上傳檔案注意兩點：

1 請求方式必須是post

2 enctype="multipart/form-data"

例如檔案上傳時必須配置

<code>method="post" enctype="multipart/form-data"</code>

select 下拉多标簽選項

multiple 多選菜單

size 同時顯示幾行

selected 預設選擇

# 多選下拉

<code> </code><code>省份<</code><code>select</code> <code>name</code><code>=</code><code>"pro"</code> <code>multiple </code><code>size</code><code>=</code><code>"3"</code> <code>></code>

<code> </code><code><</code><code>option</code> <code>value</code><code>=</code><code>"beijing"</code><code>>北京</</code><code>option</code><code>></code>

<code> </code><code><</code><code>option</code> <code>value</code><code>=</code><code>"sh"</code><code>>上海</</code><code>option</code><code>></code>

<code> </code><code><</code><code>option</code> <code>value</code><code>=</code><code>"sc"</code><code>>四川</</code><code>option</code><code>></code>

<code> </code><code><</code><code>option</code> <code>value</code><code>=</code><code>"xa"</code><code>>雄安</</code><code>option</code><code>></code>

<code> </code><code></</code><code>select</code><code>></code>

# 最後點送出伺服器鍵值對為 'pro': ['beijing','sh']}

textarea 文本域

border="1px" 表單框線的大小

cellpadding="10px" 内邊距

cellspacing='20px' 外邊距

<code><</code><code>table</code> <code>border</code><code>=</code><code>"1px"</code> <code>cellpadding</code><code>=</code><code>"10px"</code> <code>cellspacing</code><code>=</code><code>"10px"</code><code>></code>

<code> </code><code><</code><code>thead</code><code>></code>

<code> </code><code></</code><code>thead</code><code>></code>

<code> </code><code><</code><code>tbody</code><code>></code>

<code> </code><code></</code><code>tbody</code><code>></code>

<code> </code><code></</code><code>table</code><code>></code>

rowspan将清單一列合并成一格

colspan将清單一行合并成一行

<code> </code><code><</code><code>td</code> <code>rowspan</code><code>=</code><code>"2"</code><code>>2行1</</code><code>td</code><code>></code>

<code> </code><code><</code><code>td</code> <code>colspan</code><code>=</code><code>"2"</code><code>>2行2</</code><code>td</code><code>></code>

<code></</code><code>table</code><code>></code>

最後簡化

<code> </code><code><</code><code>td</code> <code>rowspan</code><code>=</code><code>"2"</code><code>>2行1</</code><code>td</code><code>></code>

<code> </code><code><</code><code>td</code> <code>colspan</code><code>=</code><code>"2"</code><code>>2行2</</code><code>td</code><code>></code>

本文轉自812374156 51CTO部落格，原文連結：http://blog.51cto.com/xiong51/2079877，如需轉載請自行聯系原作者

python_day12_html

繼續閱讀

Mac 神兵利器（一）極簡軟體清單

Postman 還能做自動化接口測試？早學會早下班……

小程式的新戰事

阿裡雲acp認證報名方法阿裡雲acp認證考試相關答疑

“雲釘一體”背後，阿裡雲希望改變什麼？

你的Idea還可用嗎？不妨試試另一個開發神器！一、STS安裝二、STS使用三、優化STS

【ECS常見問題】連接配接執行個體問題連接配接執行個體問題

用 Rust 重寫 Linux 核心，這可能嗎？挺進 Linux 世界，Rust 機會在哪？Linux 之父：驅動程式可能率先 Rust 化寫在最後：

Kafka 連接配接器使用與開發

IE new Date()無效

跨域問題總結

荷小魚 x mPaaS | 借助 H5 容器改善 App 白屏、浏覽器相容問題

AI驅動的Web App開發實戰

mPaaS 月度小報 | 3月發生的大事件

Android WebView 緻安卓應用閃退，mPaaS 助你規避這波 Bug

解讀 WebRTC 音頻 NetEQ 及優化實踐為什麼要 “白話” NetEQ?丢包、抖動和優化的了解NetEQ 及相關子產品NetEQ 内部子產品NetEQ 相關子產品優化點總結