Html5学习教程，从入门到精通， HTML5 代码编写规范 & 语法知识点（17）

最新推荐文章于 2025-04-22 10:07:38 发布
最新推荐文章于 2025-04-22 10:07:38 发布
阅读量969 收藏 15
点赞数 18
分类专栏： 编程语言如门 前端开发 网页开发 文章标签： html5 学习 前端 html 开发语言 Java后端开发 Java语法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45746668/article/details/146135322
版权

HTML5 代码编写规范 & 语法知识点

这份指南将帮助你编写规范、易读、易维护的 HTML5 代码，并涵盖所有主要的语法知识点，附带详细注释的案例代码。

一、代码编写规范

  1. 文档类型声明 (DOCTYPE): 始终在 HTML 文档的第一行使用 <!DOCTYPE html> 声明文档类型为 HTML5。
  2. 字符编码 (Charset): 使用 <meta charset="UTF-8"> 指定文档的字符编码为 UTF-8，以支持多语言字符。
  3. 语义化标签: 使用语义化的 HTML5 标签 (例如 <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>) 来清晰地描述内容结构，提高代码可读性和可访问性。
  4. 标签小写: 使用小写字母书写 HTML 标签和属性。
  5. 属性引号: 始终使用双引号 (") 包裹属性值。
  6. 标签闭合: 所有 HTML 元素都必须正确闭合，例如 <p>...</p>，自闭合标签使用 / 闭合，例如 <img />。
  7. 代码缩进: 使用 2 或 4 个空格进行代码缩进，保持代码层次清晰。
  8. 注释: 使用 <!-- 注释内容 --> 添加代码注释，解释代码功能或逻辑。
  9. 外部资源: 将 CSS 和 JavaScript 代码放在外部文件中，并使用 <link> 和 <script> 标签引入。
  10. 验证代码: 使用 W3C 验证器 (https://validator.w3.org/) 检查 HTML 代码的语法和结构是否正确。

二、HTML5 语法知识点 & 案例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5 代码示例</title>
  <link rel="stylesheet" href="styles.css"> <!-- 引入外部 CSS 文件 -->
</head>
<body>

  <!-- 页眉 -->
  <header>
    <h1>网站标题</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>
      <article>
        <p>这是一段文章内容。</p>
        <img src="image.jpg" alt="图片描述"> <!-- 图片 -->
        <a href="#">阅读更多</a>
      </article>
    </section>

    <aside>
      <h3>侧边栏标题</h3>
      <p>侧边栏内容...</p>
    </aside>
  </main>

  <!-- 页脚 -->
  <footer>
    <p>&copy; 2023 版权所有</p>
  </footer>

  <script src="scripts.js"></script> <!-- 引入外部 JavaScript 文件 -->
</body>
</html>

三、代码注释说明

  1. <!DOCTYPE html>: 声明文档类型为 HTML5。
  2. <html lang="zh-CN">: 定义 HTML 文档的根元素，并指定语言为中文。
  3. <head>: 包含文档的元数据，例如字符编码、标题、样式表链接等。
  4. <meta charset="UTF-8">: 指定文档字符编码为 UTF-8。
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">: 设置视口宽度为设备宽度，初始缩放比例为 1.0，用于移动端页面适配。
  6. <title>: 定义文档标题，显示在浏览器标签页上。
  7. <link rel="stylesheet" href="styles.css">: 引入外部 CSS 样式表文件。
  8. <body>: 包含文档的主体内容。
  9. <header>: 定义页眉，通常包含网站标题、导航栏等。
  10. <nav>: 定义导航栏。
  11. <ul> 和 <li>: 创建无序列表和列表项。
  12. <a href="#">: 创建超链接，# 表示链接到当前页面。
  13. <main>: 定义文档的主体内容。
  14. <section>: 定义文档中的一个章节或部分。
  15. <article>: 定义一篇独立的文章或内容块。
  16. <p>: 定义段落。
  17. <img src="image.jpg" alt="图片描述">: 插入图片，src 属性指定图片路径，alt 属性提供图片的替代文本。
  18. <aside>: 定义侧边栏内容。
  19. <footer>: 定义页脚，通常包含版权信息、联系方式等。
  20. <script src="scripts.js"></script>: 引入外部 JavaScript 文件。

四、其他 HTML5 语法知识点

  • 表单元素: <form>, <input>, <textarea>, <select>, <button> 等。
  • 多媒体元素: <audio>, <video>, <canvas> 等。
  • 表格元素: <table>, <tr>, <th>, <td> 等。
  • 语义化文本元素: <strong>, <em>, <mark>, <time> 等。

五、学习资源

六、总结

遵循 HTML5 代码编写规范和使用语义化标签可以创建结构清晰、易于维护的网页。通过不断练习和参考学习资源，你将能够熟练掌握 HTML5 的语法和技巧，构建出功能强大、用户体验良好的网站。

以下是一些实际开发中常见的 HTML5 案例，涵盖了不同的应用场景，并附有详细注释。

案例 1：响应式导航栏

这是一个常见的响应式导航栏，适合移动端和桌面端。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式导航栏</title>
  <style>
    /* 基础样式 */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    nav {
      background-color: #333;
      color: white;
      padding: 10px;
    }
    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: space-around;
    }
    nav ul li a {
      color: white;
      text-decoration: none;
    }
    /* 移动端样式 */
    @media (max-width: 600px) {
      nav ul {
        flex-direction: column;
        align-items: center;
      }
    }
  </style>
</head>
<body>
  <!-- 导航栏 -->
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">服务</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>

  <main>
    <h1>欢迎来到我们的网站</h1>
    <p>这是一个响应式导航栏的示例。</p>
  </main>
</body>
</html>

代码说明：

  1. 使用 <nav> 标签定义导航栏。
  2. 使用 <ul> 和 <li> 创建导航菜单。
  3. 使用 CSS Flexbox 实现导航栏的布局。
  4. 使用媒体查询 (@media) 实现移动端的响应式布局。

案例 2：注册表单

这是一个常见的用户注册表单，包含输入框、下拉菜单、单选按钮和提交按钮。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>注册表单</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    form {
      max-width: 400px;
      margin: 0 auto;
    }
    label {
      display: block;
      margin-top: 10px;
    }
    input, select, button {
      width: 100%;
      padding: 8px;
      margin-top: 5px;
    }
    button {
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
    }
    button:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <h1>用户注册</h1>
  <form action="/submit" method="POST">
    <!-- 用户名 -->
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username" required>

    <!-- 密码 -->
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>

    <!-- 邮箱 -->
    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email" required>

    <!-- 性别 -->
    <label>性别:</label>
    <label><input type="radio" name="gender" value="male" required> 男</label>
    <label><input type="radio" name="gender" value="female"> 女</label>

    <!-- 城市 -->
    <label for="city">城市:</label>
    <select id="city" name="city">
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
      <option value="guangzhou">广州</option>
    </select>

    <!-- 提交按钮 -->
    <button type="submit">注册</button>
  </form>
</body>
</html>

代码说明：

  1. 使用 <form> 标签创建表单，action 属性指定表单提交的地址，method 属性指定提交方法（POST 或 GET）。
  2. 使用 <label> 标签关联输入框，提高可访问性。
  3. 使用 <input> 标签创建文本输入框、密码输入框、邮箱输入框和单选按钮。
  4. 使用 <select> 和 <option> 创建下拉菜单。
  5. 使用 <button> 创建提交按钮。

案例 3：图片画廊

这是一个简单的图片画廊，使用 <figure> 和 <figcaption> 标签。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片画廊</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    .gallery {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .gallery figure {
      margin: 0;
      flex: 1 1 calc(33.333% - 10px);
      box-sizing: border-box;
    }
    .gallery img {
      width: 100%;
      height: auto;
      border-radius: 8px;
    }
    .gallery figcaption {
      text-align: center;
      margin-top: 5px;
    }
  </style>
</head>
<body>
  <h1>图片画廊</h1>
  <div class="gallery">
    <!-- 图片 1 -->
    <figure>
      <img src="image1.jpg" alt="图片 1">
      <figcaption>图片 1 描述</figcaption>
    </figure>
    <!-- 图片 2 -->
    <figure>
      <img src="image2.jpg" alt="图片 2">
      <figcaption>图片 2 描述</figcaption>
    </figure>
    <!-- 图片 3 -->
    <figure>
      <img src="image3.jpg" alt="图片 3">
      <figcaption>图片 3 描述</figcaption>
    </figure>
  </div>
</body>
</html>

代码说明：

  1. 使用 <figure> 和 <figcaption> 标签组合图片和描述。
  2. 使用 CSS Flexbox 实现图片的网格布局。
  3. 使用 gap 属性设置图片之间的间距。
  4. 使用 border-radius 属性为图片添加圆角效果。

案例 4：视频播放器

使用 HTML5 的 <video> 标签嵌入视频。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>视频播放器</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    video {
      width: 100%;
      max-width: 800px;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <h1>视频播放器</h1>
  <video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    您的浏览器不支持视频播放。
  </video>
</body>
</html>

代码说明：

  1. 使用 <video> 标签嵌入视频，controls 属性显示播放控件。
  2. 使用 <source> 标签提供多个视频格式，确保浏览器兼容性。
  3. 如果浏览器不支持 <video> 标签，会显示备用文本。

案例 5：地图嵌入

使用 <iframe> 嵌入 Google 地图。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>地图嵌入</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    iframe {
      width: 100%;
      height: 400px;
      border: none;
    }
  </style>
</head>
<body>
  <h1>地图嵌入示例</h1>
  <iframe
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.8354345093747!2d144.9537353153166!3d-37.81627974202105!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf577d2fed4b5b6c1!2sMelbourne%20VIC%2C%20Australia!5e0!3m2!1sen!2sus!4v1625060000000!5m2!1sen!2sus"
    allowfullscreen=""
    loading="lazy">
  </iframe>
</body>
</html>

代码说明：

  1. 使用 <iframe> 标签嵌入外部内容（如 Google 地图）。
  2. 使用 src 属性指定地图的 URL。
  3. 使用 allowfullscreen 属性允许全屏显示。

这些案例涵盖了 HTML5 的常见应用场景，适合初学者学习和参考。

Java学习教程，从入门到精通，JDBC事务语法知识点及案例代码（96）
qq_45746668的博客
01-20 841
事务是数据库操作中的一组逻辑单元，它具有以下四个特性，即ACID特性： - **原子性（Atomicity）**：事务中的所有操作要么全部成功，要么全部失败，不会出现部分成功的情况。 - **一致性（Consistency）**：事务执行前后，数据库从一个一致的状态转换到另一个一致的状态。 - **隔离性（Isolation）**：并发执行的事务之间相互隔离，一个事务的执行不会影响其他事务。 - **持久性（Durability）**：事务一旦提交，其对数据库的改变就是永久性的，即使系统出现故障也不会丢失。
HTML5从入门到精通（第一版）
07-29
作者: 万姆朋(Faithe Wempen) [ 中文 pdf ] 《HTML5从入门到精通》采用经典的Step by Step风格，一次呈现一个知识点，一次提供一个步骤式的动手练习，旨在帮助新手快速入门。《HTML5从入门到精通》特别针对初学者，在每一章设计有相应的练习和重要知识点回顾，以帮助他们学以致用，迅速掌握HTML5。 目录
HTML5从入门到精通，零基础学员必看
dbfgefai009910的博客
02-04 347
学习html5从入门到精通，零基础新手也能看懂，无论你是唱歌，画画的艺术生，还是学习机械专业的工科生，或者大学读的文学学科。先了解HTML5可以实现的功能有哪儿些？ 1. HTML5可以同时在多种设备上运行，这一点是其他方式都无法做到的； 2. 在互联网中随意被分享，并且搜索时可以及时被找到；有搜索扩展性。 3. HTML5应用可以使用交互式设计来提供最佳体验，而不需要更改代...
HTML学习笔记
最新发布
2301_80155689的博客
04-22 1570
dl > < dt > 术语 </ dt > < dd > 定义内容 </ dd > </ dl >< dl > < dt > 术语 </ dt > < dd > 定义内容 </ dd > </ dl ></< dl > < dt > 术语 </ dt > < dd > 定义内容 </ dd > </ dl >< dl > < dt > 术语 </ dt > < dd > 定义内容 </ dd > </ dl ></
【html5基础】HTML5 知识点
kongjiea笔记
08-16 1858
HTML5 知识点   (1)语义化标记       ,,,,,,,,,,   (2)表单增强       ①新的INPUT类型: color, email, date, month, week, time, datetime, datetime-local, number, range, search, tel, url     ②新属性:
HTML5 入门详解
weixin_34245169的博客
11-22 529
1. 认识HTML5 HTML5并不仅仅只是作为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。 HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一系列Javascript API，如地理定位、重...
HTML5基本知识点
weixin_30532369的博客
08-06 349
一、什么是HTML HTML是超文本标签语言，即网页的源码。而浏览器就是翻译解释HTML源码的工具。 二、HTML的基本格式 &lt;!DOCTYPE html&gt;： ①文档类型声明：让浏览器按照HTML5的标准对代码进行解释与执行。②文档类型声明必不可少，而且，必须放在文档的最上方，前面不可有任何一行代码。③如果不写文档类型声明，浏览器会按照兼容模式运行，可能会...
HTML5从入门到精通
qq_33274797的博客
01-14 583
1.HTML的基本概念 WWW(World Wide Web 万维网)是一种建立在Internet上的、全球性、交互的、多平台的、分布式信息资源网 络。 WWW有3个基本组成部分,是URL(统一资源定位器)、HTTP(超文本传输协议)和HTML(超文本标识语言)。 1.URL(Uniform Resource Locator)提供在Web上进入资源的统一方式和路劲。 2.HTTP(Hyper Text Transfer Protocol)超文本传输协议是一种网络上传输数据的协议。 3.HTML
PHP从入门到精通_html+CSS笔记.rar_8V4_PHP从入门到精通 学习文档_php 学习
09-24
【PHP从入门到精通_html+CSS笔记.rar_8V4_PHP从入门到精通 学习文档_php 学习】 这份压缩包文件包含了两份重要的学习资料，旨在帮助初学者掌握PHP编程语言及其与HTML和CSS的结合应用。PHP是一种广泛使用的服务器端...
Vue.js 教程、《HTML5从入门到精通》中文学习教程、CSS权威指南（第三版）(jb51.net)三本书扫描版
01-11
《HTML5从入门到精通》可能包含以下内容： 1. 新增元素：如、、、、等，用于更好地组织文档结构。 2. 表单控制：新增的表单元素和属性，如、，以及autofocus、required等属性。 3. Canvas与SVG：提供图形绘制能力...
C#语言教程从初级入门到精通附100案例源码.zip
11-24
《C#语言教程：从初级入门到精通，附100个案例源码》是一本全面介绍C#编程语言的教程书籍。本书不仅涵盖了C#的基础知识，还通过丰富的案例和实践项目，帮助读者深入理解并掌握C#的各种特性和应用。 本书分为多个...
html5从入门到精通
05-22
html5从入门到精通 学习教程 电子书 PDF,html的入门教程 PDF
《HTML 5从入门到精通》.(Faithe Wempen)
12-25
《微软技术丛书：HTML 5从入门到精通》旨在介绍HTML5的基础知识，沿用经典的STEP BY STEP风格，一次介绍一个知识点，并通过练习来加以巩固。这本实用教程提供了清楚的指导和动手实例，有利于读者使用HTML5的核心特性。 　　全书共三部分17章，主题涉及HTML5的基础知识，级联样式表和图片，页面布局和导航。《微软技术丛书：HTML 5从入门到精通》特别针对初学者，在每一章设计有相应的练习和重要知识点回顾，以帮助他们学以致用，迅速掌握HTML5。
HTML 5 从入门到精通 高清PDF版
03-11
HTML 5 从入门到精通 高清PDF版
Java学习教程，从入门到精通，Java Queue 接口的语法知识点及案例代码（59）
qq_45746668的博客
12-14 708
Queue 是 Java 集合框架中用于实现队列数据结构的接口，它继承自 `java.util.Collection` 接口。队列是一种先进先出（FIFO, First-In-First-Out）的数据结构，元素按照插入的顺序依次出队。
html从入门到精通pdf,HTML5从入门到精通
weixin_32778881的博客
06-18 640
HTML5从入门到精通是一款非常高深的运动，是一门标记语言。对于想要学习这方面的朋友们来说，值得一看，因为里面有具体的案例，讲解的很详细，可以为你解难答疑。欢迎前来东坡下载。HTML5从入门到精通简介《HTML5从入门到精通》系统、全面地讲解了HTML语言及其最新版本HTML5的新功能与新特性，技术新颖实用。书中所有知识点均结合实例进行讲解，方便读者动手实践。同时在每章的最后还设置了习题，通过这些...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值