HTML5 介绍

HTML5是最新的HTML标准，设计用于在Web页面中包含多媒体、图形和交互性，同时保持与早期版本的HTML兼容。HTML5不仅是一个标记语言，它还包括了一些新的API和DOM属性，使开发更加简洁和强大。

结构性元素

HTML5引入了许多新的语义化元素，用于更好地定义文档结构，增强可读性和SEO效果。

<!DOCTYPE html>

解释：声明文档类型，告知浏览器使用HTML5标准。

1
<!DOCTYPE html>

<html>

解释：定义HTML文档的根元素。

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Example</title>
</head>
<body>
    <p>这是一个HTML文档。</p>
</body>
</html>

<head>

解释：包含文档的元数据，如标题、字符集、链接等。

1
2
3
4
<head>
    <meta charset="UTF-8">
    <title>HTML5 Example</title>
</head>

<meta>

解释：定义文档的元数据，例如字符集、描述、作者等。

1
2
3
<meta charset="UTF-8">
<meta name="description" content="这是一个HTML5示例页面。">
<meta name="author" content="作者姓名">

<title>

解释：定义文档的标题，显示在浏览器的标题栏或标签页中。

1
<title>HTML5 示例页面</title>

<body>

解释：定义文档的主体内容。

1
2
3
4
<body>
    <h1>欢迎来到HTML5</h1>
    <p>这是文档的主体内容。</p>
</body>

<header>

解释：定义页面或区段的头部内容，通常包含导航条和标题。

1
2
3
4
5
6
7
8
9
10
<header>
    <h1>我的网站</h1>
    <nav>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于</a></li>
            <li><a href="#contact">联系</a></li>
        </ul>
    </nav>
</header>

<nav>

解释：定义导航链接的部分。

1
2
3
4
5
6
7
<nav>
    <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#about">关于</a></li>
        <li><a href="#contact">联系</a></li>
    </ul>
</nav>

<ul>

解释：定义无序列表，列表项使用 <li> 元素表示。

1
2
3
4
5
<ul>
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
</ul>

<li>

解释：定义列表项，通常包含在 <ul> 或 <ol> 元素内。

1
2
3
4
5
<ul>
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
</ul>

<section>

解释：定义文档的一个区段，通常包含一个相关的主题。

1
2
3
4
<section>
    <h2>关于我们</h2>
    <p>这是关于我们部分的内容。</p>
</section>

<article>

解释：定义一个独立的内容块，如一篇文章或博客帖子。

1
2
3
4
<article>
    <h2>文章标题</h2>
    <p>这是文章的内容。</p>
</article>

<footer>

解释：定义页面或区段的页脚，通常包含版权声明、联系信息等。

1
2
3
<footer>
    <p>&copy; 2024 我的公司</p>
</footer>

多媒体元素

HTML5增强了对多媒体内容的支持，通过内置的标签使得在网页中嵌入音频和视频更加容易。

<video>

解释：定义一个视频播放器，用于嵌入视频内容。

1
2
3
4
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    您的浏览器不支持 video 标签。
</video>

<audio>

解释：定义一个音频播放器，用于嵌入音频内容。

1
2
3
4
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
</audio>

<canvas>

解释：定义一个画布，通过JavaScript绘制图形和动画。

1
<canvas></canvas>

表单元素

HTML5引入了许多新的表单输入类型和属性，简化了表单的创建和验证过程。

<form>

解释：定义一个表单，用于用户输入和提交数据。

1
2
3
4
5
<form action="/submit-form" method="post">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username" required>
    <input type="submit" value="提交">
</form>

<input>

解释：定义一个输入控件，如文本框、复选框、单选按钮等。

1
2
3
4
<form>
    <label for="email">电子邮件:</label>
    <input type="email" id="email" name="email">
</form>

<label>

解释：定义输入控件的标签，提供用户友好的表单标注。

1
2
<label for="name">姓名:</label>
<input type="text" id="name" name="name">

<textarea>

解释：定义一个多行文本输入控件，用于用户输入大段文本。

1
2
3
4
<form>
    <label for="message">消息:</label>
    <textarea id="message" name="message" rows="4" cols="50"></textarea>
</form>

<button>

解释：定义一个按钮，用于表单提交或其他交互操作。

1
<button type="submit">提交</button>

<select>

解释：定义一个下拉列表框，用户可以从预定义的选项中选择一个或多个。

1
2
3
4
5
6
7
<label for="cars">选择一辆车:</label>
<select id="cars" name="cars">
    <option value="volvo">沃尔沃</option>
    <option value="saab">萨博</option>
    <option value="mercedes">梅赛德斯</option>
    <option value="audi">奥迪</option>
</select>

<option>

解释：定义 <select> 元素的选项，通常包含在 <select> 元素内。

1
2
3
4
5
<select>
    <option value="apple">苹果</option>
    <option value="banana">香蕉</option>
    <option value="cherry">樱桃</option>
</select>

图像和链接元素

HTML5继续支持在网页中嵌入图像和创建超链接。

<img>

解释：定义页面中的图像，通常用于在页面中显示图片。

1
<img src="image.webp" alt="示例图像" width="500" height="600">

<a>

解释：定义一个超链接，用于链接到另一个页面或文档的位置。

1
<a href="https://www.baidu.com">百度一下</a>