HTML小记

2018-06-24 02:25:10来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:深入css布局 (3)完结 — margin问题与格式化上下文

下一篇:CSS 盒模型与box-sizing