【JAVA WEB】Web标签

目录

注释标签

标题标签 h1-h6

段落标签 

换行标签

格式化标签

        加粗：strong 标签和 b 标签

        倾斜：em 标签和 i 标签

        删除线： del 标签 和 s 标签

        下划线：ins 标签 和 u 标签

图片标签：img  单标签

src属性：

alt属性：

title属性：

width属性：

height属性：

border属性：

超链接标签：a标签

href属性：

target属性：

表格标签

单元格合并

列表标签

无序列表

有序列表

自定义列表

表单标签

表单域：

表单空间

1>文本框

2>密码框

3>单选框

​4>复选框

5>普通按钮

6>提交按钮

7>重置按钮

8>选择文件

label标签

select标签

textarea标签

无语义标签

HTML中常用特殊字符

注释标签

        ctrl+'/' 将当前行注释，效果如下：

<!DOCTYPE html>
<html lang="en">
<head></head>
<body><!-- 这是一个注释 -->
</body>
</html>

PS:要看注释掉的信息，F12显示代码

标题标签 h1-h6：

有六个，从h1-h6，数字越大，字体越小

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

效果如下（各个标签之间的间隙是浏览器默认的css样式，可更改）：

段落标签 

<p> </p>

<!DOCTYPE html>
<html lang="en"><head><title>测试页面</title></head><body><p>这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段</p><p>这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二这是第二段这是第二段这是第二段</p></body>
</html>

换行标签

<br/>

<!DOCTYPE html>
<html lang="en"><head><title>测试页面</title></head><body><p>这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段</p><p>这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段换行处<br>这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二这是第二段这是第二段这是第二段</p></body>
</html>

格式化标签

        加粗：strong 标签和 b 标签

        倾斜：em 标签和 i 标签

        删除线： del 标签 和 s 标签

        下划线：ins 标签 和 u 标签

<!DOCTYPE html>
<html lang="en"><head><title>测试页面</title></head><body><!-- 加粗 --><p><strong> 加粗 strong标签 </strong></p><p><b> 加粗 b标签 </b></p><!-- 倾斜 --><p><em> 倾斜 em标签</em></p><p><i> 倾斜 i标签</i></p><!-- 删除线 --><p><del> 删除线 del标签</del></p><p><s> 删除线 s标签</s></p><!-- 下划线 --><p><ins> 下划线 ins标签</ins></p><p><ins> 下划线 u标签</ins></p></body>
</html>

PS:虽说每种效果的两种标签效果一样，但是前者是带强调的意思。

图片标签：img  单标签

src属性：

        img标签必须带有src属性，指定图片的路径

<img src="rose.jpg>

此时要把rose.jpg这个图片放到和html同级的目录下

alt属性：

        替换文本，当前图片不能正确显示的时候，会显示一个替换的文字。如果图片加载成功，则不显示。

title属性：

        提示文本，鼠标放到图片上，就会有提示

width属性：

        图片的宽度，px单位 像素

height属性：

        图片的高度

border属性：

        给图片加边框

超链接标签：a标签

href属性：

必须具备，表示点击后跳转到哪个页面

<!DOCTYPE html>
<html lang="en"><head><title>测试页面</title></head><body><a href="https://www.baidu.com">跳转页面</a></body>
</html>

href="#"表示不做任何跳转，停留在当前页面

<a href="#">刷新</a>

要用图片进行超链接跳转，可在a标签里添加img标签，示例：

<a href="https://www.baidu.com"><img stc="./test.png" alt="图片加载失败">
</a>

target属性：

打开方式，默认是_self，如果是_blank则用新的标签页打开。

<a href="https://www.baidu.com" target="_blank"><img stc="./test.png" alt="图片加载失败">
</a>

表格标签

<table></table>

table标签：表示整个表格

tr：表示表格的一行

td：表示表格的一个单元格

th：表示表头单元格，会居中加粗

thead：表格的头部区域，注意和th区分，范围是比th要大的

tbody：表格得到的主体区域

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="1px" width="500px" height="300px" cellspacing="0" cellpadding="50" align="center"><!-- <tr></tr>表示一行 --><!-- 复制快捷键 shift+alt+方向键的下 --><thread><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thread><tbody><tr><!-- <td></td>表示单元格 --><td>张三</td><td>男</td><td>3</td></tr><tr><td>李四</td><td>男</td><td>4</td></tr><tr><td>王五</td><td>女</td><td>5</td></tr></tbody></table>
</body>
</html>

单元格合并

合并行 rowspan="合并的行数"

合并列 colspan="合并的列数"

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="1px" width="500px" height="300px" cellspacing="0" cellpadding="50" align="center"><thread><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thread><tbody><tr><td>张三</td><!-- 行合并 --><td rowspan="2">男</td><td>3</td></tr><tr><td>李四</td><td>4</td></tr><tr><!-- 列合并 --><td colspan="2">王五</td><td>5</td></tr></tbody></table>
</body>
</html>

列表标签

无序列表

ul 、li

ul中的 types属性 改变列前面的符号，有以下三种取值

disc(默认)

square

circle

PS:快捷键 ”ul>li*3+回车”  在ul下面写3个li“  在ul下面写3个li

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>这是无序列表</h1><!-- ul>li*3+回车  在ul下面写3个li --><ul type="circle"><li>内容1</li><li>内容2</li><li>内容3</li></ul>
</body>
</html>

有序列表

ol 、li

ol中的 types属性 改变列前面的编号符号，有以下五种取值

a //小写英文字母编号
A //大写英文字母编号
i //表示小写罗马数字编号
I //表示大写罗马数字编号
1 //数字编号(默认)

ol 的start属性，更改编号的起始值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>这是有序列表</h1><!-- ol>li*4+回车  在ul下面写4个li --><ol type="a" start="2"><li>这是有序列表1</li><li>这是有序列表2</li><li>这是有序列表3</li><li>这是有序列表4</li></ol>
</body>
</html>

自定义列表

dl 、dt 、dd

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>这是自定义列表</h1><!-- dl>dt>dd*3+回车 --><dl><dt> 自定义列表显示内容 <dd>自定义列表内容1</dd><dd>自定义列表内容2</dd><dd>自定义列表内容3</dd></dt></dl></body>
</html>

表单标签

        用表单标签来完成服务器的一次交互

        分为两个部分： 

表单域包含表单元素的区域，重点是form标签
表单控件输入框，提交按钮等，重点是input标签

表单域：

<body><form action="服务器的地址"></form>
</body>

表单空间

可以通过对type进行对应的取值，控制input的类型

1>文本框

<body><form action="服务器的地址">姓名<input type="text"></form>
</body>

2>密码框

<body><form action="服务器的地址">姓名<input type="text"><br>密码<input type="password"></form>
</body>

3>单选框

input 的type 属性为radio时为单选框，使用name实现只能勾选一个的功能，checked="true" 表示默认是勾选的。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="服务器的地址">姓名<input type="text"><br>密码<input type="password"><br>性别<input type="radio" name="gender" checked="true">男<input type="radio" name="gender">女</form>
</body>
</html>

4>复选框

input 的 type 属性为 checkbox 时

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="服务器的地址">爱好<input type="checkbox">吃饭<input type="checkbox">睡觉<input type="checkbox">玩游戏</form>
</body>
</html>

5>普通按钮

input 的 type 属性为 botton 时,value设置按钮显示的文字，点击按钮要触发的事件通过gs设置，

这里举例弹出hello

<form action="服务器的地址"><input type="button" value="这是一个普通按钮" onclick="alert('hello')">
</form>

6>提交按钮

一般将数据提交到服务器上

input 的 type 属性为 submit  ，单击提交按钮后，会自动清空文本框中的数据

<form action="服务器的地址">姓名<input type="text"><input type="submit" >
</form>

7>重置按钮

重置文本框、单选框、复选框

<input type="reset">

8>选择文件

<input type="file">

label标签

一般和单选框配合使用，实现单击文字也可勾选单选框的功能

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

select标签

一般和option配合使用（下拉框效果），默认显示第一个option的文字，可以通过设置selected属性，修改默认显示。

<form action="服务器的地址"><select name="" id=""><option value="">--请选择年份--</option><option value="" selected="selected">--2002--</option><option value="">--2003--</option><option value="">--2004--</option></select>
</form>

textarea标签

row属性 设置超过多少行时出现滚轮

<textarea  name="" id="" cols="30" row="4"></textarea>

无语义标签

没有固定的用途，可以拿着这个标签啥都可以干

        div 是独占一行的，是一个大盒子

        span 是不独占一行的，是一个小盒子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="服务器的地址"><div><span>吃饭</span><span>睡觉</span><span>玩游戏</span></div><div>吃饭</div><div>睡觉</div><div>玩游戏</div></form>
</body>
</html>

HTML中常用特殊字符

空格： &nbsp;

小于号：&lt;

大于号：&gt;

按位与：&amp；

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

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

相关文章

多维时序 | MATLAB实现基于CNN-LSSVM卷积神经网络-最小二乘支持向量机多变量时间序列预测

多维时序 | MATLAB实现基于CNN-LSSVM卷积神经网络-最小二乘支持向量机多变量时间序列预测

多维时序 | MATLAB实现基于CNN-LSSVM卷积神经网络-最小二乘支持向量机多变量时间序列预测 目录 多维时序 | MATLAB实现基于CNN-LSSVM卷积神经网络-最小二乘支持向量机多变量时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.MATLAB实现基于CNN-LSSVM卷积神经…
阅读更多...
如何在 Java 中通过 Map.Entry 访问 Map 的元素

如何在 Java 中通过 Map.Entry 访问 Map 的元素

我们使用 Map.Entry 来遍历 ConcurrentHashMap 的代码片段如下&#xff1a; for (Map.Entry<String, String> entry : map.entrySet()) { System.out.println("Key: " entry.getKey() ", Value: " entry.getValue()); } 在 Map.java 中&…
阅读更多...
3、生成式 AI 如何帮助您改进数据可视化图表

3、生成式 AI 如何帮助您改进数据可视化图表

生成式 AI 如何帮助您改进数据可视化图表 使用生成式 AI 加速和增强数据可视化。 图像来源：DALLE 3 5 个关键要点： 数据可视化图表的基本结构使用 Python Altair 构建数据可视化图表使用 GitHub Copilot 加快图表生成速度使用 ChatGPT 为您的图表生成相关内容使用 DALL-E 将…
阅读更多...
验证码倒计时：用户界面的小细节，大智慧

验证码倒计时：用户界面的小细节，大智慧

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 验证码倒计时&#xff1a;用户界面的小细节&#xff0c;大智慧 前言为什么需要验证码倒计时防止滥用&#xff1a;用户心理&#xff1a; 设计考量可见性&#xff1a;友好性&#xff1a;适应性&#xff…
阅读更多...
聚观早报 | 360将进军直播带货；「天工2.0」发布

聚观早报 | 360将进军直播带货；「天工2.0」发布

聚观早报每日整理最值得关注的行业重点事件&#xff0c;帮助大家及时了解最新行业动态&#xff0c;每日读报&#xff0c;就读聚观365资讯简报。 整理丨Cutie 2月7日消息 360将进军直播带货 「天工2.0」发布 问界M9首批新车开启交付 华为正在研发三折叠屏手机 微软推出 A…
阅读更多...
maven插件docker-maven-plugin打包镜像并发布到dockerHub

maven插件docker-maven-plugin打包镜像并发布到dockerHub

文章目录 前言一、使用maven插件制作docker镜像二、发布到dockerHub总结 前言 如果我们的项目要在docker中运行&#xff0c;那么就必须要把我们的项目生成docker镜像&#xff0c;如果要实现远程安装&#xff0c;也就必须要把镜像发布到远程仓库里&#xff0c;如果我们没有自己…
阅读更多...
Golang 学习（二）进阶使用

Golang 学习（二）进阶使用

二、进阶使用 性能提升——协程 GoRoutine go f();一个 Go 线程上&#xff0c;可以起多个协程&#xff08;有独立的栈空间、共享程序堆空间、调度由用户控制&#xff09;主线程是一个物理线程&#xff0c;直接作用在 cpu 上的。是重量级的&#xff0c;非常耗费 cpu 资源。协…
阅读更多...
docker常用10条容器操作命令

docker常用10条容器操作命令

Docker 中一些常用的容器操作命令&#xff0c;我们可以根据需要使用这些命令来管理和操作 Docker 容器。我们这次以Hell-world这个镜像为例来说明&#xff1a; 1. docker pull hello-world #拉取hell-world镜像 2. docker images # 查看本地拉取的镜像 3. docker run hello…
阅读更多...
使用No-SQL数据库支持连接查询用例的讨论

使用No-SQL数据库支持连接查询用例的讨论

简介 在本文中&#xff0c;我们将简单介绍什么是No-SQL数据库。然后我们会讨论一种使用关系数据库比较容易实现的查询&#xff0c;即连接查询&#xff0c;怎么样使用No-SQL来实现。 什么是No-SQL数据库 与No-SQL数据库相对应的是传统的关系数据库&#xff08;RDBMS&#xff…
阅读更多...
Android7.0-Fiddler证书问题

Android7.0-Fiddler证书问题

一、将Fiddler的证书导出到电脑&#xff0c;点击Tools -> Options -> HTTPS -> Actions -> Export Root Certificate to Desktop 二、下载Window版openssl&#xff0c; 点击这里打开页面&#xff0c;下拉到下面&#xff0c;选择最上面的64位EXE点击下载安装即可 安…
阅读更多...
这款对标ChatGPT的国产MoE大模型重磅更新！集AI对话、AI绘画、AI阅读、AI写作于一体！

这款对标ChatGPT的国产MoE大模型重磅更新！集AI对话、AI绘画、AI阅读、AI写作于一体！

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;所以创建了“AI信息Gap”这个公众号&#xff0c;专注于分享AI全维度知识…
阅读更多...
「优选算法刷题」：外观数列

「优选算法刷题」：外观数列

一、题目 给定一个正整数 n &#xff0c;输出外观数列的第 n 项。 「外观数列」是一个整数序列&#xff0c;从数字 1 开始&#xff0c;序列中的每一项都是对前一项的描述。 你可以将其视作是由递归公式定义的数字字符串序列&#xff1a; countAndSay(1) "1"coun…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023