网页 HTML 基础入门：从基本结构到表单实战- 惊觉

1. HTML 是什么

HTML（HyperText Markup Language，超文本标记语言）是网页的基础语言，用来描述网页的结构和内容。

它通过一个个标签来组织内容，比如标题、段落、图片、链接、表单等。
浏览器读取 HTML 文件后，会解析标签并把内容渲染成我们看到的网页。
学习 HTML 时，推荐随时查询官方手册：

https://www.w3school.com.cn/

提示：HTML 不是编程语言，它是「标记语言」，主要作用是描述内容，而不是实现逻辑。

2. 基本格式

一个最简单的 HTML 页面结构如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>中文测试</title>
    </head>
    <body>
        这里是测试 body 测试内容
    </body>
</html>

各部分含义：

标签	作用
`<!DOCTYPE html>`	声明文档类型，告诉浏览器按 HTML 标准解析
`<html>`	整个网页的根标签
`<head>`	网页头部，存放元信息，通常不直接显示在页面上
`<meta charset="utf-8">`	指定编码为 UTF-8，避免中文乱码
`<title>`	网页标题，显示在浏览器标签栏
`<body>`	网页正文，用户在页面中看到的内容都写在这里

小贴士：如果页面中文出现乱码，先检查是否写了 <meta charset="utf-8">。

3. 常用标签

3.1 标题与段落

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

<p>这是一个段落。</p>

3.2 换行与分隔线

<p>
    第一行<br>
    第二行
</p>

<hr>

<br>：换行标签。
<hr>：水平分隔线。

3.3 文本强调

<b>加粗</b>
<strong>强调</strong>
<i>斜体</i>
<u>下划线</u>

4. 超链接

超链接使用 <a> 标签，href 属性指定链接目标。

4.1 链接外部网站

<a href="http://www.baidu.com">baidu</a>

4.2 链接本地文件

<a href="1.html">打开本地页面</a>

4.3 图片链接

把图片放在链接标签内部，点击图片即可跳转：

<a href="1.html">
    <img src="abc.jpg" alt="示例图片">
</a>

三种常见用法小结：

类型	示例	说明
外部网站	`<a href="http://www.baidu.com">baidu</a>`	链接到其他网站
本地文件	`<a href="1.html">本地页面</a>`	链接到本地 HTML 文件
图片链接	`<a href="1.html"><img src="abc.jpg"></a>`	点击图片跳转

5. 图片

<img> 是单标签，不需要闭合标签。

常用属性：

属性	作用
`src`	图片来源
`alt`	图片无法正常显示时，展示的替代文字
`width`	图片宽度
`height`	图片高度

示例 1：使用像素指定尺寸

<img src="abc.jpg" alt="美女" width="100" height="200">

示例 2：使用百分比指定尺寸

<img src="abc.jpg" alt="美女" width="50%">

注意：alt 不仅能提升图片无法显示时的体验，也有利于搜索引擎理解和无障碍访问，建议养成填写习惯。

6. 表单

表单用于向服务器传递参数和数据，核心标签是 <form>。

6.1 form 标签

<form action="提交地址" method="get">
    <!-- 表单内容 -->
</form>

两个重要属性：

属性	作用
`action`	指定表单发送的地址
`method`	指定发送方式，常见值为 `get` 和 `post`

get 与 post 的区别：

get：数据会附加到 URL 的后面传递给服务器，是默认方式。
post：把数据打包发给服务器，等候服务器来读取，相对更安全，适合提交密码等敏感信息。

6.2 input 输入框

input 是表单中最重要的子元素，用来指定表单中的内容项。

<form action="login.php" method="post">
    用户名：<input type="text" name="username"><br>
    密码：<input type="password" name="password"><br>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>

input 元素常用属性：

属性	作用
`type`	指定输入框类型
`name`	名称，提交参数时的参数名
`value`	默认值，输入框默认填入的内容
`maxlength`	指定最大长度
`placeholder`	设置提示信息
`required`	表示内容必须填写，否则不能提交

常用 type 类型：

type 值	说明
`text`	单行文本输入框
`password`	密码输入框，内容会被遮蔽
`submit`	提交按钮
`reset`	重置按钮
`button`	普通按钮，需要关联事件使用
`image`	图片式按钮
`hidden`	隐藏字段，不在页面显示，用于提交其他变量
`email`	邮箱类型，属于新特性，不同浏览器支持可能有差异

6.3 一个完整示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>登录表单示例</title>
    </head>
    <body>
        <h2>用户登录</h2>

        <form action="login.php" method="post">
            用户名：
            <input type="text" name="username" placeholder="请输入用户名" required>
            <br><br>

            密码：
            <input type="password" name="password" placeholder="请输入密码" required>
            <br><br>

            邮箱：
            <input type="email" name="email" placeholder="请输入邮箱">
            <br><br>

            <input type="submit" value="登录">
            <input type="reset" value="清空">
        </form>
    </body>
</html>

7. 总结

HTML 是网页开发的第一步，掌握基本结构、常用标签、超链接、图片和表单后，就可以独立写出简单的静态页面。

学习路线建议：

先熟悉 HTML 基本结构，养成规范书写习惯。
练习常用标签，尤其是链接、图片和表单。
遇到不熟悉的标签，随时查阅 W3School 手册。

https://www.w3school.com.cn/

掌握 HTML 之后，可以继续学习 CSS 美化页面，以及 JavaScript 实现交互，逐步进入完整的前端开发领域。

转载自 CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/TAOZE123/article/details/170456406

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