HTML5 教程

HTML5 是最新的 HTML 标准，它引入了许多新的元素和属性，为 web 开发者提供了更多的灵活性和功能。本章节将介绍 HTML5 的一些重要特性和用法。

1. 新的语义化元素

HTML5 引入了许多新的语义化元素，如 <header>、<footer>、<nav>、<article>、<section> 等，这些元素可以更好地描述页面的结构，提高页面的可读性和可维护性。

示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Semantic Elements</title>
</head>
<body>
    <header>
        <h1>Welcome to my website</h1>
    </header>
    
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    
    <section>
        <article>
            <h2>Article Title</h2>
            <p>This is an example article.</p>
        </article>
        
        <article>
            <h2>Another Article Title</h2>
            <p>This is another example article.</p>
        </article>
    </section>
    
    <footer>
        <p>&copy; 2022 My Website</p>
    </footer>
</body>
</html>

2. 新的表单元素

HTML5 引入了一些新的表单元素和属性，如 <input type="email">、<input type="url">、<input type="date">、<input type="color"> 等，可以更方便地实现表单验证和用户交互。

示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Form Elements</title>
</head>
<body>
    <form>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        
        <label for="url">Website:</label>
        <input type="url" id="url" name="url">
        
        <label for="birthdate">Birthdate:</label>
        <input type="date" id="birthdate" name="birthdate">
        
        <label for="color">Favorite Color:</label>
        <input type="color" id="color" name="color">
        
        <input type="submit" value="Submit">
    </form>
</body>
</html>

在这个章节中，我们介绍了 HTML5 的一些重要特性，包括新的语义化元素和表单元素。在实际开发中，我们可以充分利用这些新特性来提高网站的质量和用户体验。