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: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中的表单元素