续HTML基础知识1
3.3行内块标签
3.3.1图像标签
在HTML中，可以使用<img>标签来插入图像。
<img>标签的属性：
src：指定图像文件的路径或URL。alt：指定图像的替代文本，当图像无法显示时将显示该文本。建议添加alt属性，有利于SEOwidth：指定图像的宽度。height：指定图像的高度。
注意：src既可以是本地路径，也可以是网络路径，在企业的实际开发中，更多使用的是网络路径，节省服务器的开支，也可以使用base64编码。
注意：如果宽高只指定一个则图片会等比例缩放
示例：
<img src="./images/1.jpg" alt="这是一幅图像" width="200" height="150">
可选的<img>标签属性：
title：指定图像的标题，鼠标悬停在图像上时显示。class：指定CSS样式类名，用于自定义图像的样式。id：指定唯一的标识符，用于JavaScript或CSS的操作。style：指定内联样式，用于直接应用样式。
示例：
<img src="./images/1.jpg" alt="这是一幅图像" width="200" height="150" title="图像标题" class="image-style" id="image-1" style="border: 1px solid black;">
title和alt的区别
title 和 alt 都是在 <img> 标签中用于提供关于图像的附加信息的属性，但它们有不同的作用和用途。
alt属性（替代文本）：alt属性用于提供当图像无法加载时的替代文本。它对于视觉障碍用户和无法加载图像的用户来说非常重要，还有助于搜索引擎理解图像内容。如果图像无法加载，浏览器会显示alt属性中的文本。因此，alt属性应该简洁明了地描述图像内容，而不仅仅是一个空字符串。例如：
<img src="image.jpg" alt="A red car">
2.title 属性（提示信息）：title 属性用于提供当用户将鼠标悬停在图像上时显示的提示信息。它可以提供额外的描述性文本、解释或其他相关信息。当用户悬停在图像上时，浏览器会显示 title 属性中的文本。例如：
<img src="image.jpg" alt="A red car" title="This is a picture of a car">
需要注意的是，alt 属性对于无法加载图像的情况下是必须的，并且应该提供有意义的描述性文本。而 title 属性是可选的，用于提供额外的提示信息，但它不应该是 alt 属性的替代品。此外，alt 属性对于辅助技术（如屏幕阅读器）和搜索引擎优化（SEO）都非常重要，而 title 属性更多地用于用户界面的提示和交互。
注意事项：
- 图像文件路径可以是相对路径或绝对路径。
- 替代文本(
alt)非常重要，它提供了对无法显示图像的用户的文字描述。 - 对于响应式设计，可以使用CSS媒体查询或CSS框架来调整图像的大小和布局。
- 考虑使用适当的图像格式（如JPEG、PNG、GIF等），以平衡图像质量和加载速度。
3.4表格标签
以下是关于HTML表格标签的简要笔记：
<table>：定义一个表格。<caption>：定义表格的标题。<thead>：定义表格的表头部分。<tbody>：定义表格的表体部分。<tfoot>：定义表格的脚注部分。
表格的基本结构是包含在 <table>标签中的。表格可以包含一个可选的 <caption>标签，用于定义表格的标题。表格的内容通常分为表头部分、表体部分和脚注部分，分别使用<thead>、<tbody>和<tfoot>标签来定义。
<tr>：定义一个表格行。<th>：定义表头单元格，一般用于表头行。<td>：定义数据单元格，用于表格的内容行。
在表格中，每一行由<tr>标签定义，<tr>标签中可以包含表头单元格(<th>)和数据单元格(<td>)。表头单元格一般用于标识列的标题，而数据单元格则用于存放实际的数据。
rowspan：定义单元格要合并的行数。colspan：定义单元格要合并的列数。
通过给 <td> 或 <th> 添加 rowspan 和 colspan 属性，可以合并单元格，实现跨多行或多列的效果。
border：定义表格的边框宽度。cellpadding：定义单元格的内边距。cellspacing：定义单元格之间的间距。align:对齐方式
表格的样式和布局可以通过给表格添加属性来调整。例如，border属性定义表格的边框宽度，cellpadding属性定义单元格的内边距，cellspacing属性定义单元格之间的间距。
注意:border-collapse: collapse;等价于cellspacing=“0”; padding: 8px;等价于cellpadding=“8”
示例：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
/* 合并相邻单元格的边框 */
border-collapse: collapse;
width: 50%;
margin: 0 auto;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
th {
background-color: #92CDDB;
}
caption {
text-align: center;
margin-bottom: 10px;
}
</style>
</head>
<body>
<table>
<!-- 标题 -->
<caption>
<h2>商品信息表</h2>
<p>制表：2021/06/29</p>
</caption>
<!-- 表头 -->
<thead>
<tr>
<th>ID</th>
<th>品类</th>
<th>品名</th>
<th>数量</th>
<th>单价</th>
<th>金额</th>
</tr>
</thead>
<!-- 表体 -->
<tbody>
<tr>
<td>1</td>
<!-- 向下合并一个单元格 -->
<td rowspan="2">衣服</td>
<td>冬装</td>
<td>1</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>夏装</td>
<td>1</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>3</td>
<td rowspan="2">饮料</td>
<td>可口可乐</td>
<td>1</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>4</td>
<td>百事可乐</td>
<td>1</td>
<td>100</td>
<td>100</td>
</tr>
<tr style="background-color: #FDEADC;">
<td colspan="6">以下为备用物品</td>
</tr>
<tr>
<td>5</td>
<td rowspan="2">数码</td>
<td>相机</td>
<td>1</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>6</td>
<td>镜头</td>
<td>1</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td colspan="4" rowspan="2">合计</td>
<td style="background-color: #92CDDB;">平均单价</td>
<td style="background-color: #FDEADC;">金额合计</td>
</tr>
<tr>
<td>100</td>
<td>600</td>
</tr>
</tbody>
<!-- 脚注 -->
<tfoot>
</tfoot>
</table>
</body>
</html>
3.5表单标签
3.5.1表单标签的语法
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框 （radio-buttons）、复选框（checkbox） 等等。
我们可以使用 标签来创建表单:
<form action="表单提交地址" method="提交方法">
<!-- 表单内容 -->
</form>
form表单属性：
action用于指定提交表单数据的请求URLmethod表单数据发送至服务器的方法常有两种，get(默认)/post。
get和post的区别:
- get提交：用户输入的信息，显示在地址栏中，不安全，请求内容长度有限制，请求速度快。
- post提交：用户输入的信息，不会显示在地址栏，安全,请求内容长度无限制(重要数据)，请求速度慢。
注意:在开发过程中一般<form>会和table一起使用
3.5.2表单的执行原理
客户端通过表单把数据提交给服务端，服务端根据提交的数据给客户端一个响应.
请求/响应模式: 客户端浏览器发送请求给服务器;服务器给予客户端浏览器响应
3.5.3表单控件元素
<input type="">输入控件
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本 控件、单选按钮、按钮等等
| 控件名称 | type属性值 | 描述 |
|---|---|---|
| 文本框 | text | 定义一个单行的文本字段默认宽度为20个字符 |
| 密码框 | password | 定义密码字段 |
| 单选按钮 | radio | 定义单选按钮(性别) |
| 复选框 | checkbox | 定义复选框(爱好) |
| 提交按钮 | submit | 定义提交按钮 |
| 重置按钮 | reset | 定义重置按钮 |
| 图片提交按钮 | image | 定义图片提交按钮 |
| 普通按钮 | button | 定义可点击的按钮 |
| 隐藏文本框 | 定义隐藏输入字段 | 前后台交互的时候有用 |
| 文件上传框 | file | 定义文件选择字段和 “浏览…” 按钮，供文件上传。可以通过accept属性 规范选取文件的类型,比如图片/视频,如果不设置则什么类型都可以。 accept属性的值: image/* 接受所有的图像文件。 image/png 表示只接 受图片文件的png文件 audio/* 接受所有的声音文件。 video/* 接受所 有的视频文件。 multiple属性可以用来设置一次允许选择多个文件 multiple=“multiple” |
示例:
代码：
<body>
<!-- 文本框 -->
<p>文本框</p>
<input type="text">
<hr>
<!-- 密码框 -->
<p>密码框</p>
<input type="password">
<hr>
<!-- 单选按钮 -->
<p>单选按钮</p>
<label for="gender">性别：</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
<hr>
<!-- 复选框 -->
<p>复选框</p>
<label for="hobby">爱好：</label>
<input type="checkbox" id="music" name="hobby" value="music">
<label for="music">音乐</label>
<input type="checkbox" id="sports" name="hobby" value="sports">
<label for="sports">运动</label>
<hr>
<!-- 提交按钮 -->
<p>提交按钮</p>
<input type="submit">
<hr>
<!-- 重置按钮 -->
<p>重置按钮</p>
<input type="reset">
<hr>
<!-- 图片提交按钮 -->
<p>图片提交按钮</p>
<input type="image">
<hr>
<!-- 普通按钮 -->
<p>普通按钮</p>
<input type="button" value="我是一个可以点击的按钮">
<hr>
<!-- 隐藏输入框 -->
<p>隐藏输入框</p>
<input type="hidden">
<hr>
<!-- 文件上传框 -->
<p>文件上传框</p>
<input type="file">
<hr>
</body>
input输入控件还有一些属性
<input type="text" id="name" name="name" placeholder="请输入您的姓名" required>
<!--
type="text"：指定输入框的类型为文本输入。
id="name"：为输入框指定一个唯一的标识符，以便在其他地方引用它。
name="name"：指定输入框的名称，将在提交表单时作为属性名传递给后端处理。
placeholder="请输入您的姓名"：设置一个占位文本，显示在输入框中，为用户提供输入的提示。
required：指定输入框为必填项，如果用户未填写内容就尝试提交表单，浏览器会显示一个验证错误提示。
-->
- 多行文本框：
<textarea>
文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。 可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。
缩放设置：
- 禁止缩放：resize: none;
- 水平缩放：resize: horizontal;
- 垂直缩放：resize: vertical;
- 水平垂直缩放：resize: both；
示例代码:
<label for="message">留言：</label>
<textarea id="message" name="message" rows="4" cols="50" placeholder="请输入您的留言"></textarea>
<lable>:定义了<input>元素的标签，一般为输入标题
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点 击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
方式一：
for属性：让标签和指点的input元素建立关联,多数使用在单选或复选
给单选或复选后面的文字加入label标签,for属性值是input的id值
方式二：
将input元素包含在lable标签中
如果将input放置在label标签之间,那么for属性就可以不用
注：lable和单选、复选结合使用，提高用户体验。
- 下拉菜单
<select>、<option>：
<label for="country">国家：</label>
<select id="country" name="country">
<option value="China">中国</option>
<option value="USA">美国</option>
<option value="Japan">日本</option>
</select>
使用 <select> 元素创建下拉菜单
使用 <option> 元素定义选项
通过设置 value 属性来指定选项的值。
size属性用来定义列表中显示的列表项,
在<select>标签设置 multiple属性用来定义是否可以多选
<optgroup>：定义选项组
示例：
代码：
<select name="country">
<optgroup label="亚洲">
<option value="china">中国</option>
<option value="japan">日本</option>
<option value="india">印度</option>
</optgroup>
<optgroup label="欧洲">
<option value="france">法国</option>
<option value="germany">德国</option>
<option value="italy">意大利</option>
</optgroup>
</select>
<button>定义一个点击按钮
在<button>元素内部，您可以放置内容，比如文本或图像。这是该元素与使用<input>元素创建的 按钮之间的不同之处。
提示：请始终为<button>元素规定 type 属性。不同的浏览器对 元素的 type 属性使用不同 的默认值。
type属性:可以设置三个值 submit/reset/button与input元素设置的按钮含义一致
3.5.4表单元素的属性
| 属性 | 值 | 描述 |
|---|---|---|
| type | 上述表格中的值 | type 属性规定要显示的<input>元素的类型。 |
| value | text | 指定 <input>元素 value 的值。 |
| src | URL | src 属性规定显示为提交按钮的图像的 URL。 (只针对 type=“image”) |
| size | number | size 属性规定以字符数计的<input>元素的可见宽度。 |
| readonly | readonly | readonly 属性规定输入字段是只读的。 |
| name | text | name 属性规定 <input>元素的名称。 |
| maxlength | number | 属性规定<input>元素中允许的最大字符数。 |
| disabled | disabled | disabled 属性规定应该禁用的 <input>元素。 |
| checked | checked | checked 属性规定在页面加载时应该被预先选定的 元素。 (只针对<input>type=“checkbox” 或者 type=“radio”) |
| accept | audio/* video/* image/* MIME_type | 规定通过文件上传来提交的文件的类型。 (只针对 type=“file”) |
| selected | selected | 下拉框的默认选中 |
未完待续…
2622
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
