ELLO HTML5!
學前準備
1、了解HTML4.01和XHTML相關知識
2、具備CSS2使用能力
3、能夠熟練應用javascript
HTML5是什么
HTML 5 ≈ HTML+CSS 3+Javascript+API
HTML5的發展歷程
1993年6月 IETF以工作草案形式發布了超文本標記語言,沒有作為標準發布
1995年11月 IETF發布首個官方版本HTML 2.0
1996、1997年W3C分別發布了HTML3.2和HTML4.0兩個版本
1999年12月24日由W3C組織發布HTML4.0.1,一個被廣泛使用的標準
2000年1月26日發布XHTML1.0,是W3C組織推薦標準,經修改于2002年8月1日重新發布
XHTML1.1:于2001年5月31日發布
XHTML2.0:于2002年8月5日發布草案,因改動太大而胎死腹中
2014年10月28日,W3C的HTML工作組正式發布了HTML5的正式推薦標準
支持HTML5的瀏覽器
以使用 JavaScript 的 Proxy 對象來包裝 HTML 元素,如 div 和 p,以便在更改其屬性時觸發附帶的動作。以下是一個簡單的示例,展示如何實現這一點:
// 創建一個包裝函數,用于包裝 HTML 元素
function createElementProxy(element) {
return new Proxy(element, {
set(target, property, value) {
console.log(`Setting ${property} to ${value}`);
target[property]=value;
return true;
},
get(target, property) {
console.log(`Getting ${property}`);
return target[property];
}
});
}
// 創建一個 div 元素并包裝為 Proxy
const div=document.createElement('div');
const proxyDiv=createElementProxy(div);
// 設置和獲取屬性
proxyDiv.innerHTML='Hello, World!'; // 輸出: Setting innerHTML to Hello, World!
console.log(proxyDiv.innerHTML); // 輸出: Getting innerHTML
在這個示例中,我們創建了一個 createElementProxy 函數,用于包裝 HTML 元素。通過 Proxy 對象,我們可以攔截對元素屬性的設置和獲取操作,并在控制臺輸出相應的信息。
你可以根據需要擴展這個示例,添加更多的捕捉器(traps)來處理其他操作,例如刪除屬性、調用方法等。
eact和其它前端框架相比,好處有:
1, 采用組件化模式,聲明式編碼,提高開發效率以及組件復用率
2, 使用虛擬DOM+優秀的Diffing算法
Vscode新建js文件夾包括三個js文件,babel.min.js用于將jsx轉為js,react.development.js是react的核心庫,react-dom.development.js用于支持react操作DOM,下面在新建的hello
_react.html文件中新建hello world代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello_react</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
</body>
<script type="text/babel">
const VDOM=<h1>Hello,World!</h1>
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</html>
其中虛擬機DOM,VDOM本質是Object類型的對象,虛擬DOM是React內部使用,只有20幾個。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。