1、頁面內跳轉
當<a>元素用于頁面內的錨點跳轉時,應該先為該頁面設置一些錨點,而定義錨點有兩種辦法:
- 通過<a>元素的name屬性來定義,如:<a name="anchor-name">name屬性的值就是錨點的名稱<a>
- 通過其他元素的id屬性來定義,如:<div id="anchor-name">id屬性值可以作為錨點的名稱</div>
設置好了錨點之外,就可以通過<a>元素鏈接到該錨點位置,其href取值為“# 錨點名稱”,示例如下:
<a href="#anchor1">錨點鏈接一</a>
<a href="#anchor2">錨點鏈接二</a><div><div>我這里有很多內容...</div><!-- 使用a的name屬性定義錨點 --><a name="anchor1">點擊錨點鏈接一,會跳到我這里</a><div>我這里有很多內容...</div><!-- 使用元素的id屬性定義錨點 --><p id="anchor2">點擊錨點鏈接二,會跳轉到我這里</p>
</div>
?
2、電子郵件鏈接
當其用于郵件連接時,href屬性的值為"mailto: 郵件地址",示例如下:
<a href="mailto:xuyc_brother@foxmail.com”>發送郵件給我</a>
?
3、電話鏈接
提供電話鏈接有助于用戶查看連接到手機的網絡文檔和筆記本電腦,示例如下:
<a href="tel: 491570156"> 49 157 0156</a>
?
4、使用 download 屬性保存畫布為PNG格式
如果想允許用戶下載一個HTML畫布,可以創建一個下載屬性和畫布數據作為文件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、創建表單
5.1 <input>元素
<input>元素跟<img>元素一樣,不需要閉合標簽
<!-- 文本輸入框 -->
<input type="text" name="username">
<!-- 文本輸入框提示信息 -->
<input type="text" name="username" placeholder="用戶名">
<!-- 搜索框 -->
<input type="search" name="search" placeholder="搜索">
<!-- 數字輸入框 -->
<input type="number" name="age" placeholder="只能輸入數字">
<!-- 密碼輸入框 -->
<input type="password" name="pwd" placeholder="密碼">
<!-- 單選框 -->
<input type="radio" name="sex" value="man">男
<!-- 復選框 -->
<input type="checkbox" name="hobby" value="music">音樂
<!-- 隱藏域 -->
<input type="hidden" name="other-data" value="用戶不可見數據">
<!-- 上傳文件 -->
<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屬性來規定textarea的尺寸
<textarea rows="5" cols="30" placeholder="請輸入評論"></textarea>
?
5.3 <select>元素
用于創建選項菜單,默認只能選擇一個值,可以通過設置屬性multiple="multiple"來實現多選,其選項元素為<option>元素,常用有兩個屬性:
- value:表示選中該選項的值。
- selected: 表示默認選中。
<!-- 單選且有默認選中值 --> <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>元素用于關聯表單元素的標題,可直接包裹表單元素,也可以通過設置其 for 屬性關聯到表單元素的 id 屬性,這樣點擊 label 標題上關聯的表單元素就可以自動獲取焦點,提升用戶體驗。
<!-- 包裹表單元素 -->
<label>用戶名:<input type="text"></label><!-- 使用for屬性關聯表單元素的id屬性 -->
<label for="username">用戶名:</label><input type="text" id="username">
更多詳細表單:HTML5中的表單元素
本文轉載于:猿2048→https://www.mk2048.com/blog/blog.php?id=h0hb2c2j&title=HTML小記