HTML常用標籤(HTML入門筆記2)
技術標籤：HTML入門筆記html+CSShtmlhtml5chrome
本文詳細介紹HTML的a,img,table和form標籤
HTML入門筆記2
一 a標籤
a標籤屬性：href，taiget，download，rel=noopener。
a標籤作用：主要是用來跳轉到外部頁面，內部頁面或者電話郵箱等等。
程式碼類似這樣<a href=""></a>
i
1 href
- 注意：永遠也不要雙擊開啟html，使用者都是輸入網址進去，我們要像使用者一樣使用網頁輸入開啟。
- 用輸入網址開啟，方法一：終端輸入安裝
yarn gloal add http-server
安裝好後輸入http-server . -c-1
這裡"."可忽略，-c是快取，-1是不要快取。推薦用yarn。
然後會出現幾個地址，複製地址或直接開啟後在位址列接上要開啟的檔案。- 方法二：終端輸入安裝
yarn global add parcel
安裝好後直接parcel xxx.html
xxx是開啟檔名稱
1.1 網址
href可輸入網址，取值例如：
- https://baidu.com
- http://baidu.com
- //baidu.com
注意：最好選用//baidu.com，即無協議網址，點選連結時，會自動跳轉選擇適用http還是https，防止選錯http，還是https而出錯。
檢視具體怎麼傳的可以開啟網頁開發工具(F12)在netwok裡選中Preserve log進行檢視
1.2 路徑
href可輸入路徑，例如：
- /a/b/c
- a/b/c
注意：/a/b/c，"/"難道不是根目錄嗎？
答：當我們使用http後就不再是檔案了，在哪裡開的服務，哪裡就是根目錄。
開發時，如果雙擊開啟連結頁面的話，是以檔案形式，會在file根目錄下尋找，連結失效，絕對路徑就錯了。要用網頁形式開啟
1.3 偽協議
什麼是偽協議呢，是點選a標籤就會執行href裡的程式碼，叫JavaScript偽協議。
<a href="javascript:alert(1);">javascript偽協議</a>
1.4 id錨點
可以通過點選a標籤內容實現頁內跳轉
<p id="xxx">你點選了檢視</p>
<a href="">檢視（頁面會重新整理）</a>
<a href="#">檢視(頁面不會重新整理，會跳到頁面頂部)</a>
<a href="#xxx">檢視（通過id跳轉到指定的標籤，錨點)</a>
<a href="javascript:;">檢視（這才是什麼也不會做的a標籤）</a>
1.5 郵箱等
- 跳轉郵箱
<a href="mailto:[email protected]">發郵件給我</a>
效果：發郵件給我
- 跳轉電話
<a href="tel:13258378250">請打電話給我</a>
效果：請打電話給我
2 a的 target 屬性
target是"目標"的意思。target有以下幾種常用取值：
2.1 _blank
新打開個視窗開啟
2.2 _top
有多個網頁巢狀的情況下，會在最頂層上的視窗開啟。可以用
iframe巢狀網站。
2.3 _parent
在當前連結的上一層開啟
2.4 _self
在自己這一層開啟
2.5 xxx
註釋：xxx是taiget="xxx"時，xxx是id，可以隨便取，有xxx時就開啟，沒有xxx時就建立一個視窗，把它叫做xxx。
注意：有兩個連結都叫xxx時，點選相同xxx不同連結，每一次點選都會在xxx視窗執行點選的連結。
二 img標籤
img標籤的作用：發出get請求，展示一張圖片。
屬性有：alt / height / width / src
事件：onload / onerror
響應式：max-width: 100%;
可替換元素
1 屬性
1.1 alt
alt是圖片載入失敗時，顯示alt內容的文字來提示使用者
1.2. height和width
圖片高寬。只寫寬或高，圖片的高或寬就會自適應，寬高一起寫會讓圖片變形。
注意:永遠不能讓圖片變形
1.3. src
英文source，來源。圖片地址。
2 事件
onload和onerror
用來監聽圖片是否載入成功 ,成功就執行onload，失敗就執行onerror。是一種使用者補救措施。
<body>
<img id="xxx" width="400" src="1.gif" alt="加油動圖" />
<script>
xxx.onload = function () {
console.log("圖片載入成功");
};
xxx.onerror = function () {
console.log("圖片載入失敗");
xxx.src = "/圖片載入失敗.png";
};
// id測試時用，平時別用
</script>
</body>
成功效果如下：
失敗效果如下：
3 響應式
響應式新增一下 圖片的 max-width: 100%;樣式圖片就可以適應手機了
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
}
</style>
三 table標籤
1 屬性值
table標籤裡能用的只有三個標籤，分別是thead，tbody和tfoot，三者寫的順序無關，排列只會是頭，身體和腳。三者裡又可以寫tr(table row，表示table裡的一行)，td(內容資料)，th(表示表頭).
話不多說看程式碼
<body>
<table>
<thead>
<tr>
<th>英語</th>
<th>翻譯</th>
</tr>
</thead>
<tbody>
<tr>
<td>hyper</td>
<td>超級</td>
</tr>
<tr>
<td>target</td>
<td>目標</td>
</tr>
<tr>
<td>reference</td>
<td>引用</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>空</td>
<td>空</td>
</tr>
</tfoot>
</table>
</body>
效果如圖：
2 相關樣式
相關樣式：table-layout,table-collapse,border-spacing。一般用來清楚table樣式。
<style>
table {
table-layout: auto; /*計算每行寬高，由內容大小決定寬高*/
/* table-layout: fixed;儘量每一行平均 */
border-collapse: collapse;
/* collapse合併邊框 */
border-spacing: 0;
/* border和border之間的距離 */
}
</style>
四 form表單
作用：傳送get或者post請求，然後重新整理頁面。
屬性：action / autocomolete / method / target
事件：onsubmit
注意:一個form表單必須要含有type等於"submit"才可以提交，如果寫了按鈕不寫submit，預設就是submit。
如果type=“button”,則提交不了。input每一個都要有name。
1 input屬性
1.1 action
相當於img的src，是請求往哪發。用來控制到哪個頁面，action裡面寫什麼，請求就到哪個頁面。
<body>
<form action="/xxx">
<input name="username" type="text" />
<input type="submit"/>
</form>
</boody>
type="text"型別是一個文字框，type="submit"是個提交。
1.2 method
用來控制請求是post還是get。
<form action="/xxx" method="POST"></form>
1.3 autocomplete
自動填充。滑鼠移入後會有歷史輸入提示。
<form action="/xxx" method="POST" autocomplete="on">
<!-- on是開啟提示，off是關閉提示 -->
<input name="username" type="text" />
<input type="submit" />
效果如下：
1.4 target
提交到哪個頁面，哪個頁面就會重新整理。
type屬性有很多，type=color(改變顏色)，password(輸入為*號的輸入框)，checkbox和raido(多選框和單選框，要讓擁有同一個name的表示一組)，file(可加multipe表示可以選擇多個檔案)，hidden(隱藏)
2 textarea
<textarea style="resize: none; width: 50%; height: 300px"></textarea>
可以不加樣式，可自由拉動。
3 select
<select>
<option value="">-請選擇-</option>
<option value="1">一</option>
<option value="2">二</option>
<hr />
<input type="text" required />
</select>
選擇框，value是真正的值。一，二是給使用者看的值
效果如下：
4 屬性
- onchange 當用戶輸入改變時觸發
- onfocus 當用戶把滑鼠集中在這時觸發
- onblur 用鼠標出來就onblur
5 驗證器
HTML 5新功能
<input type="text" required />
當輸入框裡沒有東西就提交的話，不允系提交，自帶驗證。
效果如下
6 注意事項：
一般不監聽input的click事件。
form裡的input要有name，沒有就錯了。
form裡放一個 type="submit"才能觸發submit事件。
表單提交和按鈕提交有什麼區別？
<form action="/xxx" method="POST" autocomplete="off" target="a">
<input name="username" type="text" />
<input type="submit" value="<strong>搞起</strong>" />
<button type="submit"><strong>搞起</strong> <img src="1.gif" />
</button>
</form>
input裡面不支援其他標籤，只能純文字，button裡面可以加任何東西。
7 其他標籤：
- video 視訊
- audio 音訊
- anvas 畫畫
- svg 向量化
一般相容存在問題，這些標籤相容性一定要看文件！
學習前端從入門到入土，我正在路上。您的每一次瀏覽點贊留言收藏，就是對我學習路上最大的鼓勵，一起努力吧！
歡迎留下您寶貴的意見。
最後
領域展開 無量空處