HTML小記

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:[email protected]”>發送郵件給我</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中的表單元素