HTML小记
2018-06-24 02:25:10来源:未知 阅读 ()
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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-14
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-13
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-02
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash