主页 > 创业 >

Html5学习教程，从入门到精通，HTML5元素语法知识点及案例代码（2）

创业
2025-08-22 02:57:01

HTML5 元素语法知识点及案例代码一、HTML5 元素概述

HTML5 元素是构成网页的基本单位，每个元素都有特定的语义和功能。HTML5 元素由开始标签、内容和结束标签组成，例如：

<p>这是一个段落。</p> <p> 是开始标签这是一个段落。是内容</p> 是结束标签二、HTML5 元素分类

HTML5 元素可以根据其功能和语义进行分类，主要分为以下几类：

根元素:

<html>: 定义 HTML 文档的根元素。

文档元数据:

<head>: 定义文档的头部信息，例如标题、样式表、脚本等。<title>: 定义文档的标题。<meta>: 定义文档的元数据，例如字符编码、作者、描述等。<link>: 定义文档与外部资源的关系，例如样式表、图标等。<style>: 定义文档的内部样式表。<script>: 定义文档的脚本代码。

内容分区:

<body>: 定义文档的主体内容。<header>: 定义文档或节的页眉。<nav>: 定义导航链接。<main>: 定义文档的主要内容。<section>: 定义文档中的节。<article>: 定义独立的文章内容。<aside>: 定义页面内容之外的内容（如侧边栏）。<footer>: 定义文档或节的页脚。

文本内容:

<h1> - <h6>: 定义标题。<p>: 定义段落。<br>: 定义换行。<hr>: 定义水平线。<pre>: 定义预格式化文本。<blockquote>: 定义块引用。<ol>: 定义有序列表。<ul>: 定义无序列表。<li>: 定义列表项。<dl>: 定义定义列表。<dt>: 定义定义术语。<dd>: 定义定义描述。

内联语义:

<a>: 定义超链接。<strong>: 定义强调文本。<em>: 定义强调文本。<mark>: 定义标记文本。<small>: 定义小号文本。<sub>: 定义下标文本。<sup>: 定义上标文本。<code>: 定义代码片段。<time>: 定义日期/时间。

图像和多媒体:

<img>: 定义图像。<audio>: 定义音频内容。<video>: 定义视频内容。<source>: 定义多媒体资源的来源。<track>: 定义多媒体资源的字幕。

表格:

<table>: 定义表格。<caption>: 定义表格标题。<thead>: 定义表格头部。<tbody>: 定义表格主体。<tfoot>: 定义表格尾部。<tr>: 定义表格行。<th>: 定义表格头单元格。<td>: 定义表格数据单元格。

表单:

<form>: 定义表单。<input>: 定义输入控件。<label>: 定义输入控件的标签。<button>: 定义按钮。<select>: 定义下拉列表。<option>: 定义下拉列表选项。<textarea>: 定义多行文本输入框。三、HTML5 元素案例代码 <!DOCTYPE html> <html> <head> <title>HTML5 元素案例</title> <meta charset="UTF-8"> <meta name="description" content="HTML5 元素案例代码"> <link rel="stylesheet" href="style.css"> <style> body { font-family: Arial, sans-serif; } h1 { color: red; } </style> <script> function sayHello() { alert("Hello, World!"); } </script> </head> <body> <header> <h1>HTML5 元素案例</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于</a></li> <li><a href="#">联系</a></li> </ul> </nav> </header> <main> <section> <h2>文本内容</h2> <p>这是一个段落。</p> <p>这是另一个段落。</p> <blockquote> <p>这是一个块引用。</p> </blockquote> </section> <section> <h2>图像和多媒体</h2> <img src="image.jpg" alt="图片"> <audio controls> <source src="audio.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 标签。 </audio> <video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> 您的浏览器不支持 video 标签。 </video> </section> <section> <h2>表格</h2> <table> <caption>表格标题</caption> <thead> <tr> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>20</td> </tr> <tr> <td>李四</td> <td>25</td> </tr> </tbody> </table> </section> <section> <h2>表单</h2> <form action="/submit" method="post"> <label for="name">姓名：</label> <input type="text" id="name" name="name" required> <label for="email">邮箱：</label> <input type="email" id="email" name="email" required> <label for="age">年龄：</label> <input type="number" id="age" name="age" min="1" max="120"> <label for="birthday">生日：</label> <input type="date" id="birthday" name="birthday"> <label for="color">喜欢的颜色：</label> <input type="color" id="color" name="color"> <input type="submit" value="提交"> </form> </section> </main> <footer> <p>版权所有 © 2023</p> </footer> <button onclick="sayHello()">点击我</button> </body> </html> 四、代码解析

文档结构:

<!DOCTYPE html> 声明文档类型为 HTML5。<html> 元素是文档的根元素。<head> 元素包含文档的元数据，例如标题、样式表、脚本等。<body> 元素包含文档的主体内容。

文档元数据:

<title> 元素定义文档的标题。<meta> 元素定义文档的字符编码和描述。<link> 元素链接外部样式表。<style> 元素定义内部样式表。<script> 元素定义脚本代码。

内容分区:

<header> 元素定义文档的页眉。<nav> 元素定义导航链接。<main> 元素定义文档的主要内容。<section> 元素定义文档中的节。<footer> 元素定义文档的页脚。

文本内容:

<h1> - <h6> 元素定义标题。<p> 元素定义段落。<blockquote> 元素定义块引用。

图像和多媒体:

<img> 元素定义图像。<audio> 元素定义音频内容。<video> 元素定义视频内容。

表格:

<table> 元素定义表格。<caption> 元素定义表格标题。<thead> 元素定义表格头部。<tbody> 元素定义表格主体。<tr> 元素定义表格行。<th> 元素定义表格头单元格。<td> 元素定义表格数据单元格。