HTML入门教程：超文本标记语言基础知识

HTML
需积分: 26 1 下载量 47 浏览量 更新于2024-08-17 收藏 937KB PPT 举报
"HTML表单标记<form>的使用和HTML基础知识" HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言，它允许我们构建结构化的文档，并通过超链接将不同的页面相互连接。表单标记`<form>`是HTML中的一个重要元素，用于创建用户交互的界面，比如收集用户输入的数据。 **表单标记<form>的使用** 基本语法： ```html <form action="提交地址" method="提交方式"> <!-- 表单元素 --> </form> ``` 其中，`action`属性定义了处理表单数据的服务器端脚本的位置，而`method`属性则指定了提交数据的方式，常见的有`GET`和`POST`。`GET`通常用于查询操作，数据会在URL中显示；`POST`则将数据隐藏在请求体中，适用于提交敏感信息。 **HTML基本概念** - **WWW（World Wide Web）**：基于Internet的全球性信息网络，支持超文本和多媒体信息的访问。 - **超文本**：含有链接的文本，链接可以指向其他文本、图片、音频、视频等资源。 - **URL（Uniform Resource Locator）**：每个资源在网络上的唯一地址。 - **HTTP（Hypertext Transfer Protocol）**：用于在Web上传输数据的协议。 - **HTML（HyperText Markup Language）**：用于创建和设计网页的语言，它使用一系列标记来描述页面结构和内容。 **HTML的发展历史与原则** HTML起源于1990年代，由蒂姆·伯纳斯-李发明。其设计原则包括统一化、国际化和易用性。随着技术的发展，HTML不断演进，引入了更多新特性，如表格、样式表、脚本语言支持等。 **HTML文件结构** 一个基本的HTML文件结构如下： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>页面标题</title> <!-- 其他头部信息，如样式表引用 --> </head> <body> <!-- 页面主要内容 --> <form action="submit.php" method="post"> <!-- 表单元素 --> </form> </body> </html> ``` **HTML文件编写注意事项** 1. HTML标记由尖括号包围，如`<tag>`和`</tag>`。 2. 标记可以嵌套，如`<p><b>加粗的段落</b></p>`。 3. 在源代码中，HTML标记不区分大小写。 4. 回车和空格在源代码中不影响布局，需要使用特定的标签（如`<br>`、`<p>`）来控制换行和段落。 5. 标记可以有属性，例如`<input type="text" name="username">`，`type`和`name`就是属性。 HTML表单中常见的元素有`<input>`（文本框、复选框、单选按钮等）、`<textarea>`（多行文本输入）、`<select>`（下拉菜单）和`<button>`（按钮）。这些元素可以组合使用，配合服务器端脚本（如PHP、ASP、JSP等）实现用户数据的收集和处理。 HTML表单标记`<form>`是构建交互式网页的关键，理解其用法和HTML基础对于网页开发至关重要。通过结合CSS和JavaScript，可以创建更加复杂和动态的用户体验。

HTML常用标签.pdf

2021-10-05 上传
a) 客户端向服务端发送数据可以有两种方式：使用表单 <form> 提交；或使用超链接传参数<a href=”xxx.jsp?username=james&age=22⋯ ⋯ ⋯ ”>多个参数全部用&号连接起来。 b) <form action=” 指定表单数据提交的...

管理员网页详细代码（只有HTML）

2020-04-22 上传
表单元素包括输入框（`<input>`）、按钮（`<button>`）、选择框（`<select>`）和复选框（`<input type="checkbox">`）等。例如，一个简单的登录表单： ```html <form action="login.php" method="post"> <label ...

HTML相关技术基础知识收集.pdf

2021-11-21 上传
<p>用于段落，<a>定义链接，<img>插入图片，<ul>和<li>创建无序列表，<ol>和<li>创建有序列表，<div>作为内容分组，<span>用于行内元素的分组，以及<form>、<input>、<label>等用于创建表单元素。 JavaScript是一种...

HTML语言详解：超文本标记与表单标记<FORM></FORM>

点击了解资源详情
- 表单标记：除了<FORM>外，还包括`<input>`（各种类型的输入框）、`<textarea>`（多行文本输入）、`<select>`（下拉选择）和`<button>`（按钮）等，用于构建表单元素。 4. 框架标记：<FRAMESET>和<FRAME>用于创建...

JSP基础：表单标记<form>参数详解与Get/Post方式

点击了解资源详情
"这篇文档是关于JSP及JAVA语言基础的教程，重点讲解了表单标记<form>中的常用参数，包括action和method属性，以及HTML基础，特别是Get和Post两种数据传输方式。此外，文档还涵盖了JSP技术的概述，如JSP的起源、优势...

<!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>index.html</title> <link type="text/css" rel="stylesheet" href="../css/denglu.css"> </head> <body>

登录

<form>
<input type="text" placeholder="姓名">
<input type="password" placeholder="密码">
<input type="submit" value="登录">

忘记密码? 点击这里

没有账户? 注册

</form>

安庆欢迎您

</body> </html>

2023-02-06 上传
这是一段 HTML 代码。HTML 是用来构建网页的一种标记语言。这段代码定义了一个网页的布局、内容和样式...这段代码中还使用了一些其他的标签，比如 a、img 和 form 等，这些标签可以用来定义超链接、图片和表单等内容。

<!DOCTYPE html> <html> <head> <title>博客</title> </head> <body>

注册

<form action="/login" method="post"> <label for="username">账号:</label>
<input type="text" id="username" name="username">
<label for="password">密码:</label>
<input type="password" id="password" name="password">

<input type="submit" value="登录"> </form>

注册

<form action="/register" method="post"> <label for="username">账号:</label>
<input type="text" id="username" name="username">
<label for="password">密码:</label>
<input type="password" id="password" name="password">

<input type="submit" value="注册"> </form> </body> </html>
2023-03-09 上传
这是一段 HTML 代码。HTML 是一种用于在网页中创建内容的标记语言。这段 HTML 代码中包含了两个表单，分别用于登录和注册。表单由多个输入框和按钮...这段 HTML 代码还包含了一个 <title> 标签，用于设置网页的标题。

HTML中的表单<form>元素与JavaScript交互

点击了解资源详情
"这篇文档主要介绍了HTML中的表单元素 `<form>` 及其与JavaScript的交互，同时也概述了HTML的基本概念、语法和组成部分。" 在HTML中，表单元素`<form>`是用来创建用户交互界面的，允许用户输入数据并提交给服务器...

HTML基础教程：表单<form>详解与应用

点击了解资源详情
在表单基础中，`<form>`标签用于创建HTML表单，允许用户输入数据。`<form>`的`method`属性定义数据提交的方式，GET和POST是最常见的。GET发送的数据量有限，且会显示在URL，而POST则没有大小限制且数据对用户不可见...

逐句解释以下代码;<%@ page language="java" contentType="text/html; charset=UTF-8" import=" servlet.*" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>复数运算</title> </head> <body>

复数运算

<form method="post" action="ComplexCalculator"> <label>复数 1:</label> <input type="text" name="real1" placeholder="实部"> <input type="text" name="imag1" placeholder="虚部">
<label>复数 2:</label> <input type="text" name="real2" placeholder="实部"> <input type="text" name="imag2" placeholder="虚部">
<label>操作:</label> <select name="operation"> <option value="add">加</option> <option value="subtract">减</option> <option value="multiply">乘</option> <option value="divide">除</option> </select>
<input type="submit" value="运算"> </form> <% Complex result = (Complex) request.getAttribute("result"); if (result != null) { %>

Result: <%= result %>

<% } %> </body> </html>
2023-06-13 上传
method="post" 表示使用 POST 方法提交表单数据，action="ComplexCalculator" 表示提交表单数据的 URL。 第十一行：<label>复数 1:</label> - 这是一个 HTML 标签，用于定义表单中的标签。这里定义了一个名为“复数...
西住流军神
  • 粉丝: 31
  • 资源: 2万+
上传资源 快速赚钱

最新资源