HTML5和CSS3是現代網頁開發中不可或缺的技術，它們帶來了豐富的語義化標簽、新的特效和樣式選擇器，從而使得開發更加高效和便捷。接下來，我們將介紹幾個HTML5和CSS3的實例代碼，以幫助開發者更好的理解這些技術。 HTML5實例代碼：

HTML5為我們帶來了更多語義化的標簽，如article、section、nav、header、footer等，能夠更加準確地描述網頁元素的語義。下面是一個使用了這些標簽的實例：

<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<section>
<article>
<h1>What is HTML5?</h1>
<p>HTML5 is the fifth revision of the HTML standard.</p>
</article>
<article>
<h1>What's New in HTML5?</h1>
<p>HTML5 introduces many new features such as canvas, video, and audio elements.</p>
</article>
</section>
<footer>
<p>Copyright ? 2022.</p>
</footer>

CSS3實例代碼：

CSS3為我們提供了很多新的樣式選擇器和更豐富的特效，下面是一些實例代碼：

/* 圓角 */
div {
border-radius: 10px;
}
/* 半透明 */
h1 {
background-color: rgba(255, 255, 255, 0.5);
}
/* 漸變 */
div {
background: -webkit-linear-gradient(top, #1e5799, #2989d8);
background: -moz-linear-gradient(top, #1e5799, #2989d8);
background: -o-linear-gradient(top, #1e5799, #2989d8);
background: linear-gradient(to bottom, #1e5799, #2989d8);
}
/* 文字陰影 */
h1 {
text-shadow: 2px 2px #000;
}
/* 動畫 */
div {
animation: changeColor 2s ease-in-out infinite;
}
@keyframes changeColor {
0% {
background-color: red;
}
50% {
background-color: blue;
}
100% {
background-color: yellow;
}
}

在開發中，我們可以結合HTML5和CSS3的實例代碼，為網頁帶來更多的交互和美感，加強用戶體驗和品牌形象。