1.安裝HTML編輯器-WebStorm
（1）常用的前端開發工具：Dreamwaver，Sublime，WebStorm
（2）可以直接百度搜索WebStorm，因為是收費軟件，如果是為了學習，我們可以下載破解版，如果你已經工作，有一定收入，我希望你能支持正版，而且官網下載的免費使用三十天，官網地址：http://www.jetbrains.com/webstorm/
（3）安裝WebStorm后，打開軟件，在激活頁面選擇“License server”，在下方輸入“http://idea.iteblog.com/key.php”即可破解
（4）可以下載漢化包，將漢化包放入安裝目錄的lib文件夾中
（5）新建html文件：ctrl+alt+insert，然后選擇“HTML File”
2.H標簽、P標簽和Hr標簽
（1）H標簽
? ? ? ? -作用：用于給文本添加標題，不是用來修改文本樣式的
? ? ? ? -格式：<h1>...</h1>
? ? ? ? -H標簽一共有6種，<h1>...<h6>，如圖所示：
? ? ? ? ?-在企業開發中，一個頁面只能有一個<h1>標簽
? ? ? ? ?-屬性align：<h1 align="...">...</h1>，align可以為left（居左）、center（居中）、right（居右）（不推薦使用）
（2）P標簽
? ? ? ? ?-作用：告訴瀏覽器哪些文字是段落，會單獨占據一行
? ? ? ? ?-格式：<p>...</p>
? ? ? ? ?-具體呈現，如圖所示：
（3）Hr標簽
? ? ? ? ?-作用：在瀏覽器上顯示一條分割線
? ? ? ? ?-格式：<hr/>，如圖所示：
3.注釋
（1）格式：<!--這里是注釋-->
（2）作用：方便閱讀代碼
（3）WebStorm中的快捷鍵：ctrl+/ ?快捷加入注釋
4.img標簽
（1）作用：告訴瀏覽器要顯示一張圖片
（2）格式：<img src="圖片路徑">
（3）img標簽不會獨占一行
（4）屬性：
? ? ? ? -width 圖片寬度，只要指定了寬度，系統會自動根據寬度計算高度
? ? ? ? -height 圖片高度，只要指定了高度，系統會自動根據寬度計算寬度
? ? ? ? -title 當鼠標懸停在圖片上時，顯示的文本
? ? ? ? -alt 是alternate的縮寫，用于告訴瀏覽器，當需要的圖片找不到時顯示的內容
5.br標簽
（1）作用：換行
（2）格式：<br>
（3）多個br標簽可以多個使用，用多少個就換多少行，但是由于HTML的作用（給文本添加語義），所以在企業開發中很少使用br標簽
6.路徑
（1）相對路徑：在“.html”文件所在的文件夾開始查找
（2）絕對路徑：每次都從指定的盤符查找（不建議使用）
7.a標簽
（1）作用：用于控制頁面之間的跳轉
（2）格式：<a href="指定要跳轉的頁面">展現給用戶的內容</a>，如圖所示：
（3）不僅可以用文本點擊跳轉，還可以用圖片等，注意的是，網頁鏈接需要加上“http://”或者“https://”
（4）使用相對路徑可以跳轉本地頁面
（5）a標簽中有一個target屬性，用于控制如何跳轉，值可以為“_self（在當前選項卡中跳轉）”和“_blank（新建選項卡跳轉）”
（6）title屬性：跟img標簽中的title屬性一樣，當鼠標懸停在圖片上時，顯示的文本
8.base標簽
（1）作用：統一制定所有超鏈接（a標簽）新建選項卡打開
（2）格式：在<head>...</head>中添加 <base target="_blank">
（4）如果需要單獨的某個超鏈接在當前窗口打開，只需要在其中單獨制定即可
9.假鏈接
（1）作用：點擊之后不會跳轉的超鏈接，在開發過程中，其他頁面沒寫出來時，用假鏈接代替
（2）格式：
? ? ? ? -# ? ? 點擊后自動回到網頁頂部（常用的是各大網站中的“回到頂部”按鈕）
? ? ? ? -javascript: ? ? 點擊后不會自動回到頂部
10.錨點
（1）作用：跳轉到當前頁面的指定位置，常用于目錄制作
（2）通過a標簽跳轉，且給目標位置綁定id屬性
（3）格式：
? ? ? ? ? ? ? ? ? ? <a href="#center">...</a>
? ? ? ? ? ? ? ? ? ? <h2 id="center">..</h2>
