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

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

相关文章

vector类的模拟实现

vector类的模拟实现

实现基本的vector框架 参考的是STL的一些源码&#xff0c;实现的vector也是看起来像是一个简略版的&#xff0c;但是看完能对vector这个类一些接口函数更好的认识。 我们写写成员变量&#xff0c;先来看看STL的成元变量是那些 namespace tjl {template<class T>class …
阅读更多...
Guitar Pro正版多少钱 Guitar Pro购买后永久使用吗

Guitar Pro正版多少钱 Guitar Pro购买后永久使用吗

相信很多玩吉他的小伙伴都听说过Guitar Pro这款软件&#xff0c;Guitar Pro是一款传奇的吉他谱软件&#xff0c;可以用来打谱&#xff0c;看谱&#xff0c;midi音序制作等等&#xff0c;同时做为一款吉他学习辅助软件有着强大的优势&#xff0c;那大家知道Guitar Pro正版多少钱…
阅读更多...
C++进阶（十二）lambda可变参数包装器

C++进阶（十二）lambda可变参数包装器

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、新的类功能1、默认成员函数2、类成员变量初始化3、 强制生成默认函数的关键字default:4、…
阅读更多...
【数据结构】链表OJ面试题2《分割小于x并排序链表、回文结构、相交链表》+解析

【数据结构】链表OJ面试题2《分割小于x并排序链表、回文结构、相交链表》+解析

1.前言 前五题在这http://t.csdnimg.cn/UeggB 休息一天&#xff0c;今天继续刷题&#xff01; 2.OJ题目训练 1. 编写代码&#xff0c;以给定值x为基准将链表分割成两部分&#xff0c;所有小于x的结点排在大于或等于x的结点之前 。链表分割_牛客题霸_牛客网 思路 既然涉及…
阅读更多...
什么是网络渗透，应当如何防护？

什么是网络渗透，应当如何防护？

什么是网络渗透 网络渗透是攻击者常用的一种攻击手段&#xff0c;也是一种综合的高级攻击技术&#xff0c;同时网络渗透也是安全工作者所研究的一个课题&#xff0c;在他们口中通常被称为"渗透测试(Penetration Test)"。无论是网络渗透(Network Penetration)还是渗透…
阅读更多...
C++初阶之类与对象（上）详细解析

C++初阶之类与对象（上）详细解析

个人主页&#xff1a;点我进入主页 专栏分类&#xff1a;C语言初阶 C语言进阶 数据结构初阶 Linux C初阶 欢迎大家点赞&#xff0c;评论&#xff0c;收藏。 一起努力&#xff0c;一起奔赴大厂 目录 一.前言 二.类的定义和使用 2.1类的引入 2.2类的定义和访问限定…
阅读更多...
Java学习-常用API（一）

Java学习-常用API（一）

Object类 Object类及其常用方法&#xff1a; 代码示例&#xff1a; Objects Objects类的引入&#xff0c;定义及其常见的方法&#xff1a; 示例 包装类 什么是包装类&#xff1f; 自动装箱和自动拆箱&#xff1a; 常用方法&#xff1a; 注意&#xff1a;字符串的 数值&#xf…
阅读更多...
1Panel面板如何安装并结合内网穿透实现远程访问本地管理界面

1Panel面板如何安装并结合内网穿透实现远程访问本地管理界面

文章目录 前言1. Linux 安装1Panel2. 安装cpolar内网穿透3. 配置1Panel公网访问地址4. 公网远程访问1Panel管理界面5. 固定1Panel公网地址 前言 1Panel 是一个现代化、开源的 Linux 服务器运维管理面板。高效管理,通过 Web 端轻松管理 Linux 服务器&#xff0c;包括主机监控、…
阅读更多...
2024 Google Chrome 浏览器回退安装旧版本

2024 Google Chrome 浏览器回退安装旧版本

2024 Google Chrome 浏览器回退安装旧版本 查看当前谷歌版本备份浏览器数据卸载浏览器双击重新安装旧版本浏览器 查看当前谷歌版本 详细参考&#xff1a;参考 笔记&#xff1a;最近谷歌浏览器更新后&#xff0c;用着总感觉别扭&#xff1a;不习惯 备份浏览器数据 &#xff…
阅读更多...
微服务-微服务Alibaba-Nacos 源码分析 （源码流程图）-2.0.1

微服务-微服务Alibaba-Nacos 源码分析 （源码流程图）-2.0.1

客户端注册临时实例&#xff0c;GRPC处理 客户端服务发现 及订阅处理
阅读更多...
力扣经典题：单值二叉树

力扣经典题：单值二叉树

思路&#xff1a;验证根节点与左右节点的关系即可&#xff0c;然后向下遍历&#xff0c;此题值得注意的点在于要考虑左右节点为空的情况 bool isUnivalTree(struct TreeNode* root) {if(rootNULL){return true;}if(root->left!NULL&&root->val!root->left-&g…
阅读更多...
Hadoop3.x基础（4）- Yarn

Hadoop3.x基础（4）- Yarn

来源&#xff1a;B站尚硅谷 目录 Yarn资源调度器Yarn基础架构Yarn工作机制作业提交全过程Yarn调度器和调度算法先进先出调度器&#xff08;FIFO&#xff09;容量调度器&#xff08;Capacity Scheduler&#xff09;公平调度器&#xff08;Fair Scheduler&#xff09; Yarn常用命…
阅读更多...
【数据分析】Excel中的常用函数公式总结

【数据分析】Excel中的常用函数公式总结

目录 0 引用方式0.1 相对引用0.2 绝对引用0.3 混合引用0.4 3D引用0.5 命名引用 1 基础函数1.1 加法、减法、乘法和除法1.2 平均数1.3 求和1.4 最大值和最小值 2 文本函数2.1 合并单元格内容2.2 查找2.3 替换 3 逻辑函数3.1 IF函数3.2 AND和OR函数3.3 IFERROR函数 4 统计函数4.1…
阅读更多...
解决dockor安装nginx提示missing signature key的问题

解决dockor安装nginx提示missing signature key的问题

问题描述 使用dockor安装nginx拉取nginx的时候提示key丢失问题 问题定位 由于dockor版本低导致 问题解决 卸载重新安装最新版本dockor 解决步骤 1. 卸载旧版本的Docker&#xff1a; sudo yum remove docker docker-common docker-selinux docker-engine 2. 安装依赖包&am…
阅读更多...
【JS逆向八】逆向某企查网站的headers参数，并模拟生成 仅供学习

【JS逆向八】逆向某企查网站的headers参数，并模拟生成 仅供学习

逆向日期&#xff1a;2024.02.07 使用工具&#xff1a;Node.js 加密方法&#xff1a;未知 / 标准库Hmac-SHA512 文章全程已做去敏处理&#xff01;&#xff01;&#xff01; 【需要做的可联系我】 可使用AES进行解密处理&#xff08;直接解密即可&#xff09;&#xff1a;AES加…
阅读更多...
Java学习15-- 面向对象学习3. 对象的创建分析【★】

Java学习15-- 面向对象学习3. 对象的创建分析【★】

&#xff08;本章看不懂多读几遍&#xff0c;弄懂后再往下章看&#xff09; 面向对象学习3. 对象的创建分析 Java Memory Structure: 如上图所示&#xff1a; 主要分为Stack和Heap Memory 其中Stack主要放method包括main 程序从main开始所以main最先进入Stack&#xff0c;等…
阅读更多...
【Langchain+Streamlit】打造一个旅游问答AI

【Langchain+Streamlit】打造一个旅游问答AI

利用LangchainStreamlit打造一个交互简单的旅游问答AI机器人&#xff0c;如果你有openai账号,可以按照如下的网址直接体验&#xff0c;如果你没有的话可以站内私信博主要一下临时key体验一下&#xff1a; 产品使用传送门—— http://101.33.225.241:8501/ 这里有演示效果和代码…
阅读更多...
最新话费充值系统源码，附带系统安装教程

最新话费充值系统源码，附带系统安装教程

搭建教程 亲测环境&#xff1a;PHP7.0MySQL5.6 PHP扩展安装&#xff1a;sg11 数据库配置文件路径&#xff1a;/config/database.php 伪静态设置为thinkphp 后台地址&#xff1a;/admin 账号密码&#xff1a;admin/123456
阅读更多...
node.js后端+小程序前端+mongoDB（增删改查）

node.js后端+小程序前端+mongoDB（增删改查）

前言 今天我对比了以下node.js的express与python的fastAPI&#xff0c;我决定我还是出一期关于node.jsmangoDB小程序的小案例吧。 不是python的fastAPI不好用&#xff0c;因为fastAPI是python较新的技术&#xff0c;我不敢果断发出教学文章&#xff08;这件事情还是留着给pyt…
阅读更多...
[机器学习]K-means——聚类算法

[机器学习]K-means——聚类算法

一.K-means算法概念 二.代码实现 # 0. 引入依赖 import numpy as np import matplotlib.pyplot as plt # 画图依赖 from sklearn.datasets import make_blobs # 从sklearn中直接生成聚类数据# 1. 数据加载 # 生成&#xff08;n_samples&#xff1a;样本点&#xff0c;centers&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023