題記：這個是看小碼哥的李南江老師講的 《狂虐H5+移動跨平臺開發》而寫，為了讓自己更有條理的整理思路而生。下面大家也會看到好多圖片都是李南江老師文檔中用的到，放著現成的還是用他的吧。我好懶的
一、 基礎標簽
03-基礎標簽副本.jpg
1. h標簽
- 作用：定義標題
- 格式：
<h1>這是標題 1</h1>
<h2>這是標題 2</h2>
<h3>這是標題 3</h3>
<h4>這是標題 4</h4>
<h5>這是標題 5</h5>
<h6>這是標題 6</h6>
- 居中（但不推薦使用）
<h1 align="center">我是居中的標題</h1>
- 注意點：
- h標簽是用來給文本添加語義的，而不是來修改樣式的
- h標簽（h1~h6）一共6個，超過6則無效
- 獨占一行（被h標簽包裹的內容）
- h1定義最大的標題，h6定義最小的標題
-
企業中慎用h標簽，h1標簽一個頁面最多只用一次（和SEO有關）
647982-c43cefd04e9dcfa0.jpg.png
2. p標簽
- 作用：告訴瀏覽器這是一個段落
- 格式：
<p>This is some text in a very short paragraph</p>
- 注意點：
-
獨占一行
647982-9cf56c98649098e7.jpg.png
3. hr標簽
- 作用：創建一條水平線
- 格式：
<hr> - 注意點：
- 獨占一行
<hr> == <hr />- hr是用來修改樣式的不推薦使用。以后水平線都用css盒子來做
- 如果修改hr的寬度，默認是居中的
4. img標簽
- 作用：在網頁上插入圖片
- 格式：
<img src="">
- 標簽的屬性
| 屬性 | 作用 |
|---|---|
| src | 告訴瀏覽器圖片路徑 |
| alt | 圖像的替代文本，只有圖片找不到是，才會顯示 |
| title | 懸停文本（介紹這張圖片） |
| height | 設置圖片顯示的高度 |
| width | 設置圖片顯示的寬度 |
- 注意點：
- 不是獨占一行（img標簽添加的圖片默認）
- 如果想讓圖片等比例拉伸，只填寫高度或者寬度即可
647982-1e65f0099636cbf5.jpg
相對路徑和絕對路徑
- 圖片路徑分為兩種, 一種是絕對路徑, 一種是相對路徑, 我們重點學習相對路徑, 因為在企業級開發人員沒有人使用絕對路徑
- 絕對路徑
- 從具體盤符尋找我們想要的資源
647982-f89d54db7fb76071.jpg
- 以上代碼表示在F盤下查找lnj文件夾, 然后在lnj文件夾下查找girl.png圖片
- 相對路徑
- 一個文件相對于另外一個文件的位置尋找我們需要的資源
- ```
- 假設html文件和girl.png都在lnj文件夾下, 以上代碼表示在lnj文件夾下查找girl.png圖片
- 為什么沒人使用絕對路徑?
- 可移植性太差
- 相對路徑幾種查找方式
- 同級
- 直接編寫, 例如:
girl.png - 加上./ 編寫, 例如
./girl.png - ./代表在當前目錄下查找,
./girl.png
- 直接編寫, 例如:
- 下級
- 直接編寫, 例如
abc/girl.png - 加上./ 編寫, 例如
./abc/girl.png - 相對當前目錄有幾個文件夾,就在后面依次補全幾個文件夾名稱即可, 例如
abc/bbb/ccc/ddd/girl.png或./abc/bbb/ccc/ddd/girl.png
- 直接編寫, 例如
- 上級
- ../代表訪問上級目錄
- 假設a文件夾下面有b文件夾, 圖片存放在a文件夾中, html文件存放在b文件夾中, 那么路徑為
../girl.png - 因為html文件在b文件夾中, 所以路徑是相對于b文件夾的, 所以../代表訪問b文件夾的上一級目錄, b文件夾的上一級目錄是a文件夾, 所以../girl.png就代表在a文件夾查找girl.png
- 注意事項
- 相對路徑不會出現這種格式
aaa/../bbb/girl.png - 雖然可以顯示, 但是企業開發中千萬不要這么寫
- 相對路徑不會出現這種格式
5. br標簽
- 作用：換行
- 格式：
<br>
- 注意點：
- 開發中盡量不要使用br換行
- br換行是在段落結尾進行換行的動作，并不是另起一行
6.a標簽(anchor)
- 格式：
<a href="http://www.lxweimin.com/users/2b88825af5dc/latest_articles">小皓的簡書</a>
- 作用：從一個界面跳轉到另一個界面
- 標簽的屬性
| 屬性 | 作用 |
|---|---|
| href(hypertext reference) | 跳轉的目標地址 |
| target | _blank在新標簽頁面跳轉,_self在當前頁面跳轉 |
| title | 懸停文本（只有在鼠標指到超鏈接才會顯示） |
- 注意點：
-
<a>標簽不獨占一行
7.base標簽
作用：為頁面上的所有鏈接規定默認地址或默認目標。（包括
<a>、<img>、<link>、<form>標簽中的 URL。）格式：
<head>
<base target="_blank" />
</head>
- 注意：
- base必須嵌套在head標簽里
- 如果標簽和base同時指定了target，最后會按照標簽的來執行
8.假鏈接
- 本質：是跳轉到當前頁面
- 格式：
- 格式一
<a href="#">小皓的簡書</a>此跳轉會跳轉到頁面頂部，這個可以做從底部回到頂部的控件 - 格式二
<a href="javascript:">小皓的簡書</a>（記得JavaScript后有個：，很容易丟掉）
二、列表標簽
04-列表標簽.png
無序列表(unordered list)
- 作用：創建無需列表
- 格式：
<h4>中國的城市有哪些</h4>
<ul>
<li>廣州</li>
<li>北京</li>
<li>上海</li>
<li>武漢</li>
</ul>
647982-e185ced1331c86f1.jpg.png
- li 英文是 list item, 翻譯為列表項
- 應用場景：
- 導航條
- 商品列表
-
新聞列表
647982-cce6353650391dac.jpg
647982-eaf081bc414de382.jpg
647982-f89d54db7fb76071.jpg - 注意事項：
- 瀏覽器會自動給無序列表添加先導符號的樣式，修改此樣式還是需要css，不建議用ul屬性去修改
- ul是組標簽，一定是一坨一坨出現，也就是li不能單獨存在，必須包裹在ul里。ul里不推薦包裹除li以外的其他標簽
- 雖然ul標簽里只能寫li標簽，但是li標簽是一個容器標簽，li可以任意添加其他標簽，甚至可以添加ul標簽
<ul>
<li>
蔬菜
<ul>
<li>白菜</li>
<li>蘿卜</li>
<li>黃瓜</li>
</ul>
</li>
<li>
水果
<ul>
<li>蘋果</li>
<li>桃子</li>
<li>香蕉</li>
</ul>
</li>
</ul>
647982-469aa0100e4ad057.jpg.png
有序列表(ordered list)
- 作用：
- 格式：
- 應用場景：
- 注意點
定義列表(definition list)
- 作用：添加列表語義，通過dt羅列出列表條目，然后再通過dd給每個條目進行相應描述
- 格式：
<dl>
<dt>北京</dt>
<dd>國家的首都, 看升國旗的地方</dd>
<dt>上海</dt>
<dd>魔都, 遍地是黃金的地方</dd>
</dl>
647982-6ac9a2950220610a.jpg
應用場景：
網站底部的相關信息
-
但凡看到一堆內容都是用于描述一個信息就想到dl
647982-fd206933bb44769b.jpg.png
647982-0a8917a6120f21d6.jpg.png 注意點
<dl>是一個組標簽，一定是一坨一坨的出現。也就是<dt>和<dd>標簽不能單獨存在，必須包裹在<dl>里面由于
<dl>、<dt>、<dd>是一個整體，所以<dl>里面不建議添加任意標簽<dt>、<dd>和<li>一樣都是容器標簽，里面可以添加任意標簽定義列表非常靈活，可以給一個
<dt>配置多個<dd>，但是最好不要出現過個<dt>對應一個<dd><dd>的語義是描述離他最近的一個<dt>，所以其他<dt>相當于沒有描述，而定義列表存在的意義就是既可以列出每一個條目又可以對每一個條目進行描述定義列表非常靈活，可以將多個
<dt>+<dd>組合拆分成多個<dl>
三、表格標簽(table)
647982-151e7c132c68a833.png
表格標簽過去用的多，是一個時代的標志
作用：以表格的形式將數據表現出來，表格這種展示形式被認為是最清晰的一種展現形式
-
格式：
647982-0e38b6457a7d5fb4.png.jpeg table定義表格
tr定義行
td定義單元格
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
表格標簽的屬性
647982-9bfa4696ea3a6d26.jpg.png
| 屬性 | 描述 |
|---|---|
| border | 表格邊框的寬度，默認為0（看不到） |
| width | 表格的寬度，默認是根據內容自動計算出來的 |
| height | 表格的高度，默認是根據內容自動計算出來的 |
| cellspacing | |
表格中的其他標簽
表格的結構
四、表單標簽
五、多媒體標簽
WebStorm快捷鍵（Mac）
- 讓光標在多行閃爍
- 按住option不放，然后用鼠標點選想要選中的行
- 自動在選中內容前后加標簽
- cmd+option+T，回車，然后輸入對應的標簽
- 注釋
- 格式：
<!---->
- cmd + /
- 快速輸入代碼
ul>li*3>ul>li+img*3 tab鍵- 上下移動代碼塊
- cmd + shift +↑/↓
- 快速合并展開代碼
- cmd + +/-
- 快速合并多個代碼塊
- cmd + shift + +/-（選中多個代碼塊）
- 快速新啟一行
- shift + Enter
