HTML入门指南：基础标签与表单基础知识

一、HTML概述及其基础标签

1.1概述

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面 。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。

HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息------例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。

HTML的语言形式为尖括号包围的HTML元素（如），浏览器使用HTML标签和脚本来诠释网页内容，但不会将它们显示在页面上。

1.2 基础标签

1.2.1标题标签（<h1> - <h6>）

• 作用 ：用于定义网页中的标题，<h1> 是最高级别的标题，字体最大，<h6> 是最低级别的标题，字体最小。
• 特点：默认情况下，每个标题标签都会独占一行，并且会自动添加上下的 margin 间距，使标题之间有一定的间隔。
• 示例：

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>

1.2.2 注释标签（<!-- -->）

• 作用：用于在 HTML 代码中添加注释，注释的内容不会显示在网页上，主要是为了方便开发者阅读和理解代码。
• 示例：

<!-- 这是一个注释，说明下面是导航栏 -->
<nav>
    <!-- 导航栏内容 -->
</nav>

1.2.3 水平线标签（<hr>）

• 作用：用于在网页中创建一条水平线，通常用于分隔不同的内容区域。
• 特点 ：<hr> 是一个单标签，不需要闭合。在默认情况下，它会占据整个父元素的宽度，并显示为一条灰色的水平线。
• 示例：

<p>上面是一段内容</p>
<hr>
<p>下面是另一段内容</p>

1.2.4 字体标签（<font>）

• 作用 ：用于设置文本的字体、大小和颜色等样式。不过，在 HTML5 中，<font> 标签已经被废弃，建议使用 CSS 来设置文本样式。
• 属性 ：
  • size：设置字体的大小，取值范围是 1 到 7，也可以使用相对值，如 +1、-2 等。
  • color：设置字体的颜色，可以使用颜色名称（如 red、blue）或十六进制颜色值（如 #ff0000）。
  • face：设置字体的类型，如 Arial、宋体 等。
• 示例：

<font size="5" color="red" face="Arial">这是一段设置了样式的文本</font>

1.2.5 无序列表标签（<ul> 和 <li>）

• 作用：用于创建无序列表，列表项的前面会显示一个项目符号（通常是一个圆点）。
• 结构 ：<ul> 标签是无序列表的容器，<li> 标签用于定义列表中的每个列表项。
• 示例：

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

1.2.6 有序列表标签（<ol> 和 <li>）

• 作用：用于创建有序列表，列表项的前面会显示一个有序的编号（如 1、2、3 等）。
• 结构 ：<ol> 标签是有序列表的容器，<li> 标签用于定义列表中的每个列表项。
• 示例：

<ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

1.2.7 超链接标签（<a>）

• 作用：用于创建超链接，点击超链接可以跳转到其他网页或页面中的特定位置。
• 属性 ：
  • href：指定超链接的目标地址，可以是一个 URL 地址或页面内的锚点。
  • target：指定超链接的打开方式，如 _blank 表示在新窗口中打开链接。
• 示例：

<a href="https://www.example.com" target="_blank">点击跳转到示例网站</a>

1.2.8 段落标签（<p>）

• 作用：用于定义网页中的段落，每个段落会独占一行，并且会自动添加上下的 margin 间距，使段落之间有一定的间隔。
• 示例：

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

1.2.9 图像标签（<img>）

• 作用：用于在网页中插入图像。
• 属性 ：
  • src：指定图像的路径，可以是相对路径或绝对路径。
  • alt：指定图像的替代文本，当图像无法显示时，会显示该文本。
  • width 和 height：指定图像的宽度和高度，可以使用像素（px）或百分比（%）作为单位。
• 示例：

<img src="image.jpg" alt="这是一张图片" width="200" height="150">

以上这些基础标签是 HTML 中最常用的标签之一，掌握它们对于构建网页的基本结构和内容非常重要。

二、HTML 表单

在网页开发中，表单是实现用户与网页交互的重要元素，它允许用户输入数据并提交到服务器进行处理。下面将结合图片内容，详细介绍 HTML 表单的相关知识。

2.1 表单的基本结构

HTML 表单使用 <form> 标签来定义，其基本结构如下：

<form action="提交数据的URL" method="提交方法">
    <!-- 表单元素 -->
</form>

• action 属性：指定表单数据提交到的服务器端 URL。在图片中，action 属性的值为 "Django中的路由url"，这意味着表单数据将提交到 Django 框架中对应的路由所指向的处理程序。
• method 属性：指定表单数据的提交方法，常见的有 GET 和 POST 两种。GET 方法会将表单数据附加在 URL 后面，适合数据量较小且不敏感的情况；POST 方法则将数据放在请求体中，相对更安全，适合数据量较大或包含敏感信息的情况。图片中 method 属性值为空，实际使用时需要根据需求进行设置。

2.2 常见的表单元素

2.2.1文本输入框（Text Input）

使用 <input type="text"> 标签创建，用于接收用户输入的单行文本。例如：

用户名: <input type="text" name="username"><br>

• type="text"：指定输入框的类型为文本。
• name 属性：用于标识该输入框，在表单提交时，服务器端可以通过这个名称获取用户输入的值。

2.2.2密码输入框（Password Input）

使用 <input type="password"> 标签创建，用于接收用户输入的密码，输入的内容会以圆点或星号等形式隐藏。例如：

密码: <input type="password" name="password"><br>

2.2.3单选按钮（Radio Button）

使用 <input type="radio"> 标签创建，用于在多个选项中选择一个。同一组单选按钮需要具有相同的 name 属性值。例如：

性别: <input type="radio" name="gender">男 <input type="radio" name="gender">女<br>

2.2.4日期选择器（Date Input）

使用 <input type="date"> 标签创建，用于选择日期。例如：

出生年月日: <input type="date" name="birthday"><br>

2.2.5日期时间选择器（Datetime-local Input）

使用 <input type="datetime-local"> 标签创建，用于选择日期和时间。例如：

出生年月日-时分: <input type="datetime-local" name="birthday"><br>

2.2.6复选框（Checkbox）

使用 <input type="checkbox"> 标签创建，用于在多个选项中选择多个。例如：

兴趣爱好: <input type="checkbox" name="likes">篮球
          <input type="checkbox" name="likes">羽毛球
          <input type="checkbox" name="likes">乒乓球<br>

2.2.7下拉列表（Select List）

使用 <select> 和 <option> 标签创建，用于从预定义的选项中选择一个或多个。例如：

城市: <select name="city">
          <option>太原</option>
          <option>北京</option>
          <option>上海</option>
          <option>杭州</option>
      </select><br>

• <select> 标签：定义下拉列表。
• <option> 标签：定义下拉列表中的选项。

2.3 文件上传（File Input）

使用 <input type="file"> 标签创建，用于上传文件。例如：

头像: <input type="file" name="image"><br>

2.4 文本域（Textarea）

使用 <textarea> 标签创建，用于输入多行文本。例如：

简介: <textarea rows="10" cols="10"></textarea>

• rows 属性：指定文本域的行数。
• cols 属性：指定文本域的列数。

2.5 普通按钮（Button）

使用 <input type="button"> 标签创建，通常用于触发 JavaScript 函数等操作。例如：

<input type="button" value="提交button">

2.6 提交按钮（Submit Button）

使用 <input type="submit"> 标签创建，用于提交表单数据到服务器。例如：

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

• value 属性：指定按钮上显示的文本。

2.7 重置按钮 （Reset Button）

使用 <inout type="reset">标签创建，将填写的内容都重置为空。例如

<input type="reset" value="重置reset">

三、HTML 表格介绍

在网页设计中，表格也是用于组织和展示数据的重要工具用基本的<td>与<tr>来实现。

3.1 表格的基本结构

HTML 表格使用 <table> 标签来定义，其基本结构如下：

<table>
    <tr>
        <th>表头单元格内容</th>
        <th>表头单元格内容</th>
    </tr>
    <tr>
        <td>数据单元格内容</td>
        <td>数据单元格内容</td>
    </tr>
</table>

• <table> 标签：定义表格的整体框架。
• <tr> 标签：定义表格中的一行。
• <th> 标签：定义表头单元格，通常位于表格的第一行或第一列，用于描述数据的含义，默认情况下表头单元格中的内容会加粗显示。
• <td> 标签：定义数据单元格，用于存放表格中的实际数据内容。

3.2 表格的常见属性

3.2.1边框属性（border）

用于设置表格的边框宽度，单位为像素。例如：

<table border="1">
    <!-- 表格内容 -->
</table>

上述代码会创建一个边框宽度为 1 像素的表格。

3.2.2宽度和高度属性（width 和 height）

可以分别设置表格的宽度和高度，单位可以是像素或百分比。例如：

<table width="500" height="300">
    <!-- 表格内容 -->
</table>

此代码将表格的宽度设置为 500 像素，高度设置为 300 像素。

3.2.3单元格间距和单元格边距属性（cellspacing 和 cellpadding）

• cellspacing：用于设置单元格之间的间距。
• cellpadding：用于设置单元格内容与单元格边框之间的间距。
  例如：

<table cellspacing="5" cellpadding="10">
    <!-- 表格内容 -->
</table>

这里将单元格间距设置为 5 像素，单元格边距设置为 10 像素。

3.3 表格的合并单元格

3.3.1合并行（rowspan）

使用 rowspan 属性可以合并多个行单元格。例如：

<td rowspan="2">合并两行的单元格内容</td>

该代码表示当前单元格将合并下面一行的单元格，总共占据两行的高度。

3.3.2合并列（colspan）

使用 colspan 属性可以合并多个列单元格。例如：

<td colspan="2">合并两列的单元格内容</td>

此代码表示当前单元格将合并右侧一列的单元格，总共占据两列的宽度。要设计出合理的单元格要合理计算高度，否则就会出现奇奇怪怪的表格形状。