整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文由掘金@天行天忌授權發布，前端晚間課對其內容進行微改。
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>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”*請認真填寫需求信息，我們會在24小時內與您取得聯系。
