目录
- 一、基本介绍
- 1.1 概念
- 1.2 HTML的核心特点
- 二、HTML基本标签
- 三、超链接标签
- 四、表格标签
- ✌`<table>` 标签属性
- ✍`<tr>` 标签属性
- ✌ `<td>` 和 `<th>` 标签属性
- 演示
- 注意事项
- 五、表单标签
- 综合应用
- 最后
一、基本介绍
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>
- 可选属性，指示浏览器下载URL而不是导航到它。可以与
这些属性可以根据需要组合使用，以实现不同的链接行为和效果。
四、表格标签
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">三 四</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="注册"> <input type="button" value="登录">
</form>
</body>
</html>
这些标签结合使用，可以创建功能丰富的表单来满足各种数据收集需求。此外，还可以通过添加
required属性来标记必填字段，使用<fieldset>和<legend>来组织表单内容等，以增强表单的可用性和可读性。
最后
如果感觉有收获的话，点个赞 👍🏻 吧。
❤️❤️❤️本人菜鸟修行期，如有错误，欢迎各位大佬评论批评指正！😄😄😄
💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍
