前端學習----HTML
HTML介紹css
1、web服務本質html
1 import socket 2 3 sk = socket.socket() 4 5 sk.bind(('127.0.0.1',8080)) 6 sk.listen(5) 7 8 9 while 1: 10 conn,addr = sk.accept() 11 data = conn.recv(8096) 12 conn.send(b"HTTP/1.1 200 ok\r\n\r\n") 13 conn.send(b"<h1>Hello world!</h1>") 14 coon.close()
瀏覽器法請求 --> HTTP協議 --> 服務端接收請求 --> 服務端返回響應 --> 服務端把HTML文件內容發給瀏覽器python
--> 瀏覽器渲染頁面web
2、什麼是HTMLdjango
一、HTML是什麼？編程
超文本標記語言（Hypertext Markup Language，HTML）是一種用於建立網頁的標記語言後端
本質上是瀏覽器可識別的規則，咱們按照規則寫網頁，瀏覽器根據規則渲染咱們的網頁。對於不一樣的瀏覽器，瀏覽器
對同一個標籤可能會有不一樣的解釋（兼容性問題）安全
網頁文本的擴展名：html或.htm服務器
二、HTML 不是什麼？
HTML是一種表即語言（markup laguage），他不是一種編程語言。
HTML使用標籤來描述網頁。不像python編程語言同樣，有邏輯什麼的，這個標記語言是沒有邏輯的
3、HTML文檔結構
一、最基本的HTML文檔
<!DOCTYPE html>
<html lang="zh-CN"> #這個lang表示語言，zh-CN是中文的意思，就是說，整個文檔以中文爲主，r若是以就寫成lang='en'
<head>
<meta charset="UTF-8">
<title>css樣式優先級</title>
</head>
<body>
</body>
</html>
1) <!DOCTYPE html> 聲明爲HTML5 文檔
2) <html>,</html> 是文檔的開始標記和結束的標記。是HTML頁面的根元素，在他們之間是文檔的頭部
（head）和主體（body）
3）<head>、</head> 定義了HTML文檔的開頭部分。他們之間的內容不會在瀏覽器的文檔窗口顯示。包含了
文檔的（meta） 元數據，配置信息等，是給瀏覽器看的，咱們看到的是在body標籤裏面寫的內容
4) <title>、</title> 定義了網頁標題，在瀏覽器標題欄顯示。
5）<body>、</body> 之間的文本是可見的網頁主體內容
注意：對於中文網頁須要使用<meta charset="utf-8">聲明編碼，不然會出現亂碼。有些瀏覽器會設置GBK爲默認編碼
則你須要設置爲<meta charset='gbk'>
pycharm 中建立一個html文件，你就會發現，整個結構都給你直接生成好了，由於無論什麼瀏覽器，這個文檔結構都是這樣的
經過pycharm能夠直接設置整個文檔：
4、HTML標籤格式，嚴格封閉
一、
● HTML標籤是由尖括號包圍的關鍵字，如<html>,<div>等
● HTML標籤一般是成對出現的，好比：<div>和</div>,第一個標籤是開始，第二個標籤是結束。結束標籤會有斜線
● 也有一部分標籤是單獨呈現的，好比：<br/>、<hr/>、<img src="1.jpg">等。
● 標籤裏面能夠有若干屬性，也能夠不帶屬性
二、標籤的語法：
● <標籤名 屬性1="屬性值1"屬性2="屬性值2"......>內容部分</標籤名>
● <標籤名 屬性1="屬性1"屬性2="屬性值2"..../>
有些屬性是沒有特殊效果的，而又寫屬性是由效果的，好比<h1 s='name'>xxx<h1/>,其中s='name'是沒什麼效果的
而<a src='http://www.baidu.com'>xxx</a> ,你會看到一些效果，能夠點擊，有下劃線，有顏色
幾個很重要的屬性：
● id: 定義標籤的惟一ID，HTML文檔樹中惟一，未來頁面上的標籤不少，例如：來幾個a標籤，而後怎麼區分這些標籤呢，
能夠經過<a id='a1'>xxx</a>,id 不能重複，未來咱們想找到這個標籤的時候，能夠經過這個id的值老找到這個標籤
● class：爲html元素定義一個或多個類名（classname）（css樣式類名）#講css的時候再說
● style：規定元素的行內樣式(css樣式) #簡單來個示例：<h1 style="color:red;">xx</h1>你會發現變成紅色的了
5、HTML註釋
<!--註釋內容--> #找到一行內容ctrl+/就能註釋，註釋的內容不會在網頁上顯示出來
<!DOCTYPE> 標籤
<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位於 <html> 標籤以前。
<!DOCTYPE> 聲明不是 HTML 標籤；它是指示 web 瀏覽器關於頁面使用哪一個 HTML 版本進行編寫的指令。
6、HTML經常使用標籤
一、head內經常使用標籤
標籤 意義
<title></title> 定義網頁標題
<style></style> 定義內部樣式
<script></script> 定義JS代碼或引入外部JS文件
<link/> 引入外部樣式表文件
<meta/> 定義網頁原信息
---- Meta 標籤
Meta標籤的介紹： # 做爲了解內容
● <meta> 元素可提供有關頁面的元信息（meta-information）,針對搜索引擎和更新拼讀的描述和關鍵詞
● <meta> 標籤位於文檔的頭部，不包含任何內容
● <meta> 提供的信息是用戶不可見的
meta標籤的組成：meta標籤共有兩個屬性，他們分別是http-equiv屬性和name屬性，不一樣屬性又有不一樣的參數值
這些不一樣的參數值就實現了不一樣的網頁功能。
1) http-equiv屬性：至關於http的文件頭做用，它能夠向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，
與之對應的屬性值爲content，content中的內容其實就是各個參數的變量值。
<!--2秒後跳轉到對應的網址，注意引號--> <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> #若是把URL和後面的內容去掉，就是2秒鐘刷新一次，這些內容瞭解一下就行 <!--指定文檔的編碼類型--> <meta http-equiv="content-Type" charset=UTF8"> <!--告訴IE以最高級模式渲染文檔--> <meta http-equiv="x-ua-compatible" content="IE=edge"> #edge是微軟的一個全新的瀏覽器,其實就是告訴IE瀏覽器，你按照最高標準來渲染個人頁面，瞭解一下就能夠啦
2) name 屬性：主要用於描述網頁，與之對應的屬性值爲content，content中的內容主要是便於引擎機器人查找信息
和區分信息用的。
<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉"> #關鍵字，也就是別人是能夠經過這些關鍵字搜索到個人這個文章的，搜索引擎就是可以這個content內容來幫別人搜索到你的這個文檔的 #SEO就是作這個的，就是怎麼讓大家公司的網站在別人搜索的時候可以靠前顯示，不算那個花錢的，百度是充值的，你衝個20w，別人可能一天就給你點擊完了，特別的貴 <meta name="description" content="xxxxxpythonxxx學習"> #是對這個文檔的描述，在百度一些內容的頁面上，f12打開看看
二、body中經常使用的標籤（HTML中的重點）
基本標籤（塊級標籤和內聯標籤）
不加標籤的純文字也是能夠在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>xxx</div>,可是這是兩個標籤最大的特色，能夠經過css
來就像我們畫畫同樣，在白紙上畫好，仍是在一個報紙上畫好啊，網頁中多數是div和span
● div標籤用來定義一個塊級元素，並沒有實際的意義。主要是經過css樣式爲其賦予不一樣的表現
● span標籤用來定義一個塊級元素，並沒有實際的意義。主要是經過css樣式爲其賦予不一樣的表現
塊級元素與行內元素的區別：
所謂塊元素，是以另起一行開始渲染的元素，行內元素則不須要另起一行。若是單獨在網頁中插入這兩個元素，不會對頁面產生任何影響
這兩個元素是專門爲定義css樣式而生的
剛纔學的標籤：
塊級標籤：p、h1-h六、 hr、div
內聯標籤：b、i、u、s
注意：
關於標籤嵌套：一般塊級元素能夠包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。div是能夠包含div的
p標籤比較特殊，不能包含塊級標籤，p標籤也不能包含p標籤。能夠試一下p標籤套p標籤，f12你會發現三個p標籤
img標籤
<img src="圖片的路徑" alt="圖片未加載成功時的提示" title="鼠標懸浮時提示信息" width="寬" height="高"#
寬高兩個屬性只用一個會自動等比縮放>
a標籤
超連接標籤
所謂的超連接標籤是指從網頁指向一個目標的鏈接關係，這個目標能夠是另外一個網頁，也能夠是相同網頁上的
不一樣位置，還能夠是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。
什麼是URL？ URL是統一資源定位器（Uniform Resource locator）的縮寫，也被稱爲網頁地址，是因特網上標準的資源的地址 URL舉例 http://www.baidu.com URL地址由4部分組成 第1部分：爲協議：http://、ftp://等 第2部分：爲站點地址：能夠是域名或IP地址 第3部分：爲頁面在站點中的目錄：stu 第4部分：爲頁面名稱，例如 index.html 各部分之間用「/」符號隔開。
<a herf="http://www.oldboyedu.com" target="_blank">點我</a>
herf屬性指定目標網頁地址。該地址能夠有幾種類型：
● 絕對URL - 指向另外一個站點（好比 href="http://www.jd.com"）
● 相對URL - 指當前站點中確切的路徑（herf="index.htm" ）# 學django的時候會用的比較多
● 錨URL - 指向頁面中的錨（herf="#top"）,博客的目錄常常用到，還能夠跳轉到name屬性爲p1
的a標籤上，<a name="top">xxx</a>
target:
● _blank 表示在新標籤頁中打開目標網頁
● _self 表示在當前標籤頁中打開目標網頁
7、列表
一、無序列表
<ul type="disc">
<li>第一項</li>
<li>第二項</li>
</ul>
type屬性：
● disc（實心圓點，默認值）
● circle (空心圓圈)
● square（實心方塊）
● none (無樣式)
二、有序列表
<ol type="1" start="2">
<li>第一項</li>
<li>第二項<li>
</ol>
type屬性：start是從數字即開始
● 1數字列表，默認值
● A大寫字母
● a 小寫字母
● I 大寫羅馬
● i 小寫羅馬
三、表題列表（就像大綱同樣，有一個層級效果）
<dl> <dt>標題1</dt> <dd>內容1</dd> <dt>標題2</dt> <dd>內容1</dd> <dd>內容2</dd> </dl>
8、表格
表格是一個二維數據空間，一個表格由若干行組成，一個行又有若干單元格組成，單元格能夠包含文字，列表、圖案、表單、數字符號、預置文本和其餘的表格等內容。
表格最重要的目的是顯示錶格類數據。表格類數據指的是最適合組織爲表格格式（即按行和列組織）的數據
<table border='1'>
<thead> #標題部分
<tr> #一行
<th>序號</th> #一個單元格
<th>姓名</th>
<th>愛好</th>
</tr>
</thead>
<tbody> #內容部分
<tr> #一行
<td>1</td> #一個單元格
<td>Egon</td>
<td>槓娘</td>
</tr>
<tr>
<td>2</td>
<td>Yuan</td>
<td>日天</td>
</tr>
</tbody>
</table>
屬性：
● border:表格邊框
● cellpadding:內邊框（內邊框和內容的距離）
● width：像素 百分比。
● rowspan: 單元格豎跨多少行
● colspan: 單元格橫跨多少列（即合併單元格）
form（最後再學這個標籤，先去學input標籤）
功能：
表單用於向服務器傳輸數據，從而實現用戶與Web服務器的交互
表單可以包含input系列標籤，好比文本字段、複選框、單選框、提交按鈕等等。
表單還能夠包含textarea、select、fieldset和 label標籤。
表單屬性
| 屬性 | 描述 |
|---|---|
| accept-charset | 規定在被提交表單中使用的字符集（默認：頁面字符集）。 |
| action | 規定向何處提交表單的地址（URL）（提交頁面）。 |
| autocomplete | 規定瀏覽器應該自動完成表單（默認：開啓）。 |
| enctype | 規定被提交數據的編碼（默認：url-encoded）。 |
| method | 規定在提交表單時所用的 HTTP 方法（默認：GET）。 |
| name | 規定識別表單的名稱（對於 DOM 使用：document.forms.name）。 |
| novalidate | 規定瀏覽器不驗證表單。 |
| target | 規定 action 屬性中地址的目標（默認：_self）。 |
表單元素
基本概念：
HTML表單是HTML元素中較爲複雜的部分，表單每每和腳本、動態頁面、數據處理等功能相結合，所以它是製做動態網站很重要的內容。
表單通常用來收集用戶的輸入信息
表單工做原理：
訪問者在瀏覽有表單的網頁時，可填寫必需的信息，而後按某個按鈕提交。這些信息經過Internet傳送到服務器上。
服務器上專門的程序對這些數據進行處理，若是有錯誤會返回錯誤信息，並要求糾正錯誤。當數據完整無誤後，服務器反饋一個輸入完成的信息。
點擊提交按鈕，input中type=submit的那個按鈕，而後就會將form表單中全部用戶輸入的內容或者選擇的內容（{name屬性:值，}）都發給服務端（以咱們本身寫的那個socket舉例，打印一下接收的內容），可是全部的輸入標籤必須有一個叫作name的屬性。
發現跳到這個頁面了：看url的內容，有了咱們輸入的內容，而且是給你組合起來的，name屬性值和你輸入的值組合到一塊兒了，經過&符號分隔，而且在路徑那裏加了個問號
打印一下socket接收的消息，你就發現已經接受到這些數據了
讓用戶選擇的，必須指定一個value值，要否則後端接收不到內容，用戶本身填寫的標籤，不須要指定value值
而後再點擊提交，後端打印一下接收的數據：
可是這樣並很差，由於url中顯示了你的信息，而且若是內容不少的話，你的地址欄不可以輸入那麼長的內容，爲何會默認拼接到url裏面呢，由於form表單默認是get請求提交內容，咱們能夠改成post，來看看：post會把全部你提交的信息封裝到一個消息體裏面，在瀏覽器上就看不到了，對於小白來講，看着安全一些。
點擊提交就跳到這個網址了：
在看後端打印的內容：
你會發現一個post請求：
把內容日後拉，就能看到我們提交的數據了
那麼你看，你的瀏覽器再你點擊提交的時候，獲取了你所輸入的內容，而後經過網絡提交給你的服務端代碼程序了。
而後咱們後端經過提交過來的數據，來作某些事情，該驗證的驗證，該保存的保存
因此記住form表單裏面有兩個屬性：action控制往哪裏提交數據、method控制用什麼方式提交。
還有一個文件input：由於咱們剛纔說，數據是經過組成一個字典發給後端的，可是文件怎麼作鍵值對啊，作不了，因此須要經過二進制流的形式一點一點的傳送給後端，就是這個multipart搞的事情，有個瞭解就好了，別糾結，到了django咱們在細說。
input（都試一下）
<input> 元素會根據不一樣的 type 屬性，變化爲多種形態。
| type屬性值 | 表現形式 | 對應代碼 |
|---|---|---|
| text | 單行輸入文本 | <input type=text" /> |
| password | 密碼輸入框（不顯示明文） | <input type="password" /> |
| date | 日期輸入框 | <input type="date" /> |
| checkbox | 複選框 | <input type="checkbox" checked="checked" name='x' /> |
| radio | 單選框 | <input type="radio" name='x' /> |
| submit | 提交按鈕 | <input type="submit" value="提交" /> #發送瀏覽器上輸入標籤中的內容，配合form表單使用，頁面會刷新 |
| reset | 重置按鈕 | <input type="reset" value="重置" /> #頁面不會刷新，將全部輸入的內容清空 |
| button | 普通按鈕 | <input type="button" value="普通按鈕" /> |
| hidden | 隱藏輸入框 | <input type="hidden" /> |
| file | 文本選擇框 | <input type="file" /> （等學了form表單以後再學這個） |
屬性說明:
- name：表單提交時的「鍵」，注意和id的區別
- value：表單提交時對應項的值
- type="button", "reset", "submit"時，爲按鈕上顯示的文本年內容
- type="text","password","hidden"時，爲輸入框的初始值
- type="checkbox", "radio", "file"，爲輸入相關聯的值
- checked：radio和checkbox默認被選中的項
- readonly：text和password設置只讀
- disabled：全部input均適用
select標籤
<form action="" method="post">
<select name="city" id="city">
<option value="1">北京</option>
<option selected="selected" value="2">上海</option> #默認選中，當屬性和值相同時，能夠簡寫一個selected就好了
<option value="3">廣州</option>
<option value="4">深圳</option>
</select>
</form>
屬性說明：
- multiple：布爾屬性，設置後爲多選下拉框，不然默認單選
- disabled：禁用
- selected：默認選中該項
- value：定義提交時的選項值
label標籤
定義：<label> 標籤爲 input 元素定義標註（標記）。若是不用這個label給input標籤一個標記，input會變黃，不影響使用，只是提示你，別忘了給用戶一些提示，也就是這個label標籤。
說明：
-
- label 元素不會向用戶呈現任何特殊效果。可是點擊label標籤裏面的文本，那麼和他關聯的input標籤就得到了光標，讓你輸入內容
- <label> 標籤的 for 屬性值應當與相關元素的 id 屬性值相同。
<form action=""> <label for="username">用戶名</label> #for和input的id屬性同樣，就關聯在一塊兒了 <input type="text" id="username" name="username"> </form>
textarea多行文本
<textarea name="memo" id="memo" cols="30" rows="10"> 默認內容 </textarea>
屬性說明：
- name：名稱
- rows：行數 #至關於文本框高度設置
- cols：列數 #至關於文本框長度設置
- disabled：禁用
- 1. 前端學習之旅——HTML
- 2. 前端學習html css js
- 3. 前端學習筆記(HTML)
- 4. 前端學習 之 HTML
- 5. 前端學習筆記 --- HTML
- 6. 前端學習之HTML
- 7. 前端學習之html
- 8. 學習html前端開發
- 9. 前端學習之HTML-1
- 10. 前端學習之html（一）
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 前端學習之旅——HTML
- 2. 前端學習html css js
- 3. 前端學習筆記(HTML)
- 4. 前端學習 之 HTML
- 5. 前端學習筆記 --- HTML
- 6. 前端學習之HTML
- 7. 前端學習之html
- 8. 學習html前端開發
- 9. 前端學習之HTML-1
- 10. 前端學習之html（一）