HTML小记
1、頁面內(nèi)跳轉(zhuǎn)
當(dāng)<a>元素用于頁面內(nèi)的錨點(diǎn)跳轉(zhuǎn)時，應(yīng)該先為該頁面設(shè)置一些錨點(diǎn)，而定義錨點(diǎn)有兩種辦法：
- 通過<a>元素的name屬性來定義，如：<a name="anchor-name">name屬性的值就是錨點(diǎn)的名稱<a>
- 通過其他元素的id屬性來定義，如：<div id="anchor-name">id屬性值可以作為錨點(diǎn)的名稱</div>
設(shè)置好了錨點(diǎn)之外，就可以通過<a>元素鏈接到該錨點(diǎn)位置，其href取值為“# 錨點(diǎn)名稱”，示例如下:
<a href="#anchor1">錨點(diǎn)鏈接一</a> <a href="#anchor2">錨點(diǎn)鏈接二</a><div><div>我這里有很多內(nèi)容...</div><!-- 使用a的name屬性定義錨點(diǎn) --><a name="anchor1">點(diǎn)擊錨點(diǎn)鏈接一，會跳到我這里</a><div>我這里有很多內(nèi)容...</div><!-- 使用元素的id屬性定義錨點(diǎn) --><p id="anchor2">點(diǎn)擊錨點(diǎn)鏈接二，會跳轉(zhuǎn)到我這里</p> </div>?
2、電子郵件鏈接
當(dāng)其用于郵件連接時，href屬性的值為"mailto: 郵件地址"，示例如下：
<a href="mailto:xuyc_brother@foxmail.com”>發(fā)送郵件給我</a>?
3、電話鏈接
提供電話鏈接有助于用戶查看連接到手機(jī)的網(wǎng)絡(luò)文檔和筆記本電腦，示例如下：
<a href="tel: 491570156"> 49 157 0156</a>?
4、使用 download 屬性保存畫布為PNG格式
如果想允許用戶下載一個HTML畫布，可以創(chuàng)建一個下載屬性和畫布數(shù)據(jù)作為文件URL鏈接圖像：
var link = document.createElement('a'); link.innerHTML = 'download image';link.addEventListener('click', function(ev) {link.href = canvas.toDataURL();link.download = "mypainting.png"; }, false);document.body.appendChild(link);?
5、創(chuàng)建表單
5.1 <input>元素
<input>元素跟<img>元素一樣，不需要閉合標(biāo)簽
<!-- 文本輸入框 --> <input type="text" name="username"> <!-- 文本輸入框提示信息 --> <input type="text" name="username" placeholder="用戶名"> <!-- 搜索框 --> <input type="search" name="search" placeholder="搜索"> <!-- 數(shù)字輸入框 --> <input type="number" name="age" placeholder="只能輸入數(shù)字"> <!-- 密碼輸入框 --> <input type="password" name="pwd" placeholder="密碼"> <!-- 單選框 --> <input type="radio" name="sex" value="man">男 <!-- 復(fù)選框 --> <input type="checkbox" name="hobby" value="music">音樂 <!-- 隱藏域 --> <input type="hidden" name="other-data" value="用戶不可見數(shù)據(jù)"> <!-- 上傳文件 --> <input type="file" name="file"> <!-- 普通按鈕 --> <input type="button" name="button" value="普通按鈕"> <!-- 提交按鈕 --> <input type="submit" name="submit" value="立即加入"> <!-- 重置按鈕 --> <input type="reset" name="reset">?
5.2 <textarea>元素
用于多行文本輸入，可以通過cols和rows屬性來規(guī)定textarea的尺寸
<textarea rows="5" cols="30" placeholder="請輸入評論"></textarea>?
5.3 <select>元素
用于創(chuàng)建選項(xiàng)菜單，默認(rèn)只能選擇一個值，可以通過設(shè)置屬性multiple="multiple"來實(shí)現(xiàn)多選，其選項(xiàng)元素為<option>元素，常用有兩個屬性：
- value：表示選中該選項(xiàng)的值。
- selected： 表示默認(rèn)選中。 <!-- 單選且有默認(rèn)選中值 -->
<select name="tag"><option value="html" selected>HTML</option><option value="css">CSS</option><option value="js">JS</option>
</select>
<!-- 多選 -->
<select name="tags" multiple="multiple"><option value="html">HTML</option><option value="css">CSS</option><option value="js">JS</option>
</select>
?
5.4 <button>元素
一般對于提交與重置按鈕，我們建議使用 input 來定義，對于普通按鈕可以使用 button。
5.5 <label>元素
<label>元素用于關(guān)聯(lián)表單元素的標(biāo)題，可直接包裹表單元素，也可以通過設(shè)置其 for 屬性關(guān)聯(lián)到表單元素的 id 屬性，這樣點(diǎn)擊 label 標(biāo)題上關(guān)聯(lián)的表單元素就可以自動獲取焦點(diǎn)，提升用戶體驗(yàn)。
<!-- 包裹表單元素 --> <label>用戶名：<input type="text"></label><!-- 使用for屬性關(guān)聯(lián)表單元素的id屬性 --> <label for="username">用戶名：</label><input type="text" id="username">更多詳細(xì)表單：HTML5中的表單元素
本文轉(zhuǎn)載于:猿2048→https://www.mk2048.com/blog/blog.php?id=h0hb2c2j&title=HTML小記
總結(jié)
- 上一篇： 前端基础-HTML的的标签详解
- 下一篇： 全方位分析web前端如何进行性能优化