【Java Web】HTML 标签 总结

已于 2023-09-22 21:06:43 修改
阅读量1.5k 收藏 7
点赞数 4
分类专栏： 前端知识，框架等 文章标签： 前端 java html
于 2023-09-13 18:17:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73381672/article/details/132849672
版权

目录

1.HTML

2.标签

   1. head  标签

        1.图标

        2.样式居中

   2. body 标签

1.注释  ：     

2.加载图片 img

3.加载视频 iframe

4.区域 div span p  标题 h1 h2 h3

5.格式化标签

6.上下跳转，页面跳转 a

7.表格 table

8.有序列表 ul li，无序列表 ol li 自定义列表

9.登录

10.普通按钮 

11.提交按钮 表单操作

12.多选框 单选框

13.文本框

14.下拉列表

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

<img width="303" src="image.png" alt="加载不出来时显示这段话" title="光标提示词" border="1"> <!-- 加载图片 -->

border是边框大小

3.加载视频 iframe

<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>
</head>
<body>
<!-- 注释 -->
<img width="303" src="image.png" alt="asddd" title="光标提示词" border="1"> <!-- 加载图片 -->
<!-- 加载视频 -->
<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 span p  标题 h1 h2 h3

<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.格式化标签

（1）加粗 <strong></strong>    <b></b>

（2）倾斜 <em></em>     <i></i>

（3）删除线  <del></del>   <s></s>

（4）下划线  <ins></ins>   <u></u>

6.上下跳转，页面跳转 a

（1）当前页面打开 target="_self"

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

（2）新的页面打开 target="_blank"

        <a href="https://www.bilibili.com/" target="_blank">点击小破站</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/" target="_blank">新的页面打开</a>
<br>
<a href="https://www.bilibili.com/" target="_self">当前页面打开</a>
<br>
<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>

效果 

7.表格 table

属性

  • border 显示边框   
  • width 宽   
  • cellspacing 单元格与单元格之间的距离
  • cellpadding 定义单元格中内容和边框之间的距离
  • tr 行 表格的行
  • td 一个单元格
  • th 头部单元格 加粗的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- write your code -->
<!-- 表格 -->
<table  border="" width="300" cellspacing="0" cellpadding="30">
    <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>

效果 

8.有序列表 ul li，无序列表 ol li 自定义列表

（1）无序列表   

        <ul>
            <li>一号</li>
            <li>二号</li>
            <li>三号</li>
            <li>四号</li>
            <li>五号</li>
        </ul>
<!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>
</body>
</html>

（2）有序列表

        <ol type="">
            <li>一号</li>
            <li>二号</li>
            <li>三号</li>
            <li>四号</li>
            <li>五号</li>
        </ol>

type="A" / "a" / "1" / "i" / "I"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- ol有序列表 -->
<ol type="1">
    <li>一号</li>
    <li>二号</li>
    <li>三号</li>
    <li>四号</li>
    <li>五号</li>
</ol>
<ol type="A">
    <li>一号</li>
    <li>二号</li>
    <li>三号</li>
    <li>四号</li>
    <li>五号</li>
</ol>
<ol type="a">
    <li>一号</li>
    <li>二号</li>
    <li>三号</li>
    <li>四号</li>
    <li>五号</li>
</ol>
<ol type="i">
    <li>一号</li>
    <li>二号</li>
    <li>三号</li>
    <li>四号</li>
    <li>五号</li>
</ol>
<ol type="I">
    <li>一号</li>
    <li>二号</li>
    <li>三号</li>
    <li>四号</li>
    <li>五号</li>
</ol>
</body>
</html>

（3）自定义列表

<dl>
    <dt>
        <dd>...</dd>
        <dd>...</dd>
    </dt>
</dl>

9.登录

<label></label>作用：label是点击例如账号这个字或者一些图标就能锁定输入。

<!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>

10.普通按钮 

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

或者

<form action="">
    <input type="button" value="登录" οnclick="alert('登录成功')">
</form>

                                    

11.提交按钮 表单操作

οnclick=' '  登录提示弹窗

提交按钮submit与 form 搭配使用

form作用

提交数据 比如登录等操作，需要将数据提交到服务器（地址）上去，这就离不开form

前端填写的数据，提交到服务器上去

        <form action ="网址"> 

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

        </form>

提交 重置 选择文件 input

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="https://www.hao123.com/?tn=85070231_42_hao_pg">
        用户名<input type="text" name="username">
        <input type="submit" name="提交">
        <input type="reset">
        <input type="file">
    </form>
</body>
</html>

12.多选框 单选框

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

                      

13.文本框

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

14.下拉列表

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

                             

去北极避暑~
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
JavaWeb 标准标签
weixin_62270300的博客
04-13 722
web.xml的欢迎界面 新建一个项目 点两下Next 就会出现如下选项 将Generate web.xml deployment descriptor选项勾上 完成之后就会在WEB-INF目录底下就会出现一个web.xml文件 点开之后在页面左下方选择Source 下方界面是修改后的（注意：改了web.xml的代码都必须重新发布重启服务） 常用的jsp标签（自带） <jsp:include page="页面"> 包含 <jsp:param name="n...
Java - 标签(label)
时光里的博客
05-24 9074
标签(label) 在Java中, 标签必须在循环之前使用, 一个循环之中嵌套另一个循环的开关, 从多重嵌套中continue或break. 语法 label: @Test public void test3() { inner: for (int i = 0; i < 5; i++) { if (i == 3) { break inner; }
Java基本语法（001）
最新发布
qq_74876696的博客
05-18 373
关键字必须全部小写，不能用作标识符。关键字不能作为类名、变量名或方法名。不要使用Java保留字作为标识符，即便当前Java版本未定义它们的特殊含义。ture,false,null不属于关键词，但具有特殊意义，不能作为标识符class是java的基本组成单元，用来创建（定义）一个类示例代码：在这个示例中，我们展示了如何正确和错误地使用关键字和保留字。开发者应该避免使用关键字和保留字作为标识符，以免产生歧义和编译错误。
前端——HTML中的常用标签详解
xh1605004242的博客
05-06 7001
HTML中的常用标签
【JAVAWEB】HTML的常见标签
m0_57248752的博客
05-28 1491
1.HTML结构 1.1认识HTML标签 1.2HTML文件基本结构 1.3标签层次结构 1.4快速生成代码框架 2.HTML常见标签 注释标签 标题标签：h1-h6 段落标签:p 换行标签：br 格式化标签 图片标签 超链接标签：a 表格标签
【JavaEE初阶】 HTML基础详解
m0_71731682的博客
11-15 1280
HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 文档包含了HTML 标签及文本内容HTML文档也叫做 web 页面一个简单的HTML程序，我们可以直接创建一个文本文档然后我们对该文件进行改名，后缀变为.html即可点击既可以运行了那什么是标签呢？
Java web自定义标签操作数据库
09-28
在JSP页面中，通过TLD中的URI引用自定义标签库，然后像使用HTML标签一样使用自定义标签： ```jsp ... * FROM users"> ``` 五、注意事项 1. 自定义标签的性能：虽然自定义标签提高了代码的可读性，但过度使用可能...
java中web标签大全
04-14
Struts1提供了一系列的标签，如logic标签用于流程控制，bean标签用于对象的展示，html标签则用于表单处理。这些标签极大地简化了JSP页面的编写，提高了代码的可读性和可维护性。 Struts2作为Struts1的升级版，引入...
java web标签技术
03-11
Java Web标签技术是开发Web应用程序时常用的一种工具，它极大地简化了HTML页面的编写，使得开发者可以更加专注于业务逻辑，而无需过多关注页面的呈现细节。在Java Web中，标签技术主要包括JSP标准标签库（JSTL）和...
sample-web.zip_html_java web_zip_ｗｅｂ
09-23
【标签】"html java_web zip ｗｅｂ" 进一步细化了主题，这些标签表明该压缩包内不仅有HTML和Java相关的代码，还与Web开发相关，"zip"指的是文件的压缩格式，"ｗｅｂ"则是Web开发的重复提及，再次确认了内容的焦点。...
java读取html文件,并获取body中所有的标签及内容的案例
08-24
Java 读取 HTML 文件并获取 body 中所有的标签及内容是 Web 开发中的一项基本操作。 在本文中，我们将介绍如何使用 Java 读取 HTML 文件，并获取 body 中所有的标签及内容。 首先，我们需要了解 HTML 文档的结构。 ...
java解析html_Java解析Html
weixin_42336958的博客
02-12 1万+
最近用到了Java解析Html的一个库Jsoup, 这儿是官网, 在此分享给大家，有这方面需要的朋友可以试一试。有三个类需要我们了解，分别是Document，Elements，Element大至用法有两步第一步:加载html,，这儿提供两种方式，一种是从本地加载，一种是从网上直接加载。从本地加载:String html = "YOU HTML STRING";Document doc = Jsou...
JavaWeb（十三）简单标签
循序渐进学Java
06-13 1161
1、使用简单标签（1）建一个index.jsp模拟Servlet中的操作（2）testtag.jsp（3）启动tomcat，访问index.jsp（4）加入jstl的核心jar包和标准包到lib中（5）加入标签库（6）效果跟前面的一样2、自定义标签2.1、含义用户定义的一种自定义的jsp标记 。当一个含有自定义标签的jsp页面被jsp引擎编译成servlet时，tag标签被转化成了对一个称为 标签...
JavaWeb之JSTL简单标签开发（二）
SYJ_1835_LPM的博客
12-03 478
JSTL简单标签开发
java解析html_java中几种解析html的工具
weixin_31437717的博客
02-12 6435
Jsoup还支持白名单过滤机制，对于网站防止XSS攻击也是很好的。2.HtmlParserHtmlParser的功能比较完备，也挺灵活，但谈不上方便。这个项目很久没有维护了，最新版本是2.1。HtmlParser的核心元素是Node，对应一个HTML标签，支持getChildren()等树状遍历方式。HtmlParser另外一个核心元素是NodeFilter，通过实现NodeFilter接口，可以...
a标签download属性无效_HTML常用标签
weixin_39927214的博客
11-25 326
前言最近学习了几种HTML常用标签的用法，在此作为记录以便日后查缺补漏。a标签<a>标签时html中使用频率非常高的一个标签，通常作为超级链接使用，下面对<a>的用法进行归纳总结。href属性作为网址：例如https://zhihu.com，http://zhihu.com，//zhihu.com之所以可以省略前面的http/https，是由于在浏览器中http协议会将这些...
java web标签_javaweb中带标签体的自定义标签
weixin_30941189的博客
02-20 124
点击蓝字“程序员考拉”欢迎关注！1.完整的示例代码：标签体的处理器类，JspFragmentTest.javapackage com.javaweb.tag;import java.io.IOException;import java.io.StringWriter;import javax.servlet.jsp.JspException;import javax.servlet.jsp.tag...
JAVA_WEB之标签
qq_43557743的博客
03-09 217
一.EL(Expression Language)标签:例：${sessionScope.user.sex}意思是在session这个空间里将user对象的sex属性值性别取出来输出到浏览器。 二.EL运算符之 .和[ ]：上面的EL表达式也可以这样写： $ {sessionScope.user[sex]}; 三.有的时候非[ ]不可，比如当你的sex属性命名时是user.sex这个样子的那么你就...
HTML中<a>标签跳转新页面的各种方式
热门推荐
杨春建的博客
08-10 2万+
原文地址：http://blog.csdn.net/wild46cat/article/details/51669189 a href="http://www.baidu.com" target="_blank">百度_blanka>br/>       a href="http://www.baidu.com" target="_self">百度_selfa>br/>  
完整版Java web开发教程PPT课件 Java开发进阶教程 第09章 jstl、EL、Bean（共18页）.pptx
12-25
本章节是Java Web开发进阶教程的第九部分，专注于JSTL、EL（Expression ...后续章节还将探讨过滤器、监听器、自定义标签、AJAX、MVC框架（Spring MVC）、ORM框架（MyBatis）等，全面覆盖Java Web开发的各个方面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

去北极避暑~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值