sublime 常用快捷鍵的使用：

自動生成先寫head 再摁tab鍵自動生成標籤

　　Ctrl+p 　　　　　　查找文件（尤其在項目中查找更爲方便）

　　Ctrl+r 　　　　　　要文件中查找函數，如果輸入:則查找行號

　　Ctrl+L 　　　　　　選擇整行(按住-繼續選擇下行)

　　Ctrl+/ 　　　　　　單行註釋

　　Ctrl+Shift+/ 　　　塊註釋

　　Ctrl+M 　　　　光標移動至括號內開始或結束的位置

　　Ctrl+Shift+[ 　　　　摺疊代碼

　　Ctrl+Shift+] 　　　　展開代碼

　　Tab　　　　　　　縮進

　　Shift+Tab 　　　　去除縮進

　　Ctrl+Z　　　　　　撤銷當前操作

ctrl+shift+d 快速複製當前行代碼並插入到下一行

Alt+shift+2分屏 +1關閉

Html:

標籤：
一對標籤，只能有一個
<html   lang(屬性名) = "en"(屬性值,加雙引號)> 告訴搜索
引擎爬蟲，我們的網站是關於什麼內容 en = 英文 zh =中文

結構化標籤：
<head >  
思想
人看不到的
設置中文字典
<meta (屬性)charset="utf-8"（萬國碼）>(字符集，識別各個國家的語言) >
不然會亂碼！
<title>淘寶網 ，呸! </title>

[點擊並拖拽以移動]
</head>

<body>
人能看到的
Life is shift！！！（美好的生活！）（不識別）
<p>段落標籤 成段落
<p>this is paragraph!!!</p>
標題：<h1>標題</h1>  1到6  逐次減小 加粗字體
<strong>加粗
<em>斜體

又加粗又斜體：一個套一個
<strong>
<em>
舉個例子
</em>
</strong>

<del>
50 （50）劃掉
</del>

容器：綁定操作
舉例：
<div>    
<strong style = "color#f40">a</strong>
<strong style = "color#f40">b</strong>
<strong style = "color#f40">c</strong>
<strong style = "color#f40">d</strong>
<strong style = "color#f40">e</strong>
</div>
將屬性提取到容器 簡化操作，捆綁作用
<div style = "color:#f40">
<strong >a</strong>
<strong>b</strong>
<strong >c</strong>
<strong >d</strong>
<strong >e</strong>
</div style = "color:#f40">
<div>  無效果，有段落   功能 分塊，容器  好編寫，封裝
1.結構化
2.
</div>
<span>  無效果

</span>
</body>


</html>根標籤

重點：div 容器可換行，span 容器不可換行

五種序號：type=i I 1 a A
type = 1 reversed = "reversed"倒着排序

從某個數開始排序 type = "1" start="2"

無序列表 unorder list
抽屜父子結構很好做導航欄所有功能子項構成一個大功能

<ul type="disc"實心圓> "square"方塊 "circle"
<li>草莓</li>
<li>蘋果</li>
</ul>

單標籤加入圖片
<img src=""（資源地址）當圖片地址出錯時，給出信息

alt="這是範爺" title="this is xxx">
alt 圖片佔位符
title 圖片提示符
1.網上url 鼠標右鍵在新標籤打開圖片圖片的地址
2.本地的絕對路徑：src = "D:/a/b/c/123.jpg ";
D:/a/b/c/123.jpg

3.本地的相對路徑:直接寫123.jpg
D:/a/b/lesson.html
D:/a/b/123.jpg
在一個路徑下
a標籤：anchor
1.超鏈接
<a href（鏈接）="https//www.baidu.com"

target="blank"(在新標籤打開此網址)> www.baidu.com
<img src="">放圖片被引用
</a>

a標籤裏面的東西給顧客看的
<a 在這裏面是告訴瀏覽器跳轉位置>
a標籤裏面可以放圖片和網址
2.錨點
錨記住位置回到標記位置
3.打電話：用頁面模式打電話
<a href="tel:13159957578">打電話 </a>
4.協議限定符

1)雙標籤

 <標籤名> 內容 </標籤名>

該語法中“<標籤名>”表示該標籤的作用開始，一般稱爲“開始標籤（start tag）”，“</標籤名>” 表示該標籤的作用結束，一般稱爲“結束標籤（end tag）”。和開始標籤相比，結束標籤只是在前面加了一個關閉符“/”。

1	`比如 <body>我是文字 </body>`

2)單標籤

 <標籤名 />

單標籤也稱空標籤，是指用一個標籤符號即可完整地描述某個功能的標籤。　

1	`比如 <br` `/>`

1.2 HTML標籤關係

標籤的相互關係就分爲兩種：

1)嵌套關係

1	`<head> <title> </title> </head>`

2)並列關係

1 2	`<head></head>` `<body></body>`

例題：

 請問下列哪個標籤是錯誤的？

 A  <head></head><body></body>

 B  <strong><div></div></strong>

 C  <head><title></head></title>

 D  <body><div></div></body>

建議： 如果兩個標籤之間的關係是嵌套關係，子元素最好縮進一個tab鍵的身位。如果是並列關係，最好上下對齊。

　　在頁面中輸入以下2種單詞中的一種
　　1. html: 5
　　2. !
　　在sublime裏面然後按下tab鍵盤即可生成HTML骨架

1.3 文檔類型<!DOCTYPE>

1	`<!DOCTYPE` `html>`

　　這句話就是告訴我們使用哪個html版本？我們使用的是 html 5 的版本。 html有很多版本，那我們應該告訴用戶和瀏覽器我們使用的版本號。

　　標籤位於文檔的最前面，用於向瀏覽器說明當前文檔使用哪種 HTML 或 XHTML 標準規範，必需在開頭處使用標籤爲所有的XHTML文檔指定XHTML版本和類型，只有這樣瀏覽器才能按指定的文檔類型進行解析。

　　注意：一些老網站可能用的還是老版本的文檔類型比如 XHTML之類的，但是我們學的是HTML5,而且HTML5的文檔類型兼容很好(向下兼容的原則)，所以大家放心的使用HTML5的文檔類型就好了。

1.4 字符集

1	`<meta` `charset="UTF-8">`

　　utf-8是目前最常用的字符集編碼方式，常用的字符集編碼方式還有gbk和gb2312。

　　gb2312 簡單中文包括6763個漢字

　　BIG5 繁體中文港澳臺等用

　　GBK包含全部中文字符是GB2312的擴展，加入對繁體字的支持，兼容GB2312

　　UTF-8則包含全世界所有國家需要用到的字符

 記住一點，以後我們統統使用 UTF-8 字符集, 這樣就避免出現字符集不統一而引起亂碼的情況了。

1.5 HTML標籤的語義化

　　所謂標籤語義化，就是指標籤的含義。

爲什麼要有語義化標籤?

方便代碼的閱讀和維護
同時讓瀏覽器或是網絡爬蟲可以很好地解析，從而更好分析其中的內容
使用語義化標籤會具有更好地搜索引擎優化

　核心：合適的地方給一個最爲合理的標籤。

語義是否良好：當我們去掉CSS之後，網頁結構依然組織有序，並且有良好的可讀性。

不管是誰都能看懂這塊內容是什麼。

遵循的原則：先確定語義的HTML ，再選合適的CSS。

2 HTML標籤

首先 HTML和CSS是兩種完全不同的語言，我們學的是結構，就只寫HTML標籤，認識標籤就可以了。不會再給結構標籤指定樣式了。

HTML標籤有很多，這裏我們學習最爲常用的，後面有些較少用的，我們可以查下手冊就可以了。

2.1排版標籤

排版標籤主要和css搭配使用，顯示網頁結構的標籤，是網頁佈局最常用的標籤。

1)標題標籤 (熟記)

單詞縮寫： head 頭部. 標題

爲了使網頁更具有語義化，我們經常會在頁面中用到標題標籤，HTML提供了6個等級的標題，即

1	`<h1>、<h2>、<h3>、<h4>、<h5>和<h6>`

標題標籤語義：作爲標題使用，並且依據重要性遞減

其基本語法格式如下：n爲1~6

1	`<hn> 標題文本 </hn>`

注意： h1 標籤因爲重要，儘量少用，不要動不動就向你扔了一個h1。一般h1 都是給logo使用。

2)段落標籤( 熟記)

單詞縮寫： paragraph 段落

在網頁中要把文字有條理地顯示出來，離不開段落標籤，就如同我們平常寫文章一樣，整個網頁也可以分爲若干個段落，而段落的標籤就是

1	`<p> 文本內容 </p>`

是HTML文檔中最常見的標籤，默認情況下，文本在一個段落中會根據瀏覽器窗口的大小自動換行。

3)水平線標籤(認識)

單詞縮寫： horizontal 橫線

在網頁中常常看到一些水平線將段落與段落之間隔開，使得文檔結構清晰，層次分明。這些水平線可以通過插入圖片實現，也可以簡單地通過標籤來完成，<hr />就是創建橫跨網頁水平線的標籤。其基本語法格式如下：

1	`<hr` `/>是單標籤`

在網頁中顯示默認樣式的水平線。

例題： 新聞頁面

4)換行標籤(熟記)

單詞縮寫： break 打斷 ,換行

在HTML中，一個段落中的文字會從左到右依次排列，直到瀏覽器窗口的右端，然後自動換行。如果希望某段文本強制換行顯示，就需要使用換行標籤

1	`<br` `/>`

這時如果還像在word中直接敲回車鍵換行就不起作用了。

5)div span標籤(重點)

div span 是沒有語義的是我們網頁佈局主要的2個盒子

div 就是 division 的縮寫分割，分區的意思其實有很多div 來組合網頁。

span, 跨度，跨距；範圍

語法格式：

1	`<div> 這是頭部 </div> <span>今日價格</span>`

2.2 文本格式化標籤(熟記)

在網頁中，有時需要爲文字設置粗體、斜體或下劃線效果，這時就需要用到HTML中的文本格式化標籤，使文字以特殊的方式顯示。

b i s u 只有使用沒有強調的意思 strong em del ins 語義更強烈

2.3 標籤屬性

屬性就是特性比如手機的顏色手機的尺寸，總結就是手機的。。

使用HTML製作網頁時，如果想讓HTML標籤提供更多的信息，可以使用HTML標籤的屬性加以設置。其基本語法格式如下：

1	`<標籤名屬性1="屬性值1" 屬性2="屬性值2" …> 內容 </標籤名>`

在上面的語法中，

1.標籤可以擁有多個屬性，必須寫在開始標籤中，位於標籤名後面。

2.屬性之間不分先後順序，標籤名與屬性、屬性與屬性之間均以空格分開。

3.任何標籤的屬性都有默認值，省略該屬性則取默認值。

採取鍵值對的格式 key="value" 的格式

比如:

1	`<hr` `width="400" />`

屬性是寬度

值是 400

建議： 儘量不使用樣式屬性。

2.4 圖像標籤img (重點)

單詞縮寫： image 圖像

HTML網頁中任何元素的實現都要依靠HTML標籤，要想在網頁中顯示圖像就需要使用圖像標籤，接下來將詳細介紹圖像標籤<img />以及和他相關的屬性。其基本語法格式如下：

該語法中src屬性用於指定圖像文件的路徑和文件名，他是img標籤的必需屬性。

1	`<img` `src="圖像URL" />`

注意要複製圖片的地址帶.jpg

2.5 鏈接標籤(重點)

單詞縮寫： anchor 的縮寫。基本解釋錨, 鐵錨的

在HTML中創建超鏈接非常簡單，只需用標籤環繞需要被鏈接的對象即可，其基本語法格式如下：

1	`<a` `href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>`

href：用於指定鏈接目標的url地址，當爲標籤應用href屬性時，它就具有了超鏈接的功能。 Hypertext Reference的縮寫。意思是超文本引用

target：用於指定鏈接頁面的打開方式，其取值有self和blank兩種，其中self爲默認值，blank爲在新窗口中打開方式。

注意：

1.外部鏈接需要添加 http:// www.baidu.com

2.內部鏈接直接鏈接內部頁面名稱即可比如 < a href="index.html"> 首頁 </a >

3.如果當時沒有確定鏈接目標時，通常將鏈接標籤的href屬性值定義爲“#”(即href="#")，表示該鏈接暫時爲一個空鏈接。

4.不僅可以創建文本超鏈接，在網頁中各種網頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接。

1)錨點定位（難點）

通過創建錨點鏈接，用戶能夠快速定位到目標內容。創建錨點鏈接分爲兩步：

 1.使用“a href=”#id名>“鏈接文本"</a>創建鏈接文本。
 
 2.使用相應的id名標註跳轉目標的位置。

打電話：

2)base 標籤

base 可以設置整體鏈接的打開狀態

base 寫到 <head> </head> 之間

2.6 特殊字符標籤（理解）

2.7 註釋標籤

在HTML中還有一種特殊的標籤——註釋標籤。如果需要在HTML文檔中添加一些便於閱讀和理解但又不需要顯示在頁面中的註釋文字，就需要使用註釋標籤。其基本語法格式如下：

1	`<!-- 註釋語句 -->`

註釋內容不會顯示在瀏覽器窗口中，但是作爲HTML文檔內容的一部分，也會被下載到用戶的計算機上，查看源代碼時就可以看到。

註釋重要性：

2.8 form標籤：

form表單

form是一個複雜的系統標籤，其內部又可包含很多的一些輸入標籤

例如input 輸入文本標籤 checkbox 多選標籤等等

form表單有幾個屬性我們需要注意一下

　　1：action屬性，裏面寫的是url鏈接，接就是表單提交的地址

　　2：method屬性，裏面寫的是數據提交的方式，可以寫入get或者post

　　3：enctype屬性，提交數據的編碼格式

form表單中的標籤的前後臺交互

form表單被我們應用在前後臺交互的環節的，裏面的值可以在後臺通過某些key取出來

下面就來講解不同標籤取值的方法

1. input 標籤
input標籤我們最爲常見，裏面有三個屬性比較重要
　　a. type 他是代表input的類型
　　b. name 他就是後臺取值的依據(key)
　　c. val 他是我們輸入的值，也是後臺需要的值
　　<input type="" name="">

然後我們根據type的類型，又可以把input進行細分

　　a. text 表示普通的文本，明文輸入
　　b. password 輸入的也是文本，密文輸入
　　c. number 輸入的是數字，不是數字不讓輸入
　　d. submit 提交按鈕，提交form表單的內容
　　e. button 普通的按鈕
　　f. radio 單選框，我們需要注意的是單選框的所有的name值必須相同
　　　　　　如果name不相同，就說明不在同一個選擇方位，也就不存在單選，然後想要在後臺取到他的值，

　　　　　　你必須在定義的時候給附上一個值給value，這樣才能取到值
　　g. checkbox 複選框，內容和單選框一樣
　　h. file 選擇文件，可以選擇文件提交給後臺

type="image"：圖像按鈕

以上基本是input的所有類型，需要注意幾個點
　　1.取值都是通過name進行取值，所以必須給name賦值
　　2.文本類型想要附上初始值，直接在value中加入值就可以
　　3.選擇框如果想要默認選中誰，那就在誰的標籤中加入checked屬性

2. select 標籤
select標籤是一個下拉框的形式讓用戶進行選擇選項
所以select標籤中必須包含option標籤才能顯示屬性
形式爲：
<select>
<option></option>
<option></option>
</select>

	<select>
	  <option value ="volvo">Volvo</option>
	  <option value ="saab">Saab</option>
	  <option value="opel">Opel</option>
	  <option value="audi">Audi</option>
    </select>