【JavaWeb—HTML标签】

已于 2022-07-30 21:16:32 修改
阅读量846 收藏 5
点赞数 1
分类专栏： HTML 文章标签： html 前端 servlet
于 2022-07-29 07:06:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DJL_new_life/article/details/126047532
版权

(点击跳转即可哦)

java学习专栏

LeetCode刷题专栏

HTML(超文本标记语言)

HTML代码是由 标签（Tag）构成的

<标签名称>被标记的文本部分</标签名称>
 开始标签     内容         闭合标签(结束标签)

标签名称不同，表达的含义不同，例如

<h1>你好</h1>  h1 : 标题(header),并且是以及标题 h2 就是二级标题
<p>世界</p>	 p: 段落(paragraph)

标签内 也可以自己定义内容的属性

<标签名称 属性名称="属性的值" 另一个属性名称="属性的值">内容</标签名称>

<h1 id="hello">你好</h1>
<p class="opo" id="world" data-name="nothing">
    世界
</p>

也有一些标签比较特殊，只有开始标签，没有闭合标签。这类标签通过属性表达其功能。

<标签 属性1=".." 属性2="..">

例如：

<img src="图片来源" alt="图片的描述信息">  
<!--在页面中嵌入一个多媒体信息-->

HTML文档创建出来就有以下内容：

<!DOCTYPE html>
<html lang="en"> //<html>   整个HTML文档的根元素
<head>			//关于这个文档的一些元信息(描述这个文档本身，但不需要可见的信息) 
  <meta charset="UTF-8">//描述了这个文档使用的字符集编码
  <title>Title</title> //说明文档的标题
</head>
<body> //关于这个文档的主体 部分(通常理解 就是我们 在浏览器中看到的页面信息)

</body>
</html>

src/main/resources/static 是 web应用所有静态资源的根目录。(关键不是看它的内容格式，而是看资源的生成方式)

标签的使用

先介绍一个网站 MDN Web Docs 可以在这里查看 标签的具体使用

HTML文档中，默认模式下，空格(空格、制表符(\t)、回车) 无论多少个，统一视为一个。

<br>

<p>还<br>有<br>一个因素也会引起css中px的变化</p>

HTML <br>元素在文本中生成一个换行（回车）符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要。

<strong>

<strong>加粗</strong>
<b>默认和很重要一样</b>

两者的表现出来的形式一样，还是推荐使用第一种

<em>

<em>斜体</em>
<i>默认和重要一样</i>

两者的表现出来的形式一样，还是推荐使用第一种

<del>

<del>中划线 删除</del>
<s>默认和删了一样</s>

两者的表现出来的形式一样，还是推荐使用第一种

<ins>

<ins>下划线</ins>
<u>默认和插入一样</u>

两者的表现出来的形式一样，还是推荐使用第一种

后者是比较落后的

HTML默认情况下：

有些标签是自成一体的（本身就是独立的一块，表现为 自带换行符）

例如：h1 ~ h6 p 这些元素称为 块级元素

有些标签只是这行的一部分,这些元素称为内联元素

例如：strong em del ins z

<img>

图片

src 属性是必须的，它包含了你想嵌入的图片的文件路径。

alt 属性包含一条对图像的文本描述

<!-- 会按照宽高比来缩放高度 -->
<img style="width: 50px;" src="http://127.0.0.1:8080/cat.jpg" alt="猫1-绝对路径-全路径">

<!-- 会按照宽高比来缩放宽度 -->
<img style="height: 100px;" src="/cat.jpg" alt="猫2-绝对路径-但没有服务器信息">

<!-- 如果宽高都指定，可能导致图片比例错误 -->
<img style="width: 100px; height: 50px;" src="./cat.jpg" alt="猫3-相对路径">
<img src="cat.jpg" alt="猫4-相对路径-省略了点斜杠">
<img src="hello/cat.jpg" alt="猫5-路径错误的图片">

<audio>

音频

与<img>元素类似，我们在 src 属性中添加了嵌入媒体的路径；也可以使用其他属性来规定一些功能，例如是否自动播放、是否循环播放、是否显示浏览器的默认音频空间等等。

controls

如果声明了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。

<audio src="歌唱祖国.mp3" controls></audio>

<video>

视频

HTML <video> 元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 <video> 标签用于音频内容，但是<audio> 元素可能在用户体验上更合适。

只要 <video> 标签中有 autoplay 属性，视频就会自动播放。要移除自动播放，需要完全删除该属性

controls

加上这个属性，浏览器会在视频底部提供一个控制面板，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。

在这里插入图片描述

<a>

超链接标签

href: 必须具备, 表示点击后会跳转到哪个页面.

target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.

在这里插入图片描述

<address>

HTML <address> 元素 表示其中的 HTML 提供了某个人或某个组织（等等）的联系信息。
在这里插入图片描述

​ 由<address>元素中任何形式的内容所提供的联系信息适用于上下文的背景信息，可以是必要的任何一种联系方式，比如真实地址、URL、电子邮箱、电话号码、社交媒体账号、地理坐标等等。此元素应该包含联系信息对应的个人、团体或组织的名称。

​ <address>可以使用在多种语境中，例如在文章开头提供商务的联系方式，或者放在<article>元素内，指明该文章的作者。

footer

HTML

元素表示最近一个 章节内容或者 根节点（sectioning root ）元素的 页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

<footer>元素内的作者信息应包含在 <address> 元素中。

<article>
    <h1>How to be a wizard</h1>
    <ol>
        <li>Grow a long, majestic beard.</li>
        <li>Wear a tall, pointed hat.</li>
        <li>Have I mentioned the beard?</li>
    </ol>
    <footer>
        <p>© 2018 Gandalf</p>
    </footer>
</article>

表现形式就是：

How to be a wizard

  1. Grow a long, majestic beard.
  2. Wear a tall, pointed hat.
  3. Have I mentioned the beard?

© 2018 Gandalf

<div> 内容划分元素

HTML <div> 元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。

<div class="warning"> 
    <p>Beware of the leopard</p>
</div>

<span>

HTML <span> 元素是短语内容的通用行内容器，并没有任何特殊语义。应该在没有其他合适的语义元素时才使用它。<span> 与 div 元素很相似，但 div 是一个 块元素而 <span> 则是 行内元素 .

<table>表格标签

基本使用

  • table 标签: 表示整个表格

  • tr: 表示表格的一行

  • td: 表示一个单元格

  • th: 表示表头单元格. 会居中加粗

  • thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)

  • tbody: 表格得到主体区域.

    table 包含 tr 。 tr 包含 td 或者 th.

在这里插入图片描述

<table border="1">
    <thead>
        <tr>
            <th rowspan="2">年份</th>  
            <th rowspan="2">学期</th>
            <th colspan="3">张三</th>
            <th colspan="3">李四</th>
        </tr>
        <tr>
            <th>音乐</th>
            <th>美术</th>
            <th>舞蹈</th>
            <th>音乐</th>
            <th>美术</th>
            <th>舞蹈</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th rowspan="2">2021年</th>
            <th>上学期</th>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <th>下学期</th>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <th rowspan="2">2022年</th>
            <th>上学期</th>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <th>下学期</th>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <th rowspan="2">2023年</th>
            <th>上学期</th>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <th>下学期</th>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </tbody>
</table>

上面代码呈现出来就是：

在这里插入图片描述

跨行合并：`rowspam=“n”

跨列合并：colspan="n"

表格标签有一些属性, 可以用于设置大小边框等. 但是一般使用 CSS 方式来设置.

这些属性都要放到 table 标签中.

align 是表格相对于周围元素的对齐方式. align=“center” (不是内部元素的对齐方式) 和 style="margin-right:auto”

在这里插入图片描述

border 表示边框. 1 表示有边框(数字越大, 边框越粗), “” 表示没边框.

cellpadding: 内容距离边框的距离, 默认 1 像素 cellspacing: 单元格之间的距离. 默认为 2 像素

width / height: 设置尺寸.

列表标签

主要使用来布局的. 整齐好看.

无序列表[重要] <ul> <li> , .

有序列表[用的不多] <ol> <li>

自定义列表[重要] <dl> (总标签) <dt> (小标题) <dd> (围绕标题来说明) 上面有个小标题, 下面有几个围绕 着标题来展开的.

注意 元素之间是并列关系 ul/ol 中只能放 li 不能放其他标签, dl 中只能放 dt 和 dd li 中可以放其他标签. 列表带有自己的样式, 可以使用 CSS 来修改. (例如前面的小圆点都会去掉)

表单标签

表单是让用户输入信息的重要途经

分为两个部分：

表单域：包含表单元素的区域，重点是form标签

表单控件：输入框，提交按钮等，重点是 input 标签

form标签

<form action="test.html">
    一组<input>标签 + 提交按钮<button>
</form>

用户看到的form表单呈现出上图的形式

用户按照规定的方式，填写属于用户自己信息

最终填写完成后 提交按钮，浏览器会将所有数据打包并上传到服务器

form 表单是要提交数据的。那数据提交到服务器的哪里呢

提交到另一个资源上(允许提交到本资源)

action=“提交资源的路径，默认是当前资源”

method=“本次提交时，采用的HTTP协议是什么方法。默认是get”

enctype=“提交时，数据的编码类型” encode type 的缩写 encode 编码

<input>  不需要写闭合标签
<input type="...">   类型（type）不同，看到的样子就不同
			text:很普通的文本输入框(默认)
			password:在浏览器上默认不显示的文本 的输入框（密码框）
			radio:单选框
			注意：单选框之间必须具备相同的name属性，才能实现多选一的效果
			checkbox:复选框
value 属性 radio 和 checkbox 一般去使用   
<input> 的 name属性非常重要，没有name 的 <input>的内容不会提交给服务器
<button> 引导用户点击，提交数据的

换言之，有了name属性 ，其中 value（一般不会直接写在html中，就是用户填写的内容） 以name=value的形式，将数据提交给服务器

<input>中 的属性

<input type="text" value="这里不允许你修改" name="zzz" disabled>

<input type="hidden" name="yyy" value="这个是用户看不到的">//占位

<input type="text" name="xxx" value="这个不允许修改" readonly>

disabled boolean类型的属性 不允许用户填写,无法点击

在这里插入图片描述

readonly 允许点击，但还是无法修改

在这里插入图片描述

placeholder
<input type="password" name="bbb" placeholder="这里请输入密码">

在这里插入图片描述

label标签

搭配 input 使用.

点击 label 也能选中对应的单选/复选框, 能够提升用户体验.

<label>
     <input type="radio" name="ccc" value="中文">中文
</label>

<label for="male">男</label> 
<input id="male" type="radio" name="sex">

for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)

select 标签

下拉菜单

option 中定义 selected=“selected” 表示默认选中.

        <select name="课程">
            <option value="Java">Java</option>
            <option value="C++">C++</option>
            <option value="C">C</option>
        </select>

注意：可以给的第一个选项, 作为默认选项

<select>
<option>--请选择年份--</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
</select>
textarea 标签
<textarea rows="3" cols="50">
</textarea>

在这里插入图片描述

文本域中的内容, 就是默认内容, 注意, 空格也会有影响. rows 和 cols 也都不会直接使用, 都是用 css 来改的.

HTML 特殊字符

有些特殊的字符在 html 文件中是不能直接表示的,

空格: &nbsp;
小于号: &lt;
大于号: &gt;
按位与: &amp;

HTML 只是描述了页面的骨架结构. 使用 CSS 可以针对页面进行进一步美化.

要是对大家有所帮助的话，请帮我点个赞吧。

DJL_new_life
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javaWeb标签大全
04-12
标签大全包含 struts2,spring,html等等
Javaweb，html，实验报告
01-06
创建HTML文件，使用HTML标签及CSS样式表实现页面。
java 发送html 格式的邮件
java学习相关内容
02-24 3136
java 发送html 格式的邮件
java读取html文件
十七的博客
03-21 1096
【代码】java读取html文件。
在html文件中添加文字
bicart的博客
01-11 780
使用这些标签，你可以在你的HTML文件中添加和格式化文本内容。你还可以使用其他HTML标签来添加文本，如。标签，具体取决于你想要的标题级别，其中。要在HTML文件中添加文字，你可以使用。标签等，具体取决于你的需求和样式要求。例如，要添加一个段落，你可以使用。要添加一个标题，你可以使用。是最高级别的标题，而。
java 中根据html模板生成新的html
10-16
根据html模板生成新的html，很简单可以运行
Java动态插入数据到html模板并下载为html解决方案
qq_45454550的博客
07-06 2613
Java动态插入数据到html模板并下载为html解决方案
java模板填充
mcband的博客
08-21 671
java模板
java 后端list集合中的数据传递到前台HTML中显示（表格形式）
qq_39947874的博客
05-12 8092
1、HTML页面通过ajax发送http请求(图片是随便找的，需要放自己的前端代码自己) 2，通过ajax发送请求（先图之后是代码） window.onload(function requestData(){ $.ajax({ url: "要访问的地址", type: "post", dataType: "json", success: function(data...
javaWeb HTML标签
03-02
不可多得的javaWeb学习资料，适合自学，初级开发人员。。
Javaweb前端——HTML常用标签.pdf
04-09
Javaweb前端——HTML常用标签.pdf
javaweb标签大全
03-30
JavaWeb 是一种基于Java语言开发Web应用程序的技术框架。它提供了一系列的组件和API，使得开发Web应用程序更加简单和高效。标签是在JavaWeb开发中常用的一种组件，可以快速地构建和渲染HTML和XML页面。
用html写一个旋转菜单
最新发布
liulang68的博客
04-24 662
【代码】用html写一个旋转菜单。
Web前端开发之HTML_3
zx1026409886的博客
04-23 904
表单在Web网页中用来给用户填写信息，从而采集用户信息，使网页具有交互功能。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。表单是由容器和控件组成的，一个表单一般应包含用户填写信息的输入框，按钮等，这些输入框、按钮叫做控件，表单就是容器，它能够容纳各种各样的控件。
HTML随机点名程序
m0_65992344的博客
04-22 345
HTML随机点名程序
如何创建响应式HTML电子邮件模板
晓风晓浪
04-20 1195
在这个适合初学者的指南中，你将学习如何创建一个响应式电子邮件模板。你将跟随逐步说明以及代码片段设计一个在任何设备上都看起来很棒的电子邮件模板。这个项目非常适合渴望掌握电子邮件设计基础的新手！（本文视频讲解：java567.com）
HTML使用jQuery实现两个点击按钮，分别控制改文本字体颜色和字体大小
m0_65992344的博客
04-22 799
jQuery 是一个广泛使用的 JavaScript 库，旨在简化对 HTML 文档的操作、事件处理、动画效果和 AJAX 等操作。
html笔记 ai问答
qq_50437196的博客
04-23 439
在HTML中，`text-align: center` 属性是用来设置内联内容（比如文本或链接）在其块级容器（比如`<div>`, `<p>`, 或 `<h1>` 等）内部水平居中的。- `$("p span")`会选择所有位于`p`元素内的`span`元素，无论`span`元素嵌套在`p`元素内部的深度如何。在这个例子中，尽管 `text-align: center` 是应用在 `<h1>` 上的，但 `<span>` 作为内联元素会继承这个对齐方式，从而使得其中的文本居中。
html超链接里加下拉框
12-30
在HTML超链接中添加下拉框，可以使用`<select>`标签和`<option>`标签来实现。下面是一个示例： ```html <a href="https://www.example.com"> <select name="dropdown"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </select> </a> ``` 在上面的示例中，`<select>`标签用于创建下拉框，`<option>`标签用于定义下拉框中的选项。你可以根据需要添加更多的选项。当用户选择一个选项并点击超链接时，浏览器将会跳转到`https://www.example.com`页面。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值