h5新增

h5新增

1.简化的文档类型和字符集

(1)文档类型

<! DOCTYPE  HTML>

(2)字符集

<meta  charset="UTF-8">

2.富有语义化的新结构元素

<header></header>

                 包括标题,logo,导航和其他页眉内容

<hgroup></hgroup>

                   将标题进行分组元素

<nav></nav>

                  主导航菜单

<section></section>

                分块元素,定义网站中特定的可区别的区域

<article></article>

                  独立成文且以其他格式重用的内容应该置于一个article元素中

<aside></aside>

                    包含内容周围的相关内容

<footer></footer>

                版权声明和作者信息,包含链接

3.新增的内联元素

<figure>

        <figcaption>  figure的标题 </figcaption>

              <p>图片</p>

              <img src="img1.jpg"  width="100px"  height="100px">

</figure>

          包含图像,代码和其他内容对主要内容进行说明,删除不会影响内容

<mark></mark>

                        突出元素以表示引用的内容,或突出显示与用户当前活动相关的内容,不同于en或strong元素

<time></time>

                     在内容中显示时间或日期

<meter></meter>

                     定义度量衡,规定最大最小宽度,结合css一起作用

<progress></progress>

                     定义进度条,有  max(完成值)   value(进度条当前值)两个属性

4.支持动态页面

(1)  菜单<menu>

表单中组织控件列表,属性:

             autosubmit,为true,表示当表单控件改变时会自动提交

             label,文档的背景色

             type,定义显示那种类型的菜单,可选为"context"、"toolbar"和"list"   "list"是默认值

<menu>

               <li>  <input  type="checkbox"/>   控件   </li>

</menu>

 

(2)右键菜单 <menitime>

属性:

          label        菜单项的标题

          icon        菜单项前面显示的图标

          onclick    指定单击此菜单项时执行的JS代码

 

(3)在script标签中使用async属性

                               指定异步执行的脚本

 

(4)      <details>元素

用于描述文档或文档某个部分的细节

<details>

             <summary>    控件   </summary>

              <p>   用于描述文档或文档某个部分的细节   </p>

</details>

5.全新的表单设计

               HTML5新的Input类型

<email>

<url>

<number>

<range>

 

 

### HTML5 中新增的 Input 类型及属性 HTML5 的推出极大地扩展了 `<input>` 元素的功能,增加了多种新类型的输入控件以及一些实用的新属性。这些改进使得开发者能够更方便地处理各种数据类型并提升用户体验。 #### 新增的 Input 类型 以下是 HTML5 中新增的一些重要 `type` 属性值: 1. **email** - 用于指定电子邮件地址的输入框。 - 浏览器会验证该字段的内容是否符合标准的电子邮件格式[^1]。 2. **url** - 提供了一个专门用来输入 URL 地址的文本框。 - 输入的数据会被自动校验以确保其是一个合法的网址。 3. **number** - 创建一个允许用户输入数值的控件。 - 支持上下箭头调整数字大小,并可以设置最小值 (`min`) 和最大值 (`max`) 范围。 4. **range** - 表现为滑动条形式的一个数值选择器。 - 用户可以通过拖拽滑块来选取某个范围内的整数或浮点数值。 5. **date**, **time**, **datetime-local**, **month**, **week** - 这些类型分别提供了不同的日期时间选择功能。 - `date`: 让用户挑选具体某一天。 - `time`: 设置特定时刻。 - `datetime-local`: 结合日期和本地时间为单一单元格。 - `month`: 如同名称所示仅限于月份的选择[^3]。 6. **color** - 打开颜色拾取对话框让用户选定一种色彩作为返回值。 7. **search** - 定义搜索引擎查询字符串使用的特殊文本区域。 - 外观上可能稍有不同以便提示这是搜索栏而非普通文字录入区[^2]。 8. **tel** - 预留给电话号码用途的输入方式。 - 不做任何内置格式化检查但由于设备特性可能会触发拨号键盘布局优化。 9. **file** (增强) - 原本就存在但在新版中有更多选项支持多文件上传等功能。 #### 新增的重要属性 除了上述提到的各种新型态之外还有一些通用或者针对某些种类特别设计出来的附加参数可供配置: 1. **placeholder** - 显示灰色占位符告诉访问者预期填入什么样的资料直到他们实际动手为止就会消失不见. 2. **required** - 强迫使用者必须填写此项目才能继续下一步骤操作比如提交表单之类的情况发生时才会生效. 3. **pattern** - 接受正则表达式的模式匹配机制从而实现自定义规则下的有效性和错误反馈消息定制服务. 4. **autofocus** - 页面加载完成后立即聚焦到设定好的那个元素上面去无需额外动作即可获得焦点状态. 5. **readonly** - 将当前对象设为只读模式意味着虽然可见却无法修改内容除非另有说明解除限制才行. 6. **disabled** - 把组件暂时禁用掉既不可见也不能交互直至重新启用为止. 7. **autocomplete** - 控制网页上的个人历史记录能否被利用起来辅助快速完成常见重复性的任务像登录名密码之类的敏感信息安全保护措施之一就是将其关闭即 `"off"` 模式下运行[^4]. 下面给出一段综合运用以上特性的示范代码片段如下所示: ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>HTML5 Form Example</title> </head> <body> <form action="#" method="post" autocomplete="on"> <!-- Email Field --> <label for="email">电子邮箱:</label><br/> <input type="email" id="email" name="user_email" placeholder="请输入您的邮件..." required/><br/> <!-- Number Field with Range Constraints --> <label for="age">年龄:</label><br/> <input type="number" id="age" name="user_age" min="18" max="100"/><br/> <!-- Date Picker --> <label for="dob">出生日期:</label><br/> <input type="date" id="dob" name="user_dob"/><br/> <!-- Color Selector --> <label for="fav_color">最喜欢的颜色:</label><br/> <input type="color" id="fav_color" name="favorite_color"/> <!-- Submit Button --> <button type="submit">注册账户</button> </form> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值