整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
文由掘金@天行天忌授權(quán)發(fā)布，前端晚間課對其內(nèi)容進(jìn)行微改。
HTML，超文本標(biāo)記語言，是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。自從引入 HTML 以來，它就一直用于構(gòu)建互聯(lián)網(wǎng)。與 JavaScript 和 CSS 一起，HTML 構(gòu)成前端開發(fā)的三劍客。
盡管許多新技術(shù)使網(wǎng)站創(chuàng)建過程變得更簡單、更高效，但 HTML 始終是核心。隨著 HTML5 的普及，在 2014 年，這種標(biāo)記語言發(fā)生了很多變化，變得更加友好，瀏覽器對新標(biāo)準(zhǔn)的支持熱度也越來越高。而HTML并不止于此，還在不斷發(fā)生變化，并且可能會獲得一些特性來證明對 HTML6 的命名更改是合理的。
該元素<dialog> 將隨 HTML6 一起提供。它被認(rèn)為等同于用 JavaScript 開發(fā)的模態(tài)，并且已經(jīng)標(biāo)準(zhǔn)化，但只有少數(shù)瀏覽器完全支持。但這種現(xiàn)象會改變，很快它將在所有瀏覽器中得到支持。
這個元素在其默認(rèn)格式下，只會將光標(biāo)顯示在它所在的位置上，但可以使用 JavaScript 打開模式。
<dialog>
<form method="dialog">
<input type="submit" value="確定" />
<input type="submit" value="取消" />
</form>
</dialog>在默認(rèn)形式下，該元素創(chuàng)建一個灰色背景，其下方是非交互式內(nèi)容。
可以在 <dialog> 其中的表單上使用一種方法，該方法將發(fā)送值并將其傳遞回自身 <dialog>。
總的來說，這個標(biāo)簽在用戶交互和改進(jìn)的界面中變得有益。
可以通過更改 <dialog> 標(biāo)簽的 open 屬性以控制打開和關(guān)閉。
<dialog open>
<p>組件內(nèi)容</p>
</dialog>FutureClaw 雜志主編 Bobby Mozumder 建議：
將錨元素鏈接到 JSON/XML、API 端點，讓瀏覽器在內(nèi)部將數(shù)據(jù)加載到新的數(shù)據(jù)結(jié)構(gòu)中，然后瀏覽器將 DOM 元素替換為根據(jù)需要加載的任何數(shù)據(jù)。初始數(shù)據(jù)（以及標(biāo)準(zhǔn)錯誤響應(yīng)）可以放在標(biāo)題裝置中，如果需要，可以稍后替換。
據(jù)他介紹，這是單頁應(yīng)用程序網(wǎng)頁設(shè)計模式，可以提高響應(yīng)速度和加載時間，因為不需要加載 JavaScript。
這個是一個比較有意思的提案，就有點類似我們以前沒有做前后端分離之前的混合編程的模式，HTML變成模板語言，通過JSON API請求數(shù)據(jù)，不一樣的是變成瀏覽器來默認(rèn)解析，瀏覽器內(nèi)部加載數(shù)據(jù)到新的數(shù)據(jù)結(jié)構(gòu)中，然后瀏覽器將按需加載到的數(shù)據(jù)替換成 DOM 元素。
大家可以看一下InfoQ上的這篇文章《針對非正式 HTML6 提案“無需 JavaScript 的單頁應(yīng)用”引發(fā)的論戰(zhàn)》，了解更多！
https://www.infoq.cn/article/2015/03/html6-without-javascript
HTML6 愛好者相信即將到來的更新將允許瀏覽器調(diào)整圖像大小以獲得更好的觀看體驗。
每個瀏覽器都難以呈現(xiàn)相對于設(shè)備和屏幕尺寸的最佳圖像尺寸，不幸的是，src 標(biāo)簽 img 在處理這個問題時不是很有效。
這個問題可以通過一個新標(biāo)簽 <srcset> 來解決，它使瀏覽器在多個圖像之間進(jìn)行選擇的工作變得更加容易。
將可用庫引入 HTML6 絕對是提高開發(fā)效率的重要一步。
很多時候，需要在互聯(lián)網(wǎng)上定義一般信息，而這些一般信息可以是任何公開的信息，例如電話號碼、姓名、地址等。微格式是能夠定義一般數(shù)據(jù)的標(biāo)準(zhǔn)。微格式可以增強設(shè)計者的能力，并可以減少搜索引擎推斷公共信息所需的努力。
盡管標(biāo)簽<ul>、<ol>非常有用，但在某些情況下仍有一些不足之處。可以處理交互元素的標(biāo)簽將是一個不錯的選擇。
這就是創(chuàng)建標(biāo)簽 <menu> 的驅(qū)動力，它可以處理按鈕驅(qū)動的列表元素。
<menu type="toolbar">
<li><button>個人信息</button></li>
<li><button>系統(tǒng)設(shè)置</button></li>
<li><button>賬號注銷</button></li>
</menu>因此 <menu>，除了能夠像普通列表一樣運行之外，還可以增強 HTML 列表的功能。
雖然HTML5在安全性方面還不錯，瀏覽器和網(wǎng)絡(luò)技術(shù)也提供了合理的保護(hù)。毫無疑問，在身份驗證和安全領(lǐng)域還有很多事情可以做。如密鑰可以異地存儲；這將防止不受歡迎的人訪問并支持身份驗證。使用嵌入式密鑰而不是 cookie，使數(shù)字簽名更好等。
HTML6 允許以更好的方式使用設(shè)備上的相機和媒體。將能夠控制相機、它的效果、模式、全景圖像、HDR 和其他屬性。
沒有什么是完美的，HTML 也不是完美的，所以 HTML 規(guī)范可以做很多事情來使它更好。應(yīng)該對一些有用的規(guī)范進(jìn)行標(biāo)準(zhǔn)化，以增強 HTML 的能力。小的變化已經(jīng)開始推出。如增強藍(lán)牙支持、p2p 文件傳輸、惡意軟件保護(hù)、云存儲集成，下一個 HTML 版本可以考慮一下。
標(biāo)位置
當(dāng)我們給某一個盒子添加鼠標(biāo)事件監(jiān)聽時(click、mouseover、mouseenter、mouseout等事件), 都一定會有以下四組值：
event.pageX event.pageY
event.screenX event.screenY
event.clientX event.clientY
event.offsetX event.offsetY
event.pageY 表示鼠標(biāo)指針, 到頁面頂端的距離。IE6、7、8不兼容
event.screenY 表示鼠標(biāo)指針, 到屏幕頂端的距離
event.clientY 表示鼠標(biāo)指針, 到視口頂端的距離(視口就是當(dāng)前可視窗口)
event.offsetY 表示鼠標(biāo)指針, 到盒子頂端的距離
規(guī)律：
1、當(dāng)頁面沒有卷動的時候, pageY一定等價于clientY。或換句話說pageY等價于clientY+頁面卷動的值scrollTop。
2、IE678不兼容pageX、pageY
offsetX/Y指的不是距離你監(jiān)聽的那個盒子左上角的距離, 而是指的你現(xiàn)在鼠標(biāo)指針?biāo)谖恢玫酱藭r最內(nèi)層盒子左上角的距離。
getBoundingClientRect 用于獲取某個元素相對于視窗的位置集合。集合中有top, right, bottom, left等屬性。
event.getBoundingClientRect().left;
具體區(qū)別:
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
實例: 鼠標(biāo)點擊特效
<!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必須設(shè)置寬高
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);
//因為拖拽圖片圖片有一種神奇的魔力 也就是我們所有的默認(rèn)行為
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 文檔的高度
//可視區(qū)域?qū)捀?/p>
//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：獲取行內(nèi)樣式的寬度和高度
<!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);//操作的都是行內(nèi)
//不兼容
//高版本
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);//定位復(fù)原素(div)
//他返回一個信息集合
console.log(span.getBoundingClientRect());//這個東西就可以得到span的所有位置關(guān)系
//top和left值就是我們所需要的凈位置
//我們知道我們無法直接獲取該盒子到body的位置 但是我們我們可以獲取該合資距離他有定位祖先元素的位置 那么這樣我們就可以一層一層網(wǎng)上找
/*body
div(定位)
span
span.offsetTop ->sapn.offsetParent
div.offsetTop*/
</script>
</body>
</html>實例5 編寫凈位置函數(shù)
<!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];
//方法一: 編寫自定義函數(shù)
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>拖拽三大事件
鼠標(biāo)按下onmousedown
鼠標(biāo)移動onmousemove
鼠標(biāo)抬起onmouseup
實例: 鼠標(biāo)拖拽
<!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>
今天我們學(xué)習(xí)了拖拽 感覺老是講的就是一坨翔
</div>
<p>onmouseup</p>
<script type="text/javascript">
//拖拽三大事件
//鼠標(biāo)按下onmousedown
//鼠標(biāo)移動onmousemove
//鼠標(biāo)抬起onmouseup
//獲取元素
var div = document.getElementsByTagName("div")[0];
div.onmousedown = function(e){
var ev = e || window.event;
//我按下時把鼠標(biāo)到盒子的位置求出來
var startX = ev.offsetX;
var startY = ev.offsetY;
//div.onmousemove = function(e){//因為我們向左上角移動那么盒子就不跟著我跑了
document.onmousemove = function(e){
var ev = e || window.event;
//你移動鼠標(biāo)那么盒子跟著你跑
console.log(ev.clientX,ev.offsetX)
console.log(ev.clientX - ev.offsetX)
console.log(ev.clientY - ev.offsetY)
//鼠標(biāo)移動的位置就是鼠標(biāo)到可視區(qū)的位置-一開始鼠標(biāo)按下的位置
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";
}
//我們習(xí)慣把抬起也放入按下里面
document.onmouseup = function(){
document.onmousemove = null;//我抬起鼠標(biāo)之后不想讓他再跟著我跑了
//所以就直接解除綁定
document.onmouseup = null;
}
//如果拖拽圖片或者文字那么此時拖拽失效 所以我們需要清除默認(rèn)行為
/*if(ev.preventDefault){
ev.preventDefault()
}else{
ev.returnValue = false;
}*/
return false;//如果使用它必須放到最后
}
//基本上很完美了
</script>
</body>
</html>
實例: 鼠標(biāo)拖拽--防止拖出頁面
<!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>
今天我們學(xué)習(xí)了拖拽 感覺老是講的就是一坨翔
</div>
<p>onmouseup</p>
<script type="text/javascript">
//拖拽三大事件
//鼠標(biāo)按下onmousedown
//鼠標(biāo)移動onmousemove
//鼠標(biāo)抬起onmouseup
//獲取元素
var div = document.getElementsByTagName("div")[0];
div.onmousedown = function(e){
var ev = e || window.event;
//我按下時把鼠標(biāo)到盒子(div)的位置求出來
var startX = ev.offsetX;
var startY = ev.offsetY;
//div.onmousemove = function(e){//因為我們向左上角移動那么盒子就不跟著我跑了
document.onmousemove = function(e){
var ev = e || window.event;
//你移動鼠標(biāo)那么盒子跟著你跑
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;
}
//鼠標(biāo)移動的位置就是鼠標(biāo)到可視區(qū)的位置-一開始鼠標(biāo)按下的位置
div.style.left = lDis + "px";
div.style.top = rDis + "px";
//div.style.left = ev.clientX + "px";
//div.style.top = ev.clientY + "px";
}
//我們習(xí)慣把抬起也放入按下里面
document.onmouseup = function(){
document.onmousemove = null;//我抬起鼠標(biāo)之后不想讓他再跟著我跑了
//所以就直接解除綁定
document.onmouseup = null;
}
//如果拖拽圖片或者文字那么此時拖拽失效 所以我們需要清除默認(rèn)行為
/*if(ev.preventDefault){
ev.preventDefault()
}else{
ev.returnValue = false;
}*/
return false;//如果使用它必須放到最后
}
//基本上很完美了
</script>
</body>
</html>特別注意：
因為圖片、文字選中是也會被拖拽, 這是一種默認(rèn)行為, 所以在鼠標(biāo)按下時, 我們需要清除這種默認(rèn)行為。
于一個電腦潔癖來說，不喜歡把數(shù)據(jù)留在c盤。用了chorme后，本文教你緩存及用戶數(shù)據(jù)位置修改的方法。
方案一：
這是在桌面快捷方式中設(shè)置命令參數(shù)的修改方式。右鍵——屬性——快捷方式——目標(biāo)：
在目標(biāo)(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"（注：英文狀態(tài)標(biāo)點，注意\chrome.exe”與空格)【注意】快捷方式創(chuàng)建好后，只能從快捷健啟動有效，要使外部調(diào)用生效，還要做如下修改：
Win+R——regedit，打開注冊表。分別找到四個位置：
[HKEY_CLASSES_ROOT]下的ChromeHTML、ftp、http、https，里面的 shell\open\command 的右邊數(shù)值上右鍵改
"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瀏覽器默認(rèn)緩存目錄的具體操作：
刪除你Chrome的默認(rèn)緩存文件夾，即"C:\Users\XXX\AppData\Local\Google\Chrome\UserData\Default目錄下的”Cache”文件夾。
新建一個Chrome緩存文件夾，目錄名隨意。如在F盤下建立 "F: \Chrome\Default\Cache”目錄。
確認(rèn)當(dāng)前為管理員身份登錄，單擊開始菜單——所有程序——附件——命令提示符，從彈出的菜單中選擇“以管理員身份運行”命令
mklink /D “C:\Users\XXX\AppData\Local\Google\Chrome\User Data\Default\Cache” “F:\Chrome\Default\Cache”*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
