【Java Web】HTML 标签 总结

目录

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.mzph.cn/news/77822.shtml

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

相关文章

Mybatis中的#{}和${}的区别

Mybatis中的#{}和${}的区别

#{}和${}他们两都是替换参数的作用&#xff0c;但也还是有很大区别的。 目录 一、${} 二、#{} 三、注意点 一、${} 它是直接替换过来&#xff0c;不添加其它的什么。 比如下面的sql语句 select *from user where id${id} 如果id1&#xff0c;那么他替换过来就还是1&#xff…
阅读更多...
Web之tomcat

Web之tomcat

[TOC]&#xff08;文章目录&#xff09; 1.程序架构 1.C/S(client/server) 比如&#xff1a;QQ、 微信、 LOL 优点&#xff1a;有一部分代码写在客户端&#xff0c; 用户体验比较好。 缺点&#xff1a; 服务器更新&#xff0c;客户端也要随着更新。 占用资源大。 2. B/S(brows…
阅读更多...
【Spatial-Temporal Action Localization（二）】论文阅读2017年

【Spatial-Temporal Action Localization（二）】论文阅读2017年

文章目录 1. ActionVLAD: Learning spatio-temporal aggregation for action classification [code](https://github.com/rohitgirdhar/ActionVLAD/)[](https://github.com/rohitgirdhar/ActionVLAD/)摘要和结论引言&#xff1a;针对痛点和贡献相关工作模型框架思考不足之处 2.…
阅读更多...
C语言双向链表

C语言双向链表

文章目录 前言双向链表链表头结点的创建节点尾插与尾删节点头插与头删特定位置插入或删除节点链表节点查找双向链表的销毁 链表的打印 前言 假期时间因为为学校开学考试做准备所以一直没更新博客&#xff0c;今天开始博客会陆续更新。 双向链表 之前我们说过了顺序表和单链表…
阅读更多...
Oracle19c安装后，使用impdp导数，报错 ORA-01017:

Oracle19c安装后，使用impdp导数，报错 ORA-01017:

今天使用oracle 19c进行pdb导数的时候&#xff0c;发现如下报错ORA-01017&#xff1a; impdp mei1/"密码"mei19c directoryMEI1_EXPDP dumpfilemei1_20230913_01.dmp logfilemei1_impdp_20230913.log schemasMEI1 REMAP_TABLESPACEDATA_SERA:orcl Import: Release 1…
阅读更多...
嵌入式这个领域会变得过于内卷吗？

嵌入式这个领域会变得过于内卷吗？

今日话题&#xff0c;嵌入式这个领域会变得过于内卷吗&#xff1f;嵌入式开发主要服务于第二产业&#xff0c;尤其是制造业&#xff0c;包括电器、电气、机械、汽车、装备、航空航天等行业的“智能制造”部门&#xff0c;稳定性较强&#xff0c;不像互联网行业那样波动大。因此…
阅读更多...
无涯教程-JavaScript - XNPV函数

无涯教程-JavaScript - XNPV函数

描述 XNPV函数返回的现金Stream量表的净现值不一定是周期性的。要计算一系列定期现金Stream量的净现值,请使用NPV函数。 语法 XNPV (rate, values, dates)争论 Argument描述Required/OptionalRateThe discount rate to apply to the cash flows.RequiredValues 与日期付款时…
阅读更多...
Linux mmap读/写触发共享文件页生命周期

Linux mmap读/写触发共享文件页生命周期

概述 Linux的mm内存子系统的核心功能就要要管理各种类型的page，确保能高效分配和释放，让物理内存得以最大化使用。初识内存系统往往关注的是page的申请和管理流程，容易忽略page的释放回收流程，其实理解mm中的内存回收和释放也是最核心的机制。 Linux内核为了支持各种场景…
阅读更多...
QSqlQuery查询语句

QSqlQuery查询语句

SqlQuery 封装了在 QSqlDatabase 上执行的 SQL 查询中创建、导航和检索数据所涉及的功能。 可用于执行 DML&#xff08;数据操作语言&#xff09;语句&#xff0c;如 SELECT、INSERT、UPDATE 和 DELETE&#xff0c; 以及 DDL&#xff08;数据定义语言&#xff09;语句&#xff…
阅读更多...
【javaSE】 反射与反射的使用

【javaSE】 反射与反射的使用

文章目录 &#x1f332;反射的定义&#x1f38d;反射的用途&#x1f334;反射基本信息&#x1f340;反射相关的类&#x1f6a9;Class类(反射机制的起源 )&#x1f388;Class类中的相关方法 &#x1f6a9;反射示例&#x1f388;获得Class对象的三种方式&#x1f388;反射的使用 …
阅读更多...
Linux CentOS7修改命令行提示符

Linux CentOS7修改命令行提示符

在CentOS操作系统中&#xff0c;命令和文件是我们与计算机进行交互的重要方式之一。有时候我们可能需要对某些命令、变量或文件进行修改&#xff0c;以满足特定的需求或提高工作效率。 本人在文章《Linux CentOS7命令及命令行》中对命令行提示符的修改作了初步介绍&#xff0c…
阅读更多...
el-table纵向垂直表头

el-table纵向垂直表头

参考&#xff1a;https://www.jianshu.com/p/1f38eaffd070 <el-tablestyle"width: 100%":data"getValues":show-header"false"border:cell-style"cellStyle" ><el-table-columnv-for"(item, index) in getHeaders"…
阅读更多...
MySQL数据同步归档使用工具总结

MySQL数据同步归档使用工具总结

数据迁移方式&工具总结 kettel的使用dataX的使用pt-archiver的使用 kettel的使用 1、中文网&#xff1a;http://www.kettle.org.cn/ 2、下载地址 3、使用kettle进行数据迁移 3.1 打开文件夹&#xff0c;运行spoon.bat 3.2 点击文件&#xff0c;新建转换 3.3 新建数据库…
阅读更多...
ctfshow-web-红包题 葵花宝典

ctfshow-web-红包题 葵花宝典

0x00 前言 CTF 加解密合集CTF Web合集网络安全知识库溯源相关 文中工具皆可关注 皓月当空w 公众号 发送关键字 工具 获取 0x01 题目 0x02 Write Up 这道题说实话比较奇怪&#xff0c;有一个注册接口&#xff0c;先注册一个账号在&#xff0c;我注册的是admins 123456 然后登…
阅读更多...
Hexo中引入另一个文件内容

Hexo中引入另一个文件内容

有的时候博客内容会有变动&#xff0c;首发博客是最新的&#xff0c;其他博客地址可能会未同步,认准https://blog.zysicyj.top 首发博客地址 安装插件 npm install hexo-include-markdown --save 创建模板目录 source/_template 创建模板 source/_template/tj.md 配置_config.y…
阅读更多...
跨进程通讯之Binder通讯

跨进程通讯之Binder通讯

一、oneway、in、out、inout关键字讲解 1、oneway&#xff1a;异步执行&#xff0c;不管服务器有没有执行完&#xff0c;直接返回 2、in&#xff1a;数据只能由客户端流入服务端 3、out&#xff1a;数据只能由服务端流出到客户端 4、inout&#xff1a;数据可以在服务端与客…
阅读更多...
spice VDAgent简介

spice VDAgent简介

vdagent分为linux和windows&#xff0c;其中Linux分为vdagent守护进程和vdagent客户端进程&#xff0c;而windows主要为vdagent服务。 在windows中&#xff0c;通过服务方式自启动&#xff0c;并控制windows显示等。 在linux中&#xff0c; 守护进程通过 Sys-V initscript 或 s…
阅读更多...
maven根据操作系统的不同打包时引入不同的依赖（jar）

maven根据操作系统的不同打包时引入不同的依赖（jar）

在进行java开发时经常遇到一种情况&#xff0c;就是windows下和linux下需要引入的jar包是不一样的。 比如说我们需要使用java来操作OpenGL库&#xff0c;我们就需要通过maven引入JOGL的依赖&#xff0c; 然而在window下和在linux下需要引入JOGL的依赖是不一样的&#xff1a; …
阅读更多...
音视频编码格式-AAC ADT

音视频编码格式-AAC ADT

例子:config 1408 1408(16进制) : 0001 0100 0000 1000 audioObjectType&#xff08;5bit&#xff09;为 00010 , 即 2&#xff0c; profie (audioObjectType -1 ) AAC LC samplingFrequencyIndex (4bit) 为 1000 , 即 8 , 对应的采样频率为 16000 channelConfiguration (…
阅读更多...
vue预览txt

vue预览txt

1.本地文件预览&#xff0c;网上很多使用iframe和embed标签的&#xff0c;但是我尝试都不可以&#xff0c;有了解的可以分享下原因。 2.读取txt数据并显示在div中&#xff1a; 2.1 本地txt <input type"file" ref"file"/> <div v-html"txtH…
阅读更多...
最新文章

Copyright @ 2022~2023