總結： 只有
placeholder\contenteditable沒有兼容問題
1、placeholder - 用作提示信息
placeholder：用作提示信息 ，沒有兼容性問題
<input type="text" placeholder="請輸入用戶名">
2、input 的 新type
之前的type:text,radio,checkbox,file,password,submit
<input type="file">
input 的 新type:
<form> <!-- 寫在form表單下 -->
<!-- Calendar類：是個大類，不止有一種,時間插件，不常用，兼容性不好，只有chrome支持 -->
日期date： <input type="date">
時間time:<input type="time">
周 week： <input type="week">
年月日+ 時間datetime-local：<input type="datetime-local">
<br>
數字number： <input type="number"><!-- 只有chrome支持 -->
郵件email：<input type="email"> <!-- 只有chrome、火狐支持 -->
顏色選擇器color： <input type="color" name='color'> <!-- 只有chrome支持 -->
range : <input type="range" min="1" min="100" name='range1'> <!-- 只有chrome、safari支持 -->
search : <input type="search" name="search"> <!-- 只有chrome支持,safari支持一點功能 -->
url : <input type="url"> <!-- 只有chrome、火狐支持 -->
<input type="submit">
</form>
3、contenteditable - 是否可編輯
- contenteditable 屬性，默認值是false,不可編輯； true的話可編輯
- 沒有兼容性問題，可以用來修改表格
- 這個屬性可以繼承，如果繼承了想修改當前，也可以覆蓋
<div contenteditable="true">
hello 可編輯
<br>
<span>world!可編輯</span>
</div>
<div contenteditable="true">
hello 可編輯
<br>
<span contenteditable="false">world!不可編輯</span>
<!-- 注意這裏是：span 內部內容不能編輯和刪除，但是span標籤可以被刪除 ，不建議這樣嵌套寫-->
</div>
4、draggable - 是否可拖拽
- div標籤 默認值是false,不可拖拽；a標籤/img 默認是true，可拖拽
- 只有chrome支持,safari支持, （部分）火狐不支持
- 拖拽的組成：被拖拽的物體 和 目標區域
- 被拖拽的物體的聲明週期：按下開始移動的瞬間–叫
拖拽開始ondragstart； 移動的時候–拖拽進行中ondrag；拖拽結束ondragend
oDragDiv.ondragstart = function(e){ //開始事件：按下物體的瞬間是不會觸發事件的，必須稍微移動一點點，才觸發拖拽開始事件
console.log(e);
// e.clientX / e.clientY 代表起始的時候鼠標的點
}
oDragDiv.ondrag = function(e){ //移動事件：也是移動的一瞬間開始觸發
console.log(e);
}
oDragDiv.ondragend = function(e){ //結束事件：鬆開物體的瞬間觸發
console.log(e);
}
- 目標區域可以接收過來的元素， 目標區域的聲明週期：
進入ondragenter、移動ondragover、離開ondragleave 、放下ondrop
注意：
- 拖拽進入時觸發的事件，不是元素進入就觸發，而是拖拽的鼠標進入才觸發
- 要執行drop 事件，需要先在ondragover裏阻止默認事件，
e.preventDefault();
targetDiv.ondragenter = function(e){ //拖拽進入時觸發的事件，不是元素進入就觸發，而是拖拽的鼠標進入才觸發
}
targetDiv.ondragover = function(e){ //在區域上面移動 觸發事件：類似被拖拽物體的 ondrag事件,都是不停的觸發
e.preventDefault(); //阻止默認事件，
}
targetDiv.ondragleave = function(e){ //在目標區域離開觸發：
}
targetDiv.ondrop = function(e){ // html所有元素，拖拽結束的時候（拖拽週期結束時），默認事件都是回到原處
console.log('drop');
}
// 事件是由行爲觸發的，但是一個行爲可以觸發不止一個事件， ondragover 執行完，可以執行 回到原處 ；也可以執行drop事件，默認執行回到原處，要阻止默認事件，才能觸發drop事件
demo1: 拖拽dragBox然後可以放下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H5 新增屬性</title>
<style>
.dragBox{
position:absolute; /*拖拽放下的時候要給left / top 賦值，所以要寫position */
width:100px;
height:100px;
background:green;
}
.target{
position:absolute;
left:600px;
width:200px;
height:200px;
border:1px solid #666;
}
</style>
</head>
<body>
<div class='dragBox' draggable='true'>被拖拽的物體</div>
<div class="target">目標區域</div>
<script>
// 被拖拽的物體,及其聲明週期------------------
var oDragDiv = document.getElementsByClassName('dragBox')[0];
var beginX = 0,
beginY = 0
oDragDiv.ondragstart = function(e){
beginX = e.clientX; //開始事件裏，記錄開始的座標
beginY = e.clientY;
}
oDragDiv.ondragend = function(e){
var x = e.clientX - beginX; //結束事件裏，根據結束左邊計算拖動的距離
var y = e.clientY - beginY;
oDragDiv.style.left = oDragDiv.offsetLeft + x + 'px'; //根據原理的偏移量 計算現在的位置
oDragDiv.style.top = oDragDiv.offsetTop + y + 'px'; //要設置left / top屬性，必須有position 屬性
}
// 目標區域/目標元素----------------------------------
// 目標區域可以接收過來的元素，
var targetDiv = document.getElementsByClassName('target')[0];
targetDiv.ondragenter = function(e){ //拖拽進入時觸發的事件，不是元素進入就觸發，而是拖拽的鼠標進入才觸發
}
targetDiv.ondragover = function(e){ //在區域上面移動 觸發事件：類似被拖拽物體的 ondrag事件,都是不停的觸發
e.preventDefault(); //阻止默認事件，
}
targetDiv.ondragleave = function(e){ //在目標區域離開觸發：
}
targetDiv.ondrop = function(e){ // html所有元素，拖拽結束的時候（拖拽週期結束時），默認事件都是回到原處
console.log('drop');
}
// 事件是由行爲觸發的，但是一個行爲可以觸發不止一個事件， ondragover 執行完，可以執行 回到原處 ；也可以執行drop事件，默認執行回到原處，要阻止默認事件，才能觸發drop事件
</script>
</body>
</html>
demo2: box1 和 box2 都是拖拽區域了，可以在兩個區域來回拖拽
注意：e.dataTransfer.effectAllowed = 'link';和 e.dataTransfer.dropEffect = 'link';兩個屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 150px;
height:auto;
border: 1px solid #666;
position: absolute;
padding:10px;
}
.box2{
width: 150px;
height:auto;
border: 1px solid #666;
position: absolute;
left:300px;
padding:10px;
}
li{
list-style: none;
width:100px;
height:30px;
background: green;
position: relative;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="box2"></div>
<script>
var dragDom; //用來存拖拽的是哪個元素
var liList = document.getElementsByTagName('li');
for(let i = 0;i < liList.length;i++){
liList[i].setAttribute('draggable',true); //設置屬性，讓其可拖拽
liList[i].ondragstart = function(e){
dragDom = e.target; //e.target 是事件的觸發源，就是誰觸發了這個事件，就是拖拽的元素
e.dataTransfer.effectAllowed = 'link'; //這個屬性必須在 ondragstart裏寫，其他裏面不好使，link 是鏈接
}
}
var box2 = document.getElementsByClassName('box2')[0];
box2.ondragover = function(e){
e.preventDefault(); //阻止默認事件
}
box2.ondrop = function(e){ //要放下，就要先阻止默認事件
box2.appendChild(dragDom);
dragDom = null;
}
var box1 = document.getElementsByClassName('box1')[0]; //這樣box1 和 box2 都是拖拽區域了，可以在兩個區域來回拖拽
box1.ondragover = function(e){
e.preventDefault();
}
box1.ondrop = function(e){
e.dataTransfer.dropEffect = 'link'; // 這個必須放在drop裏，要和拖拽原理ondragstart裏的allow相對應
box1.appendChild(dragDom);
dragDom = null;
}
</script>
</body>
</html>