专业编程基础技术教程

网站首页 > 基础教程 正文

12、HTML5新特性

ccvgpt 2024-11-20 13:01:12 基础教程 6 ℃

常用新标签

  • header：定义文档的页眉 头部
  • nav：定义导航链接的部分
  • footer：定义文档或节的页脚 底部
  • article：定义文章。
  • section：定义文档中的节（section、区段）
  • aside：定义其所处内容之外的内容 侧边

新增的input type属性

12、HTML5新特性

类型使用示例含义email输入邮箱格式tel输入手机号码格式url输入url格式number输入数字格式search搜索框（体现语义化）range自由拖动滑块time小时分钟date年月日datetime时间month月年week星期 年

常用新属性

属性用法含义placeholder占位符 当用户输入的时候 里面的文字消失 删除所有文字，自动返回autofocus规定当页面加载时 input 元素应该自动获得焦点multiple多文件上传autocomplete规定表单是否应该启用自动完成功能 有2个值，一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮

2.这个表单您必须给他名字required必填项 内容不能为空accesskey规定激活（使元素获得焦点）元素的快捷键 采用 alt + s的形式

datalist

datalist标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。使用 input 元素的 list 属性来绑定 datalist。

示例

<body>

<input type="text" list="Data_list" />

<datalist id="Data_list">

<option value="蔡大爷">蔡大爷</option>

<option value="二大爷">二大爷</option>

<option value="三大爷">三大爷</option>

</datalist>

</body>

fieldset

fieldset 元素可将表单内的相关元素分组。<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。<fieldset> 标签没有必需的或唯一的属性。当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素

示例

<body>

<fieldset id="">

<legend>用户登录</legend>

<div class="">

<span>用户名</span>

<input type="text" />

</div>

<div class="">

<span>密码</span>

<input type="password" />

</div>

</fieldset>

</body>

Tags：

猜你喜欢

最近发表
标签列表