HTML

HTML

HTML入门

HTML（HyperText Markup Language）是用于创建网页的标准标记语言。它通过标签（tags）来定义网页的结构和内容。

一个基本的HTML文档结构如下

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!--  确保网页在移动设备上正确显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>
  • <!DOCTYPE html>：声明文档类型为HTML5。
  • <html>：根元素，包含整个HTML文档。
    • lang：指定文档的语言（如en表示英语，zh-CN表示简体中文）
  • <head>：包含元数据（如字符集、标题、样式表链接等），不会直接显示在页面上。
  • <body>：包含网页的可见内容。

HTML注释和实体

  • 注释

    • <!-- 这是一个注释 -->

  • HTML实体

  • 用于显示特殊字符

    &lt;：<

&gt;：>

&amp;：&

&nbsp;：空格

HTML标签

  • HTML标签用于定义内容的结构和语义。标签通常成对出现，分为开始标签和结束标签

  • 常见文本标签

    • 标题标签：<h1> 到 <h6>

      • 定义标题，h1是最高级标题，h6是最低级标题。

      • <h1>一级标题</h1>
<h2>二级标题</h2>

    • 段落标签：<p>

      • 定义段落

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

    • <span>

      • 用于对文本的一部分进行样式化或操作

      • <p>这是一个<span style="color: red;">红色</span>文本。</p>

    • <br>：插入换行符

    • <hr>：插入水平线

  • 链接和图像标签

    • <a>

      • 定义超链接

      • 属性

        • href：指定链接的目标地址。

        • target：指定链接的打开方式（如_blank表示在新标签页打开）。

        • <a href="https://www.example.com" target="_blank">访问示例网站</a>

    • <img>

      • 插入图像

      • 属性

        • src：指定图像的路径。

        • alt：提供图像的替代文本（当图像无法显示时显示）。

        • <img src="image.jpg" alt="描述文本">

  • 列表标签

    • <li>

      • 定义列表项。

    • <ul>

      • 定义无序列表

      • <ul>
    <li>项目1</li>
    <li>项目2</li>
</ul>

    • <ol>

      • 定义有序列表

      • <ol>
    <li>项目1</li>
    <li>项目2</li>
</ol>

HTML表格

一个基本的HTML表格由以下标签组成：

  • <table>：定义表格。
  • <tr>：定义表格行。
    • 常用属性：
      • align：设置行内容的水平对齐方式（如left、center、right）。
      • valign：设置行内容的垂直对齐方式（如top、middle、bottom）。
  • <td>：定义表格单元格。
    • 常用属性：
      • colspan：设置单元格横跨的列数。
      • rowspan：设置单元格横跨的行数。
      • align：设置单元格内容的水平对齐方式。
      • valign：设置单元格内容的垂直对齐方式。
  • <th>：定义表头单元格。
    • 里面的文字会加黑

  • 定义表格：<table>

    • <table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
        <td>数据1</td>
        <td>数据2</td>
    </tr>
</table>

  • 定义表格行:<tr>

  • 定义表格单元格:<td>

  • 定义表头单元格:<th>

HTML表单

HTML表单（Form）是网页中用于收集用户输入的重要工具。表单通常包含输入字段、按钮、下拉菜单等元素，用户可以通过这些元素输入数据，然后将数据提交到服务器进行处理。

输入字段input

<input> 是最常用的表单元素，它可以根据type属性的不同，呈现为不同的输入控件。

<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>

<label for="email">邮箱:</label>
<input type="email" id="email" name="email"><br><br>

<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>

<label for="age">年龄:</label>
<input type="number" id="age" name="age"><br><br>

<label for="birthday">生日:</label>
<input type="date" id="birthday" name="birthday"><br><br>

<label for="color">喜欢的颜色:</label>
<input type="color" id="color" name="color"><br><br>

<label for="file">上传文件:</label>
<input type="file" id="file" name="file"><br><br>
  • type="text"：单行文本输入框。
  • type="email"：用于输入电子邮件地址，浏览器会自动验证格式。
  • type="password"：密码输入框，输入内容会被隐藏。
  • type="number"：用于输入数字。
  • type="date"：用于选择日期。
  • 默认值：以上所有如果上传表单时不添加对应的值，则默认上传空字符串（""）。
  • type="color"：用于选择颜色。
    • 默认值：#000000（黑色）。
  • type="file"：用于上传文件。

单选与多选按钮

单选按钮

  • 单选按钮 (<input type="radio">)

    • 单选按钮允许用户从一组选项中选择一个

    • 同一组单选按钮的 name 属性必须相同

    • 使用 checked 属性设置默认选中的单选按钮

    • <label>性别:</label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label><br><br>
      • name：相同的name属性将单选按钮分组，确保用户只能选择一个选项。
      • value：提交表单时，选中的单选按钮的值会被发送到服务器。

多选按钮

  • 复选框 (<input type="checkbox">

    • 复选框允许用户从一组选项中选择多个

    • 使用 checked 属性设置默认选中的多选按钮

    • <label>兴趣爱好:</label>
<input type="checkbox" id="hobby1" name="hobby" value="reading" checked>
<label for="hobby1">阅读</label>
<input type="checkbox" id="hobby2" name="hobby" value="sports">
<label for="hobby2">运动</label>
<input type="checkbox" id="hobby3" name="hobby" value="music">
<label for="hobby3">音乐</label><br><br>
      • name：相同的name属性将复选框分组。
      • value：提交表单时，选中的复选框的值会被发送到服务器。

下拉菜单与文本区域

  • 下拉菜单 (<select>)

    • 下拉菜单允许用户从多个选项中选择一个。

    • 使用 selected 属性设置默认选中的选项

    • 如果未设置 selected，默认选中第一个选项

    • <label for="country">国家:</label>
<select id="country" name="country">
  <option value="china">中国</option>
  <option value="usa" selected>美国</option>
  <option value="uk">英国</option>
</select><br><br>
      • <option>：每个选项由一个<option>标签定义。
      • value：提交表单时，选中的选项的值会被发送到服务器。

  • 文本区域 (<textarea>)

    • 文本区域用于输入多行文本。

    • <label for="message">留言:</label><br>
<textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
      • rows 和 cols：分别指定文本区域的行数和列数。

表单

  • 一个基本的HTML表单由<form>标签定义，表单内的各种输入元素则通过<input>、<textarea>、<select>等标签来创建

  • 表单中的元素需指定其中的name属性，否则该元素的数据不会发送给服务器

  • <form action="/submit-form" method="post">
  <!-- 表单内容 -->
</form>
    • action：指定表单提交的URL，即数据提交到哪个服务器端脚本进行处理。
    • method：指定表单数据的提交方式，常用的有GET和POST。
      • GET：将表单数据附加在URL后面，适合少量数据。
      • POST：将表单数据放在HTTP请求体中，适合大量数据或敏感数据。

表单提交路径

  • 加 /：从根目录开始查找，适合全局路径。
  • 不加 /：从当前目录开始查找，适合相对路径。

提交按钮

  • 提交按钮 (<input type="submit">)

  • 提交按钮用于将表单数据发送到服务器。

  • <input type="submit" value="提交">
    • value：按钮上显示的文本。

重置按钮 (<input type="reset">)

  • 重置按钮用于清除表单中的所有输入。

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

表单的简单验证

  • HTML5 提供了一些内置的表单验证功能，可以通过属性来实现。

  • 必填字段 (required)

    • <label for="username">用户名:</label>
<input type="text" id="username" name="username" required><br><br>
      • required：表示该字段必须填写，否则表单无法提交。

  • 最小长度和最大长度 (minlength 和 maxlength)

    • <label for="password">密码:</label>
<input type="password" id="password" name="password" minlength="6" maxlength="12" required><br><br>
      • minlength：指定输入的最小长度。
      • maxlength：指定输入的最大长度。

  • 正则表达式验证 (pattern)

    • <label for="zipcode">邮政编码:</label>
<input type="text" id="zipcode" name="zipcode" pattern="\d{6}" required><br><br>
posted @ 2025-03-18 14:46  QAQ001  阅读(31)  评论(0)    收藏  举报