HTML5中的新增标签和常用属性

        一、HTML5简述：

                1.HTML5由w3c和what共同研发，并在2014发布。

                2.HTML5成为了新一代网页开发标准。

                3.HTML5新特性：

                        1）增加了audio和video音频播放，抛弃了flash。

                         2）新增了canvas画布（用于制作动画，小游戏开发等）

                         3）增加了地理定位

                         4）增加了离线缓存

                         5）硬件加速

                         6）web socket（全双工通信）

                         7）增加了本地存储

                          8）新增了一些语义化标签

                  4.网页布局标签

                                header：页首；nav：导航栏；aside：侧栏；main：主体；section:区块；article：文章；footer：页尾；

                   5.语义化标签

                                mark：高亮显示；summay：摘要，details：描述，一般用于名词解释或封装一个区块。

 

                                meter:定义度量衡

                                            属性：value/min/max

                                 progress：进度条

                                        属性：value

                                 dialog：对话窗口

                                 figure:用于对元素组合，一般用来组合一张图的标题，图片和图片描述等。

                 6.HTML5多媒体

                        1）audio

                                播放音乐和音频。IE9以下版本不支持（1995.8.16-2022.6.15）

                                支持格式：.mp3/.ogg/.wav

                                属性：src：文件路径;autoplay:自动播放；loop：循环；controls：控制条；muted：静音；perload：预加载（当使用autoplay时，perload失效）

                        2）video

                                加载视频。

                                a）支持格式

                                        .mp4/.ogg/.webm

                                b)属性

                                       src：文件路径;autoplay:自动播放；loop：循环；controls：控制条；muted：静音；perload：预加载（当使用autoplay时，perload失效）,width:宽，height：高；poster：海报。

                                    注：这里用mp3的格式也可以，只是没有画面。

                        3）canvas

                                画布，是一个容器元素。

                                注意：canvas要与JavaScript结合使用，单独使用canvas无意义。其宽高直接用标签属性height和width实现，不要使用css。

                 7.HTML5常用属性

                        1）contentEditable

                                将标签转换为可编辑状态。可用于所有标签。属性值默认为false不可编辑，为ture可编辑。

                         2）hidden

                                对元素进行隐藏。一般用来传值或当某个条件成立，执行内容显示。默认值为hidden隐藏。

                        3）data-*自定义属性

                                用于储存页面或应用程序的私有自定义数据。一般用于传值。

                         4）multiple

                                规定输入域中可以选择多个内容。用于表单组件中，如file/select。

                         5）required

                                约束表单元素提交前必须输入值。用于表单组件中，需结合提交按钮使用。

                         6)pattern

                                用于验证输入字段的模式。用于表单组件中，需结合提交按钮使用，主要与正则表达式结合使用。

                 8.表单组件

                        color：颜色；email：邮箱；tel：电话；url：网址；number：数字；range：输入范围；search：搜索；date：日期；datetime：日期时间；datetime-local：本地日期时间；time：时间；year：年；month：月；

                 9.表单属性

                        formaction：修改action数据提交的地方；formenctype：修改表单请求类型；formmethod：修改数据提交的方法；form：设置表单元素属于哪一个表单；novalidate：不验证。

                10.input属性

                        1)autocomplete:自动完成

                                 用来帮助用户输入，每一次输入的内容，浏览器保存输入的值，以备将来使用。值有no/off，默认为no为了保护敏感数据，避免浏览器对他们的不安全存储一般需要关闭。

                        2）autofocus：自动获取焦点。

                        3）step：步长。

                        4）multip：多选。

                        5）pattern：正则匹配。

                        6）placeholder：输入提示。

                        7）required：必须输入。