整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

先睹为快即将到来的HTML6

文由掘金@天行天忌授权发布，前端晚间课对其内容进行微改。


HTML，超文本标记语言，是一种用于创建网页的标准标记语言。自从引入 HTML 以来，它就一直用于构建互联网。与 JavaScript 和 CSS 一起，HTML 构成前端开发的三剑客。

尽管许多新技术使网站创建过程变得更简单、更高效，但 HTML 始终是核心。随着 HTML5 的普及，在 2014 年，这种标记语言发生了很多变化，变得更加友好，浏览器对新标准的支持热度也越来越高。而HTML并不止于此，还在不断发生变化，并且可能会获得一些特性来证明对 HTML6 的命名更改是合理的。

支持原生模式

该元素<dialog> 将随 HTML6 一起提供。它被认为等同于用 JavaScript 开发的模态，并且已经标准化，但只有少数浏览器完全支持。但这种现象会改变，很快它将在所有浏览器中得到支持。

这个元素在其默认格式下，只会将光标显示在它所在的位置上，但可以使用 JavaScript 打开模式。

<dialog>
  <form method="dialog">
    <input type="submit" value="确定" />
    <input type="submit" value="取消" />
  </form>
</dialog>

在默认形式下，该元素创建一个灰色背景，其下方是非交互式内容。

可以在 <dialog> 其中的表单上使用一种方法，该方法将发送值并将其传递回自身 <dialog>。

总的来说，这个标签在用户交互和改进的界面中变得有益。

可以通过更改 <dialog> 标签的 open 属性以控制打开和关闭。

<dialog open>
  <p>组件内容</p>
</dialog>

没有 JavaScript 的单页应用程序

FutureClaw 杂志主编 Bobby Mozumder 建议：

将锚元素链接到 JSON/XML、API 端点，让浏览器在内部将数据加载到新的数据结构中，然后浏览器将 DOM 元素替换为根据需要加载的任何数据。初始数据（以及标准错误响应）可以放在标题装置中，如果需要，可以稍后替换。

据他介绍，这是单页应用程序网页设计模式，可以提高响应速度和加载时间，因为不需要加载 JavaScript。

这个是一个比较有意思的提案，就有点类似我们以前没有做前后端分离之前的混合编程的模式，HTML变成模板语言，通过JSON API请求数据，不一样的是变成浏览器来默认解析，浏览器内部加载数据到新的数据结构中，然后浏览器将按需加载到的数据替换成 DOM 元素。

大家可以看一下InfoQ上的这篇文章《针对非正式 HTML6 提案“无需 JavaScript 的单页应用”引发的论战》，了解更多！

https://www.infoq.cn/article/2015/03/html6-without-javascript


自由调整图像大小

HTML6 爱好者相信即将到来的更新将允许浏览器调整图像大小以获得更好的观看体验。

每个浏览器都难以呈现相对于设备和屏幕尺寸的最佳图像尺寸，不幸的是，src 标签 img 在处理这个问题时不是很有效。

这个问题可以通过一个新标签 <srcset> 来解决，它使浏览器在多个图像之间进行选择的工作变得更加容易。

专用库

将可用库引入 HTML6 绝对是提高开发效率的重要一步。

微格式

很多时候，需要在互联网上定义一般信息，而这些一般信息可以是任何公开的信息，例如电话号码、姓名、地址等。微格式是能够定义一般数据的标准。微格式可以增强设计者的能力，并可以减少搜索引擎推断公共信息所需的努力。

自定义菜单

尽管标签<ul>、<ol>非常有用，但在某些情况下仍有一些不足之处。可以处理交互元素的标签将是一个不错的选择。

这就是创建标签 <menu> 的驱动力，它可以处理按钮驱动的列表元素。

<menu type="toolbar">
  <li><button>个人信息</button></li>
  <li><button>系统设置</button></li>
  <li><button>账号注销</button></li>
</menu>

因此 <menu>，除了能够像普通列表一样运行之外，还可以增强 HTML 列表的功能。

增强身份验证

虽然HTML5在安全性方面还不错，浏览器和网络技术也提供了合理的保护。毫无疑问，在身份验证和安全领域还有很多事情可以做。如密钥可以异地存储；这将防止不受欢迎的人访问并支持身份验证。使用嵌入式密钥而不是 cookie，使数字签名更好等。

集成摄像头

HTML6 允许以更好的方式使用设备上的相机和媒体。将能够控制相机、它的效果、模式、全景图像、HDR 和其他属性。

总结

没有什么是完美的，HTML 也不是完美的，所以 HTML 规范可以做很多事情来使它更好。应该对一些有用的规范进行标准化，以增强 HTML 的能力。小的变化已经开始推出。如增强蓝牙支持、p2p 文件传输、恶意软件保护、云存储集成，下一个 HTML 版本可以考虑一下。

标位置

当我们给某一个盒子添加鼠标事件监听时(click、mouseover、mouseenter、mouseout等事件), 都一定会有以下四组值：

event.pageX event.pageY

event.screenX event.screenY

event.clientX event.clientY

event.offsetX event.offsetY

event.pageY 表示鼠标指针, 到页面顶端的距离。IE6、7、8不兼容

event.screenY 表示鼠标指针, 到屏幕顶端的距离

event.clientY 表示鼠标指针, 到视口顶端的距离(视口就是当前可视窗口)

event.offsetY 表示鼠标指针, 到盒子顶端的距离

规律：

1、当页面没有卷动的时候, pageY一定等价于clientY。或换句话说pageY等价于clientY+页面卷动的值scrollTop。

2、IE678不兼容pageX、pageY

offsetX/Y指的不是距离你监听的那个盒子左上角的距离, 而是指的你现在鼠标指针所在位置到此时最内层盒子左上角的距离。

getBoundingClientRect 用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。

event.getBoundingClientRect().left;

具体区别:

event.pageX event.pageY

event.screenX event.screenY

event.clientX event.clientY

event.offsetX event.offsetY

图解: https://www.cnblogs.com/Abner5/p/5855274.html?utm_source=itdadao&utm_medium=referral

event.getBoundingClientRect()

图解: https://www.cnblogs.com/Songyc/p/4458570.html

实例: 鼠标点击特效

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
/*cursor: none;*/
}
img{
width: 100px;
position: absolute;
left: 0;
top: 0;

}
</style>

</head>
<body>
<script type="text/javascript">
var body = document.getElementsByTagName("body")[0];
//如果想点击body那么body必须设置宽高
document.onclick = function(e){
var ev = e || window.event;//事件对象的兼容

var left = ev.clientX;
var top = ev.clientY;

var img = document.createElement("img");
img.setAttribute("src","img/eagle.png");
img.style.left = left + "px";
img.style.top = top + "px";

body.appendChild(img);

//因为拖拽图片图片有一种神奇的魔力 也就是我们所有的默认行为
if(ev.preventDefault){
ev.preventDefault();
}else{
ev.returnValue = false;
}
}
</script>
</body>
</html>

盒子位置

任何一个元素都有offsetParent属性和offsetLeft、offsetTop属性

对象.offsetParent获得定位祖先元素, 一层一层往上找, 如果不存在就是body和绝对定位类似

对象.offsetLeft获取到定位父元素距离左边的值, 一层一层往上找, 如果不存在就是body

对象.offsetTop获取到定位父元素距离上边的值, 一层一层往上找, 如果不存在就是body

offsetWidth 盒子的宽度

offsetHeight 盒子的高度

document.documentElement.clientWidth 文档的宽度

document.documentElement.clientHeight 文档的高度

//可视区域宽高

//console.log(document.body.clientWidth);//个别浏览器

//console.log(document.documentElement.clientWidth);//高版本

var w = document.documentElement.clientWidth || document.body.clientWidth;

var h = document.documentElement.clientHeight || document.body.clientHeight;

实例1：获取行内样式的宽度和高度

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 600px;
height: 300px;
background-color: red;
}
</style>

</head>
<body>
<div></div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
console.log(div.style.width);//操作的都是行内

//不兼容
//高版本
console.log(window.getComputedStyle(div).width)
//低版本
console.log(div.currentStyle.width)
</script>
</body>
</html>
实例2: 获取盒子的宽度和高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 600px;
height: 300px;
background-color: red;
}
</style>

</head>
<body>
<div></div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];

//盒子宽高 number类型
console.log(div.offsetWidth)
console.log(div.offsetHeight)

</script>
</body>
</html>

实例3: 获取盒子的位置

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 600px;
height: 300px;
background-color: red;
margin: 50px;
padding: 50px;
position: relative;
}
span{
width: 100px;
height: 100px;
display: block;
background-color: orange;
}
</style>

</head>
<body>
<div>
<span></span>
</div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
var span = document.getElementsByTagName("span")[0];

//盒子距离定位父元素(div)的位置
console.log(span.offsetLeft)
console.log(span.offsetTop)

</script>
</body>
</html>

实例4: 获取盒子的净位置

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 600px;
height: 300px;
background-color: red;
margin: 50px;
padding: 50px;
position: relative;
}
span{
width: 500px;
height: 88px;
display: block;
background-color: orange;
}
</style>

</head>
<body>
<div>
<span></span>
</div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
var span = document.getElementsByTagName("span")[0];

//我们在懒加载的时候就用到过净位置
//http://jquery.cuishifeng.cn/offset.html

//净位置就是盒子到body的位置
//console.log(span.offsetTop)
console.log(span.offsetParent);//定位复原素(div)

//他返回一个信息集合
console.log(span.getBoundingClientRect());//这个东西就可以得到span的所有位置关系

//top和left值就是我们所需要的净位置
//我们知道我们无法直接获取该盒子到body的位置 但是我们我们可以获取该合资距离他有定位祖先元素的位置 那么这样我们就可以一层一层网上找
/*body
div(定位)
span

span.offsetTop ->sapn.offsetParent
div.offsetTop*/
</script>
</body>
</html>

实例5 编写净位置函数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 600px;
height: 300px;
background-color: red;
margin: 50px;
padding: 50px;
/*position: relative;*/
}
span{
width: 500px;
height: 88px;
display: block;
background-color: orange;
}
</style>
</head>
<body>
<div>
<span></span>
</div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
var span = document.getElementsByTagName("span")[0];

//方法一: 编写自定义函数
console.log(pos(span)); //100

function pos(obj){
//用一个变量存储盒子到页面的初始值
var left = obj.offsetLeft;
//因为定位父盒子不确定 所以用一个变量临时存储 后面替换
var par = obj.offsetParent;
while(par){
left += par.offsetLeft;
par = par.offsetParent;
}
return left;
}

//方法二: getBoundingClientRect里面包含了到页面的left top值
console.log(span.getBoundingClientRect().left) //100
</script>
</body>
</html>

拖拽三大事件

鼠标按下onmousedown

鼠标移动onmousemove

鼠标抬起onmouseup

实例: 鼠标拖拽

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
cursor: move;
background-color: orange;
/*元素如果可以拖拽他必定是定位元素*/
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div>
今天我们学习了拖拽 感觉老是讲的就是一坨翔
</div>

<p>onmouseup</p>
<script type="text/javascript">
//拖拽三大事件
//鼠标按下onmousedown
//鼠标移动onmousemove
//鼠标抬起onmouseup

//获取元素
var div = document.getElementsByTagName("div")[0];

div.onmousedown = function(e){
var ev = e || window.event;
//我按下时把鼠标到盒子的位置求出来
var startX = ev.offsetX;
var startY = ev.offsetY;
//div.onmousemove = function(e){//因为我们向左上角移动那么盒子就不跟着我跑了
document.onmousemove = function(e){
var ev = e || window.event;
//你移动鼠标那么盒子跟着你跑
console.log(ev.clientX,ev.offsetX)

console.log(ev.clientX - ev.offsetX)
console.log(ev.clientY - ev.offsetY)


//鼠标移动的位置就是鼠标到可视区的位置-一开始鼠标按下的位置
div.style.left = ev.clientX - startX + "px";
div.style.top = ev.clientY - startY + "px";


//div.style.left = ev.clientX + "px";
//div.style.top = ev.clientY + "px";
}
//我们习惯把抬起也放入按下里面
document.onmouseup = function(){
document.onmousemove = null;//我抬起鼠标之后不想让他再跟着我跑了
//所以就直接解除绑定
document.onmouseup = null;
}


//如果拖拽图片或者文字那么此时拖拽失效 所以我们需要清除默认行为
/*if(ev.preventDefault){
ev.preventDefault()
}else{
ev.returnValue = false;
}*/
return false;//如果使用它必须放到最后
}






//基本上很完美了
</script>
</body>
</html>
实例: 鼠标拖拽--防止拖出页面
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
cursor: move;
background-color: orange;
/*元素如果可以拖拽他必定是定位元素*/
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div>
今天我们学习了拖拽 感觉老是讲的就是一坨翔
</div>

<p>onmouseup</p>
<script type="text/javascript">
//拖拽三大事件
//鼠标按下onmousedown
//鼠标移动onmousemove
//鼠标抬起onmouseup

//获取元素
var div = document.getElementsByTagName("div")[0];

div.onmousedown = function(e){
var ev = e || window.event;
//我按下时把鼠标到盒子(div)的位置求出来
var startX = ev.offsetX;
var startY = ev.offsetY;
//div.onmousemove = function(e){//因为我们向左上角移动那么盒子就不跟着我跑了
document.onmousemove = function(e){
var ev = e || window.event;
//你移动鼠标那么盒子跟着你跑
console.log(ev.clientX,ev.offsetX)

console.log(ev.clientX - ev.offsetX)
console.log(ev.clientY - ev.offsetY)

var lDis = ev.clientX - startX;
var rDis = ev.clientY - startY;

if(rDis < 0){
rDis = 0;
}
if(lDis < 0){
lDis = 0;
}

if(lDis > document.documentElement.clientWidth-div.offsetWidth){
lDis = document.documentElement.clientWidth-div.offsetWidth;
}

if(rDis > document.documentElement.clientHeight-div.offsetHeight){
rDis = document.documentElement.clientHeight-div.offsetHeight;
}

//鼠标移动的位置就是鼠标到可视区的位置-一开始鼠标按下的位置
div.style.left = lDis + "px";
div.style.top = rDis + "px";


//div.style.left = ev.clientX + "px";
//div.style.top = ev.clientY + "px";
}
//我们习惯把抬起也放入按下里面
document.onmouseup = function(){
document.onmousemove = null;//我抬起鼠标之后不想让他再跟着我跑了
//所以就直接解除绑定
document.onmouseup = null;
}


//如果拖拽图片或者文字那么此时拖拽失效 所以我们需要清除默认行为
/*if(ev.preventDefault){
ev.preventDefault()
}else{
ev.returnValue = false;
}*/
return false;//如果使用它必须放到最后
}

//基本上很完美了
</script>
</body>
</html>

特别注意：

因为图片、文字选中是也会被拖拽, 这是一种默认行为, 所以在鼠标按下时, 我们需要清除这种默认行为。

于一个电脑洁癖来说，不喜欢把数据留在c盘。用了chorme后，本文教你缓存及用户数据位置修改的方法。

方案一：
这是在桌面快捷方式中设置命令参数的修改方式。右键——属性——快捷方式——目标：


在目标(T)一栏chrome.exe"后面添加 --user-data-dir=“X:\文件夹”：(以下为本人使用)

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir="F:\chrome\UserData" --disk-cache-dir="F:\chrome"（注：英文状态标点，注意\chrome.exe”与空格)

【注意】快捷方式创建好后，只能从快捷健启动有效，要使外部调用生效，还要做如下修改：

Win+R——regedit，打开注册表。分别找到四个位置：
[HKEY_CLASSES_ROOT]下的ChromeHTML、ftp、http、https，里面的 shell\open\command 的右边数值上右键改

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir="F:\chrome\UserData" --disk-cache-dir="F:\chrome" -- "%1"

在 - - "%1"的前面添加刚才的路径 (注意空格)


方案二：

使用mklink命令改变路径。首先找到Chrome浏览器的缓存文件目录。如果你的安装在C盘，你的用户名XXX，那么"C:\Users\XXX\AppData\Local\Google\Chrome\UserData\Default\Cache"就是你Chrome的缓存文件路径。下面是Windows下修改Chrome浏览器默认缓存目录的具体操作：

删除你Chrome的默认缓存文件夹，即"C:\Users\XXX\AppData\Local\Google\Chrome\UserData\Default目录下的”Cache”文件夹。

新建一个Chrome缓存文件夹，目录名随意。如在F盘下建立 "F: \Chrome\Default\Cache”目录。

确认当前为管理员身份登录，单击开始菜单——所有程序——附件——命令提示符，从弹出的菜单中选择“以管理员身份运行”命令

mklink /D “C:\Users\XXX\AppData\Local\Google\Chrome\User Data\Default\Cache” “F:\Chrome\Default\Cache”

在线咨询
上一篇：html开发笔记18-实战-绘制第一个html表格
下一篇：css盒子模型

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 开封 夏津县 小店区 临高县 株洲县 烈山区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服