HTML初識
阿新 • • 發佈：2018-10-10
end 單獨 自動完成 多少 css ble 提示 word lan
一、Web服務本質 Web的原理： 瀏覽器地址欄輸入URL(瀏覽器發請求) --> 瀏覽器往服務端發消息(HTTP協議) --> 服務端接收消息( 服務端接收請求) --> 服務端回消息（從文件中讀取數據） --> 瀏覽器收到消息(按照一個約定好的規則展示出來) import socket sk = socket.socket() sk.bind((‘127.0.0.1‘, 8080)) sk.listen() while 1: conn, addr = sk.accept() data = conn.recv(9000) print(data) # 按照HTTP協議的格式給瀏覽器回復消息 conn.send(b‘HTTP/1.1 200 OK\r\ncontent-type: text/html; charset=utf-8\r\n\r\n‘) with open(‘s1.txt‘, ‘rb‘) as f: msg = f.read() conn.send(msg) conn.close() 二、HTML初識 1、概念 HTML即超文本標記語言（Hypertext Markup Language, HTML）是一種用於創建網頁的標記語言，它不是編程語言。 本質上是瀏覽器可識別的規則，我們按照規則寫網頁，瀏覽器根據規則渲染我們的網頁。對於不同的瀏覽器，對同一個標簽可能會有不同的解釋。（兼容性問題） 網頁文件的擴展名：.html或.htm 2、基本文檔結構 註意：HTML中把連續的空格和換行都解析成一個空格，不存在縮進的問題。<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>css樣式優先級</title> </head> <body> </body> </html> 解釋： <!DOCTYPE html>必須是 HTML 文檔的第一行，位於 <html> 標簽之前，聲明這是HTML5文檔。它不是 HTML 標簽；它的作用是告訴web瀏覽器這個頁面應該使用哪個 HTML 版本進行編寫。<html>、</html>是文檔的開始標記和結束的標記。是HTML頁面的根元素，在它們之間是文檔的頭部（head）和主體（body）。 <head>、</head>定義了HTML文檔的開頭部分。它們之間的內容不會在瀏覽器的文檔窗口顯示。包含了文檔的元（meta）數據。 <title>、</title>定義了網頁標題，在瀏覽器標題欄顯示。 <body>、</body>之間的文本是可見的網頁主體內容。 註意：對於中文網頁需要使用 <meta charset="utf-8"> 聲明編碼，否則會出現亂碼。有些瀏覽器會設置 GBK 為默認編碼，則你需要設置為 <meta charset="gbk">。 3、HTML註釋格式 <!--註釋內容--> 4、標簽格式 HTML標簽是由尖括號包圍的關鍵字，如<html>, <body>等 標簽通常是成對出現的，比如：<html>和</html>，第一個標簽是開始，第二個標簽是結束。註意，結束標簽的開頭應該有斜線，表明這是結束標簽。 但是也有單獨出現的標簽，比如：<br/>、<hr/>、<img/>等，需要知道的是，單獨的標簽也可不寫斜線，即<br>、<hr>也是可以的。 標簽內還可以設置自己的屬性： <標簽名 屬性1=“屬性值” 屬性2=“屬性值”……>內容部分</標簽名> <標簽名 屬性1=“屬性值” 屬性2=“屬性值”…… /> 幾個通用且重要的屬性： id：定義標簽的唯一ID，即我們的身份證，是唯一的。 class：為html元素定義一個或多個類名（classname）(CSS樣式類名) style：規定元素的行內樣式（CSS樣式） 5、HTML常用標簽介紹 5-1-1、head內常用標簽
| 標簽 | 意義 |
|---|---|
| <title></title> | 定義網頁標題 |
| <style></style> | 定義內部樣式表 |
| <script></script> | 定義JS代碼或引入外部JS文件 |
| <link/> | 引入外部樣式表文件 |
| <meta/> | 定義網頁原信息 |
5-1-2、Meta標簽 Meta標簽介紹： <meta>元素可提供有關頁面的原信息（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞。 <meta>標簽位於文檔的頭部，不包含任何內容。 <meta>提供的信息是用戶不可見的。 meta標簽的組成：meta標簽共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不同的參數值，這些不同的參數值就實現了不同的網頁功能。 (1)http-equiv屬性：相當於http的文件頭作用，它可以向瀏覽器傳一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。 <!--2秒後跳轉到對應的網址，註意引號--> <meta http-equiv="refresh" content="2;URL=https://www.baidu,com"> <!--指定文檔的編碼類型--> <meta http-equiv="content-Type" charset=UTF8"> <!--告訴IE以最高級模式渲染文檔--> <meta http-equiv="x-ua-compatible" content="IE=edge"> (2)name屬性: 主要用於描述網頁，與之對應的屬性值為content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。 <meta name="keywords" content="meta總結,meta,meta屬性,name"> # 就是你在瀏覽器中搜索‘meta總結,meta,meta屬性,name’這些關鍵字可以搜到這個網頁 <meta name="description" content="老男孩教育Python學院"> # 就是搜到的網頁，還沒打開的時候，下面顯示的小字，描述信息 5-2、body內常用標簽 5-2-1、基本標簽 <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> <!--水平線--> 5-2-2、特殊字符
| 內容 | 對應代碼 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版權 | © |
| 註冊 | ® |
註意：特殊字符不止這幾個，這幾個只是比較常見而已，你也可以去百度搜索：HTML特殊符號對照表
5-2-3、div標簽和span標簽 div標簽用來定義一個塊級元素，並無實際的意義。主要通過CSS為其賦予不同的樣式。 span標簽用來定義內聯(行內)元素，並無實際的意義。主要通過CSS為其賦予不同的樣式。 塊級元素與行內元素的區別： 所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。如果單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。 這兩個元素是專門為定義CSS樣式而生的。 註意： 關於標簽嵌套：通常塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。 p標簽不能包含塊級標簽，p標簽也不能包含p標簽。 比如： <p> <p>嵌套</p> </p> 在瀏覽器渲染的時候會自動幫第一個p補全結束標簽，為最後一個p補全開始標簽，即上面的會變成： <p></p> <p>嵌套</p> <p></p> 小結： 塊級標簽和行內標簽 div和span標簽的特點： 沒有自帶的樣式，方便後續使用CSS調整樣式！ 塊級標簽： 自己獨占一行！ div、p、h1~h6、hr 行內標簽（內聯標簽）： 默認都在一行顯示！ span、b、i、u、s 標簽嵌套 1. 塊級標簽可以包含內聯標簽 2. p標簽不能包含p標簽和div標簽 5-2-4、img標簽 <img src="圖片的路徑" alt="圖片加載失敗時的提示" title="鼠標懸浮時提示信息" width="寬" height="高(寬高兩個屬性只用一個會自動等比縮放)"> 5-2-5、a標簽 超鏈接標簽 所謂的超鏈接是指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。 <a href="http://www.baidu.com" target="_blank" >百度</a> href屬性指定目標網頁地址。該地址可以有幾種類型： 絕對URL - 指向另一個站點（比如 href="http://www.baidu.com） 相對URL - 指當前站點中確切的路徑（href="index.htm"） 錨URL - 指向頁面中的錨（href="#top"） target： _blank表示在新標簽頁中打開目標網頁 _self表示在當前標簽頁中打開目標網頁 錨的設置方法： 方法一： 1.設置一個錨點鏈接<a href="#mao">跳到錨點那個地方去</a>；（註意：href的屬性值最前面要加#） 2.在頁面中某個位置設置錨點<a name="mao"></a>；（註意：a標簽中要寫一個name屬性，屬性值要與1中href的屬性值一樣，不加#）標簽中按需填寫必要的文字，一般不寫內容 方法二： 1.設置一個錨點鏈接<a href="#mao">跳到錨點那個地方去</a>；（註意：href的屬性值最前面要加#）同方法一的1 2.設置錨點的位置 <h1 id="mao">這是H1標簽</h1>；在要跳轉到的位置的標簽中添加一個id屬性，屬性值與1中href的屬性值一樣，不加# 方法二不用單獨添加一個a標簽來專門設置錨點 ，只在需要的位置的標簽中添加一個id即可。 5-2-6、列表 1.無序列表ul，列表內的項用li標簽對 <ul type="circle"> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ul> type屬性： disc（實心圓點，默認值） circle（空心圓圈） square（實心方塊） none（無樣式） 2.有序列表ol，列表內的項用li標簽對 <ol type="1" start="2"> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ol> type屬性： 1 數字列表，默認值 A 大寫字母 a 小寫字母 Ⅰ大寫羅馬 ⅰ小寫羅馬 start：表明從哪裏開始 3.標題列表 <dl> <dt>標題1</dt> <dd>內容1</dd> <dd>內容2</dd> <dt>標題2</dt> <dd>內容1</dd> <dd>內容2</dd> </dl> 5-2-7、表格 表格標簽table 表格內的表頭標簽thead ---> table head：tr代表一行，th代表一個單元格(列)，默認會加粗變黑 表格內的主體標簽tbody ---> table body：tr代表一行，td代表一個單元格(列) <table> <thead> <tr> <th>序號</th> <th>姓名</th> <th>愛好</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>小明</td> <td>打球</td> </tr> <tr> <td>2</td> <td>小紅</td> <td>發豪</td> </tr> </tbody> </table> table屬性: border: 表格邊框. cellpadding: 內邊距 cellspacing: 外邊距. width: 像素百分比.（最好通過css來設置長寬） td(th)屬性： width: 像素百分比.（最好通過css來設置長寬） rowspan: 單元格豎跨多少行（即合並單元格，合並多少行） colspan: 單元格橫跨多少列（即合並單元格，合並多少列） 5-2-8、表單form 1.form功能： 表單用於向服務器傳輸數據，從而實現用戶與Web服務器的交互 表單能夠包含input系列標簽，比如文本字段、復選框、單選框、提交按鈕等等。 表單還可以包含textarea、select、fieldset和 label標簽。 表單from屬性
| 屬性 | 描述 |
|---|---|
| accept-charset | 規定在被提交表單中使用的字符集（默認：頁面字符集）。 |
| action | 規定向何處提交表單的地址（URL）（提交頁面）。 |
| autocomplete | 規定瀏覽器應該自動完成表單（默認：開啟）。 |
| enctype | 規定被提交數據的編碼（默認：url-encoded）。 |
| method | 規定在提交表單時所用的 HTTP 方法（默認：GET）。 |
| name | 規定識別表單的名稱（對於 DOM 使用：document.forms.name）。 |
| novalidate | 規定瀏覽器不驗證表單。 |
| target | 規定 action 屬性中地址的目標（默認：_self）。 |
2.表單內的標簽input <input> 元素會根據不同的 type 屬性，變化為多種形態。
| type屬性值 | 表現形式 | 對應代碼 |
|---|---|---|
| text | 單行輸入文本 | <input type=text" /> |
| password | 密碼輸入框 | <input type="password" /> |
| date | 日期輸入框 | <input type="date" /> |
| checkbox | 復選框 | <input type="checkbox" checked="checked" /> |
| radio | 單選框 | <input type="radio" /> |
| submit | 提交按鈕 | <input type="submit" value="提交" /> |
| reset | 重置按鈕 | <input type="reset" value="重置" /> |
| button | 普通按鈕 | <input type="button" value="普通按鈕" /> |
| hidden | 隱藏輸入框 | <input type="hidden" /> |
| file | 文本選擇框 | <input type="file" /> |
<form action="http://127.0.0.1:8080" method="post" enctype="multipart/form-data"> <p> <label for="i1">用戶名：</label> <input id="i1" type="text" name="username"> </p> <p> <label>密碼： <input type="password" name="pwd"> </label> </p> <p> 郵箱： <input disabled type="email" name="email"> </p> <p>出生日期： <input type="date" name="birthday"> </p> <p> 頭像： <input type="file" name="avatar"> </p> <p> 隱藏的輸入框： <input type="hidden"> </p> <p>性別： <input type="radio" name="gender" value="male" checked>男 <input type="radio" name="gender" value="female">女 </p> <p> 愛好： <input type="checkbox" name="hobby" value="basketball">籃球 <input type="checkbox" name="hobby" value="football">足球 <input type="checkbox" name="hobby" value="doublecolorball">雙色球 </p> <input type="button" value="按鈕"> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> 屬性說明: name：表單提交時的“鍵”，註意和id的區別 value：表單提交時對應項的值 type="button", "reset", "submit"時，為按鈕上顯示的文本年內容 type="text","password","hidden"時，為輸入框的初始值 type="checkbox", "radio", "file"，為輸入相關聯的值 checked：radio和checkbox默認被選中的項 readonly：text和password設置只讀 disabled：所有input均適用 註意事項： 1. 表單提交時，用戶輸入的內容是以字典的形式提交給服務器的：{"name屬性的值": 用戶填寫的內容} 因此，用於獲取用戶輸入的標簽(text,password,textarea等)必須要設置name屬性， 而讓用戶進行選擇的標簽(checkbox,radio等)，必須要設置name和value的屬性值。 2. form標簽有action屬性和method屬性 1. action：控制往哪裏提交數據 2. method：控制用什麽方式提交 3. 上傳文件需要額外配置enctype="multipart/form-data" 3. form要提交數據必須要有submit按鈕 4.label標簽可以關聯表單內的input和select等標簽、 <label for="i1">用戶名：</label> <input id="i1" type="text" name="username"> 或者： <label>密碼： <input type="password" name="pwd"> </label> 3.表單內的標簽select <form action="" method="post"> <label for="s1">城市</label> <select id="s1" name="city1"> <option value="010">北京</option> <option value="021">上海</option> <option value="020">廣州</option> <option value="0755" selected="selected">深圳</option> </select> <select name="city2" multiple="multiple"> <option value="010">北京</option> <option value="021">上海</option> <option value="020">廣州</option> <option value="0755" selected="selected">深圳</option> </select> </form> 屬性說明： multiple：布爾屬性，設置後為多選，否則默認單選 disabled：禁用 selected：默認選中該項 value：定義提交時的選項值 4.表單內的標簽label 定義：<label> 標簽為 input、select等元素定義標註（標記）。 說明： label 元素不會向用戶呈現任何特殊效果。 <label> 標簽的 for 屬性值應當與相關元素的 id 屬性值相同。 使用： <form> <label for="i1">用戶名：</label> <input id="i1" type="text" name="username"> 或者： <label>密碼： <input type="password" name="pwd"> </label> </form> 5.表單內的標簽textarea textarea：多行文本 <form> <p> <label for="t">個人簡介：</label> <textarea id="t" name="info" cols="30" rows="10"> 默認內容 </textarea> </p> </form> 屬性說明： name：名稱 rows：行數 cols：列數 disabled：禁用
HTML初識