HTML5寫代碼頁面變色
HTML5作為最新的HTML標準，為我們帶來了很多新的特性。其中一個比較有用的特性就是可以通過CSS3實現頁面的著色效果。
下面我們來看一個例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5寫代碼頁面變色</title>
<style>
/* 代碼塊樣式 */
pre {
background-color: #F0F0F0;
padding: 10px;
}
/* 關鍵字樣式 */
.keyword {
color: #008000;
font-weight: bold;
}
/* 注釋樣式 */
.comment {
color: #808080;
}
</style>
</head>
<body>
<pre><code class="html"><span class="comment"><-- 這是一段HTML代碼 --></span>
<span class="keyword"><!DOCTYPE html></span>
<span class="keyword"><html></span>
<span class="keyword"><head></span>
<span class="keyword"><meta charset="UTF-8"></span>
<span class="keyword"><title></span>HTML5寫代碼頁面變色<span class="keyword"></title></span>
<span class="keyword"></head></span>
<span class="keyword"><body></span>
<span class="comment"><!-- 這是一段文字內容 --></span>
<span class="keyword"><h1></span>HTML5寫代碼頁面變色<span class="keyword"></h1></span>
<span class="keyword"><p></span>HTML5作為最新的HTML標準，為我們帶來了很多新的特性。其中一個比較有用的特性就是可以通過CSS3實現頁面的著色效果。<span class="keyword"></p></span>
<span class="keyword"></body></span>
</code></pre>
</body>
</html>在上面這段代碼中，我們通過CSS3對代碼塊、關鍵字、注釋等不同部分進行了不同的樣式設置，實現了頁面的變色效果。具體的樣式設置可以參考例子中的CSS代碼。
上一篇html5寫代碼畫圖
下一篇html5寫個人介紹代碼