1.1html5新增：①语义化标签②多媒体标签:视频＜video＞音频＜audio＞③新增input表单指定input框输入类型④新增表单属性（提示文本、提交文件）⑤placeholder样式问题

原创已于 2022-04-05 10:06:08 修改 · 279 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

html5 css3 提高

ES5和ES6

于 2021-07-20 12:31:27 首次发布

本文详细介绍了HTML5中新增的语义化标签，如<header>、<nav>等，以及多媒体标签如<video>、<audio>的使用。此外，还探讨了HTML5的新型input表单，包括不同类型的输入控件和属性，如range、datetime-local。同时，针对input框的样式问题提出了解决方案，如将placeholder文字显示在右侧。最后，文章提到了HTML5的表单属性，如required、autofocus和placeholder，并介绍了新的选择器。总的来说，HTML5带来了更丰富的网页交互和更好的用户体验。

2.还有range滑块和年月日时分秒的datetime-local

3.出现问题：input框后有间隙

4.解决样式问题

①设置placeholder文字在input框的右面显示

一：html新增语义化标签

二：html5新增多媒体标签

1.视频<video>标签

2.音频<audio>标签

3.多媒体标签总结

三：html5新增input表单

1.类型大全

2.还有range滑块和年月日时分秒的datetime-local

3.出现问题：input框后有间隙

4.解决样式问题

①设置placeholder文字在input框的右面显示

        input::-webkit-input-placeholder {
            text-align: right;
            color: #ADAFB7;
        }

②设置用户输入文字从右开始显示

        input{
            border: none;
            text-align: right;
        }

解决方法：加float:left;

四：html5新增表单属性

1.非空验证 required = "required"

2.自动获取焦点 autofocus = "autofocus" 打开浏览器，此输入框自动获取焦点

3.提示文本 placeholder = "提示文本 "

4.自动补全（存在缓存了，需要配合 name）autocomplete="on" name = "zz"

五：新增选择器

属性选择器

总结： html5有哪些新特性？

HTML5 主要是关于图像，位置，存储，多任务等功能的增加。

拖拽释放 (Drag and drop) API

语义化更好的内容标签（ header,nav,footer,aside,article,section ）

音频、视频 API(audio,video)

画布 (Canvas) API

地理 (Geolocation) API

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 的数据在浏览器关闭后自动删除

表单控件， calendar 、 date 、 time 、 email 、 url 、 search

标签

#html5 #html