【Java Web】HTML 标签 总结

news2025/1/21 15:43:10

目录

1.HTML

2.标签

   1. head  标签

        1.图标

        2.样式居中

   2. body 标签

1.注释  :     

2.加载图片

3.加载视频

效果

4.区域

效果

5.上下跳转,页面跳转

效果

 6.表格

效果

7.有序列表,无序列表

效果

8.登录

效果

9.按钮

10.多选框 单选框

效果

11.文本框

效果

12.下拉列表

效果


1.HTML

概念:HTML(Hypertext Markup Language ) 超文本标记语言。

HTML 不是一种编程语言,而是一种标记语言。
Html主要用来描述网页中所需要的组件,例如:文本框、表格、图片、视频等等,也对网页进行排版。
HTML的源文件,称为“网页”,通常以.html或者.htm为结尾。
可以使用任意文本编辑器编辑,需要使用浏览器执行。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- write your code -->
</body>
</html>

2.标签

   1. head  标签

<head>

      头部标签...

 </head>

        1.图标

<link rel="icon" href="icon.png" type="image/x-icon"> <!-- 图标 -->

例如

        2.样式居中

<link href="style01.css" rel="stylesheet">  是需要额外写.css代码的

         或者

<body style="text-align: center"> <!-- 也是样式居中 -->
   write code...
</body>

   2. body 标签

<body>

      body标签...

</body>

1.注释  :     

 <!-- 注释内容· -->

2.加载图片

<img width="303" src="image.png" alt="加载不出来时显示这段话"> <!-- 加载图片 -->

3.加载视频

<iframe src=""> </iframe>
例如
<iframe src="//player.bilibili.com/player.html?aid=873301164&bvid=BV1YN4y1Q7L7&cid=1261762527&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML</title>
    <link rel="icon" href="icon.png" type="image/x-icon">
</head>
<body>
    <!-- 注释 -->
    <img width="303" src="image.png" alt="asddd"> <!-- 加载图片 -->
    <!-- 加载视频 -->
    <iframe src="//player.bilibili.com/player.html?aid=873301164&bvid=BV1YN4y1Q7L7&cid=1261762527&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</body>
</html>

效果

 

4.区域

<div></div> 分区

<span></span> 每个区域中分几部分 

<p></p> 文章分段

<br> 换行

<hr> 分割线

<h1>我是一级标题</h1>

<h2>我是二级标题</h2>

<h3>我是三级标题<h3>

...

<p>我是正文</p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- write your code -->
    <div>
        我是第一个区域
    </div>
    <div>
        <span>我是第二个区域的第一部分</span>
        <span>我是第二个区域的第二部分</span>
    </div>
    <p>
        我是第一段文字
    </p>
    <p>
        我是第二段文字
    </p>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <p>我是正文</p>
</body>
</html>

效果

5.上下跳转,页面跳转

<a href="https://www.bilibili.com/">点击小破站</a>

<a href="#test">点击到达底部</a>

<div id="test">底部</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- write your code -->
    <a href="#test">点击到达底部</a>
    <br>
    <a href="https://www.bilibili.com/">点击小破站</a>
    <br>
    <img width="800" src="image.png" alt="加载中">
    <img width="800" src="image.png" alt="加载中">
    <img width="800" src="image.png" alt="加载中">
    <img width="800" src="image.png" alt="加载中">
    <img width="800" src="image.png" alt="加载中">
    <img width="800" src="image.png" alt="加载中">
    <img width="800" src="image.png" alt="加载中">
    <img width="800" src="image.png" alt="加载中">
    <img width="800" src="image.png" alt="加载中">
    <div id="test">底部</div>
</body>
</html>

效果

 6.表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- write your code -->
    <!-- 表格 -->
    <table border>
        <thead> <!-- 表头 -->
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
        </tr>
        </thead>
        <tbody> <!-- 表体 -->
        <tr>
            <td>0001</td>
            <td>张伟</td>
            <td>男</td>
        </tr>
        <tr>
            <td>0001</td>
            <td>张伟</td>
            <td>男</td>
        </tr>

        </tbody>
    </table>
</body>
</html>

效果

7.有序列表,无序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- ul无序列表 -->
    <ul>
        <li>一号</li>
        <li>二号</li>
        <li>三号</li>
        <li>四号</li>
        <li>五号</li>
    </ul>
    <!-- ol有序列表 -->
    <ol>
        <li>一号</li>
        <li>二号</li>
        <li>三号</li>
        <li>四号</li>
        <li>五号</li>
    </ol>
</body>
</html>

效果

8.登录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="text-align: center">   <!-- 居中 -->
    <h2>登录网站</h2>  <!-- 二号标题 -->
    <div>
        <label>
            账号:
            <input type="text" placeholder="Username...">
        </label>
    </div>

    <div>
         <label>
            密码:
            <input type="password" placeholder="password...">
        </label>
    </div>

    <div>
        <label>
            <input type="checkbox">
            我同意...
        </label>
    </div>

    <div>
        <br>  <!-- 换行-->
        <button> 取消 </button>
        <button> 登录 </button>
    </div>

    <div>
        <a href="https://www.bilibili.com/">忘记密码</a> <!-- 跳转到改密码页面 -->
    </div>

    <div>
        <label>
            日期:
            <input type="date" placeholder="Username...">
        </label>
    </div>

    <div>
        <label>
            日期:
            <input type="datetime-local">
        </label>
    </div>

    <div>
        <label>
            文件:
            <input type="file">
        </label>
    </div>

</body>
</html>

效果

9.按钮

<div>
    <br>
    <button> 取消 </button>
    <button> 登录 </button>
</div>

                                    

10.多选框 单选框

<label>
    <!-- 单选框 -->
    <input type="checkbox">  
    我同意本网站的隐私政策
</label>
<label>
    <br> <br>
    <!-- 多选框 -->
    <input type="radio" name="role">
    学生
</label>
<label>
    <input type="radio" name="role">
    老师
</label>

效果

                      

11.文本框

<div>
    <label>
        <h2>文本框</h2>
        <textarea placeholder="说点什么..." cols="60"
                  rows="10"></textarea>
    </label>
</div>

效果

12.下拉列表

<!-- 创建一个下拉列表 -->
    <label>
        登录身份:
        <select>
            <option>教师</option>
            <option>学生</option>
            <option>管理员</option>
        </select>
    </label>

效果

                             

 

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

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

相关文章

目标分类笔记(一): 利用包含多个网络多种训练策略的框架来完成多目标分类任务(从数据准备到训练测试部署的完整流程)

目标分类 一、目标分类介绍1.1 二分类和多分类的区别1.2 单标签和多标签输出的区别 二、代码获取三、数据集准备四、环境搭建4.1 环境测试 五、模型训练六、模型测试6.1 多标签训练-单标签输出结果6.2 多标签训练-多标签输出结果 一、目标分类介绍 目标分类是一种监督学习任务…

使用flask实现一个简单的代理服务

背景: 有一些客户的服务是我本地windows电脑开vpn之后才能访问的。为了让公司内网的别的电脑不开vpn也能正常请求客户的接口&#xff0c;方便调试&#xff0c;所以使用我的windows电脑实现一个代理的功能。 原理简单画个图: 功能简单直接上代码: from flask import Flask, re…

如何用HighTec进行库文件封装

1、新建一个Workspace&#xff0c;下面均以L9945为例。 2、新建一个工程&#xff0c;可用要封装的模块名来命名。 3、选择主芯片及工程类型。 4、修改编译配置为iROM。 5、删除生成的h文件夹&#xff0c;将原工程中src目录下的.c文件全部删除&#xff0c;将.h文件全部复制到该工…

解决“org.apache.catalina.startup.Catalina.stopServer 未配置关闭端口。通过OS信号关闭服务器。服务器未关闭“

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl 问题描述 项目部署至Tomcat服务器报错&#xff1a;org.apache.catalina.startup.Catalina.stopServer 未配置关闭端口。通过OS信号关闭服务 器。服务器未关闭&#xff1b;图…

【计算机视觉 | 目标检测】干货:目标检测常见算法介绍合集(一)

对象检测模型是用于执行对象检测任务的体系结构。 您可以在下面找到不断更新的对象检测模型列表。 文章目录 一、 ScanSSD二、Faster R-CNN三、Mask R-CNN四、YOLOv3五、RetinaNet六、Detection Transformer七、YOLOv4八、FCOS九、YOLOv2十、Fast R-CNN十一、CenterNet十二、R-…

uni-app--》基于小程序开发的电商平台项目实战(二)

&#x1f3cd;️作者简介&#xff1a;大家好&#xff0c;我是亦世凡华、渴望知识储备自己的一名在校大学生 &#x1f6f5;个人主页&#xff1a;亦世凡华、 &#x1f6fa;系列专栏&#xff1a;uni-app &#x1f6b2;座右铭&#xff1a;人生亦可燃烧&#xff0c;亦可腐败&#xf…

Acwing 800. 数组元素的目标和

Acwing 800. 数组元素的目标和 题目描述代码展示 题目描述 代码展示 #include<iostream>using namespace std;const int N 1e5 10;int a[N], b[N];int main() {int n , m , x, i 0, j m - 1;cin >> n >> m >> x;for (int i 0; i < n; i ) sc…

java JUC并发编程 第七章 原子操作类增强

系列文章目录 第一章 java JUC并发编程 Future: link 第二章 java JUC并发编程 多线程锁: link 第三章 java JUC并发编程 中断机制: link 第四章 java JUC并发编程 java内存模型JMM: link 第五章 java JUC并发编程 volatile与JMM: link 第六章 java JUC并发编程 CAS: link 第七…

ABB IW93 HESG440356R1处理器模块

处理能力&#xff1a; IW93处理器模块具有强大的处理能力&#xff0c;能够高效执行控制逻辑和算法&#xff0c;确保工业过程的顺利运行。 通信接口&#xff1a; 该模块通常具有多种通信接口&#xff0c;用于与其他设备和系统进行数据交换和集成。这些接口可能包括以太网、串行…

9.13号作业

1> 将之前定义的栈类和队列类都实现成模板类 栈的模块类 #include <iostream> using namespace std;template <typename T> class Stack { private:T data[40]{0};T top-1; public:Stack (){cout<<"这是构造函数"<<endl;}int stack_e…

相亲App定制开发,助力您打造独特交友平台

作为专业的App开发团队&#xff0c;我们致力于为您打造一款独特而出色的相亲交友App。我们深刻理解相亲领域的需求&#xff0c;通过技术创新和用户体验优化&#xff0c;为您提供个性化的定制开发服务。 在相亲App的定制开发过程中&#xff0c;我们将全面考虑您的目标市场和用户…

Java项目---图片服务器

图片服务器--->服务器&#xff08;图床&#xff09; 核心功能&#xff1a;上传图片、展示图片等 比如&#xff1a;编写博客时我们会插入图片&#xff0c;本质上是往文章中放了一个链接&#xff08;URL&#xff09;&#xff0c;这个URL资源在另外一个服务器上。 核心知识点…

在ubuntu18.04上编译C++版本jsoncpp/opencv/onnxruntime且如何配置CMakelist把他们用起来~

这篇文章背景是笔者在ubuntu上编译C代码&#xff0c;依赖一些包&#xff0c;然后需要编译并配置到CMakelist做的笔记。主要也是一直不太懂CMakellist&#xff0c;做个笔记以防忘记&#xff0c;也给读者提供一站式的参考&#xff0c;可能您需要的不是这几个包&#xff0c;但大同…

STM32f103入门(12)USART串口信息发送+接收

USART 介绍串口发送使用工具初始化发送数据接收数据 介绍 电平标准是数据1和数据0的表达方式&#xff0c;是传输线缆中人为规定的电压与数据的对应关系&#xff0c;串口常用的电平标准有如下三种&#xff1a; TTL电平&#xff1a;3.3V或5V表示1&#xff0c;0V表示0 RS232电平&…

成都都市圈公共图书馆《乡村振兴战略下传统村落文化旅游设计》许少辉八一新著

成都都市圈公共图书馆《乡村振兴战略下传统村落文化旅游设计》许少辉八一新著

Discrod账号为什么被封?怎么解封?

Discord作为海外社交产品的新晋王者&#xff0c;近两年来非常受欢迎&#xff0c;据统计&#xff0c;每个月使用Discord的用户数超过3000万。而在跨境电商领域&#xff0c;”内容社群”的打法已经见怪不怪&#xff0c;营销推广少不了Discord&#xff0c;拥有一个或者多个成熟的D…

深度学习-激活函数

文章目录 基础知识Sigmoid函数 &#xff08;Logistic函数&#xff09;双曲正切函数&#xff08;Tanh函数&#xff09;线性整流函数&#xff08;ReLU函数&#xff09;Leaky ReLU函数Softmax函数 基础知识 激活函数是神经网络中的一种非线性函数&#xff0c;它作为神经元的输出函…

Linux 安装Harbor镜像仓库私服

参考链接 Docker 的基础知识、安装、使用Harbor镜像仓库私服搭建 Harbor是什么&#xff1f; Harbor是由VMware公司开源的企业级的Docker Registry管理项目&#xff0c;它包括权限管理(RBAC)、LDAP、日志审核、管理界面、自我注册、镜像复制和中文支持等功能。 Harbor 的所有组…

WebGL正射投影

目录 可视范围&#xff08;正射类型&#xff09; 可视空间 正射投影的盒状可视空间的工作原理 盒状可视空间 定义盒状可视空间 Matrix4.setOrtho&#xff08;&#xff09; 按键控制near、far ​编辑 示例效果 示例代码 代码详解 修改near和far值 通过右方向键增大n…

从物理叠加到化学反应,看方太如何把洗碗机玩出「新价值」

文 | 智能相对论 作者 | 佘凯文 随着酷暑烈日的逐渐远去&#xff0c;秋意也开始浓厚了起来。所谓“秋风起&#xff0c;秋膘贴”&#xff0c;在“金九银十”的当下&#xff0c;美食自是不可辜负的恩赐。肥美多膏的大闸蟹、软糯香甜的南瓜羹、爽脆可口的莲藕汤..... 秋季的美食…