標籤：頁面 ati png 滑鼠 padding idt 需要 text 提交表單
HTMLHTML解釋：
HTML是英文Hyper Text Mark-up Language(超文字標記語言 (HTML))的縮寫，他是一種製作全球資訊網頁面標準語言（標記）。相當於定義統一的規則（W3C），大家都來遵守他，這樣就可以讓瀏覽器根據標記語言的規則去解釋它。
瀏覽器負責將標籤翻譯成使用者“看得懂”的格式，呈現給使用者！
網頁的組成：
一個網頁一般由兩部分組成即：
HTML負責描述網頁的結構和內容（如標題，導覽列等） CSS則負責網頁的表現（外觀）（如背景顏色，字型樣式等）。
<head>和</head>之間的內容，是元資訊和網站的標題 元資訊一般是不顯示出來的,但是記錄了你這個HTML檔案的很多有用的資訊
<body>和</body>之間的內容，是瀏覽器呈現出來的，使用者看到的頁面效果。也就是說這裡是網頁的主體。也就是body的身體之意
<html></html>是說明這個是一個網頁。告訴瀏覽器這個網頁的開始和結束。他包含了之後的兩個元素。<head>和</head>|<body>和</body>
文檔結構如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body></body></html>DOCTYPE部分
Doctype告訴瀏覽器使用什麼樣的html或xhtml規範來解析html文檔
HTML語言需要一個標準，當我們在第一行指定了<!DOCTYPE html>的時候，當瀏覽器去訪問我們的代碼的時候就就按照HTML代碼裡指定的標準去讀取和渲染給我們展現的頁面。
為什麼要使用<!DOCTYPE html>這個去告訴瀏覽器呢？
DOCTYPE模式：
我們先瞭解一下DOCTYPE的模式
問題產生：
當Netscape4（譯註：網景公司早期的瀏覽器）和IE4（微軟公司早期的瀏覽器）實現CSS機制時，並沒有遵循W3C提出的標準。Netscape4 提供了糟糕的支援，而IE4 雖然接近標準，但依舊未能完全正確的支援標準。儘管IE 5 修複了IE4 許多的問題（bugs），但是依然延續CSS實現中的其它故障（主要是盒模型（box model）問題）。
為了保證自己的網站在不同的瀏覽器中都能正確展現，網頁開發人員不得不依據各個瀏覽器的自身的規範來使用CSS。因此大部分網站的CSS實現並未符合W3C的標準。
然而隨著標準一致性變得越來越重要，瀏覽器開發商不得不面臨一個艱難的抉擇：逐漸遵循W3C的標準是前進的方向。但是改變現有CSS的實現，完整去遵循標準，會使許多網站或多或少受到破壞。如果瀏覽器突然以正確的方式解析現存的CSS，陳舊的網站顯示必然受到影響。
因此立即遵循標準會產生問題，然而忽略標準則又會維持瀏覽器大戰時（譯註：微軟和網景之間的一段競爭）所產生的混亂。
解決方案：
換句話說，所有的瀏覽器需要提供兩種模式：怪異模式（即相容模式）服務於舊式規則，strict 模式服務於標準規則。Mac平台的IE瀏覽器最先實現這兩種模式，Mozilla， Safari、Opera和Windows平台的IE6也相繼實現了這兩種模式。WIndows平台的IE5和Netscape4則只提供了怪異模式。
選擇使用哪種模式需要一個觸發器，而 “DOCTYP切換” 則用於此目的。依照標準：任何一個(X)HTML文檔必須擁有一個DOCTYPE（譯註：DTD（文件類型定義）是一組機器可讀的規則，它們指示 (X)HTML文檔中允許有什麼，不允許有什麼，DOCTYPE正是用來告訴瀏覽器使用哪種DTD,一般放在(X)HTML文檔開頭聲明）用以告訴其他人 這個文檔的類型風格
head部分
1、Meta(metadata information)
提供有關頁面的元資訊，例：頁面編碼、重新整理、跳轉、針對搜尋引擎和更新頻度的描述和關鍵詞
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="refresh" content="5"> <metahttpequiv="refresh"Content="1;Url=http://www.cnblogs.com/aylin1/" /> <meta name="keywords" content="部落格,張岩林,帥哥,"> <meta name="description" content="部落格園是一個面向開發人員的知識分享社區。自建立以來，部落格園一直致力並專註於為開發人員打造一個純淨的技術交流社區，推動並協助開發人員通過互連網分享知識，從而讓更多開發人員從中受益。部落格園的使命是協助開發人員用代碼改變世界。"> <title>張岩林</title> <link rel="icon" href="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" type="image/x-icon"></head><body></body></html>
1>定義編碼格式
<meta charset="UTF-8"> #定義編碼為utf-8
2>重新整理和跳轉頁面
<meta http-equiv="refresh" content="5"> # 5秒跳轉
<metahttpequiv="refresh"Content="1;Url=http://www.cnblogs.com/aylin1/" /> #跳轉至我的部落格
3>關鍵字
關鍵字的作用：一般是讓爬蟲之類的收錄程式，當他們在爬你的網站的時候，如果你有關鍵字，那麼他們會優先把關鍵字收錄到他們的記錄中，比如百度：如果他們收錄之後，他們搜尋你的關鍵字的時候，就能找到咱們的網站。
<meta name="keywords" content="部落格,張岩林,帥哥,">
4>描述
例如部落格園的描述如下：
<meta name="description" content="部落格園是一個面向開發人員的知識分享社區。自建立以來，部落格園一直致力並專註於為開發人員打造一個純淨的技術交流社區，推動並協助開發人員通過互連網分享知識，從而讓更多開發人員從中受益。部落格園的使命是協助開發人員用代碼改變世界。">
5>title
設定標籤為張岩林
<title>張岩林</title>
6>標籤表徵圖Link
<link rel="icon" href="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" type="image/x-icon">
7>匯入CSS類似python中匯入模組類似
<link rel="stylesheet" href="css/css_model.css">
8>、Style
1、在當前檔案中寫Css樣式
2、在其他檔案中寫Css樣式類似python的模組匯入的方式把Css樣式匯入到當前檔案中使用
9>、Script
1、在當前檔案中寫JS
2、在其他檔案中寫JS類似python的模組匯入的方式把JS匯入到當前檔案中使用
body部分
body裡面分為兩類標籤：塊級標籤和內聯標籤。
1、塊級標籤：<p><h1><table><ol><ul><form><div>
2、內聯標籤：<a><input><img><sub><sup><textarea><span>
塊級標籤元素的特點
① 總是在新行上開始；
② 高度，行高以及外邊距和內邊距都可控制；
③ 寬度預設是它的容器的100%，除非設定一個寬度。
④ 它可以容納內嵌元素和其他塊元素
內聯標籤元素的特點
① 和其他元素都在一行上；
② 高，行高及外邊距和內邊距不可改變；
③ 寬度就是它的文字或圖片的寬度，不可改變
④ 內嵌元素只能容納文本或者其他內嵌元素
對行內元素，需要注意如下
設定寬度width 無效。
設定高度height 無效，可以通過line-height來設定。
設定margin 只有左右margin有效，上下無效。
設定padding 只有左右padding有效，上下則無效。注意元素範圍是增大了，但是對元素周圍的內容是沒影響的。
1、基本標籤
<hn>: n的取值範圍是1~6; 從大到小. 用來表示標題.
<p>: 段落標籤. 包裹的內容被換行.並且也上下內容之間有一行空白.
<b> <strong>: 加粗標籤.
<strike>: 為文字加上一條中線.
<em>: 文字變成斜體.
<sup>和<sub>: 上角標 和 下角表.
<br>:換行.
<hr>:水平線
<div><span>
廢話不多說，直接擼碼分析
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>張岩林</title></head><body> <br> <hr> <h1>張岩林</h1> <h2>張岩林</h2> <h3>張岩林</h3> <h4>張岩林</h4> <h5>張岩林</h5> <h6>張岩林</h6> <hr> <p>段落標籤1</p> <p>段落標籤2</p> <hr> <b>加粗文字方法一</b> <br> <strong>加粗文字方法二</strong> <hr> <p>原價：<strike>299 </strike> 現價：10 文字中間加橫線</p> <p><em>斜體字</em></p> <p> 2<sup>n</sup> 上角標</p> <p>h<sub>2</sub>o 下角標</p> <p>< 小於符號</p> <p>> 大於符號</p> <p>© </p> <p>®</p></body></html>
效果如下：
2、圖形標籤<img>
src: 要顯示圖片的路徑.
alt: 圖片沒有載入成功時的提示.
title: 滑鼠懸浮時的提示資訊.
width: 圖片的寬
height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)
<img src="111426147.jpg" alt="圖片載入失敗" title="美女">
3、超連結標籤(錨標籤)<a>:
href:要串連的資源路徑 格式如下: href="http://www.baidu.com"
target: _blank : 在新的視窗開啟超連結. 架構名稱: 在指定架構中開啟串連內容.
name: 定義一個頁面的書籤.
用於跳轉 href : #書籤名稱.
<a href="http://www.cnblogs.com/aylin/p/5608175.html" target="_blank">猛戳這裡</a>
還有一種本頁標籤跳轉，通過定義ID來進行尋找到內容
<a href="#a">李白</a><div id="a" style=" padding: 0px; box-sizing: border-box; color: rgb(0, 0, 255); line-height: 1.5 !important;">>床前明月光，<br>疑是地上霜。<br>舉頭望明月，<br>低頭思故鄉。</div>
4、列表標籤：
<ul>: 無序列表
<ol>:有序列表
<li>:列表中的每一項.
<dl> 定義列表
<dt> 列表標題
<dd> 清單項目
<body> <ol> <li>無序一</li> <li>無序二</li> <li>無序三</li> <li>無序四</li> </ol> <ul> <li>有序一</li> <li>有序二</li> <li>有序三</li> <li>有序四</li> </ol> </ul> <dl> <dt>第一章</dt> <dd>1.1</dd> <dd>1.2</dd> <dd>1.3</dd> <dd>1.4</dd> </dl>
效果如下：
5、表格標籤: <table>:
border: 表格邊框.
cellpadding: 內邊距
cellspacing: 外邊距.
width: 像素 百分比.（最好通過css來設定長寬）
<tr>: table row
<th>: table head cell
<td>: table data cell
rowspan: 儲存格豎跨多少行
colspan: 儲存格橫跨多少列（即合併儲存格）
<th>: table header <tbody>(不常用): 為表格進行分區.
code<table border="" cellspacing="1" cellpadding="20" style="text-align: center;height: 100px"> <tr> <td>編號</td> <td>姓名</td> <td>班級</td> <td>數學</td> <td>語文</td> <td>英文</td> </tr> <tr> <td>001</td> <td>張岩林</td> <td>S1</td> <td>120</td> <td>109</td> <td>120</td> </tr> <tr> <td>001</td> <td>張林</td> <td>S1</td> <td>100</td> <td>19</td> <td>100</td> </tr> <tr> <td>001</td> <td>小康</td> <td>S1</td> <td>89</td> <td>100</td> <td>10</td> </tr> <tr> <td>001</td> <td>小虎</td> <td>S1</td> <td>10</td> <td>19</td> <td>12</td> </tr> </table>
效果如下：
表格中還有合併儲存格:
<table border="" cellspacing="1" cellpadding="1" style="width: 300px;height: 100px;color: #FC0D51;text-align: center"> <tr> <td>一</td> <td>二</td> <td>三</td> </tr> <tr> <td colspan="3">1 2 3</td> </tr> <tr> <td>4</td> <td>5</td> <td rowspan="2">6 9</td> </tr> <tr> <td>7</td> <td>8</td> </tr> </table>
6、表單標籤（django）<form>:
表單用於向伺服器傳輸資料。
表單能夠包含 input 元素，比如文字欄位、複選框、單選框、提交按鈕等等。
表單還可以包含textarea、select、fieldset和 label 元素。
1>.表單屬性
HTML 表單用於接收不同類型的使用者輸入，使用者提交表單時向伺服器傳輸資料，從而實現使用者與Web伺服器的互動。表單標籤, 要提交的所有內容都應該在該標籤中.
action: 表單提交到哪. 一般指向伺服器端一個程式,程式接收到表單提交過來的資料（即表單元素值）作相應處理，比如https://www.sogou.com/web
method: 表單的提交方式 post/get 預設取值 就是 get（信封）
get: 1.提交的索引值對.放在地址欄中url後面. 2.安全性相對較差. 3.對提交內容的長度有限制.
post:1.提交的索引值對 不在地址欄. 2.安全性相對較高. 3.對提交內容的長度理論上無限制.
get/post是常見的兩種請求方式.
2>.表單元素
<input> type: text 文本輸入框
password 密碼輸入框
radio 單選框
checkbox 多選框
submit 提交按鈕
button 按鈕(需要配合js使用.) button和submit的區別？
file 提交檔案：form表單需要加上屬性enctype="multipart/form-data"
from表單<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>知乎</title></head><body> <div style="height: 590px;width: 292px; margin: 0 auto;margin-top: 6%"> <img src="QQ圖片20160624092733.png"> <br> <p style="text-align: center">與世界分享你的知識、經驗和見解</p> <hr> <form action="http://127.0.0.1:8080" method="post" enctype="multipart/form-data"> <p> 用 戶 <input type="text" name="username"></p> <p> 密 碼 <input type="password" name="passwd"></p> <hr> <p> 性 別 男<input type="radio" name="sex" value="man"> 女<input type="radio" name="sex" value="woman"></p> <hr> <p> 愛 好 籃球<input type="checkbox" name="lanqiu" value="籃球"> 足球<input type="checkbox" name="zuqiu" value="足球"> 排球<input type="checkbox" name="paiqiu" value="排球"> 撞球<input type="checkbox" name="taiqiu" value="撞球"> </p> <hr> <br> 城 市 <select name="language" > <optgroup label="河北省"> <option value="保定市">保定市</option> <option value="邯鄲市">邯鄲市</option> <option value="承德市">承德市</option> </optgroup> <optgroup label="河南省"> <option value="洛陽市">洛陽市</option> <option value="信陽市">信陽市</option> <option value="鄭州市">鄭州市</option> </optgroup> <br> </select> <hr> <p style="text-align: center">備 注<textarea name="qq" style="height: 60px;width: 220px"></textarea></p> <p><input type="file" name="file_name" ></p> <hr> <p style="text-align: center"><input type="button" value="提交"> <input type="button" value="猛戳這裡"></p> </form> </div><table > <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr></table></body></html>
效果有點low，講究看吧
下面咱就來分析一下每個代碼的意義：
HTML基礎做出屬於自己的完美網頁
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
