HTML入门：从基础结构到表单实战

天骄t2025-12-31 12:04

HTML 基本结构

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>页面标题</title>
</head>
<body>
    页面内容
</body>
</html>

常用标签示例

超链接

html 复制代码

<a href="http://www.baidu.com">百度</a>
<a href="local.html">本地文件</a>
<a href="target.html"><img src="image.jpg" alt="图片链接"></a>

图片

html 复制代码

<img src="image.jpg" alt="替代文本" width="100" height="200">
<img src="image.jpg" alt="百分比尺寸" width="50%" height="50%">

表单基础

html 复制代码

<form action="submit.php" method="post">
    <input type="text" name="username" placeholder="用户名" required>
    <input type="password" name="pwd" maxlength="20">
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>

表单元素类型

text：单行文本输入
password：密码输入框（内容掩码）
submit：提交按钮
reset：重置表单按钮
button：普通按钮（需配合JavaScript使用）
email：邮箱输入（HTML5验证）
hidden：隐藏字段（不显示但会提交）

表单属性说明

action：表单提交的目标URL
method：数据传输方式（GET/POST）
required：标记必填字段
placeholder：输入提示文本
maxlength：最大输入字符数

学习资源

W3School中文教程提供完整的HTML标签参考和交互式示例。