网站建设供应商石家庄网站建设就找

目录

 一、HTML 基础概述​

二、HTML 基础表单​

（一）表单的作用​

（二）表单的基本结构​

（三）常用表单控件​

（四）表单示例​

三、HTML 基础表格​

（一）表格的作用​

（二）表格的基本结构​

（三）表格的属性​

（四）单元格的合并​

（五）表格示例​

四、HTML 基础代码词条​

CSDN 原创主页：不羁https://blog.csdn.net/2303_76492156?type=blog 

---

 一、HTML 基础概述​

HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。它通过一系列标签来描述网页的结构和内容，这些标签通常由尖括号<和>包围，并且大多数标签都是成对出现的，由开始标签和结束标签组成，例如<p>和</p>表示一个段落。​

二、HTML 基础表单​

（一）表单的作用​

表单在网页中主要用于收集用户输入的信息，例如用户注册、登录、提交反馈等场景，用户填写的信息会被发送到服务器进行处理。​

（二）表单的基本结构​

表单由<form>标签定义，其基本语法结构如下：​

<form action="处理表单数据的服务器地址" method="提交方式">​<!-- 表单控件 -->​
</form>

• action：指定处理表单数据的服务器程序的 URL 地址。如果省略该属性，表单数据将被提交到当前页面所在的 URL。​

• method：指定表单数据的提交方式，常用的有get和post两种。​

• get：默认的提交方式，表单数据会附加在 URL 后面，以?分隔 URL 和表单数据，多个数据之间用&连接。这种方式传输的数据量有限，且不安全，适用于简单的数据查询。​

• post：表单数据会被包含在请求体中发送给服务器，不会显示在 URL 中。这种方式传输的数据量较大，且相对安全，适用于用户注册、登录等需要提交敏感信息的场景。​

（三）常用表单控件​

1、文本输入框（text）：用于输入单行文本。​

<input type="text" name="username" value="默认值" placeholder="提示文本" maxlength="最大长度">

• name：控件的名称，用于在提交表单时标识该控件的值。​
• value：输入框的默认值。​

• placeholder：当输入框为空时显示的提示文本。​

• maxlength：指定输入的最大字符数。​

2、密码输入框（password）：用于输入密码，输入的内容会以星号或圆点显示。​

 <input type="password" name="password" maxlength="20">

3、单选按钮（radio）：用于从多个选项中选择一个。​​

<input type="radio" name="gender" value="male" checked>男​
<input type="radio" name="gender" value="female">女

• name：同一组单选按钮的name属性值必须相同，这样才能保证只能选择其中一个。​
• value：单选按钮的值。​

• checked：设置该单选按钮为默认选中状态。​

4、复选框（checkbox）：用于从多个选项中选择一个或多个。​

<input type="checkbox" name="hobby" value="reading" checked>阅读​
<input type="checkbox" name="hobby" value="sports">运动​
<input type="checkbox" name="hobby" value="music">音乐

• name：同一组复选框的name属性值通常相同。​

• value：复选框的值。​

• checked：设置该复选框为默认选中状态。​

5、下拉列表（select 和 option）：用于从预设的选项中选择一个或多个。​

<select name="city" multiple>​<option value="beijing" selected>北京</option>​<option value="shanghai">上海</option>​<option value="guangzhou">广州</option>​
</select>

• name：下拉列表的名称。​

• multiple：添加该属性后，用户可以按住 Ctrl 键选择多个选项。​

• <option>：每个<option>标签表示一个选项，value属性为选项的值，selected属性设置该选项为默认选中状态。​

6、文本域（textarea）：用于输入多行文本。​

<textarea name="message" rows="行数" cols="列数" placeholder="请输入内容..."></textarea>

• name：文本域的名称。​

• rows：指定文本域的行数。​

• cols：指定文本域的列数。​

• placeholder：提示文本。​

7、提交按钮（submit）：用于提交表单数据。​

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

• value：按钮上显示的文本。​

8、重置按钮（reset）：用于将表单中的所有控件重置为默认值。​

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

9、按钮（button）：普通按钮，通常需要配合 JavaScript 使用来实现自定义功能。​

<input type="button" value="点击我" onclick="alert('Hello World!')">​

• onclick：点击按钮时触发的事件。​

（四）表单示例​

<form action="/submit" method="post"><label for="username">用户名：</label><input type="text" id="username" name="username" placeholder="请输入用户名" maxlength="20"><br><br><label for="password">密码：</label><input type="password" id="password" name="password" maxlength="20"><br><br><label>性别：</label><input type="radio" name="gender" value="male" checked>男<input type="radio" name="gender" value="female">女<br><br><label>爱好：</label><input type="checkbox" name="hobby" value="reading" checked>阅读<input type="checkbox" name="hobby" value="sports">运动<input type="checkbox" name="hobby" value="music">音乐<br><br><label for="city">城市：</label><select name="city" id="city"><option value="beijing" selected>北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option></select><br><br><label for="message">留言：</label><br><textarea name="message" id="message" rows="5" cols="30" placeholder="请输入留言内容..."></textarea><br><br><input type="submit" value="提交"><input type="reset" value="重置">
</form>

• <label>标签：用于为表单控件定义标签，for属性的值与相关控件的id属性值相同，这样点击标签时，对应的控件会获得焦点，提高用户体验。​

三、HTML 基础表格​

（一）表格的作用​

表格用于在网页中展示结构化的数据，例如商品信息、成绩表等。​

（二）表格的基本结构​

表格由<table>标签定义，表格中的行由<tr>标签定义，行中的单元格由<td>标签定义（表格数据单元格），表头单元格由<th>标签定义（表头单元格中的内容通常会加粗居中显示）。基本语法结构如下：​

​

<table border="边框宽度"><tr><th>表头1</th><th>表头2</th>...</tr><tr><td>数据1</td><td>数据2</td>...</tr>...
</table>

• border：设置表格边框的宽度，单位为像素。如果不设置该属性，表格将没有边框。​

（三）表格的属性​

1. width：设置表格的宽度，可以是像素值或百分比。​
2. height：设置表格的高度，可以是像素值或百分比。​
3. align：设置表格在页面中的对齐方式，取值为left（左对齐）、center（居中对齐）、right（右对齐）。​
4. cellpadding：设置单元格内容与单元格边框之间的距离，单位为像素。​
5. cellspacing：设置单元格之间的距离，单位为像素。​

（四）单元格的合并​

1. 跨列合并（colspan）：在<td>或<th>标签中使用colspan属性，用于指定单元格横跨的列数。​
2. 跨行合并（rowspan）：在<td>或<th>标签中使用rowspan属性，用于指定单元格纵跨的行数。​

（五）表格示例​

<table border="1" width="500" height="200" align="center" cellpadding="10" cellspacing="0"><tr align="center"><th colspan="3">学生成绩表</th></tr><tr align="center"><th>姓名</th><th>科目</th><th>成绩</th></tr><tr align="center"><td rowspan="2">张三</td><td>语文</td><td>90</td></tr><tr align="center"><td>数学</td><td>85</td></tr><tr align="center"><td rowspan="2">李四</td><td>语文</td><td>88</td></tr><tr align="center"><td>数学</td><td>92</td></tr>
</table>

四、HTML 基础代码词条​

1. <html>：HTML 文档的根标签，所有其他标签都包含在该标签内。​
2. <head>：用于定义 HTML 文档的头部信息，包含文档的元数据，如标题、字符集等，这些信息不会在网页中直接显示。​
3. <title>：位于<head>标签内，用于定义网页的标题，显示在浏览器的标题栏或标签页上。​
4. <body>：用于定义 HTML 文档的主体部分，网页中所有可见的内容都包含在该标签内。​
5. <h1>-<h6>：用于定义标题，<h1>是最大的标题，<h6>是最小的标题。​
6. <p>：用于定义段落。​
7. <br>：用于插入换行符，是一个单标签，没有结束标签。​
8. <hr>：用于插入一条水平线，是一个单标签。​
9. <a>：用于定义超链接，href属性指定链接的目标地址。语法：<a href="目标地址">链接文本</a>。​
10. <img>：用于插入图像，是一个单标签。src属性指定图像的路径，alt属性指定图像无法显示时的替代文本。语法：<img src="图像路径" alt="替代文本" width="宽度" height="高度">。​
11. <form>：用于创建表单，用于收集用户输入。​
12. <input>：用于创建各种表单控件，type属性指定控件的类型。​
13. <select>：用于创建下拉列表。​
14. <option>：用于定义下拉列表中的选项，包含在<select>标签内。​
15. <textarea>：用于创建多行文本输入框。​
16. <table>：用于创建表格。​
17. <tr>：用于定义表格中的行。​
18. <td>：用于定义表格中的数据单元格。​
19. <th>：用于定义表格中的表头单元格。​
20. <label>：用于为表单控件定义标签，提高用户体验。​

---

---------------E------------N------------D---------------