HTML常见标签和作用

HTML基础

    • HTML的基本结构
    • HTML元素
    • HTML表单
      • 创建HTML表单元素
      • 处理HTML表单数据

HTML的基本结构

HTML(HyperText Markup Language)的基本结构包括以下几个主要部分:

  1. <!DOCTYPE html>:文档类型声明,它告诉浏览器文档采用哪个HTML版本。通常位于HTML文档的开头,以确保浏览器正确解释文档。

  2. <html>:HTML文档的根元素。它包含了整个HTML文档的内容,并定义了文档的开始和结束。

  3. <head>:文档头部部分,用于包含与文档相关的元信息(meta-information),通常不会在网页中直接显示给用户。常见的内容包括:

    • <meta>:定义文档的元信息,如字符集、作者、关键词等。
    • <title>:定义网页的标题,显示在浏览器标签页上。
    • <link>:引入外部样式表文件(CSS)。
    • <script>:引入外部JavaScript文件或内部脚本。
  4. <body>:HTML文档的主体部分,包含了页面的可见内容,如文本、图像、链接等。用户访问网页时,这部分内容会在浏览器中呈现。

基本的HTML文档结构如下所示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>网页标题</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" type="text/css" href="styles.css"><script src="script.js"></script>
</head>
<body><h1>这是一个标题</h1><p>这是一个段落。</p><img src="image.jpg" alt="图片"><a href="https://www.example.com">这是一个链接</a>
</body>
</html>

这是一个简单的HTML文档示例。HTML文档的结构和内容会根据具体的需求和设计而有所不同,但上述基本结构是HTML文档的核心部分,它为网页提供了基本的框架。

HTML元素

HTML(Hypertext Markup Language)中有许多不同类型的元素,它们用于构建网页的结构和内容。以下是一些常见的HTML元素:

  1. 标题元素

    • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>:定义标题,按重要性递减。

    • 标题元素 <h1><h6>:用于定义标题,从 <h1>(最高级别)到 <h6>(最低级别)。

      <h1>这是一个主标题</h1>
      <h2>这是一个次级标题</h2>
      
  2. 段落元素

    • <p>:定义文本段落。

    • 段落元素 <p>:用于定义文本段落。

      <p>这是一个段落。段落是用来组织文本的基本单位。</p>
      
  3. 链接元素

    • <a>:创建超链接到其他页面或资源。

    • 链接元素 <a>:用于创建超链接到其他页面或资源。

      <a href="https://www.example.com">访问示例网站</a>
      
  4. 图像元素

    • <img>:嵌入图像。

    • 图像元素 <img>:用于嵌入图像。

      <img src="image.jpg" alt="图片描述">
      
  5. 列表元素

    • <ul>:创建无序列表。

    • <ol>:创建有序列表。

    • <li>:定义列表项。

    • 列表元素 <ul><ol>:用于创建无序列表和有序列表。

      <ul><li>无序列表项 1</li><li>无序列表项 2</li>
      </ul><ol><li>有序列表项 1</li><li>有序列表项 2</li>
      </ol>
      
  6. 定义列表元素

    • <dl>:创建定义列表。
    • <dt>:定义术语。
    • <dd>:定义术语的描述。
    • 定义列表元素 <dl><dt><dd>:用于创建术语和其描述的定义列表。
      <dl><dt>术语1</dt><dd>术语1的定义。</dd><dt>术语2</dt><dd>术语2的定义。</dd>
      </dl>
      
  7. 表格元素

    • <table>:创建表格。

    • <tr>:定义表格行。

    • <td>:定义表格数据单元格。

    • <th>:定义表格标题单元格。

    • <caption>:为表格添加标题。

    • 表格元素 <table><tr><td><th>:用于创建表格。

      <table><tr><th>表头1</th><th>表头2</th></tr><tr><td>数据1</td><td>数据2</td></tr>
      </table>
      
  8. 表单元素

    • <form>:创建用户输入表单。

    • <input>:定义输入字段。

    • <textarea>:创建多行文本输入框。

    • <select>:创建下拉菜单。

    • <button>:创建按钮。

    • <label>:为表单元素添加标签。

    • <fieldset>:将相关表单元素分组。

    • <legend>:为<fieldset>元素添加标题。

    • 表单元素 <form><input>:用于创建用户输入表单和输入字段。

      <form><label for="username">用户名:</label><input type="text" id="username" name="username"><input type="submit" value="提交">
      </form>
      
  9. 媒体元素

    • <audio>:嵌入音频。

    • <video>:嵌入视频。

    • <iframe>:嵌入其他网页或文档。

    • HTML媒体元素用于嵌入音频和视频等多媒体内容到网页中。以下是HTML中两个主要的媒体元素的使用示例:

      1. <audio> 元素:用于嵌入音频文件。
      <audio controls><source src="audio.mp3" type="audio/mpeg">Your browser does not support the audio element.
      </audio>
      
      • <audio> 元素包含一个或多个 <source> 元素,每个 <source> 元素指定不同格式的音频文件。浏览器会自动选择支持的格式。
      • controls 属性添加音频播放器的控件,如播放按钮、音量控制等。
      • 如果浏览器不支持 <audio> 元素或指定的音频格式,将显示后备内容。
      1. <video> 元素:用于嵌入视频文件。
      <video controls width="400"><source src="video.mp4" type="video/mp4"><source src="video.webm" type="video/webm">Your browser does not support the video element.
      </video>
      
      • <video> 元素也包含一个或多个 <source> 元素,每个 <source> 元素指定不同格式的视频文件。
      • controls 属性添加视频播放器的控件,允许用户播放、暂停、调整音量等。
      • width 属性定义视频的宽度,可以根据需要设置。
      • <audio> 元素类似,如果浏览器不支持 <video> 元素或指定的视频格式,将显示后备内容。

      请注意,以上示例中的文件路径应该根据实际的文件位置进行调整。另外,为确保广泛的浏览器兼容性,通常需要提供多个不同格式的媒体文件,以便浏览器选择支持的格式。

      媒体元素还支持其他属性,例如 autoplay(自动播放)、loop(循环播放)、poster(封面图像)、preload(预加载等),可以根据需求进行配置。如果需要更多的交互和自定义控制,可以使用JavaScript与这些元素进行交互。

  10. 样式和分隔元素

    • <div>:用于组织和布局页面内容,通常用于CSS样式控制。

    • <span>:用于内联元素,通常用于CSS样式控制。

    • <hr>:创建水平线。

    • <br>:插入换行符。

    • 样式和分隔元素 <div><span>:用于组织和布局页面内容,通常用于CSS样式控制。

      <div class="container"><p>这是一个<div>元素。</p>
      </div><span style="color: red;">这是一个<span>元素。</span>
      
  11. 文本格式元素

    • <strong>:表示强调文本,通常以粗体显示。

    • <em>:表示强调文本,通常以斜体显示。

    • <code>:表示计算机代码。

    • <mark>:高亮显示文本。

    • <sub>:表示下标文本。

    • <sup>:表示上标文本。

    • 文本格式元素 <strong><em>:用于表示文本的强调。

      <p><strong>重要信息:</strong>这是一个重要的内容部分。</p>
      <p><em>注意:</em>请仔细阅读说明。</p>
      
  12. 其他元素

    • <nav>:定义导航链接。
    • <header>:定义文档头部。
    • <footer>:定义文档底部。
    • <aside>:定义侧边栏内容。
    • <main>:定义文档的主要内容。
    • <article>:定义独立的文章内容。
    • <section>:定义文档的一个部分。
    • 其他元素 <nav><header><footer><aside><main><article>:用于定义页面的各个部分和结构。
      <header><h1>网站标题</h1>
      </header><nav><ul><li><a href="#">首页</a></li><li><a href="#">关于我们</a></li></ul>
      </nav><main><h2>主要内容</h2><p>这是主要内容部分。</p>
      </main><footer><p>版权所有 &copy; 2023</p>
      </footer>
      

这些元素的组合和嵌套形成了网页的结构和内容。通过正确使用这些元素,可以创建有意义且易于理解的网页。

HTML表单

HTML表单元素用于创建用户输入表单,以便用户可以提交数据到服务器或进行交互。以下是创建和处理HTML表单的基本步骤:

创建HTML表单元素

  1. <form> 元素:使用 <form> 元素来定义整个表单,包括用户输入字段和提交按钮。
<form action="submit.php" method="post"><!-- 表单内容将被放置在这里 --><input type="text" name="username" placeholder="用户名"><input type="password" name="password" placeholder="密码"><button type="submit">提交</button>
</form>
  • action 属性定义表单提交的目标URL。
  • method 属性定义提交方法,通常为 “post” 或 “get”。
  1. 输入字段:使用 <input> 元素和其他元素来定义表单中的输入字段。
<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
  • type 属性定义输入字段的类型,如文本、密码、单选按钮等。
  • name 属性定义字段的名称,用于标识字段的值。
  • placeholder 属性可提供字段的占位符文本。
  1. 标签元素:使用 <label> 元素来为输入字段添加标签,提高可用性。
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
  • for 属性的值应与相关输入字段的 id 属性相匹配,以建立关联。
  1. 其他输入字段:除了文本和密码字段,还有许多其他类型的输入字段,如单选按钮、复选框、下拉列表等。
<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性<input type="checkbox" name="subscribe" value="yes"> 订阅<select name="country"><option value="us">美国</option><option value="ca">加拿大</option><!-- 其他选项 -->
</select>

处理HTML表单数据

当用户提交表单时,表单数据将被发送到服务器。服务器端可以使用不同的编程语言(如PHP、Node.js、Python等)来处理和验证表单数据。

在服务器端,可以通过以下方式来访问和处理表单数据:

  • POST 方法:通过 POST 方法提交的表单数据通常在请求的正文中,可以使用服务器端脚本来解析和处理这些数据。
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {$username = $_POST["username"];$password = $_POST["password"];// 进行数据验证和处理
}
?>
  • GET 方法:通过 GET 方法提交的表单数据通常附加在URL中,可以使用服务器端脚本来解析和处理这些数据。
<?php
if ($_SERVER["REQUEST_METHOD"] == "GET") {$username = $_GET["username"];$password = $_GET["password"];// 进行数据验证和处理
}
?>

请注意,从安全性角度考虑,对用户提交的数据进行验证和过滤是非常重要的。应该对输入数据进行适当的验证和处理,以防止安全漏洞和恶意输入。

以上是HTML表单元素的基本创建和处理过程。实际中,表单可以包含更多的输入字段和复杂的验证逻辑,具体取决于项目需求。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/67462.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux命令200例:man用于显示和阅读关于Linux内置命令的使用说明

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;CSDN领军人物&#xff0c;全栈领域优质创作者✌。CSDN专家博主&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0…

Git使用经验总结2-配置用户名邮箱

可以使用git config指令来配置一些设置&#xff0c;比如配置用户名邮箱。在开发团队要求成员配置用户名和邮箱是很有用的&#xff0c;可以配合工具区分成员的代码&#xff0c;以及将代码中的问题发送给成员的邮箱中。 查看当前Git的用户名及邮箱的指令&#xff1a; git confi…

2023牛客暑期多校训练营7 CI「位运算」「根号分治+容斥」

C-Beautiful Sequence_2023牛客暑期多校训练营7 (nowcoder.com) 题意&#xff1a; 给定一个b序列&#xff0c;a序列满足 a [ i − 1 ] < a [ i ] a[i-1]<a[i] a[i−1]<a[i]且 a [ i ] ⊕ a [ i 1 ] b [ i ] a[i]\oplus a[i1]b[i] a[i]⊕a[i1]b[i]&#xff0c;求字…

后端SpringBoot+前端Vue前后端分离的项目(一)

前言&#xff1a;后端使用SpringBoot框架&#xff0c;前端使用Vue框架&#xff0c;做一个前后端分离的小项目&#xff0c;需求&#xff1a;实现一个表格&#xff0c;具备新增、删除、修改的功能。 目录 一、数据库表的设计 二、后端实现 环境配置 数据处理-增删改查 model…

Excel·VBA二维数组组合函数的应用实例

看到一个问题《关于#穷举#的问题&#xff0c;如何解决&#xff1f;(语言-开发语言)》&#xff0c;对同一个数据存在“是/否”2种状态&#xff0c;判断其是否参与计算&#xff0c;并输出一系列数据的“是/否”状态的结果 目录 方法1&#xff1a;二维数组组合函数结果 方法2&am…

【FusionInsight 迁移】HBase从C50迁移到6.5.1(02)C50上准备FTP Server

【FusionInsight 迁移】HBase从C50迁移到6.5.1&#xff08;02&#xff09;C50上准备FTP Server HBase从C50迁移到6.5.1&#xff08;02&#xff09;C50上准备FTP Server登录老集群FusionInsight C50的Manager准备FTP User准备FTP Server HBase从C50迁移到6.5.1&#xff08;02&am…

什么是强制缓存?什么是协商缓存?cache

强制缓存和协商缓存是用于在Web浏览器和服务器之间进行缓存控制的两种机制。 强制缓存&#xff08;强缓存&#xff0c;强制缓存&#xff09;&#xff1a; 强制缓存是通过设置HTTP响应头来实现的&#xff0c;它告诉浏览器在一定时间内直接使用缓存的副本&#xff0c;而不需要再…

Java泛型(待补充)

泛型是一种“代码模板”&#xff0c;可以用一套代码套用各种类型。 一、什么是泛型&#xff1f; 泛型就是编写模板代码来适应任意类型&#xff1b;泛型的好处是使用时不必对类型进行强制转换&#xff0c;它通过编译器对类型进行检查&#xff1b;注意泛型的继承关系&#xff1a…

Vue3响应式源码实现

Vue3响应式源码实现 初始化项目结构 vue-proxy ├── effect.js ├── effect.ts ├── index.html ├── index.js ├── package.json ├── reactive.js ├── reactive.ts └── webpack.config.jsreactive.ts import { track, trigger } from "./effect&q…

java操作adb查看apk安装包包名【搬代码】

Testpublic static void findadb() throws InterruptedException {String apkip"E:\\需求\\2023\\gql_1.0.1.apk";String findname1"cmd /c cd E:\\appium\\android-sdk\\build-tools\\27.0.2";//没有进到这里String s1 Cmd.exeCmd(findname1);System.out…

缓存案例-架构真题(二十二)

试题一 某大型电商平台建立一个B2B商店系统&#xff0c;并在全国建设了仓储中心。但是在运营过程中&#xff0c;发现很多跨仓储中心调货&#xff0c;延误运送。为此建立全国仓储系统&#xff0c;通过对订单的分析和挖掘&#xff0c;并通过大数据分析预测各类配置&#xff0c;降…

什么是接口测试,如何做接口测试?

比起点点点的功能测试&#xff0c;“接口测试”显得专业又高大上&#xff0c;也因此让有些初级测试人员“望而生畏”。别担心&#xff0c;其实接口测试也是功能测试的一种&#xff0c;它是针对接口进行的功能测试。 写在前面&#xff1a;本文参考了茹炳晟老师的《测试工程师 全…

opencv-4.5.2-android-sdk.zip安装教程

opencv-4.5.2-android-sdk.zip&#xff1a; 下载链接&#xff1a;百度网盘 请输入提取码 提取码&#xff1a;s0p2 导入模块的方法: ①、导入模块 ②、定位到sdk目录 点击ok就行&#xff0c;就导入成功了。导入成功后会多出一个可展开的opencv文件夹(自己命名的),一定要能展…

【Docker】 07-安装ElasticSearch、Kibana

安装ElasticSearch 1、拉取镜像 docker pull elasticsearch:6.4.2 2、运行 docker run -p 9200:9200 -p 9300:9300 --name es -d elasticsearch:6.4.2 启动会报错&#xff0c;按照下面流程修改 3、在宿主机中&#xff0c;修改配置sysctl.conf vim /etc/sysctl.conf 加入如下配…

Mediasoup在node.js下多线程实现

mediasoup基于socket.io的交互消息来完成join-room的请求过程。Join的过程&#xff0c;实际就是获取stream的过程&#xff0c;也就是视频加载时间(video-load-speed)。在RTMP系统&#xff0c;视频加载时间是秒开。Mediasoup给出的第一个frame是I-frame&#xff0c;但由于交互的…

wininet,winhttp,xmlhttprequest,各版本区别 《转》

一、标准API接口WinINet(Microsoft Windows Internet)和WinHTTP(Microsoft Windows HTTP) 实现Http访问&#xff0c;微软提供了二套API&#xff1a;WinINet, WinHTTP&#xff08;分别封装于system32目录下的wininet.dll和winhttp.dll内&#xff09; 二者主要区别在于后者更为安…

明星录制祝福视频:传递温情与关怀的独特方式

在当今社交媒体和数字化时代&#xff0c;明星录制祝福视频已经成为一种新颖而独特的方式&#xff0c;用来表达温馨祝福、分享喜悦&#xff0c;或者为特殊的时刻增添一份特别的意义。无论是生日、结婚、毕业&#xff0c;还是节日、活动等&#xff0c;明星录制的祝福视频能够让人…

leetcode283移动零

题目&#xff1a; 给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行操作。 示例 1: 输入: nums [0,1,0,3,12] 输出: [1,3,12,0,0]示例 2: 输入:…

MybatisPlus多表关联分页查询

Mybatis-plus是一个Mybatis的增强工具,提供了许多功能强大的API,其中包括分页查询和多表关联查询。在Mybatis-plus中,连表查询可以使用LambdaQueryWrapper或QueryWrapper加入多个表进行查询,然后再使用IPage进行分页。 IPage<Map<String, Object>> page = new…

规避【虚拟专线技术】使用风险实现业务系统安全

本文为作者学习文章&#xff0c;按作者习惯写成&#xff0c;如有错误或需要追加内容请留言&#xff08;不喜勿喷&#xff09; 本文为追加文章&#xff0c;后期慢慢追加 一、技战法描述 VPN是利用Internet等公共网络基础设施&#xff0c;通过隧道加密通信技 术&#xff0c;为用…