HTML重點筆記
一、基本快捷鍵
ctrl+c 復制
ctrl+v 粘貼
ctrl+x 剪切
ctrl+tab 切換（具體切換什么，要看是什么軟件）
alt+F4 關閉程序
F2 重命名
F5 刷新，比如看網頁的時候，想刷新網頁，按f5
ctrl+z 撤銷，就是這一步弄錯了，就ctrl+z撤銷回到改之前狀態
windows+E 打開資源管理器
windows+D 顯示桌面
ctrl+空格 切換中英文
二、HTTP簡介
1.超文本傳輸協議，Hypertext Transfer Protocol
2.這是一個文件的傳輸協議，我們上網的時候，所有的文件都是通過HTTP這個協議，從服務器上傳輸到客戶的電腦里面的
3.網頁是真實物理的文件。並且一個網頁是很多的物理文件組成的：html文件、圖片文件、js文件、css文件。這些文件要通過特殊軟件才能上傳到服務器上。然后就能讓用戶看了。用戶通過瀏覽器，訪問網址，服務器上面的文件就會通過http請求悄悄地傳輸到用戶的電腦中的臨時文件夾中，在用戶的電腦中執行、渲染、呈遞。
4.網頁的原理：用戶輸入網址之后，對應的服務器就發現有人請求我的網頁了，所以這個服務器就會把網頁和相關的圖片、js文件、css文件、flash文件都通過HTTP協議傳輸到用戶的電腦里面。HTML頁面在用戶的電腦里面進行渲染。HTTP協議指的是超文本傳輸協議。每一個網址，都對應了服務器上面的確定的文件。
三、HTML基礎
1.html、css、js都是純本文的
純文本文件是：
1） 只有文本，沒有樣式；
2） 用記事本等純文本編輯器可讀，不是亂碼
2.HTML是超文本標記語言
1）英語：HyperText Markup Language；
2）現在的業界的標准，網頁技術嚴格的三層分離：html就是負責描述頁面的語義；css負責描述頁面的樣式；js負責描述頁面的動態效果的；
基本HTML 網頁結構如下，body標簽里的內容是瀏覽器上所視內容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>頁面標題</title>
</head>
<body>
<h1>標題</h1>
<p>段落</p>
</body>
</html>ps：
<!DOCTYPE html> 聲明為 HTML5 文檔
<html> 元素是 HTML 頁面的根元素
<head> 元素包含了文檔的元（meta）數據，如 <meta charset="utf-8"> 定義網頁編碼格式為 utf-8。
<title> 元素描述了文檔的標題，瀏覽器標簽名
<body> 元素包含了可見的頁面內容
<h1> 元素定義一個大標題
<p> 元素定義一個段落
<!-- 內容 -->注釋內容
四、字符集
1.兩種字符集：區別
UTF-8 字多，有各種國家的語言，但是保存尺寸大，文件臃腫；
gb2312字少，只用中文和少數外語和符號，但是尺寸小，文件小巧
2.關鍵字和頁面描述
1）設置頁面描述：
<meta name="Description" content="網易是中國領先的互聯網技術公司，為用戶提供免費郵箱、游戲、搜索引擎服務，開設新聞、娛樂、體育等30多個內容頻道，及博客、視頻、論壇等互動交流，網聚人的力量。" />
只要設置的Description頁面描述，那么百度搜索結果，就能夠顯示這些語句，這個技術叫做SEO，search engine optimization，搜索引擎優化。
2）定義關鍵詞：
<meta name="Keywords" content="網易,郵箱,游戲,新聞,體育,娛樂,女性,亞運,論壇,短信" />
這些關鍵詞，就是告訴搜索引擎，這個網頁是干嘛的，能夠提高搜索命中率。
3）title也是有助於SEO搜索引擎優化的
五、HTML基本語法特性
1.HTML對換行不敏感，對tab鍵不敏感
2.空白折疊現象
1）HTML中所有的文字之間，如果有空格、換行、tab都將被折疊為一個空格顯示。
3.HTML標簽是分等級的
HTML將所有的標簽分為兩種：容器級、文本級。
容器級的標簽，里面可以放置任何東西；
文本級的標簽里面，只能放置文字、圖片、表單元素。
1）p是一個文本級的標簽，p里面只能放文字、圖片、表單元素
2）a是一個文本級的標簽
ps：在HTML頁面中，帶有“< >”符號的元素被稱為HTML標簽，如上面提到的 <HTML>、<head>、<body>都是HTML標簽。所謂標簽就是放在“< >” 標簽符中表示某個功能的編碼命令，也稱為HTML標簽或 HTML元素
雙標簽：<標簽名> 內容 </標簽名>
該語法中“<標簽名>”表示該標簽的作用開始，一般稱為“開始標簽（start tag）”，“</標簽名>” 表示該標簽的作用結束，一般稱為“結束標簽（end tag）”。和開始標簽相比，結束標簽只是在前面加了一個關閉符“/”。
單標簽：<標簽名 />
單標簽也稱空標簽，是指用一個標簽符號即可完整地描述某個功能的標簽。元素（標簽）屬性：HTML元素屬性一般在開始標簽中，以鍵值對表示。
常見屬性：
六、圖片
1.能用的圖片類型
頁面上可以插入圖片，能夠插入的圖片類型是：jpg(jpeg)、gif、png、bmp。
不能往網頁中插入的圖片格式是：psd、ai。
2.語法
插入圖片的方法：
<img src="baby.jpg" alt="巴黎結婚照" />
src是img標簽的屬性，baby.jpg是這個屬性的值
alt是英語alternate“替代”的意思，就表示不管因為什么原因，當這個圖片無法被顯示的時候，出現的替代文字（有的瀏覽器不支持）
七、超鏈接
語法：<a href="1.html">結婚照</a>
1.a標簽的另外兩個屬性
1）title 懸停文本
2）target 是否在新窗口中打開
eg:<a href="09_img.html" title="很好看哦" target="_blank">結婚照</a>
blank就是“空白”的意思，就表示新建一個空白窗口
2.頁面內的錨點
<a href="#wdzp">點擊我就查看我的作品</a>
<h2><a id="gzjy">工作經驗</a>
首先設置h2的id，點擊href="#wdzp"直接跳轉到工作經驗。
八、列表
1.無序列表
無序列表，用來表示一個列表的語義，並且每個項目和每個項目之間，是不分先后的；
無序列表中的li不能單獨存在，必須包裹在ul里面；反過來說，ul的“兒子”不能是別的東西，只能有li；
注意：ul的作用是增加無序列表的“語義”；ul的子標簽，只能是li。但是li是一個容器級標簽，li里面什么都能放；
<ul> <li>Coffee</li> <li>Milk</li> </ul>
2.有序列表
ordered list 有序列表，列表項目使用數字進行標記。用ol表示；
<ol> <li>Coffee</li> <li>Milk</li> </ol>
3.定義列表
1）定義列表也是一個組標簽，不過比較復雜，出現了三個標簽：
dl表示definition list 定義列表；
dt表示definition title 定義標題；
dd表示definition description 定義表描述詞；
dt、dd只能在dl里面；dl里面只能有dt、dd；
定義列表用法非常靈活，可以一個dt配很多dd；
2）dt、dd都是容器級標簽，想放什么都可以。所以，現在就應該更加清晰的知道：
用什么標簽，不是根據樣子來決定，而是語義
九、div和span
1.div的語義是division“分割”； span的語義就是span“范圍、跨度”
2.div標簽是一個容器級標簽，里面什么都能放，甚至可以放div自己
3.span也是表達“小區域、小跨度”的標簽，但是是一個“文本級”的標簽。
ps:就是說，span里面只能放置文字、圖片、表單元素。 span里面不能放p、h、ul、dl、ol、div。
可理解為：span里面是放置小元素的，div里面放置大東西的。
十、表格
HTML表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
十一、表單
form是英語表單的意思。form標簽里面有action屬性和method屬性，action屬性就是表示，表單將提交到哪里。 method屬性表示用什么HTTP方法提交，有get、post兩種。表單能夠包含 input 元素，比如文本字段、復選框、單選框、提交按鈕等等。表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。表單用於向服務器傳輸數據。
<form action="form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>
1.文本框
<input type="text" value="默認有的值" />
value表示“值”，value屬性就是默認有的值，文本框中已經被填寫好了
2.密碼框
<input type="password" />
3.單選按鈕
<input type="radio" name="xingbie" checked="checked" /> 男
<input type="radio" name="xingbie" /> 女
默認被選擇，就應該書寫checked=”checked”
4.復選框
<p>
請選擇你的愛好：
<input type="checkbox" name="aihao"/> 睡覺
<input type="checkbox" name="aihao"/> 吃飯
<input type="checkbox" name="aihao"/> 足球
<input type="checkbox" name="aihao"/> 籃球
<input type="checkbox" name="aihao"/> 乒乓球
<input type="checkbox" name="aihao"/> 打豆豆
</p>
5.下拉列表
select就是“選擇”，option“選項”。
select標簽和ul、ol、dl一樣，都是組標簽
<select>
<option>北京</option>
<option>河北</option>
<option>河南</option>
<option>山東</option>
<option>山西</option>
<option>湖北</option>
<option>安徽</option>
</select>
6.多行文本框（文本域）
<textarea cols="30" rows="10"></textarea>
cols屬性表示columns“列”，rows屬性表示rows“行”
7.三種按鈕
1）普通按鈕：<input type="button" value="我是一個普通按鈕" />
2）提交按鈕：<input type="submit" />
3）重置按鈕：<input type="reset" />
十二、HTML其他
1 .HTML注釋
任何的程序、代碼都有注釋，注釋就是給程序員看的，不影響程序的;
HTML注釋的語法：<!--注釋的內容-->
2.字符實體
1）< 就是<的字符實體；
2）> 就是>的字符實體；
3）© 就是© 版權符號；
4） 就是空格的實體，防止空白折疊現象；
十三、常見的內聯元素和塊元素總結：
1、簡介：
- 塊元素前后都有換行，和前后元素都不在一行。
- 內聯元素也叫行內元素，在網頁中總是隨着文字流出現在“行內”。這些元素不會在它本身之前或之后生成“分隔符”，所以可以出現在另一個元素的內容中，而不會破壞其顯示。
2、特點：
- 塊級（block）元素的特點：
①總是在新行上開始；
②高度，行高以及外邊距和內邊距都可控制；
③寬度缺省是它的容器的100%，除非設定一個寬度；
④它可以容納內聯元素和其他塊元素。
- 內聯（inline）元素的特點：
①和其他元素都在一行上；
②高，行高及外邊距和內邊距不可改變；
③寬度就是它的文字或圖片的寬度，不可改變；
④內聯元素只能容納文本或者其他內聯元素。
3、塊元素：
- p-段落,
- table-表格
- blockquote-引用
- center-居中對齊
- dir-目錄列表
- div-常用塊級標簽,
- form-表單
- h1-標題（6個級別）
- hr-水平分割線
- isindex- input prompt
- menu-菜單列表
- ol-排序列表
- pre-格式化文本
- ul-無序列表
4、內聯元素：
- abbr-縮寫
- acronym-首字
- b-粗體
- big-大字體
- br-換行
- cite-引用
- code-引用代碼
- dfn -定義字段
- em-強調
- i-斜體
- img-圖片
- input-輸入框
- label-表格標簽
- q-行內引用
- s-中划線
- select-項目選擇
- small-小字體
- span -常用內聯容器，定義文本內區塊,
- strike-中划線
- strong-粗體強調
- sub -下標
- sup-上標
- a-錨點
5、可變元素（根據上下文關系來確定該元素是塊元素或者內聯元素）:
- applet – java applet
- button – 按鈕
- del – 刪除文本
- iframe – inline frame
- ins – 插入的文本
- map – 圖片區塊(map)
- object – object對象
- script – 客戶端腳本
更多內容更新中。。。