为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 HTML7入门：新手必学的HTML基础教程

HTML7入门：新手必学的HTML基础教程

标签：
Html/CSS
概述

本文介绍了HTML7的基本结构和新特性，包括新的语义化元素、增强的多媒体和表单功能，以及对无障碍访问的支持。HTML7入门内容涵盖了从基础标签到复杂语义化标签的应用，帮助开发者构建更高效和语义化的网页。此外，文章还提供了详细的代码示例和编码规范，确保读者能够轻松上手。HTML7入门不仅提升了网页的可访问性，还增强了整体用户体验。

HTML7简介

什么是HTML7

HTML7是一种超文本标记语言的最新版本，用于描述网页内容的结构和语义。与HTML5相比，HTML7引入了一些新的元素和属性，使网页开发更加灵活、高效和语义化。HTML7主要改进了元素的语义化表现，提升了网页的可访问性，增强了多媒体和表单功能。

HTML7的基本结构

HTML7文档的基本结构如下：

<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
</head>
<body>
    <h1>主标题</h1>
    <p>这里是正文内容。</p>
</body>
</html>
  • <!DOCTYPE html> 声明文档类型为HTML7。
  • <html> 标签是HTML文档的根元素。
  • <head> 标签包含文档的元数据，如标题、字符集声明等。
  • <body> 标签包含页面可见的内容。

HTML7与HTML5的区别

HTML7与HTML5相比，引入了一些新的元素和属性，例如：

  • 新的语义化元素，如<article>、<section>、<aside>等，增强了网页内容的结构性。
  • 增强了多媒体和表单功能，引入了更多表单输入类型，如<input type="date">、<input type="range">等。
  • 改进了对无障碍访问的支持，使网页更易于被辅助技术如屏幕阅读器识别。

示例代码：

<!-- HTML5 -->
<!DOCTYPE html>
<html>
<head>
  <title>HTML5网页标题</title>
</head>
<body>
  <h1>主标题</h1>
  <p>这里是正文内容。</p>
</body>
</html>

<!-- HTML7 -->
<!DOCTYPE html>
<html>
<head>
  <title>HTML7网页标题</title>
</head>
<body>
  <article>
    <h1>文章标题</h1>
    <p>这是文章正文。</p>
  </article>
</body>
</html>
``

### HTML7的基本标签

#### 文本标签
文本标签用于定义不同类型的文字，如标题、段落等。

- `<h1>` 到 `<h6>` 用于定义标题，`<h1>` 表示最重要的标题，`<h6>` 表示最次要的标题。
- `<p>` 用于定义一个段落。
- `<strong>` 用于定义重要文本，显示为粗体。
- `<em>` 用于定义强调文本，显示为斜体。

示例代码：

```html
<h1>主标题</h1>
<h2>副标题</h2>
<p>这是一个段落，它可以包含 <strong>重要文本</strong> 和 <em>强调文本</em>。</p>

链接标签

链接标签 <a> 用于创建指向其他页面或资源的链接。

<a href="https://www.example.com">链接到示例网站</a>

图像标签

图像标签 <img> 用于在页面中插入图片。

<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://example.com/image.jpg" alt="描述图片的内容">

列表标签

列表标签用于创建有序或无序的列表。

  • 无序列表 <ul> 和列表项 <li>:

    <ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>

  • 有序列表 <ol> 和列表项 <li>:

    <ol>
<li>步骤1</li>
<li>步骤2</li>
<li>步骤3</li>
</ol>

表格标签

表格标签 <table> 用于创建表格，通常与 <tr>（表格行）、 <td>（表格单元格）和 <th>（表头单元格）标签一起使用。

<table>
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
    </tr>
    <tr>
      <td>数据3</td>
      <td>数据4</td>
    </tr>
  </tbody>
</table>

HTML7的结构元素

头部标签（<head>）

头部标签 <head> 包含文档的元数据，如<title>、<meta> 和 <link> 等。

示例代码：

<head>
  <title>网页标题</title>
  <meta charset="UTF-8">
  <meta name="description" content="这是网页描述">
  <link rel="stylesheet" href="styles.css">
</head>

主体标签（<body>）

主体标签 <body> 包含页面的所有可见内容，如文本、图像、表格等。

<body>
  <h1>主标题</h1>
  <p>这是正文内容。</p>
  <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://example.com/image.jpg" alt="描述图片的内容">
</body>

文档类型声明

文档类型声明 <!DOCTYPE> 声明文档类型，通常为 HTML7。

<!DOCTYPE html>

元数据标签（<meta>）

元数据标签 <meta> 用于描述文档的元数据，比如字符编码、描述、关键字等。

示例代码：

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="这是网页描述">
<meta name="keywords" content="关键词1, 关键词2, 关键词3">

HTML7的语义化标签

半结构化标签（<article>, <section>, <aside>）

语义化标签可以更好地描述页面内容。

  • <article> 表示独立的内容区块，可以独立存在。
  • <section> 表示页面中的一个主要部分。
  • <aside> 表示与文章主体内容相关的补充信息。

示例代码：

<article>
  <h1>文章标题</h1>
  <p>这是文章正文。</p>
</article>

<section>
  <h2>部分标题</h2>
  <p>这是部分的内容。</p>
</section>

<aside>
  <h3>相关链接</h3>
  <ul>
    <li><a href="https://example.com">链接1</a></li>
    <li><a href="https://example.com">链接2</a></li>
  </ul>
</aside>

导航标签（<nav>, <header>, <footer>）

导航标签用来定义页面导航和布局。

  • <nav> 表示导航区域。
  • <header> 表示页眉。
  • <footer> 表示页脚。

示例代码：

<header>
  <h1>网站标题</h1>
  <p>这是网站的描述。</p>
</header>

<nav>
  <ul>
    <li><a href="https://example.com">首页</a></li>
    <li><a href="https://example.com/about">关于我们</a></li>
    <li><a href="https://example.com/contact">联系我们</a></li>
  </ul>
</nav>

<footer>
  <p>版权所有 &copy; 2023</p>
</footer>

页眉和页脚标签

页眉和页脚标签 <header> 和 <footer> 通常用于定义页面的顶部和底部部分。

<header>
  <h1>网站标题</h1>
  <p>这是网站的描述。</p>
</header>

<footer>
  <p>版权所有 &copy; 2023</p>
</footer>

HTML7的表单元素

输入类型标签（<input>）

输入标签 <input> 用于创建各种输入控件，如文本框、复选框、单选按钮等。

示例代码：

<form>
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" required>

  <label for="email">电子邮件:</label>
  <input type="email" id="email" name="email" required>

  <input type="submit" value="提交">
</form>

文本区域标签（<textarea>）

文本区域标签 <textarea> 用于创建多行文本输入框。

<form>
  <label for="message">留言:</label>
  <textarea id="message" name="message" rows="4" cols="50"></textarea>

  <input type="submit" value="提交留言">
</form>

下拉菜单标签（<select>）

下拉菜单标签 <select> 用于创建下拉菜单，其中包含多个选项。

<form>
  <label for="country">国家:</label>
  <select id="country" name="country">
    <option value="china">中国</option>
    <option value="usa">美国</option>
    <option value="japan">日本</option>
  </select>
</form>

按钮标签（<button>）

按钮标签 <button> 用于创建按钮，点击后通常用于触发某个动作。

<form>
  <input type="submit" value="提交表单">
  <button type="button" onclick="alert('按钮被点击了')">点击按钮</button>
</form>

HTML7的注释和代码规范

注释的使用

注释可以帮助开发者理解和维护代码，HTML7中使用<!-- -->来定义注释。

示例代码：

<!-- 这是一个注释，不会在页面中显示 -->
<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
</head>
<body>
  <h1>主标题</h1>
  <p>这里是正文内容。</p>
</body>
</html>

常用的编码规范

编码规范有助于保持代码整洁、易读和易于维护。以下是一些常用的编码规范：

  • 使用小写字母书写标签和属性名称。
  • 在同一页面中使用相同的编码风格。
  • 使用缩进和空格来增强代码可读性。
  • 避免在同一个标签内使用多个属性，应每行一个属性。
  • 合理使用注释，解释复杂或重要的代码。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
</head>
<body>
  <h1>主标题</h1>
  <p>这里是正文内容。</p>

  <!-- 这是一个注释，描述了页面的主要部分 -->
  <section>
    <h2>副标题</h2>
    <p>这里是更详细的说明。</p>
  </section>
</body>
</html>

代码排版技巧

代码排版技巧包括使用适当的缩进和空格，使代码更易读。

  • 使用 tab 键或空格键进行缩进。
  • 每个标签和属性占用一行，避免拥挤。
  • 属性值用引号包围。
  • 使用注释来描述复杂的逻辑或结构。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
</head>
<body>
  <!-- 这是一个注释，描述了页面的结构 -->
  <header>
    <h1>网站标题</h1>
    <p>这是网站的描述。</p>
  </header>

  <nav>
    <ul>
      <li><a href="https://example.com">首页</a></li>
      <li><a href="https://example.com/about">关于我们</a></li>
      <li><a href="https://example.com/contact">联系我们</a></li>
    </ul>
  </nav>

  <section>
    <h2>部分标题</h2>
    <p>这是部分的内容。</p>
  </section>

  <aside>
    <h3>相关链接</h3>
    <ul>
      <li><a href="https://example.com">链接1</a></li>
      <li><a href="https://example.com">链接2</a></li>
    </ul>
  </aside>

  <footer>
    <p>版权所有 &copy; 2023</p>
  </footer>
</body>
</html>

通过以上内容，你应该已经掌握了HTML7的基础知识，包括结构、标签、语义化元素、表单元素和编码规范。如果你希望继续深入学习，可以访问慕课网，那里有许多高质量的课程和资源。

点击查看更多内容
发表于 2024.09.29 20:03， 共 185 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

胡说叔叔

手记
篇
粉丝
130
获赞与收藏
581

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消