【JavaWEB-前端基础】HTML的基本使用

阿锤是个靓仔

已于 2023-09-01 08:21:12 修改

阅读量40

点赞数

分类专栏： HTML 前端基础 JavaWEB 文章标签： html java

于 2023-08-31 16:56:01 首次发布

本文链接：https://blog.csdn.net/qq_24809923/article/details/132605165

版权

前端基础同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

JavaWEB

3 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

HTML的基本使用

在Web开发的世界中，HTML扮演着核心角色，为网页内容提供结构。无论是简单的文本页面还是复杂的互动应用，都离不开HTML的支持。本文将为您介绍HTML的基本标签，并通过实例进行解释。

1. 结构标签

HTML文档通常以以下基本结构为基础：

<!DOCTYPE html>
<html>
<head>
    <title>文档标题</title>
</head>
<body>
    页面内容
</body>
</html>

<!DOCTYPE html>：声明文档类型为HTML5。
<html>：整个页面的根元素。
<head>：包含元数据，如标题、字符集和样式链接。
<title>：定义浏览器标签页上显示的文档标题。

2. 文本格式化

HTML提供了一系列标签，用于格式化文本内容。

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
...
<h6>这是标题 6</h6>

<p>这是一个段落。</p>
<strong>加粗文本</strong>
<em>斜体文本</em>

结果：
在这里插入图片描述

3. 链接和图片

通过超链接，HTML页面可以连接到其他页面或资源。

<a href="https://www.example.com">访问Example.com</a>
<br><br>
 <img src="image.jpg" alt="可爱的小猫咪" width = "150">

<a>: 定义一个链接。
<img>: 用于嵌入图片。
-br:break

4. 列表

HTML支持多种列表类型。

<!-- 无序列表 -->
<ul>
    <li>项目1</li>
    <li>项目2</li>
</ul>

<!-- 有序列表 -->
<ol>
    <li>第一个项目</li>
    <li>第二个项目</li>
</ol>

在这里插入图片描述

5. 表格

表格用于展示结构化数据。

<table>
    <thead>
        <tr>
            <th>标题1</th>
            <th>标题2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>数据1</td>
            <td>数据2</td>
        </tr>
    </tbody>
</table>

在这里插入图片描述

6. 表单标签

当然可以，HTML中的表单标签允许用户在网页上输入数据。这些数据可以通过表单提交到服务器进行处理。以下是HTML中常用的表单元素和标签。

1. `<form>` 标签

<form> 标签用于定义一个表单。它常常包含一个或多个表单元素。通常，表单有一个提交按钮，点击该按钮会将数据发送到服务器。

常用属性：

action: 定义表单数据提交的URL。
method: 定义数据提交的方法，常用的是 GET 和 POST。

示例：

<form action="/submit" method="post">
    <!-- 表单元素在此 -->
    <input type="submit" value="提交">
</form>

2. `<input>` 标签

<input> 是最常用的表单元素，它有多种类型：

text: 文本框

<input type="text" name="username" placeholder="输入用户名">

password: 密码框

<input type="password" name="password" placeholder="输入密码">

radio: 单选按钮

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

checkbox: 复选框

<input type="checkbox" name="hobbies" value="reading"> 阅读
<input type="checkbox" name="hobbies" value="traveling"> 旅游

submit: 提交按钮

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

file: 文件选择

<input type="file" name="upload">

hidden: 隐藏字段，用户看不到但可以提交给服务器

<input type="hidden" name="token" value="123456">

3. `<textarea>` 标签

用于多行文本输入。

<textarea name="message" rows="4" cols="50">
在此输入你的消息
</textarea>

4. `<select>` 和 `<option>` 标签

用于下拉选择框。

<select name="country">
    <option value="usa">美国</option>
    <option value="china">中国</option>
    <option value="india">印度</option>
</select>

5. `<label>` 标签

用于为<input>元素定义标签，提高用户体验。

<label for="username">用户名：</label>
<input type="text" id="username" name="username">

点击“用户名”文字会使文本框成为焦点。

6. `<fieldset>` 和 `<legend>` 标签

当然可以！

<fieldset> 标签

<fieldset> 标签用于将一组相关的表单元素组合在一起。它常常与 <legend> 标签结合使用，为这组元素提供一个标题。当你需要将一些相关的表单元素，如一组选择按钮或文本框，归为一个组，并希望它们在视觉上与其他表单元素区分开，那么 <fieldset> 就会派上用场。

特性：

disabled：此属性将禁用字段集中的所有表单控件。即，用户无法与其中的任何元素交互。
form：此属性与 <form> 元素的 id 属性关联，用于指定属于哪个表单（对于那些未被直接包含在表单中的字段集）。
name：为字段集提供名称。

<legend> 标签

<legend> 标签为 <fieldset> 定义标题。它应放在 <fieldset> 元素的开始标签之后，用于为其提供一个描述。这对于视觉效果很有帮助，但对于屏幕阅读器用户来说尤其重要，因为它为字段集提供了上下文。

<form action="/action_page.php">
  <fieldset>
    <legend>个人信息:</legend>
    姓名: <input type="text" name="name"><br><br>
    电子邮件: <input type="text" name="email"><br><br>
    <input type="submit" value="提交">
  </fieldset>
</form>

结果：
在这里插入图片描述

在上面的例子中，我们使用了 <fieldset> 来对两个相关的输入字段进行分组，并通过 <legend> 提供了标题“个人信息”。这样，当用户查看表单时，他们可以知道这两个输入字段都与个人信息有关。

总的来说，这两个标签在提高表单的可用性和组织结构方面非常有用，尤其是当您处理包含大量输入字段的复杂表单时。

程序示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单示例</title>
</head>
<body>
    <form action="/submit" method="post">

        <!-- 文本输入 -->
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" placeholder="输入用户名"><br><br>

        <!-- 密码输入 -->
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" placeholder="输入密码"><br><br>

        <!-- 单选按钮 -->
        性别：<br>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">男</label><br>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">女</label><br><br>

        <!-- 复选框 -->
        兴趣爱好：<br>
        <input type="checkbox" id="reading" name="hobbies" value="reading">
        <label for="reading">阅读</label><br>
        <input type="checkbox" id="traveling" name="hobbies" value="traveling">
        <label for="traveling">旅游</label><br><br>

        <!-- 文本域 -->
        <label for="message">消息：</label><br>
        <textarea id="message" name="message" rows="4" cols="50">
        在此输入你的消息
        </textarea><br><br>

        <!-- 下拉选择框 -->
        <label for="country">选择国家：</label>
        <select id="country" name="country">
            <option value="usa">美国</option>
            <option value="china">中国</option>
            <option value="india">印度</option>
        </select><br><br>

        <!-- 文件选择 -->
        <label for="file">选择文件：</label>
        <input type="file" id="file" name="upload"><br><br>

        <!-- 隐藏字段 -->
        <input type="hidden" name="token" value="123456">

        <!-- 提交按钮 -->
        <input type="submit" value="提交">
    </form>
</body>
</html>

结果：
在这里插入图片描述

8. 块

『块』并不是为了显示文章内容的，而是为了方便结合CSS对页面进行布局。块有两种，div是前后有换行的块，span是前后没有换行的块。

把下面代码粘贴到HTML文件中查看他们的区别：

<div style="border: 1px solid black;width: 100px;height: 100px;">This is a div block</div>
<div style="border: 1px solid black;width: 100px;height: 100px;">This is a div block</div>

<span style="border: 1px solid black;width: 100px;height: 100px;">This is a span block</span>
<span style="border: 1px solid black;width: 100px;height: 100px;">This is a span block</span>

在这里插入图片描述

9. HTML实体

当您想在HTML中显示特殊字符（如小于号 <、大于号 >、和符号 &）时，您需要使用 HTML 实体来进行转义，以避免它们被解释为标签或其他特殊用途。以下是一个用

标签创建一个包含特殊字符的表格的例子：

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border-collapse: collapse;
            width: 80%;
            margin: 20px;
        }
        table, th, td {
            border: 1px solid black;
        }
        th, td {
            padding: 8px 12px;
            text-align: left;
        }
    </style>
</head>
<body>

<table>
    <tr>
        <th>特殊字符</th>
        <th>HTML 实体</th>
        <th>描述</th>
    </tr>
      <tr>
        <td> </td>
        <td>&amp;nbsp</td>
        <td>空格</td>
    </tr>
    <tr>
        <td><</td>
        <td>&amp;lt;</td>
        <td>小于符号</td>
    </tr>
    <tr>
        <td>></td>
        <td>&amp;gt;</td>
        <td>大于符号</td>
    </tr>
    <tr>
        <td>&</td>
        <td>&amp;amp;</td>
        <td>和号</td>
    </tr>
    <tr>
        <td>"</td>
        <td>&amp;quot;</td>
        <td>双引号</td>
    </tr>
    <tr>
        <td>'</td>
        <td>&amp;apos;</td>
        <td>单引号</td>
    </tr>
    <tr>
        <td>©</td>
        <td>&amp;copy;</td>
        <td>版权符号</td>
    </tr>
    <tr>
        <td>®</td>
        <td>&amp;reg;</td>
        <td>注册商标符号</td>
    </tr>
    <tr>
        <td>÷</td>
        <td>&amp;divide;</td>
        <td>除号</td>
    </tr>
    <tr>
        <td>±</td>
        <td>&amp;plusmn;</td>
        <td>正负号</td>
    </tr>
    <tr>
        <td>¢</td>
        <td>&amp;cent;</td>
        <td>分币符号</td>
    </tr>
    <tr>
        <td>£</td>
        <td>&amp;pound;</td>
        <td>英镑符号</td>
    </tr>
    <tr>
        <td>¥</td>
        <td>&amp;yen;</td>
        <td>日元符号</td>
    </tr>
    <tr>
        <td>€</td>
        <td>&amp;euro;</td>
        <td>欧元符号</td>
    </tr>
    <tr>
        <td>§</td>
        <td>&amp;sect;</td>
        <td>小节符号</td>
    </tr>
    <tr>
        <td>µ</td>
        <td>&amp;micro;</td>
        <td>微符号</td>
    </tr>
    <tr>
        <td>…</td>
        <td>&amp;hellip;</td>
        <td>省略号</td>
    </tr>
    <tr>
        <td>°</td>
        <td>&amp;deg;</td>
        <td>度符号</td>
    </tr>
</table>

</body>
</html>

结果：
在这里插入图片描述

结束语

HTML是Web开发的基石。虽然上面列出的只是一些基本标签，但它们为构建Web页面提供了坚实的基础。希望本文能为您提供快速入门HTML的路径，但真正的掌握仍需实践和深入学习。

参考文章

第三节使用HTML展示文章
 第五节使用HTML表单收集数据

阿锤是个靓仔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JavaWEB-前端基础】HTML的基本使用

HTML的基本使用1. 结构标签2. 文本格式化3. 链接和图片4. 列表5. 表格6. 表单标签1. `<form>` 标签2. `<input>` 标签3. `<textarea>` 标签4. `<select>` 和 `<option>` 标签5. `<label>` 标签6. `<fieldset>` 和 `<legend>` 标签程序示例8. 块9. HTML实体结束语参考文章在Web开发的世界中，H
复制链接

扫一扫