HTML基本标签使用【超链接标签、表格标签、表单标签、input标签】

一、基本介绍

1.1 概念

HTML，全称为超文本标记语言（HyperText Markup Language），是一种用于创建网页的标准标记语言。
它通过一系列标签来描述网页内容的结构和外观，从而使浏览器能够解释并展示网页给用户。
HTML文档由不同的元素组成，每个元素由标签表示，这些标签用来标记文本、图像、链接、表格、表单等网页内容，并定义它们的结构和意义。

1.2 HTML的核心特点

标记性：HTML使用一系列尖括号包围的关键词（即标签）来标记网页的不同部分，如<p>用于段落，<a>用于链接。
结构化：通过标签，HTML文档被组织成逻辑结构，如头部（<head>）、主体（<body>）、标题（<h1>至<h6>）、列表（<ul>, <ol>）、表格（<table>）等。
超文本：HTML支持超链接，通过<a>标签可以链接到互联网上的其他网页，实现信息的交叉引用和跳转。
兼容性与可移植性：HTML是一种开放标准，被所有现代浏览器支持，保证了网页在不同平台和设备上的可访问性。
进化与发展：从最初的HTML到HTML5，该语言不断进化，引入了更多功能和语义化标签，以适应多媒体内容、响应式设计及Web应用程序的需求。

总的来说，HTML是构建网页的基础，是Web内容创作者必须掌握的语言之一，它与CSS（层叠样式表）和JavaScript一起构成了网页设计与开发的三大技术支柱。

二、HTML基本标签

HTML基本标签是构成网页结构的基础元素，以下是一些最常用和最基本的HTML标签及其简要说明：

文档类型声明:
```
<!DOCTYPE html>
```
这个声明告诉浏览器这是一个HTML5文档。
HTML根元素:
```
<html lang="en">
...
</html>
```
包含整个HTML文档，lang属性定义页面的语言。
头部元素:
```
<head><meta charset="UTF-8"><title>网页标题</title>
</head>
```
包含文档的元数据，如字符集定义、标题等。
标题标签 (h1 到 h6):
```
<h1>一级标题</h1>
<h2>二级标题</h2>
...
<h6>六级标题</h6>
```
用于定义不同级别的标题，h1 是最高级别。
段落标签:
```
<p>这是一个段落。</p>
```
用来定义段落。
换行标签:
```
<br>
```
强制换行，单标签。

链接标签:

<a href="http://example.com">链接文本</a>

用于创建超链接。

图像标签:
```
<img src="image.jpg" alt="图像描述">
```
插入图像，src 属性指定图像地址，alt 提供替代文本。

列表标签:

无序列表:

<ul><li>列表项1</li><li>列表项2</li>
</ul>

属性值	描述	用法举例
circle	空心圆	< ul type=“circle”>< /ul>
disc	实心圆	< ul type=“disc”>< /ul>
square	黑色方块	< ul type=“square”>< /ul>

有序列表:

<ol><li>列表项1</li><li>列表项2</li>
</ol>

属性值	描述	用法举例
1	数字类型	< ul type=“1”>< /ul>
A	大写字母类型	< ul type=“A” >< /ul>
a	小写字母类型	< ul type=“a”>< /ul>
I	大写古罗马	< ul type=“I”>< /ul>
i	小写古罗马	< ul type=“i”>< /ul>

在这里插入图片描述

区块标签:
- <div>: 通用的区块容器。
- <section>: 定义文档中的独立区域或节。
- <article>: 自包含的内容，可以分布独立。
行内标签:
- <span>: 用于对文本进行内联样式设置。
- <strong>: 加重文本，通常显示为粗体。
- <em>: 强调文本，通常显示为斜体。

这些只是HTML中的一部分基本标签，实际中还有更多用于实现特定功能和样式的标签，如表格、表单元素、多媒体嵌入、语义化标签等。

三、超链接标签

HTML中的超链接标签 <a> 是Anchor（锚点）的缩写，用于创建从当前文档到其他文档、同一文档内的特定部分或其他网络资源的链接。以下是 <a> 标签常用的属性介绍：

href (Hypertext Reference):
- 必需属性，定义了链接的目标地址。它可以是一个URL，指向另一个网页、文件、邮箱地址或者当前文档内的锚点。
- 示例：<a href="https://www.example.com">访问示例网站</a>
target:
- 可选属性，规定在何处打开链接文档。
  - _self（默认）: 在相同的框架或窗口中打开链接。
  - _blank: 在新窗口或新的浏览器标签页中打开链接。
  - _parent: 在父框架集中打开链接（如果当前页面包含在框架集内）。
  - _top: 在整个浏览器窗口中打开链接，清除所有框架（如果当前页面位于框架内）。
- 示例：<a href="https://www.example.com" target="_blank">在新窗口打开</a>
title:
- 可选属性，提供有关链接的额外信息，通常是鼠标悬停在链接上时显示的提示文本。
- 示例：<a href="https://www.example.com" title="访问示例网站的首页">示例网站</a>
rel (Relationship):
- 可选属性，定义了链接文档与当前文档之间的关系，如rel="noopener noreferrer" 常用于增强安全性，防止新打开的页面通过javascript影响原页面。
name (或 id):
- 可选属性，主要用于创建文档内的书签或锚点。当链接的 href 中使用 #name 或 #id 形式的URL时，浏览器会滚动到具有相应 name 或 id 的元素位置。
- 示例：<a name="section1">第一部分</a> 和 <a href="#section1">跳转到第一部分</a>

<!DOCTYPE HTML>
<html lang="en-US"><head><title>锚点的使用</title></head><body><a href="#i1">第一章</a><a href="#i2">第二章</a><a href="#i3">第三章</a><div id="i1"><p>第一章内容</p></div><div id="i2"><p>第二章内容</p></div><div id="i3"><p> 第三章内容</p></div></body>
</html>

download:
- 可选属性，指示浏览器下载URL而不是导航到它。可以与 href 一起使用来提供文件下载功能。
- 示例：<a href="file.pdf" download>下载PDF文件</a>

这些属性可以根据需要组合使用，以实现不同的链接行为和效果。

四、表格标签

HTML中的表格标签提供了多种属性，用于控制表格的外观、布局以及结构。以下是一些常用的表格标签属性介绍，主要针对<table>、<tr>、<td>、<th>等标签：

✌`<table>` 标签属性

border: 定义表格边框的宽度，单位通常为像素（px）。例如：<table border="1"> 会在表格周围及内部单元格间创建边框。
cellpadding: 内边距属性，定义单元格内容与单元格边框之间的空白空间。不推荐在HTML5中使用，应使用CSS的padding代替。
cellspacing: 外边距属性，定义相邻单元格间的空白空间。同样地，不推荐在HTML5中使用，推荐使用CSS的border-spacing替代。
width: 设置表格的宽度，可以是绝对单位（如像素px）或相对单位（如百分比%）。
height: 设置表格的高度，用法同上。
align: 控制表格水平对齐方式（left, center, right）。在CSS中应使用text-align或margin替代。
bgcolor: 设置表格的背景颜色，已被CSS的background-color属性替代。
summary: 提供表格内容的简短描述，有助于屏幕阅读器用户理解表格用途。

✍`<tr>` 标签属性

align: 控制行内内容的水平对齐方式，现在推荐使用CSS的text-align属性。
valign: 控制行内内容的垂直对齐方式，推荐使用CSS的vertical-align属性。

✌ `<td>` 和 `<th>` 标签属性

colspan: 定义单元格横向跨越的列数，用于合并单元格。
rowspan: 定义单元格纵向跨越的行数，也用于合并单元格。
align: 控制单元格内容的水平对齐方式，推荐使用CSS替代。
valign: 控制单元格内容的垂直对齐方式，推荐使用CSS替代。
headers: 指定与当前单元格相关的表头单元格ID列表，帮助辅助技术识别数据关联。
scope: 在<th>标签中使用，定义该表头单元格与其相关的数据单元格的关系（row, col, rowgroup, colgroup）。

演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- table表格tr 行(table row)td 单元格(列) (table data)thead是表头行,th 加粗单元格--><table border="1"><thead><th>第一列</th><th>第二列</th><th>第三列</th><th>第四列</th></thead><tbody><tr ><td>一</td><td>二</td><td colspan="2">三 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;四</td></tr><tr><td>一</td><td>二</td><td>三</td><td>四</td></tr><tr><td>一</td><td>二</td><td rowspan="2">三<br>三<td>四</td></tr><tr><td>一</td><td>二</td><td>四</td></tr></tbody></table>
</body>
</html>

在这里插入图片描述

注意事项

许多HTML表格的属性已经被CSS所取代，直接在元素上使用style属性或者外部CSS样式表是更现代、更灵活的做法。
使用CSS来控制表格样式，比如边框、间距、颜色、对齐等，可以提供更好的控制和分离内容与表现的能力。

以上属性为传统HTML表格控制的一部分，随着Web标准的发展，推荐使用CSS来实现更加丰富和灵活的布局与样式控制。

五、表单标签

在HTML中，表单（Form）用于收集用户输入的数据。以下是一些构建表单的基本标签：

表单标签 (<form>):
所有表单元素都应放置在<form>标签之间。它可以定义如何发送数据（GET或POST方法）以及数据提交的目标URL。
```
<form action="submit.php" method="post">
...
</form>
```

文本输入框 (<input type="text">):
用于输入单行文本。

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

密码输入框 (<input type="password">):
用于输入密码，显示为星号或其他符号。
```
<label for="pwd">密码：</label>
<input type="password" id="pwd" name="password">
```

单选按钮 (<input type="radio">):
提供多个互斥选项。

<input type="radio" id="option1" name="choice" value="option1">
<label for="option1">选项1</label>
<input type="radio" id="option2" name="choice" value="option2">
<label for="option2">选项2</label>

复选框 (<input type="checkbox">):
允许多个选择。

<input type="checkbox" id="agree" name="agree">
<label for="agree">我同意条款</label>

下拉选择框 (<select>):
提供一个下拉菜单供用户选择。

<label for="country">国家：</label>
<select id="country" name="country"><option value="china">中国</option><option value="usa">美国</option>
</select>

文本区域 (<textarea>):
用于输入多行文本。

<label for="message">留言：</label>
<textarea id="message" name="message"></textarea>

提交按钮 (<input type="submit">):
提交表单数据。
```
<input type="submit" value="提交">
```
重置按钮 (<input type="reset">):
重置表单到初始状态。
```
<input type="reset" value="重置">
```

综合应用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="#"><table>            <tr><td> 用户名：</td><td><input type="text" placeholder="用户名设置成功后不可修改"></td></tr> <tr><td>登录密码：</td><td><input type="password" placeholder = "6-20位字母、数字或符号"></td></tr> <tr><td>确认密码：</td><td> <input type="text" placeholder = "请输入姓名"></td></tr> <tr><td> 姓名：</td><td><input type="text" placeholder="请输入姓名"></td></tr> <tr><td>证件类型：</td><td><select ><option value="">一代身份证</option><option value="">二代身份证</option></select></td></tr> <tr><td>证件号码：</td><td><input type="text" placeholder = "请输入你的证件号码"></td></tr><tr><td>邮箱：</td><td><input type="text" placeholder="请填写正确的邮箱地址"></td></tr> <tr><td>手机号码：</td><td><input type="text" name="" id="" placeholder="请输入您的手机号"></td></tr> <tr><td>旅客类型：</td><td><select name="" id=""><option value="">儿童</option><option value="">学生</option><option value="">成人</option></select></td></tr><tr><td></td><td><input type="radio">我阅读并同意遵守 <font color = "#0038ff">《中国铁路客户服务中心网站服务条款》</font></td></tr>  </table><input type="submit" value="注册"> &nbsp;&nbsp; &nbsp; &nbsp;<input type="button" value="登录"> </form>
</body>
</html>