摘要：最近在复习前端的基础知识，在这里做一个总结，这是篇。缺点该标准并未能很好的被浏览器所支持。应用标签状态标签标签备注实时状态显示气压气温。连接上了断网了浏览器支持情况事件不支持已废弃不支持不支持
最近在复习前端的基础知识，在这里做一个总结，这是HTML5篇。新特性
取消了过时的显示效果标记和
新增语义化标签
新增多媒体标签（video视频,audio音频）
增加更多表单类型
新增canvas绘图标签
增加了标签拖动、数据存储等一些API
HTML5优缺点 优点提高可用性和改进用户的友好体验；
可以给网站带来更多的多媒体元素（视频和音频）；
可以很好的替代FLASH和Sliverlight;
当涉及到网站的抓取和索引的时候，对于SEO很友好；
将被大量应用于移动应用程序和游戏；
可移植性好。
缺点该标准并未能很好的被浏览器所支持。因新标签的引入，各浏览器之间将缺少一种统一的数据描述格式，造成用户体验不佳。
纯表现的元素
besefont、 big、center、 font、s、strike、tt、u
对可用性产生负面影响的元素
frame、frameset、noframes
产生混肴的元素
acronym、 applet、 isindex、dir
1.2 重定义标签显示不变，只是表达的含义进行了重新定义的标签
| 标签 | 备注 |
|---|---|
| b | 代表内联文本，通常是粗体，没用传递表示重要的意思 |
| i | 代表内联文本，通常是斜体，没有传递表达重要的意思 |
| dd | 可以同detailsy与figure一同使用，定义包含文本，dialog亦可使用 |
| dt | 可以同details与figrue一同使用，汇总细节，dialog也可用 |
| hr | 表示主题结束，而不是水平线，虽然显示相同 |
| menu | 重新定义用户界面的菜单，配合commond或者menuitem使用 |
| small | 表示小字体，例如打印注释或则法律条款 |
| strong | 表示重要性而不是强调符号 |
| 标签 | 备注 |
|---|---|
| article | 标记定义一篇文章 |
| header | 标记定义一个页面或一个区域的头部 |
| nav | 标记定义导航链接 |
| section | 标记定义一个区域 |
| aisde | 标记定义页面内容的侧边栏 |
| hgroup | 标记定义文件中一个区块的相关信息 |
| figure | 标记定义一组媒体内容以及他们的标题 |
| figcaption | 标记定义figure元素的标题 |
| footer | 标记定义一个页面或一个区域的底部 |
| dialog | 标记定义一个对话框（会话框）类似微信 |
| 标签 | 备注 |
|---|---|
| video | 标记定义一个视屏 |
| audio | 标记定义音频内容 |
| source | 标记定义媒体资源 |
| canvas | 标记定义图片 |
| embed | 标记定义外部的可交互的内容或插件，比如flash |
标签的意义：多媒体标签的出现意味着多媒体的发展以及支持不适用插件的情况下即可操作媒体文件，极大提升了用户体验。2.3 Web应用标签
状态标签
| 标签 | 备注 |
|---|---|
| meter | 实时状态显示：气压、气温。 例： |
| progress | 任务过程：安装、 加载。 例： |
列表标签
| 标签 | 备注 |
|---|---|
| datalist | 为input标记定义一个下拉列表，配合option |
| details | 标记定义一个元素的详细内容，配合summary |
| summary | 标签为 元素定义一个可见的标题。当用户点击标题时会显示出详细信息。 |
Menu
| 标签 | 备注 |
|---|---|
| menu | 命令列表（目前所有的主流浏览器都不支持） |
| menuitem | menu命令列表的标签（只有FireFox9.0+支持） |
| command | menu标记定义一个命令按钮（只有IE9支持） |
注释标签
| 标签 | 备注 |
|---|---|
| ruby | 标记定义注释或音标 |
| rp | 告诉那些不支持ruby的元素的浏览器如何去显示 |
| et | 标记定义对rubyd 注释内容文本 |
其他标签
| 标签 | 备注 |
|---|---|
| mark | 标记定义有标记的文本（黄色选中状态） |
| output | 标记定义一些输出类型，计算表单结果配合oninput事件 |
| keygen | 标记定义表单里生成的键值（加密信息传送） |
| time | 标记定义一个日期/时间，目前所有主流的浏览器都不支持 |
对于不支持HTML5语法的浏览器（如：IE8及以下版本浏览器），要想使用这些新标签，需要那个通过JavaScript创建该标签。具体做法如下（以
在CSS中设置标签样式为块级
header { display: block; }
通过JavaScript的DOM方式创建该标签
document.createElement("header");
由于HTML5新增的标签很多， 如果用上述方法创建标签也比较麻烦，所以我们可以通过简单引用html5shiv.js文件解决这个问题。
3、多媒体 3.1 音频3.2 视频
不同格式音视频的兼容性
查看效果
5、自定义属性HTML5通过 "data-属性名" 的方式创建自定义属性。
JavaScript 通过dataset对象获取自定义属性。
注：获取dataset中的属性名需要改成驼峰式命名，如 user-sex 改为 userSex
var dv = document.getElementById("dv")
var dt = dv.dataset;
var str = ""
str = dt.name + "," + dt.age + "," + dt.userSex;
dv.innerText = str;
执行上方代码或 点击这里 查看打印结果
6、读取文件通过 FileReader 接口读取文件内容。
var f1 = document.querySelector("#f1");
var btn1 = document.querySelector("#btn1");
btn1.onclick = function(){
// 获取上传文件
var fl1 = f1.files[0];
// 读取文件，创建读取文件的对象
var fReader = new FileReader();
// 读取文件
fReader.readAsText(fl1);
// 开始读取文件的加载事件
fReader.onload = function() {
var style= document.createElement("style");
var result = fReader.result;
style.innerHTML = result;
document.querySelector("head").appendChild(style)
}
}
新建 style.txt 文件，编辑内容：
#btn1{
width: 70px;
height: 30px;
border: none;
background-color: green;
font-size: 14px;
color: #fff;
}
运行程序，上传 style.txt 文件，查看样式变化。
点击此处 快速运行
var state = window.navigator.onLine;
// 返回布尔值，网络联通为true，反之为false
if(state){
alert("在线")
}else{
alert("离线")
}
主流浏览器都支持。
7.2 document.ononlinewindow.ononline=function(){
alert("连接上了")
}
window.onoffline=function(){
alert("断网了")
}
浏览器支持情况：
| 事件 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ononline | 不支持 | IE8（IE11 已废弃） | 3.0 | 不支持 | 不支持 |
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/52576.html
摘要：前端知识点总结新特性新的语义标签增强型表单音频和视频绘图绘图地理定位拖动增强型表单新新的表单元素新特性数据列表本身不可见为提供输入建议列表新特性进度条左右晃动进度条具有指定进度值进度条新特性刻度尺用于标示一个值所值的范围不 前端知识点总结——H5 1.html5新特性 (1)新的语义标签 (2)增强型表单* (3)音频和视频 (4)Canvas绘图 (5)SVG绘图 (6)地...
摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...
阅读 3380·2021-08-02 13:41
阅读 2073·2019-08-30 15:56
阅读 1416·2019-08-30 11:17
阅读 1064·2019-08-29 15:18
阅读 450·2019-08-29 11:10
阅读 2565·2019-08-26 13:52
阅读 391·2019-08-26 13:22
阅读 2821·2019-08-23 15:41
