HTML5新标签与特性(笔记)
HTML5新标签与特性
- 前言
- 新增语义化标签
- 新增标签属性
- 新增的input的type属性值
- 多媒体标签
- embed
- audio
- video
- 字体图标
前言
HTML5 : HTML 标准的最新版本,是对 HTML 的第五次重大修改。HTML5的出现,对于WEB来说意义重大,其目的是想要把目前WEB中存在的各种问题一并解决掉。
新增语义化标签
语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。(就是每个标签在这整个html中都分别代表某种意义)
其新增标签有:
标签 | 意义 |
---|---|
header | 定义文档的页眉,用来表示页面的头部 |
nav | 定义页面的导航链接部分(导航栏) |
main | 表示整个页面的主体内容 |
aside | 网页中的侧边栏 |
article | 该标签表示文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报纸中的文章、一篇论坛帖子、一段用户评论或独立的插件,或其他任何独立的内容。 |
section | 该标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分 |
footer | 定义文档或节的页脚(通常用于页面的底部,版权信息那块) |
datalist | 该标签定义选项列表(里面包含了一组option元素)。请与 input 元素配合使用该元素,其中input的list属性值必须和datalist的id值一致 |
figure | 该元素用于表示一块独立的图片区域,元素内部可以包含一个或多个img元素。另外,该元素还可以包含一个figcaption元素,用于定义该图片区域的标题 |
fieldset | 可将表单内相关元素分组,与legend标签(就是对这个组的描述)配合使用 |
meter | 该元素用来显示已知范围的标量值或者分数值 例图: |
progress | 元素用来显示一项任务的完成进度 例图: |
新增标签属性
属性 | 含义 |
---|---|
placeholder | 占位符提供可描述输入字段预期值的提示信息(常用于input标签中,起到提示作用) |
autofocus | 规定当页面加载时 input 元素应该自动获得焦点(布尔值) |
multiple | 多文件上传(常用于input的type属性值为file时,可进行多选文件,布尔值) |
autocomplete | 规定表单是否应该启用自动完成功能,on默认,启用自动完成,off表示关闭(就是在表单中输入信息提交之后,再次进行输入时,值为on时,输入和上次相同的信息就会有提示作用) |
required | 表示该input框是必填项(布尔值) |
accesskey | 全局属性 提供了为当前元素生成快捷键的方式,使用Alt+设置的键,即可选中该元素 |
tabindex | 指定获取焦点的顺序 |
data-* | 自定义标签属性 |
pattern | 属性规定用于正则表达式验证输入的字段(适用于以下 input 类型:text, search, url, telephone, email 以及 password ) |
新增的input的type属性值
类型 | 含义 |
---|---|
输入邮箱格式 | |
tel | 输入手机号码格式 |
url | 输入url格式 |
number | 输入数字格式 |
search | 将输入框以搜索框的形式展现 |
range | 自由拖动滑块 |
time | 允许你选择一个时间 |
date | 允许你从一个日期选择器选择一个日期 |
month | 允许你选择一个月份 |
week | 允许你选择周和年 |
多媒体标签
embed
embed可以用来插入各种多媒体,格式可以是 Midi(乐器数字接口)、Wav、AIFF(音频交换文件格式)、AU、MP3等等。url为音频或视频文件及其路径,可以是相对路径或绝对路径。
可以引用 优酷,土豆,爱奇艺,腾讯、乐视的在线视频等
格式
<embed height=498 width=510 src='视频路径'></embed>
audio
可以通过该标签引入音频文件(只能引入本地音频文件)
格式
<audio src='文件路径'></audio>
audio相关属性
属性 | 含义 |
---|---|
autoplay | 自动播放(目前很多浏览器不支持自动播放) |
controls | 是否显示默认播放控件 |
loop | 是否循环播放 |
由于版权等原因,不同的浏览器可支持播放的格式是不一样的,如下图供参考:
多浏览器支持的方案:
video
可以通过该标签引入视频文件(只能引入本地视频文件)
格式
<video src='文件路径'></video>
video相关属性
属性 | 含义 |
---|---|
autoplay | 自动播放(18年开始,谷歌浏览器不支持自动播放) |
muted | 是否静音播放 |
controls | 是否显示默认播放控件 |
loop | 是否循环播放 |
width | 设置窗口宽度 |
height | 设置窗口的高度 |
由于版权等原因,不同的浏览器可支持播放的格式是不一样的,如下图供参考:
多浏览器支持的方案:
字体图标
图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”,因为图片放大和缩小会失真。所以才引入了字体图标(iconfont),为了更好的弥补这些缺点。
目前我觉得https://www.iconfont.cn/这个字体图标库比较好用
这个是阿里巴巴M2UX的一个icon font字体图标字库,包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成(该图标库使用需要登录GitHub账号)
字体图标引入的方式
感觉简洁明了的文章https://www.cnblogs.com/Grani/p/9610115.html
如有错误还请指出,希望这篇文章能给予你们帮助!
HTML5新标签与特性(笔记)相关推荐
- HTML5新标签与特性
HTML5新标签与特性 1.兼容性问题(ie9以上的版本) [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8hkif4aQ-1647847660818)(C:\User ...
- HTML5新标签及特性
HTML5 html经过了第5次重大改版,增加了一些语义化的标签 高版本浏览器支持,ie9以下不支持, html5是向后兼容的,原来html4的 标签仍然可以用 1.新特性 新增语义化元素 新增表单相 ...
- HTML5——HTML5新标签与特性
起风了 兼容性问题 文档类型设定 字符设定 常用新标签 新增的input type属性值: 常用新属性 综合案例 兼容性问题 文档类型设定 document HTML: sublime 输入 html ...
- 浅谈HTML5+css3新标签和特性
HTML5新标签与特性 什么是H5 H5并不是新的语言,而是html语言的第五次重大修改–版本 支持:所有的主流浏览器都支持h5.(chrome,firefox,safari...).IE9及以上支持 ...
- html5中新增标签的兼容性如何设置,HTML5新标签的兼容性处理
普通浏览器 普通不支持HTML5新标签的浏览器 -- 能正常解析,但会当初成 inline 元素对待 在不支持HTML5新标签的浏览器里,会将这些新的标签解析成行内元素(inline)对待,所以我们只 ...
- html5新特性 移除哪些,html5\CSS3有哪些新特性、移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?...
(1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...
- html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?...
新特性: 1. 拖拽释放(Drag and drop) API 2. 语义化更好的内容标签(header,nav,footer,aside,article,section) 3. 音频.视频API(a ...
- 【Day05】Html5 有哪些新特性?如何处理 Html5 新标签的浏览器兼容问题?如何区分 Html 和 Html5?
Html5 有哪些新特性?如何处理 Html5 新标签的浏览器兼容问题?如何区分 Html 和 Html5? 一.Html5 新特性 1. 拖拽释放(Drag and drop)API 2. 语义化更 ...
- html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和HTML5?
* HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加. 绘画 canvas; 用于媒介回放的 video 和 audio 元素; 本地离线存储 localSt ...
最新文章
- Android复习14【高级编程:推荐网址、抠图片上的某一角下来、Bitmap引起的OOM问题、三个绘图工具类详解、画线条、Canvas API详解(平移、旋转、缩放、倾斜)、矩阵详解】
- mac 配置/etc/profile重启后不生效
- C语言模拟实现标准库函数之strcpy()
- 智能工单处理,达观数据助力运营商实现业务流程智能化改造
- 数据科学 IPython 笔记本 8.5 简单的散点图
- 不想做科技第一的金融公司,不是好的养老去处
- 耐克为何不接受加密货币付款?
- AtCoder Grand Contest 004 C - AND Grid(思路题)
- Python 之 运算符
- Python写视图界面--pyqt的使用
- 【原创】ES5高效封装WIN10系统教程2020系列(一)母盘定制
- 今天忙着画一个用例图,发现一个好用的工具
- 阿里云 CentOS7.9 搭建 Hexo 个人博客教程
- python学习 Day08 字符串和正则表达式
- 地球子午圈和卯酉圈曲率半径计算公式
- 物联网智慧物流平台开发
- Matlab迭代算法实现
- 【CXY】JAVA基础 之 异常追踪栈
- 富文本生成pdf-java
- comsol动网格(als)帮助文档翻译
热门文章
- TVS二极管6.6SMDJ58A/6.6SMDJ58CA参数,有什么区别?
- 2021哈工大软件构造期末考点复习笔记
- 为何汽车从低档位启动,扭矩最大?
- [网鼎杯 2020 朱雀组]phpweb
- 拨开O2O闭环迷雾 透视BAT终极PK战
- linux打开笔记本摄像头驱动程序,Linux下利用Opencv打开笔记本摄像头问题
- 分享丨终于有人把云计算、大数据和人工智能讲明白了!
- 简明Pyhton教程余下基础内容
- 小白第一次注册机编写,c/bat/易某言(不好意思说2333)
- “此”去,经年,寄语青春