Java中的HTML_java里html什么意思-CSDN博客

本文链接：https://blog.csdn.net/wyq1614406553/article/details/92734903

Java中的HTML

Html：超文本标记语言，它是与平台无关的，任何平台只需安装了浏览器都可以运行，不区分大小写。

Html的常用标签：

1.网页的头信息：可以设置网页标题，可以通知浏览器使用指定的码表解释html页面

标题标题：h1（一级标题），h2（二级标题），…h6(六级标题)
段落标签：用
换行标签：
字体加粗： 斜体：
大于号：&gt 小于号：&lt
空格：&npsb（键盘上的空格键只能空一个空格）
引号：&quot
版权符号：&copy

在这里插入图片描述

2.图像标签
<img src=“图片的路径” title=“鼠标悬停显示” alt=“图片的名字” width=“设置图片的宽度” height=“设置图片的高度”.>

3.超链接

<a href="https://www.baidu.com">点击跳转</a><br/>
//a：代表超链接  herf：表示连接的地址

4.锚链接
可以从一个地方跳转到指定的位置

<a name="mark">锚链接标记</a><br/>
//先创建一个标记
<a herf="#top">点击跳转<a/>
   <a target="_blank" href="1.第一网页.html">打开第一个网页_在新网页中打开</a>
    <a target="_self" href="1.第一网页.html">打开第一个网页_在自己网页中打开</a>
/*target 目标跳转的网页打开方式
_blank : 打开新的网页
_self : 在本网页打开
*/

//在网页中打给自己发QQ消息
<a href="tencent://message/?uin=你的QQ号&Menu=yes" class="qq">点击与我聊天</a>

5.列表标签

无序列表

<ul>
    <li>杜兰特</li>
    <li>勇士</li>
    <li>库里</li>
    <li>詹姆斯</li>
</ul>
//ul:无序列表  li：选项

有序列表

<ol>
    <li>杜兰特</li>
    <li>勇士</li>
    <li>库里<</li>
    <li>詹姆斯</li>
</ol>
//ol:无序列表 li：选项

自定义列表：

<dl>
    <dt>Java</dt>
    <dd>OOP</dd>
    <dd>Annotation</dd>
    <dd>Reflection</dd>

    <dt>Python</dt>
    <dd>数据分析</dd>
    <dd>数据挖掘</dd>
    <dd>...</dd>
</dl>
//dl:自定义列表  dt：列表标题  dd：选项

6.表格


<table border=1px>

    <tr>
        <!--colspan=跨列-->
        <td colspan="3">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <!--colspan=跨行-->
        <td rowspan="3">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
        <td>2-5</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
    <tr>
        <td>4-1</td>
        <td>4-2</td>
        <td>4-3</td>
        <td>4-4</td>
    </tr>

</table>
//table:表格  tr：行 td：列  colspan：跨列 rowspan：跨行

7.音频和视频

<video src="插入视频的路径" controls width="1280px" height="720px" autoplay></video>
/*src -> 音频路径
controls -> 给音频增加控制播放的按钮
autoplay -> 自动播放视频*/
<audio src="插入音频的路径（一般放在和代码同一路径下，用../退级）" controls autoplay></audio>

8.内联框架

作用：可以在网页中插入另外一个网页

<iframe name="markup" src="" frameborder="0"></iframe>

<a href="https://www.baidu.com" target="markup">test</a>

9.表单元素
form：为表单元素
action：提交地址
method：post(安全，效率低，能提交无限大的文件)/get（不安全，效率高，一次性请求的文件量特别小）

input属性:
type=类型
name: 名字 , 可以重复
id: 不能重复,保证全代码唯一
disabled: 禁用文本框
placeholder：在提示框提示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>注册</h1>
<form action="https://www.baidu.com" method="get">
  <p>用户名：<input type="text" name="uesername" placeholder="请输入用户名" required  ></p>
<p>密码：<input type="password" name="password" required></p>
<p>
    //文件
    <input type="file">
</p>
<p>
    <input type="radio" value="boy" name="group"/>男
    <input type="radio" value="girl" name="group"/>女
    <input type="radio" value="!boygirl" name="group"/>人妖
</p>
<p>
    <input type="checkbox" value="movie" name="hobby"/>看电影
    <input type="checkbox" value="music" name="hobby"/>听歌
    <input type="checkbox" value="road" name="hobby"/>压马路
    <input type="checkbox" value="rap" name="hobby"/>说唱

</p>
    <select name="地区" id="">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="深圳">深圳</option>

    </select>
<p>
    <input type="button" value="这是一个按钮">
    <!--图片按钮-->
    <input type="image" src="../resouse/image/图片1.png">
</p>
<p>
    <textarea name="textarea" cols="30" rows="10"></textarea>
</p>
    <hr>
    <!--自定义验证-->
    <input type="text" pattern="^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$ " >
邮箱：<input type="email" name="email"><br/>
    url: <input type="url" name="url"><br/>
    数字： <input type="number" name="number"><br/>
    滑块： <input type="range" name="range" value="30"><br/>
    搜索框： <input type="search" name="search">
    <p>
        <input type="submit">
        <input type="reset">
    </p>







</form>

</body>
</html>

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