HTML基础标签之图像、超链接、列表、表格、表单

小k鏖

已于 2024-10-08 22:13:43 修改

阅读量97

点赞数 1

文章标签： html

于 2024-10-07 18:13:12 首次发布

本文链接：https://blog.csdn.net/2301_79765198/article/details/142743920

版权

一、图像

图像标签

在HTML中，<img>标签用来插入图像

<img>属性：

src (source): 必须的属性，用于指定图像的URL。
alt (alternative text): 必须的属性，用于在图像无法显示时提供替代文本
width：指定图像的宽度，可以是像素值或百分比。
height：指定图像的高度，可以是像素值或百分比。
title：指定图像的标题，当用户将鼠标悬停在图像上时显示
align：指定图像在页面中的对齐方式。可以使用以下值：left（向左对齐）、right（向右对齐）、top（顶部对齐）、middle（垂直居中对齐）、bottom（底部对齐）
border：定义边框的样式、宽度和颜色
hspace：用于设置图像左右的空白像素，属于水平边距
vspace：用于设置图像上下的空白像素，属于垂直边距

相关用法：

如果图片文件与HTML文件位于同一目录下，可以直接使用文件名作为路径
如果图片文件位于HTML文件的上一级目录中，可以使用../表示上一级目录
如果图片文件位于HTML文件的另一个子目录中，可以使用相对路径指定路径

二、超链接

超链接（Hyperlink）是互联网和网页设计中一个基本且关键的概念。它是一种引用，通过它可以跳转到文档的其他位置、其他文档、图像、视频或其他类型的内容。超链接通常在文本中以蓝色带下划线的文本形式出现，但也可以是图像或其他元素。当用户点击超链接时，浏览器会加载链接指向的内容，从而实现网页之间的导航和信息的快速访问。

超链接的实现主要通过HTML（超文本标记语言）中的<a>标签来完成，其基本语法如下：

<a href="url">链接文本</a >

1.常用的属性包括：

target：指定链接在何处打开。常用取值包括_blank（在新标签页中打开链接）、_self（在当前标签页中打开链接）等
title：指定链接的提示文本，鼠标悬停在链接上时会显示

2.书签链接
在HTML中，书签链接通常是指使用id属性创建的文档内部锚点，允许用户点击链接后直接跳转到页面中具有相应id的元素位置。这种技术使得用户可以快速导航到网页的特定部分，而无需滚动页面。可以通过使用<a>标签的name属性来实现

三、列表

列表标签是一种HTML标签，有两种：有序列表（<ol>）和无序列表（<ul>）

1.无序列表

用于创建项目没有特定顺序的列表。无序列表使用<ul>标签表示，每个列表项使用<li>标签表示

示例代码

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

运行结果：

无序列表相关属性：

start：指定列表项的起始编号。默认情况下，无序列表的起始编号为1，可以使用start属性来设置其他开始编号

type：指定列表项的标记类型。默认值为"disc"，表示实心圆点；其他可能的值还有"circle"（空心圆点）和"square"（实心方块）

2.有序列表

有序列表是在HTML中用来表示按顺序排列的列表项。有序列表使用<ol>标签来定义，每个列表项使用<li>标签来表示。

示例代码如下：

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

运行结果：

有序列表的属性：

type：指定列表项的标记类型。默认值为"1"，表示使用数字；其他可能的值还有"a"（小写字母），"A"（大写字母），"i"（小写罗马数字），"I"（大写罗马数字）。

四、表格

表格是一种用于以表格形式展示数据的HTML元素。在HTML中，使用<table>标签来定义一个表格，表格中的内容则使用<tr>、<td>和<th>标签来表示行、单元格和表头。

表格有多种属性可用来调整其样式和行为。以下是一些常用的表格属性：

border：设置表格边框的宽度，单位通常是像素。
cellpadding：设置单元格内容与其边框之间的空间，单位通常是像素。
cellspacing：设置单元格之间的空间，单位通常是像素。
width和height：设置表格的宽度和高度。
align：设置表格在页面中的对齐方式。
bgcolor：设置表格的背景颜色。

示例代码如下：

<table border="1" width="200">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>18</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>20</td>
    <td>女</td>
  </tr>
</table>

运行结果：

五、表单

HTML表单允许用户向服务器提交数据。一个完整的表单可能包含多个不同类型的输入字段和其他辅助元素。以下是与HTML表单相关的常见元素及它们的属性：
<form> 标签
属性

action: 指定接收表单数据的目标URL。
method: 规定发送表单数据至服务器的方法，通常是 "GET" 或 "POST"。
enctype: 对于上传文件时使用的编码类型，如 "multipart/form-data"。
target: 指定期望加载响应的框架或窗口名称。

输入元素 <input>
类型 (type)

text: 单行文本输入。
password: 掩码文本输入，用于密码。
radio: 单选按钮。
checkbox: 复选框。
file: 文件选择器。
submit: 提交按钮。
reset: 重置按钮。
image: 图片作为提交按钮。
hidden: 隐藏输入。
email: 电子邮件输入。
url: URL输入。
number: 只接受数字输入。
date: 日期选择器。
time: 时间选择器。
datetime-local: 本地日期和时间选择器。
month: 月份选择器。
week: 周期选择器。
search: 搜索字段。

其他通用属性

name: 表单控件的名称，在服务器端使用。
value: 控件值。
placeholder: 显示占位符文本。
required: 必填字段。
readonly: 只读状态。
disabled: 禁用状态。
minlength, maxlength: 最小和最大长度限制。
pattern: 正则表达式匹配验证。
autocomplete: 是否启用自动完成。

<textarea> - 文本域

rows: 指定文本域的高度，即行数。
cols: 指定文本域的宽度，即列数。

<select> - 下拉列表

size: 指定列表显示项目数量。
multiple: 允许用户选择多个选项。

<option> - 下拉列表中的选项

selected: 默认选定该选项。

<label> - 标签

for: 关联的 id，帮助屏幕阅读器确定哪个输入与标签关联。

<button> - 普通按钮

type: 可设置为 "button", "submit", "reset"。

<fieldset> - 分组元素

用于分组表单内的相关元素。

<legend> - 传说/标题

用于给一组元素添加标题，通常与 <fieldset> 配合使用。

<datalist> - 数据列表

为 <input type="text"> 提供建议或预设值。

合理利用上述元素和属性，可以创建交互丰富、易于使用的网页表单。不同的输入类型有助于提高用户体验，并简化数据处理逻辑。

例子

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>表单示例</title>
</head>
<body>

<h2>注册新账户</h2>
<!-- form标签，定义了表单 -->
<form action="/submit-form.php" method="post">

    <!-- 用户名输入框 -->
    <label for="username">用户名:</label><br>
    <input type="text" id="username" name="username"
           placeholder="请输入用户名"
           required minlength="3" maxlength="16"><br>
    
    <!-- 密码输入框 -->
    <label for="password">密码:</label><br>
    <input type="password" id="password" name="password"
           required pattern=".{6,}" title="至少6个字符"><br>
    
    <!-- 电子邮箱输入框，自动验证电子邮件格式 -->
    <label for="email">邮箱:</label><br>
    <input type="email" id="email" name="email" required><br>
    
    <!-- 性别选择，单选按钮 -->
    <p>性别:</p >
    <input type="radio" id="male" name="gender" value="male" checked>
    <label for="male">男</label><br>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label><br>
    
    <!-- 出生年份选择 -->
    <label for="year">出生年份(可选):</label><br>
    <input type="number" id="year" name="year"
           min="1900" max="2024"><br>
    
    <!-- 国籍，使用下拉选择框 -->
    <label for="country">国籍:</label><br>
    <select id="country" name="country">
        <option value="">请选择</option>
        <option value="China">中国</option>
        <option value="USA">美国</option>
        <option value="UK">英国</option>
    </select><br>
    
    <!-- 兴趣爱好，多选框 -->
    <p>兴趣爱好:</p >
    <input type="checkbox" id="sports" name="interests[]" value="Sports">
    <label for="sports">运动</label><br>
    <input type="checkbox" id="music" name="interests[]" value="Music">
    <label for="music">音乐</label><br>
    <input type="checkbox" id="books" name="interests[]" value="Books">
    <label for="books">书籍</label><br>
    
    <!-- 生活城市，文本建议列表 -->
    <label for="city">居住城市:</label><br>
    <input list="citiesList" name="city" id="city">
    <datalist id="citiesList">
      <option value="北京">
      <option value="上海">
      <option value="广州">
      <option value="深圳">
    </datalist><br>
    
    <!-- 备注，长文本输入 -->
    <label for="message">备注:</label><br>
    <textarea id="message" name="message" rows="4" cols="50"></textarea><br>
    
    <!-- 提交按钮 -->
    <input type="submit" value="立即注册"/>

</form>

</body>
</html>

运行结果