50-Web基礎-HTML
阿新 • • 發佈：2018-05-02
size 讀取 Enctype 區分大小寫 ie8 大小 www. for text
1、什麽是HTML？
HTML 是用來描述網頁的一種語言。
- HTML 指的是超文本標記語言 (Hyper Text Markup Language)
- HTML 不是一種編程語言，而是一種標記語言 (markup language)
- 標記語言是一套標記標簽 (markup tag)
- HTML 使用標記標簽來描述網頁
- HTML 文檔描述網頁
- HTML 文檔包含 HTML 標簽和純文本
- HTML 文檔也被稱為網頁，Web 瀏覽器的作用是讀取 HTML 文檔，並以網頁的形式顯示出它們。瀏覽器不會顯示 HTML 標簽，而是使用標簽來解釋頁面的內容。
2、標簽
2.1 基礎概念
- HTML標簽是HTML語言中最基本的單位，標簽不區分大小寫，由尖括號包裹關鍵字構成，例如<html>test</html> 叫做html標簽，<div>test</div>叫做div標簽，以此類推。
- 類似<meta>這種就叫做自閉合標簽，類似<a></a>就叫做主動閉合標簽。
- 標簽可以嵌套，例如<div><div></div></div>。
- 標簽存在的意義：定位操作、CSS操作、讓JS操作更簡單。
- 所有的標簽分為塊級標簽和行內標簽(又叫做內聯標簽)
- 塊級標簽：占滿一行，如常見的H系列標簽，P標簽，div標簽。
- 行內標簽(內聯標簽)：只占元素長度大小，如span標簽。
2.2 常用的標簽
<!DOCTYPE> 定義遵循的文檔類型，如<!DOCTYPE html> 則代表遵循html文檔規範。
2.2.1 head中的常見標簽：
1 <head> 2 <meta charset="UTF-8"> <!-- meta為自閉合標簽， charset屬性定義字符編碼 --> 3 <meta http-equiv="Refresh" content="3"> <!-- 3秒自動刷新 --> 4 <meta http_equiv="Refresh" content="3;Url=http://edu.51cto.com"> <!-- 3秒自動跳轉百度 --> 5 <meta name="keywords" content="吃雞,關鍵字2,關鍵字3"> <!-- 給搜索引擎用的關鍵字 --> 6 <meta name="description" content="網站描述信息"> <!-- 描述當前網站是幹嘛的 --> 7 <meta http_equiv="X-UA-Compatible" content="IE=EmulateIE8;IE=IE7"> <!-- 主動兼容IE8和IE7 --> 8 <title>標簽</title> <!-- head內部的標簽只有title可見 --> 9 <link rel="shortcut icon" href="image/favicon.ico"> <!-- 小圖標顯示 --> 10 </head>
2.2.2 body中的常見標簽：
2.2.2.1 <h>-</h>標簽：h標簽用來定義標題
<body> <h1>Druid</h1> <!-- h標簽用來定義標題，字體從上至下依次縮小 --> <h2>Druid</h2> <h3>Druid</h3> <h4>Druid</h4> <h5>Druid</h5> <h6>Druid</h6> </body>
2.2.2.2 <p>-</p>標簽：p標簽用來定義段落
1 <body> 2 <p>第一段落</p> <!-- p標簽用來控制段落,段落間有間距 --> 3 <p>第二段落</p> 4 <p>第三段落</p> 5 </body>
2.2.2.3 <span>-</span>標簽：span標簽為白板標簽(行內標簽)
1 <body> 2 <span>第一行</span> <!-- 行內標簽（內聯標簽） --> 3 <span>這裏緊跟第一行，不會換行</span> 4 </body>
2.2.2.4 <div>-</div>標簽：div標簽為白板標簽(塊級標簽)
1 <body> 2 <div>第一行</div> <!-- 塊級標簽 --> 3 <div>這裏就要換行了</div> 4 </body>
2.2.2.5 <a>-</a>標簽：a標簽用來定義鏈接和錨
用來定義鏈接：單擊文字即可跳轉至鏈接
<body> <a href="http://www.baidu.com" target="_blank">百度</a> <!-- target="_blank"在新的標簽頁打開百度，若不加則在原頁打開 --> </body>
用來定義錨：作為錨點，單擊文字即可跳轉至對應的ID處
<body> <a href="#1">第一章</a> <!-- #為關鍵字符，創建指向錨的鏈接，後面的編號要和想跳轉的地方保持一致 --> <a href="#2">第二章</a> <a href="#3">第三章</a> <div style="height: 600px;" id="1"> 第一章的內容 </div> <div style="height: 600px;" id="2"> 第二章的內容 </div> <div style="height: 600px;" id="3"> 第三章的內容 </div> </body>
1 <a href="#1">第一章</a> <!-- #為關鍵字符，創建指向錨的鏈接，後面的編號要和想跳轉的地方保持一致 --> 2 <a href="#2">第二章</a> 3 <a href="#3">第三章</a> 4 <a href="#4">第四章</a> 5 <div style="height: 600px;" id="1"> 6 第一章的內容 7 </div> 8 <div style="height: 600px;" id="2"> 9 第二章的內容 10 </div> 11 <div style="height: 600px;" id="3"> 12 第三章的內容 13 </div> 14 <a name="4">第四章的內容</a> <!-- 對錨進行命名 -->
2.2.2.6 <img />標簽：img標簽用來定義圖片
1 <body> 2 <img src="1.png" /> 3 </body>
1 <body> 2 <a href="http://www.baidu.com"> 3 <img src="1.png" title="圖片" style="height: 300px;width: 300px" alt="圖片"/> 4 </a> <!-- 單擊圖片直接跳轉至指定url；title屬性用於鼠標懸浮顯示信息；alt屬性在圖片不能顯示的時候顯示對應的文字信息 --> 5 6 </body>
2.2.2.7 <br />標簽：<br /> 元素是一個空的 HTML 元素，用來換行
1 <body> 2 <div>換行<br />測試</div> 3 </body>
2.2.2.8 <form> </form>標簽：HTML表單用於收集用戶輸入，form標簽用來定義HTML表單。HTML表單又包含表單元素：input、select和textarea。
<input />標簽(元素):
1 <body> 2 <form action="" method=""> <!-- form為表單標簽,用來向後臺提交數據;action屬性用來指定服務器url;method用來指定get或者post --> 3 <input type="text" /> <!-- 單行文本輸入框 --> 4 <br /> 5 <input type="password" /> <!-- 會隱藏真實字符 --> 6 <input type="button" value="沒用" /> <!-- button默認情況下無用 --> 7 <input type="submit" value="登錄" /> <!-- submit才能提交表單 --> 8 </form> 9 </body>
1 <body> 2 <form action="http://localhost:8888/index" method="post"> <!-- get會將輸入內容拼接成url提交給後臺，post會將內容放到數據中提交給後臺 --> 3 <input type="text" name="user" /> <!-- name屬性用來定義字典的key --> 4 <br /> 5 <input type="password" name="pwd" /> 6 <!-- 打包成字典{"user": "用戶輸入的用戶名", "pwd": "用戶輸入的密碼"}發給後臺 --> 7 <input type="button" value="沒用" /> 8 <input type="submit" value="登錄" /> 9 </form> 10 </body>
<body> <form enctype="multipart/form-data"> <!-- enctype="multipart/form-data"該屬性用來上傳文件 --> <div> 用戶名:<input type="text" name="user" /> <p>請選擇性別:</p> 男:<input type="radio" name="sex" value="1" checked="checked" /> <!-- radio為單選框，如果沒有name或者name不相同，那麽就可以多選 --> 女:<input type="radio" name="sex" value="2" /> <!-- 這裏的value用於給後臺傳數據;checked用來設置默認值 --> <p>愛好:</p> 籃球:<input type="checkbox" name="favor" value="1" /> <!-- checkbox為復選框 --> 足球:<input type="checkbox" name="favor" value="2" /> <!-- 這裏的name用於後臺批量獲取數據 --> 羽毛球:<input type="checkbox" name="favor" value="3" /> 臺球:<input type="checkbox" name="favor" value="4" /> 網球:<input type="checkbox" name="favor" value="5" /> <p>技能:</p> 寫代碼:<input type="checkbox" name="skill" value="1" checked="checked" /> 修車:<input type="checkbox" name="skill" value="2" /> <p>上傳文件:</p> <input type="file" name="filename" /> <!-- type="file"用來上傳文件，真實的傳文件依賴form表單屬性enctype --> </div> <input type="reset" value="重置" /> <!-- 重置除默認值以外的值 --> <input type="submit" value="提交" /> </form> </body>
<select> </select>標簽(元素)：select標簽定義下拉列表，option標簽定義待選項，列表通常會把首個選項顯示為被選選項，能夠通過添加 selected 屬性來定義預定義選項。
1 <body> 2 <form> 3 <div> 4 <select name="city"> 5 <option value="1">北京</option> 6 <option value="2">上海</option> 7 <option value="3">廣東</option> 8 <option value="4">深圳</option> 9 <option value="5" selected="selected">成都</option> 10 </select> <!-- selected="selected"為默認值 --> 11 <input type="submit" value="提交" /> 12 </div> 13 <div> 14 <select name="city" size="10"> 15 <option value="1">北京</option> 16 <option value="2">上海</option> 17 <option value="3">廣東</option> 18 <option value="4">深圳</option> 19 <option value="5" selected="selected">成都</option> 20 </select> <!-- size用來設置顯示的行數 --> 21 <input type="submit" value="提交" /> 22 </div> 23 <div> 24 <select name="city" size="10" multiple="multiple"> 25 <option value="1">北京</option> 26 <option value="2">上海</option> 27 <option value="3">廣東</option> 28 <option value="4">深圳</option> 29 <option value="5" selected="selected">成都</option> 30 </select> <!-- multiple屬性用於多選 --> 31 <input type="submit" value="提交" /> 32 </div> 33 <div> 34 <select name="city"> 35 <optgroup label="北京市"> 36 <option value="1" selected="selected">北京</option> 37 </optgroup> 38 <optgroup label="四川省" /> 39 <option value="2" selected="selected">成都</option> 40 <option value="3">綿陽</option> 41 </optgroup> 42 <optgroup label="河北省" /> 43 <option value="4" selected="selected">石家莊</option> 44 <option value="5">保定</option> 45 </optgroup> 46 </select> <!-- optgroup屬性用於組合相關選項 --> 47 <input type="submit" value="提交" /> 48 </div> 49 </form> 50 </body>
<textarea> </textarea>標簽(元素)：textarea標簽用來定義多行輸入
1 <body> 2 <div> 3 <textarea name="key"> 4 這裏的文本作為默認值 5 </textarea> <!-- textarea標簽用來定義多行輸入，name還是作為Key --> 6 </div> 7 </body>
3、註釋
HTML語言註釋用<!-- 註釋 -->，CSS中用/*註釋*/
50-Web基礎-HTML