H5學習筆記——基本知識
阿新 • • 發佈:2019-02-19
今天開始學習H5的知識,當然也是基礎的,並不是非常系統。這兩天同事一直吵吵這讓給做搶號軟體。。弄得我一臉懵逼,不會啊,努力學習新知識吧。
1、基礎標籤&知識
- 換行:
<br />
- 空格:
- 大於號:
>
- 小於號:
<
- 標題:
<h1 - h5></h1 - h5>
- 段落表示(段落後有空行):
<p></p>
- 塊:
<div></div>
- 行內塊:
<span></span>
- 強調:
<em></em>
(斜體) - 專業名詞:
<i></i>
- 關鍵字或產品名稱:
<b></b>
(粗體) - 強調:
<strong></strong>
(粗體)
2、圖片標籤
<img src="相對路徑/絕對路徑" alt="圖片錯誤時顯示的文字提示">
alt是在圖片無法顯示時候,給出的文字提示,
嚴格要求必須寫alt屬性,否則會引發搜尋引擎和盲人語音識別方面的問題。
3、連結標籤
<a href="https://www.baidu.com" title="滑鼠放在圖片上的提示" target="_self/_blank">百度</a>
a標籤是連結標籤,href表示連結到的地址,title表示滑鼠停留在此控制元件上時顯示的文字提示
target屬性為_self時,當前頁面跳轉到連結地址,為_blank時候,新開頁面並跳轉到連結頁面
當然可以結合圖片使用,如下:
<a href="https://www.baidu.com" title="滑鼠放在圖片上的提示">
<img src="相對路徑/絕對路徑" alt="圖片錯誤時顯示的文字提示">
</a>
也可以利用屬性id進行頁內跳轉,如下:
<h1 id="biaoti2">標題2</h1>
<a href="#biaoti1">標題1</a>
<a href="#biaoti2">標題2</a>
<a href="#biaoti3">標題3</a >
<a href="#biaoti4">標題4</a>
當然可以跳轉到文章開頭,如下:
<a href="#">回到頂部</a>
或者
<a href="">回到頂部</a>
如果什麼都不想做,也可以實現:
<a href="javascript:;">什麼都不做</a>
:與;之間是JavaScript語句,語句為空,沒有任何功能。
4、列表
快捷鍵安裝與查詢
有序列表:(ol>li*3)
<ol>
<li>學習h5</li>
<li>學習css</li>
<li>學習js</li>
</ol>
無序列表:(ul>(li>a))*4
<ul>
<li><a href="#">新聞標題1</a></li>
<li><a href="#">新聞標題1</a></li>
<li><a href="#">新聞標題1</a></li>
<li><a href="#">新聞標題1</a></li>
</ul>
自定義列表:dl>(dt+dd)*3
<dl>
<dt>html</dt>
<dd>負責頁面結構</dd>
<dt>css</dt>
<dd>負責頁面表現</dd>
<dt>js</dt>
<dd>負責頁面行為</dd>
</dl>
5、表格
<table border="1" width="500" height="300">
<tr>
<th valign="bottom">序號</th>
<th>名稱</th>
<th>價格</th>
<th>數量</th>
</tr>
<tr>
<td align="center">1</td>
<td>蘋果</td>
<td>10</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>梨</td>
<td>8</td>
<td>10</td>
</tr>
<tr>
<td>3</td>
<td>香蕉</td>
<td>5</td>
<td>20</td>
</tr>
</table>
常用屬性:
- border 定義表格邊框
- cellpadding 單元格內邊距
- cellspacing 單元格間距離
- align 內容水平對齊方式 left center right
- valign 內容垂直對其方式 top middle bottom
- colspan 設定單元格水平合併
- rowspan 設定單元格垂直合併
例子:
<table border="1" width="600" height="300">
<tr>
<th colspan="5" align="left">基本情況</th>
</tr>
<tr>
<td width="18%">姓名</td>
<td width="18%"></td>
<td width="18%">性別</td>
<td width="18%"></td>
<td rowspan="5" width="28%"><img width="100" src="p" alt="圖片"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>