HTML迷你编程课程：从入门到实践

无声远望

于 2024-08-25 13:29:14 发布

阅读量817

点赞数 12

本文链接：https://blog.csdn.net/weixin_35757531/article/details/141566274

版权

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

简介：“alastochkinheroku.github.io:编程迷你课程”提供了系列HTML迷你课程，涵盖HTML基础知识，包括标签结构、元素用法和网页创建。课程重点介绍 <html> 、 <head> 、 <body> 等基本标签，以及 <title> 、 <h1> 、 <p> 、 <a> 等内容元素。此外，还将学习 <img> 、 <div> 、 <span> 等布局元素，以及表格、列表和表单的创建。课程通过“alastochkinheroku.github.io-master”压缩包提供实践机会，鼓励动手操作，巩固概念，培养解决问题的能力。 alastochkinheroku.github.io:编程迷你课程

1. HTML 简介

HTML（超文本标记语言）是一种用于创建网页的标准化标记语言。它定义了网页的结构、外观和行为。HTML 文档由一系列标记组成，这些标记用于描述网页的各个部分，例如标题、段落、链接和图像。

HTML 是一个相对简单的语言，即使对于初学者来说也是如此。它使用易于理解的语法，并且有许多资源可用于帮助您学习。 HTML 也是一种非常灵活的语言，可以用来创建各种各样的网页，从简单的文本页面到复杂的交互式应用程序。

2. HTML 基本标签结构

HTML 文档的基本结构由三个主要标签组成： <html> 、 <head> 和 <body> 。这些标签定义了文档的整体结构，并提供了有关文档内容和元数据的信息。

2.1 文档结构标签

2.1.1 `<html>` 、 `<head>` 和 `<body>`

<html> 标签是 HTML 文档的根元素，它包含整个文档的内容。 <head> 标签包含有关文档的元数据，例如标题、作者和关键字。 <body> 标签包含文档的实际内容，例如文本、图像和链接。

<!DOCTYPE html>
<html>
<head>
  <title>HTML 文档</title>
  <meta name="author" content="John Doe">
</head>
<body>
  <h1>欢迎来到 HTML 世界！</h1>
  <p>这是一个简单的 HTML 文档示例。</p>
</body>
</html>

2.1.2 `<title>` 和 `<meta>`

<title> 标签定义文档的标题，它将在浏览器的标题栏中显示。 <meta> 标签提供有关文档的元数据，例如作者、描述和关键字。

<head>
  <title>HTML 文档</title>
  <meta name="author" content="John Doe">
  <meta name="description" content="这是一个简单的 HTML 文档示例">
  <meta name="keywords" content="HTML, 文档, 示例">
</head>

2.2 标题标签

标题标签用于创建文档中的标题，它们从 <h1> 到 <h6> 分为六个级别，其中 <h1> 表示最重要的标题， <h6> 表示最不重要的标题。

2.2.1 `<h1>` 到 `<h6>`

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2.2.2 标题属性

标题标签可以设置以下属性：

align : 指定标题的对齐方式，例如 left 、 center 或 right 。
style : 设置标题的样式，例如字体、大小和颜色。

<h1 align="center" style="color: red">一级标题</h1>

2.3 段落标签

段落标签 <p> 用于创建文档中的段落。

2.3.1 `<p>`

<p>这是一个段落。</p>

2.3.2 段落属性

段落标签可以设置以下属性：

align : 指定段落的对齐方式，例如 left 、 center 或 right 。
style : 设置段落的样式，例如字体、大小和颜色。

<p align="center" style="font-size: 16px">这是一个居中的段落。</p>

3. HTML 内容元素

HTML 内容元素用于在网页中显示文本、链接和图像等内容。这些元素提供了多种方式来格式化和组织内容，从而创建用户友好的界面。

3.1 文本元素

文本元素用于在网页中显示文本内容。最常见的文本元素是 <span> 和 <div> 。

3.1.1 `<span>` 和 `<div>`

<span> 元素用于对文本进行内联样式，而 <div> 元素用于创建块级元素。

<span> 元素： <span> 元素是一个内联元素，用于对文本应用样式，例如字体、颜色和背景色。它不会创建新的块级元素，因此文本将继续位于同一行。

<p>
  <span style="color: red;">红色文本</span>
  <span style="background-color: yellow;">黄色背景</span>
</p>

<div> 元素： <div> 元素是一个块级元素，用于创建新的块级元素。它会创建新的行，并且文本将位于该元素的内部。

<div style="border: 1px solid black;">
  <p>带边框的文本</p>
</div>

3.1.2 强调和加粗标签

HTML 提供了强调和加粗标签来突出显示文本。

<strong> 元素： <strong> 元素用于加粗文本。

<strong>重要文本</strong>

<em> 元素： <em> 元素用于斜体显示文本。

<em>强调文本</em>

3.2 链接元素

链接元素用于在网页中创建超链接。最常见的链接元素是 <a> 。

3.2.1 `<a>`

<a> 元素用于创建指向其他网页或文档的超链接。

<a href="https://www.example.com">Example Website</a>

3.2.2 链接属性

<a> 元素有几个属性可以用来控制链接的行为：

href 属性： href 属性指定链接的目标 URL。
target 属性： target 属性指定链接在哪个窗口或框架中打开。
title 属性： title 属性指定链接的工具提示文本。

3.3 图像元素

图像元素用于在网页中显示图像。最常见的图像元素是 <img> 。

3.3.1 `<img>`

<img> 元素用于在网页中嵌入图像。

<img src="image.jpg" alt="Image Description">

3.3.2 图像属性

<img> 元素有几个属性可以用来控制图像的行为：

src 属性： src 属性指定图像的 URL。
alt 属性： alt 属性指定图像的替代文本，当图像无法显示时显示。
width 和 height 属性： width 和 height 属性指定图像的宽度和高度。

4. HTML 布局元素

HTML 布局元素用于控制网页中元素的排列和布局。它们可以分为块级元素和行内元素。

4.1 块级元素

块级元素在网页中占据整个水平空间，从一行开始，到另一行结束。它们可以包含其他块级元素或行内元素。

4.1.1

和

<div> 元素是一个通用块级容器，用于将相关内容分组。 <p> 元素表示一个段落，它包含文本和换行符。

4.1.2 块级元素属性

块级元素具有以下属性：

width : 设置元素的宽度。
height : 设置元素的高度。
margin : 设置元素周围的空白区域。
padding : 设置元素内容周围的空白区域。
border : 设置元素的边框。

4.2 行内元素

行内元素在网页中占据文本行内空间，不会换行。它们通常用于文本、链接和图像。

4.2.1 和

<span> 元素是一个通用行内容器，用于将相关文本分组。 <a> 元素表示一个超链接，它包含文本和链接地址。

4.2.2 行内元素属性

行内元素具有以下属性：

font-size : 设置元素中文本的大小。
font-weight : 设置元素中文本的粗细。
color : 设置元素中文本的颜色。
background-color : 设置元素的背景颜色。
text-decoration : 设置元素中文本的装饰，例如下划线或删除线。

4.3 表格元素

表格元素用于在网页中创建表格。表格由行和列组成，可以包含文本、数字和图像。

4.3.1

<table> 元素表示一个表格， <tr> 元素表示表格中的行。

4.3.2 表格属性

表格元素具有以下属性：

border : 设置表格的边框。
cellspacing : 设置表格单元格之间的间距。
cellpadding : 设置表格单元格内内容与边框之间的间距。
width : 设置表格的宽度。
height : 设置表格的高度。

示例：

以下代码创建一个带有标题和内容的简单表格：

<table>
  <caption>我的表格</caption>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>职业</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>30</td>
    <td>软件工程师</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>25</td>
    <td>设计师</td>
  </tr>
</table>

代码逻辑分析：

<table> 元素创建了一个表格。
<caption> 元素设置了表格的标题。
<tr> 元素创建了表格中的行。
<th> 元素创建了表格中的标题单元格。
<td> 元素创建了表格中的数据单元格。

5. HTML 表格创建

HTML 表格是用于在网页中组织和显示数据的强大工具。它们允许您创建具有行和列结构的数据集，并使用各种样式选项来增强其可读性和可访问性。在本节中，我们将深入探讨 HTML 表格的创建，包括其结构、数据和样式。

5.1 表格结构

HTML 表格由以下主要元素组成：

<caption> ：表示表格的标题或标题。
<thead> ：表示表格的表头，通常包含列标题。
<tbody> ：表示表格的主体，包含实际数据。
<tfoot> ：表示表格的页脚，通常包含汇总信息或说明。

<table>
  <caption>客户信息</caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>电子邮件</th>
      <th>电话号码</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>约翰·史密斯</td>
      <td>john.smith@example.com</td>
      <td>555-123-4567</td>
    </tr>
    <tr>
      <td>玛丽·琼斯</td>
      <td>mary.jones@example.com</td>
      <td>555-234-5678</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">共 2 条记录</td>
    </tr>
  </tfoot>
</table>

5.2 表格数据

表格数据包含在 <tr> （行）和 <td> （单元格）元素中。每个 <tr> 元素代表一行数据，而 <td> 元素代表该行中的一个单元格。

<tr>
  <td>约翰·史密斯</td>
  <td>john.smith@example.com</td>
  <td>555-123-4567</td>
</tr>

表格数据可以包含文本、数字、图像或其他 HTML 元素。

5.3 表格样式

HTML 表格可以使用 CSS 样式进行样式化，以增强其可读性和可访问性。常见的样式选项包括：

边框和间距： 使用 border 和 padding 属性控制表格的边框和单元格间距。
对齐： 使用 text-align 属性对齐表格中的文本。
颜色： 使用 color 和 background-color 属性更改表格文本和背景的颜色。

table {
  border: 1px solid black;
  border-collapse: collapse;
}

th {
  background-color: #f2f2f2;
  padding: 5px;
}

td {
  padding: 5px;
}

通过使用这些样式选项，您可以创建清晰、易于阅读且可访问的 HTML 表格。

6. HTML 列表创建

6.1 无序列表

6.1.1

无序列表使用 <ul> 标签创建，其中每个列表项使用 <li> 标签表示。

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

输出：

项目 1
项目 2
项目 3

6.1.2 无序列表属性

无序列表可以设置以下属性：

| 属性 | 描述 | |---|---| | type | 指定列表项标记的类型（圆点、方块或数字） | | style | 设置列表的样式（如列表项之间的间距） |

<ul type="square">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>

输出：

项目 1
项目 2
项目 3

6.2 有序列表

6.2.1

有序列表使用 <ol> 标签创建，其中每个列表项使用 <li> 标签表示。

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

输出：

项目 1
项目 2
项目 3

6.2.2 有序列表属性

有序列表可以设置以下属性：

| 属性 | 描述 | |---|---| | type | 指定列表项标记的类型（数字、罗马数字或字母） | | start | 指定列表的起始编号 |

<ol type="A" start="2">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ol>

输出：

A. 项目 1 B. 项目 2 C. 项目 3

6.3 定义列表

6.3.1

和

定义列表使用 <dl> 标签创建，其中术语使用 <dt> 标签表示，而定义使用 <dd> 标签表示。

<dl>
  <dt>术语 1</dt>
  <dd>定义 1</dd>
  <dt>术语 2</dt>
  <dd>定义 2</dd>
  <dt>术语 3</dt>
  <dd>定义 3</dd>
</dl>

输出：

术语 1 : 定义 1

术语 2 : 定义 2

术语 3 : 定义 3

6.3.2 定义列表属性

定义列表可以设置以下属性：

| 属性 | 描述 | |---|---| | compact | 使定义列表更紧凑 |

<dl compact>
  <dt>术语 1</dt>
  <dd>定义 1</dd>
  <dt>术语 2</dt>
  <dd>定义 2</dd>
  <dt>术语 3</dt>
  <dd>定义 3</dd>
</dl>

输出：

术语 1 定义 1 术语 2 定义 2 术语 3 定义 3

7. HTML 表单创建

7.1 表单元素

7.1.1 `<form>、<input> 和 <button>`

<form> 元素定义表单，它包含 <input> 和 <button> 等表单元素。 <input> 元素用于创建输入字段，而 <button> 元素用于创建按钮。

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

7.1.2 表单元素属性

表单元素具有各种属性，用于控制其行为和外观：

<form> 属性：
action ：指定表单提交后数据发送到的 URL。
method ：指定用于提交数据的 HTTP 方法（GET 或 POST）。
<input> 属性：
type ：指定输入字段的类型（文本、密码、复选框等）。
name ：指定字段的名称，用于标识提交的数据。
value ：指定字段的初始值。
<button> 属性：
type ：指定按钮的类型（提交、重置等）。
value ：指定按钮的文本。

7.2 表单验证

7.2.1 `required` 和 `pattern`

HTML5 引入了 required 和 pattern 属性，用于验证表单输入。 required 属性强制用户输入值，而 pattern 属性指定输入值必须匹配的正则表达式。

<form>
  <input type="text" name="name" required>
  <input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
  <input type="submit" value="提交">
</form>

7.2.2 验证错误处理

当表单验证失败时，浏览器会显示默认错误消息。可以使用 JavaScript 或 CSS 自定义错误消息和处理。

const form = document.querySelector('form');

form.addEventListener('submit', (event) => {
  if (!form.checkValidity()) {
    event.preventDefault();
    alert('请更正错误！');
  }
});

7.3 表单提交

7.3.1 `action` 和 `method`

action 属性指定表单提交后数据发送到的 URL。 method 属性指定用于提交数据的 HTTP 方法。

GET 方法： 将数据作为 URL 查询字符串发送。
POST 方法： 将数据作为 HTTP 请求正文发送。

7.3.2 表单数据处理

服务器端脚本（如 PHP 或 Node.js）处理提交的表单数据。数据可以存储在数据库中、发送电子邮件或执行其他操作。

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $name = $_POST['name'];
  $email = $_POST['email'];

  // 处理数据并存储在数据库中
}
?>

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

无声远望

关注

12
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

HTML迷你编程课程：从入门到实践

1. HTML 简介

2. HTML 基本标签结构

2.1 文档结构标签

2.1.1 <html> 、 <head> 和 <body>

2.1.2 <title> 和 <meta>

2.2 标题标签

2.2.1 <h1> 到 <h6>

2.2.2 标题属性

2.3 段落标签

2.3.1 <p>

2.3.2 段落属性

3. HTML 内容元素

3.1 文本元素

3.1.1 <span> 和 <div>

3.1.2 强调和加粗标签

3.2 链接元素

3.2.1 <a>

3.2.2 链接属性

3.3 图像元素

3.3.1 <img>

3.3.2 图像属性

4. HTML 布局元素

4.1 块级元素

4.1.1

4.1.2 块级元素属性

4.2 行内元素

4.2.1 和

4.2.2 行内元素属性

4.3 表格元素

4.3.1

4.3.2 表格属性

5. HTML 表格创建

5.1 表格结构

5.2 表格数据

5.3 表格样式

6. HTML 列表创建

6.1 无序列表

6.1.1

6.1.2 无序列表属性

6.2 有序列表

6.2.1

6.2.2 有序列表属性

6.3 定义列表

6.3.1

6.3.2 定义列表属性

7. HTML 表单创建

7.1 表单元素

7.1.1 <form>、<input> 和 <button>

7.1.2 表单元素属性

7.2 表单验证

7.2.1 required 和 pattern

7.2.2 验证错误处理

7.3 表单提交

7.3.1 action 和 method

7.3.2 表单数据处理

2.1.1 `<html>` 、 `<head>` 和 `<body>`

2.1.2 `<title>` 和 `<meta>`

2.2.1 `<h1>` 到 `<h6>`

2.3.1 `<p>`

3.1.1 `<span>` 和 `<div>`

3.2.1 `<a>`

3.3.1 `<img>`

7.1.1 `<form>、<input> 和 <button>`

7.2.1 `required` 和 `pattern`

7.3.1 `action` 和 `method`