当前位置： 首页 > news >正文

【JavaWeb】HTML常用标签

news 文章来源：https://blog.csdn.net/p_fly/article/details/129325578 2024/11/2 20:16:19

HTML标签结构

HTML语言主要都是由标签构成的。

标签名 在 <> 中  如<body>

标签大部分成对出现，代表开始和结束 如 <body>标签中的内容</body>

少部分单个出现，叫单标签 </br> 代表换行

标签中可以加属性，多个属性之间使用空格隔开

HTML文件结构

<html><head><title>Document</title></head><body></body></html>

<html> </html> 是整个html文件的顶层标签(根标签)

<head> </head> 整个页面的属性

<title> </title> 页面的标题

<body> </body> 页面的内容 

HTML常见标签

注释标签

    <!--  --><!-- 上面这个标签就是注释 --><!-- 编译器中按 Ctrl + / 快速生成 --><!-- 在浏览器查看源码时可以看到注释 -->

标题标签

    <h1>一级标题</h1><h2>二级标题</h2><!-- 总共有六级标题 -->

  

段落标签

    <p>一个p标签之间就是一个段落</p><p>这是另外一个段落</p>

 

换行标签

    一个p标签之间就是一个段落</br>换行了，使用这个比<br>更为标准

 

格式化标签

    <b>加粗</b><strong>这也可以加粗</strong></br><i>倾斜</i><em>这也可以倾斜</em></br><del>删除线</del><s>这也是删除线</s></br><ins>下划线</ins><u>这也是下划线</u>

 

图片标签

    <!-- 测试图片标签 --><!-- src 图片的路径 --><!-- 路径可以是相对路径，也可以是绝对路径  表示方法都一样 --><!-- alt 当图片不能正确显示的时候显示alt中的内容 --><!-- width  图片的大小(只设置width 长和宽会按比例缩放) --><!-- border 图片的边框 --><!-- title 鼠标悬停出来的文字 --><!-- 属性可以有多个，之间用空格或回车分隔 --><img src="picture1.png" alt="宇航员" width="500px" border="5px"title="宇航员">

超链接标签

    <!-- a 超链接 点击后可以跳转到那个界面 --><!-- >< 中间的文字会显示到网页上 --><a href="https://www.bilibili.com/">点我跳到b站</a><!-- 点击目录中的html文件 --><a href="Test2.html">点我跳到Test2</a><!-- # 用这个符号占位 --><a href="#">我是一个空链接</a><!-- 内容还可以是文件，这样就可以下载 --><a href="picture1.png">点我查看宇航员图片</a><a href="picture1.7z">点我下载压缩包</a><!-- 链接中加图片 图片=链接 --><a href="https://www.bilibili.com/"><img src="picture1.png" width="100px"></a><!-- 点击链接后会生成一个新的标签页，而不是覆盖 --><a href="https://www.bilibili.com/" target="_blank">点我增加新的标签页</a>

 

表格标签

    <!-- 表格标签 --><!-- table 整个表格的开始和结束 --><!-- 表格中可以设置边框的属性，一般用CSS来设置 --><table align="ceter" border="1" cellpadding="20" cellspacing="0" width="500" height="500"><!-- tr 表示一行 --><tr><!-- th 表示表头中的一个单元格 --><th>姓名</th><th>学号</th></tr><tr><!-- td 表示一个单元格 --><td>张三</td><td>10001</td></tr><tr><td>李四</td><td>10002</td></tr><tr><td>王五</td><td>10003</td></tr></table>

 

列表标签

    <!-- 列表标签 --><!-- ul unordered list 无序列表 --><ul><!-- li 列表项 --><li>C语言</li><li>Java</li><li>大学物理</li><li>高等数学</li></ul><!-- ol ordered list 有序列表 --><ol><li>C语言</li><li>Java</li><li>大学物理</li><li>高等数学</li></ol><!-- dl 自定义列表 --><dl><!-- dt 小标题 --><dt>课程</dt><!-- dd 列表项 --><dd>C语言</dd><dd>Java</dd><dd>大学物理</dd><dd>高等数学</dd></dl>

  

表单标签

表单标签是用户输入的重要途径.

input标签

    <!-- 表单标签 --><!-- text 输入文本 --><input type="text"><br/><!-- password 输入密码 --><input type="password"><br/><!-- radio 单选框(默认可以多选) --><!-- name 必须相同才能实现多选一的效果 --><!-- checked 默认初始值选哪个 --><input type="radio" name="sex"> 男<input type="radio" name="sex" checked="checked"> 女<br/><!-- checkbox 多选框 --><input type="checkbox"> A<input type="checkbox"> B<input type="checkbox"> C<input type="checkbox"> D<br/><input type="button" value="这是个按钮"onclick="alert('按了按钮的结果')"><br/><input type="file"><br/>

 

 

 

select标签

     <!-- select 选择 --><select><!-- option 选择的选项 --><option>请选择年份</option><option>2001</option><option>2002</option><option>2003</option><option>2004</option><option>2005</option></select>

  

textarea标签

    <textarea cols="30" rows="10">写点内容</textarea>

 

无语义标签

    <div>div标签独占一行div标签除了表单标签不能模拟之外，剩下所有的标签基本上都可以模拟<span>aaa</span><span>bbb</span></div><div>另一个div<span>ccc</span><span>ddd</span></div>

有什么错评论区指出。希望可以帮到你。 

相关文章：

【JavaWeb】HTML常用标签

HTML标签结构 HTML语言主要都是由标签构成的。 标签名 在 <> 中 如<body> 标签大部分成对出现&#xff0c;代表开始和结束 如 <body>标签中的内容</body> 少部分单个出现&#xff0c;叫单标签 </br> 代表换行 标签中可以加属性&#xff0c;多个…...

编程日记 2023/5/31 13:52:25

python编程：查找某个文件夹下所有的文件，包括子文件加下的所有文件，读取指定类型的文件

目录 一、实现要求 二、代码实现 三、效果测试 一、实现要求 1、在电脑上有一个文件夹&#xff0c;该文件夹下面还有子文件夹&#xff0c;具体层级不清楚&#xff0c;需要实现将该文件夹下所有的文件路径读取出来&#xff1b; 2、在1的基础上&#xff0c;只需读取指定类型的文…...

编程日记 2023/5/31 13:52:22

测试外包干了5年，感觉自己已经废了····

前两天有读者想我资讯&#xff1a; 我是一名软件测试工程师&#xff0c;工作已经四年多快五年了。现在正在找工作&#xff0c;由于一直做的都是外包的项目。技术方面都不是很深入&#xff0c;现在找工作都是会问一些&#xff0c;测试框架&#xff0c;自动化测试&#xff0c;感…...

编程日记 2023/5/31 13:52:19

C++17 文件与目录操作 ＜filesystem＞

目录 路径操作 目录遍历 文件检查和操作 总结 每次写C进行目录操作时&#xff0c;我一般都是调平台的SDK&#xff0c;尤其是win32 api 非常难记&#xff0c;于是查一下文档看看有没有和Python中os模块一样好用的库。 于是发现 filesystem&#xff0c;从来没用过&#xff0…...

编程日记 2023/5/31 13:52:16

Python 如何安装 MySQLdb ?

人生苦短 我用python Python 标准数据库接口为 Python DB-API&#xff0c; Python DB-API为开发人员提供了数据库应用编程接口。 Python 数据库接口支持非常多的数据库&#xff0c; 你可以选择适合你项目的数据库&#xff1a; GadFlymSQLMySQLPostgreSQLMicrosoft SQL Serve…...

编程日记 2023/5/31 13:52:14

总被程序员坑？你需要了解API接口

编辑导读&#xff1a;程序员是公司里的技术岗&#xff0c;也是产品经理最密切的合作伙伴。但是&#xff0c;程序员能看懂产品经理的工作&#xff0c;产品经理却不一定能明白程序员的工作&#xff0c;因此也常常被无良程序员坑。本文就从API接口的维度&#xff0c;浅析API的概念…...

编程日记 2023/5/31 13:52:11

信息系统基本知识（四）新技术

大纲 信息系统与信息化信息系统开发方法常规信息系统集成技术软件工程新一代信息技术信息系统安全技术信息化发展与应用信息系统服务管理信息系统服务规划企业首席信息管及其责任 1.5 新一代技术 1.5.1 物联网 概念&#xff1a;&#xff08;The Internet of Things&#xf…...

编程日记 2023/5/31 13:52:09

jeesite多环境配置

jeesite多环境配置 参考网址&#xff1a; https://blog.csdn.net/shaoming314/article/details/129115912?spm1001.2014.3001.5501 开源项目地址&#xff1a; https://gitee.com/thinkgem/jeesite Spring Spring MVC mybatis Ehcache shiro mysql jsp (主要技术栈) 项目…...

编程日记 2023/5/31 13:52:06

项目中用到的知识点回顾---JWT(JSON Web Token)

1.JWT原理&#xff1a; JWT 的原理是&#xff0c;服务器认证以后&#xff0c;生成一个 JSON 对象&#xff0c;发回给用户&#xff0c;如下&#xff1b; {"姓名": "张三","角色": "管理员","到期时间": "2018年7月1日…...

编程日记 2023/5/31 13:52:04

string类常用函数

1&#xff08;substr函数&#xff09;&#xff1a;字符串截取函数&#xff0c;用于获取字符串的子串&#xff1a; //str.substr(begin&#xff0c;length)&#xff0c;用于截取str中以begin为下标长度为length的字串 string s“asd”; ss.substr(0,1);//结果为a。 2&#xff08…...

编程日记 2023/6/1 5:14:13

hexo静态网站部署到腾讯云cos

hexo支持很多部署方案&#xff0c;最直接的就是部署在GitHub Pages服务上&#xff0c;国内gitee、coding等代码托管平台也都支持静态网站服务&#xff0c;而且免费。 但是GitHub在国内访问不太稳定&#xff0c;国内的代码托管平台资源和服务也不太稳定&#xff0c;后来想了想&…...

编程日记 2023/5/31 13:52:02

Python高性能编程

一、进程池和线程池 1.串行 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 import time import requests url_lists [ http://www.baidu.com, http://fanyi.baidu.com, http://map.baidu.com, http://music.baidu.com/, http://tieba.baid…...

编程日记 2023/5/31 13:52:00

MVVM模式下如何正确【视图绑定+数据】

概述 我如何&#xff08;不在后面的代码中使用代码&#xff09;自动绑定到我想要的视图&#xff1f;据我了解&#xff0c;如果正确完成&#xff0c;这就是模式应该如何工作。我可以使用主窗口 xaml 中的代码实现这一切&#xff0c;我甚至正确创建了一个资源字典&#xff08;因…...

编程日记 2023/5/31 13:42:09

外包测试3年，离职后成功入职华为，拿到offer的那天我泪目了....

一提及外包测试&#xff0c;大部分人的第一印象就是&#xff1a;工作强度大&#xff0c;技术含量低&#xff0c;没有归属感&#xff01;外包工作三年总体感受就是这份工作缺乏归属感&#xff0c;心里总有一种落差&#xff0c;进步空间不大&#xff0c;接触不到核心技术&#xf…...

编程日记 2023/5/31 13:41:59

Qt Study

按钮->点击->窗口->关闭窗口 connect(信号的发送者&#xff0c;发送具体信号&#xff0c;信号的接收者&#xff0c;信号的处理); 信号处理函数称为槽 信号槽的优点&#xff0c;松散耦合&#xff0c;信号发送端和接收端本身是没有关联的&#xff0c;通过connect连接…...

编程日记 2023/5/31 13:41:51

JS混淆技术探究及解密方法分析

随着Web技术的快速发展&#xff0c;JavaScript被广泛应用于网页开发、移动应用开发等领域。然而&#xff0c;JavaScript代码很容易被反编译、解密&#xff0c;这给保护网站和应用程序的安全性带来了严重的挑战。为了解决这个问题&#xff0c;JS混淆技术应运而生。JS混淆就是将J…...

编程日记 2023/5/31 13:41:41

智慧制硅厂 Web SCADA 生产线

我国目前是全球最大的工业硅生产国、消费国和贸易国&#xff0c;且未来该产业的主要增量也将来源于我国。绿色低碳发展已成为全球大趋势和国际社会的共识&#xff0c;随着我国“双碳”目标的推进&#xff0c;光伏产业链快速发展&#xff0c;在光伏装机需求的带动下&#xff0c;…...

编程日记 2023/5/31 13:41:31

案例09-数据类型不一致导致equals判断为false

一&#xff1a;背景介绍 在判断课程id和班级id的时候如果一致就像课程信息进行更新&#xff0c;如果不一致就插入一条新的数据。其实两个变量的值是一致的但是类型是不一致的。这就导致数据库中已经有一条这样的数据了&#xff0c;在判断的时候结果为false&#xff0c;就有插入…...

编程日记 2023/5/31 13:41:27

springsecurity中的类

Authentication AuthenticationProvider 每一个AuthenticationProvider对应一个Authentication 很多个AuthenticationProvider 由一个 ProviderManager管理 ProviderManager implements AuthenticationManager 一个ProviderManager有很多个 AuthenticationProvider Usern…...

编程日记 2023/5/31 13:41:20

k8s配置管理

一、configmap 1.1 configmap概述 Configmap 是 k8s 中的资源对象&#xff0c;用于保存非机密性的配置的&#xff0c;数据可以用 key/value 键值对的形式保存&#xff0c;也可通过文件的形式保存。 1.2 configmap作用 我们在部署服务的时候&#xff0c;每个服务都有自己的配置…...

编程日记 2023/5/31 13:41:15

技术官方文档中的代码是用什么展示的？代码高亮插件总结

****内容预警****菜鸟教程***大佬绕道我们经常看到各种技术官方文档&#xff0c;有很多代码展示的区域&#xff0c;用于我们复制粘贴代码&#xff0c;比如vue 的官网当我们需要自己实现这么一个网站的时候&#xff0c;我就开始手忙脚乱&#xff0c;这到底是咋实现的&#xff1f…...

编程日记 2023/5/31 13:41:03

2023年中职组网络安全竞赛——综合渗透测试解析

综合渗透测试 题目如下： PS:需求环境可私信博主,求个三连吧！ 解析如下: 通过本地PC中的渗透测试平台KALI2020对服务器场景进行渗透攻击，获取到RSYNC服务所开放的端口，将RSYNC服务开放的端口数值进行MD5加密后作为FLAG提交（如MD5加密前：812）；...

编程日记 2023/5/31 13:40:58

【全网最细PAT题解】【PAT乙】1044 火星数字（测试点2，测试点4详细解释）

题目链接 1044 火星数字 题目描述 火星人是以 13 进制计数的&#xff1a;地球人的 0 被火星人称为 tret。 地球人数字 1 到 12 的火星文分别为&#xff1a;jan, feb, mar, apr, may, jun, jly, aug, sep, oct, nov, dec。 火星人将进位以后的 12 个高位数字分别称为&#xff1a…...

编程日记 2023/5/31 13:40:42

rsync+xinetd+inotify+sersync

一、介绍 1.1、rsync 对比 scp 相同&#xff1a; 都有拷贝的功能不同&#xff1a; rsync:具有增量复制&#xff0c;每次复制的时候&#xff0c;会扫描对端是否在同路径下有我要发送的一样的文件或者目录&#xff0c;如果&#xff0c;如果存在&#xff0c;则不进行复制。边复制&…...

编程日记 2023/5/31 13:40:36

CSS - 扫盲

文章目录1. 前言2. CSS2.1 css 的引入方式2.2 选择器2.3 CSS 常用属性2.3.1 字体属性2.3.2 文本属性2.3.3 背景属性2.4 圆角矩形2.5 元素的显示模式2.6 盒子模型2.7 弹性布局1. 前言 上文我们简单 将 HTML 过了一遍 &#xff0c; 知道了 HTML 知识表示页面的结构和内容 &#x…...

编程日记 2023/5/31 13:40:29

ChatGPT能完全取代软件开发吗，看看它怎么回答？

最近网上一直疯传&#xff0c;ChatGPT 最可能取代的 10 种工作。具体包括①、技术类工作&#xff1a;程序员、软件工程师、数据分析师②、媒体类工作&#xff1a;广告、内容创作、技术写作、新闻③、法律类工作&#xff1a;法律或律师助理④、市场研究分析师⑤、教师⑥、金融类…...

编程日记 2023/6/1 5:14:11

Vue3学习笔记

一、Ref ref, isRef, shallowRef, triggerRef, customRef ref返回的是es6的一个class类&#xff0c;取值和修改都要加上.valueref 和 shallowRef不能一起写&#xff0c;会引起shallowRef的视图更新ref shallowRef triggerRef <template><div class"home&quo…...

编程日记 2023/6/1 5:14:08

【React】pro-mobile

1.项目介绍 实现react移动端项目 2.目标&#xff1a; 能够应用CRAReactMobxAntd-mobile开发C端项目掌握基于React的C端项目开发流程学会如何应用next优化项目 3.使用技术栈 脚手架&#xff1a;cra dva-cliumi 脚本&#xff1a;ts react版本&#xff1a;react v18 2022年更…...

编程日记 2023/6/1 7:40:37

Substrate 基础教程（Tutorials） -- 授权特定节点

五、授权特定节点 在添加可信节点中&#xff0c;您看到了如何使用一组已知的验证器节点构建一个简单的网络。该教程演示了一个简化版的许可网络&#xff08;permissioned network&#xff09;。在一个被许可的网络中&#xff0c;只有被授权的节点&#xff08;authorized nodes…...

编程日记 2023/6/1 7:40:35

使用qemu-img转换镜像格式

qemu功能强大&#xff0c;详细了解其功能请到官网查看 https://www.qemu.org/docs/master/system/images.html qemu-img能将RAW、qcow2、VMDK、VDI、VHD&#xff08;vpc&#xff09;、VHDX、qcow1或QED格式的镜像转换成VHD格式&#xff0c;也可以实现RAW和VHD格式的互相转换。 …...

编程日记 2023/6/1 7:40:33

要维护公司的网站该怎么做/免费注册网址

2019独角兽企业重金招聘Python工程师标准>>> 今天决定看看开源中国安卓版app&#xff0c;并试着重构一下。好的进入主题。 创建MainActivity public class MainActivity extends ActionBarActivity implementsNavigationDrawerFragment.NavigationDrawerCallbacks,O…...

编程日记 2024/11/2 18:59:24

11电影网/北京自动seo

AOP是什么&#xff1f;　　　　AOP是OOP的延续&#xff0c;Aspect Oriented Programming的缩写&#xff0c;即面向方面编程。AOP是GoF设计模式的延续&#xff0c;设计模式追求的是调用者和被调用者之间的解耦&#xff0c;AOP也是这种目标的一 种实现。　　　　案例:在应用程序中…...

编程日记 2024/11/2 12:58:04

厦门市网站建设/如何做seo搜索引擎优化

//变量销毁unset $aa1 99; if(isset($aa1)){ unset($aa1); } var_dump($aa1);//$aa1值为null $ab 23; $ab1 &$ab; var_dump($ab,$ab1);//23 23 $ab1 20; var_dump($ab,$ab1);//20 20 unset($ab); var_dump($ab,$ab1);//null 20...

编程日记 2024/11/2 9:45:12

推广计划和推广单元什么区别/官网整站优化

上一章传送门&#xff1a;善道&#xff1a;德国人怎么学电机——浅谈电机模型(十四)&#xff1a;同步电机(一)隐极电机​zhuanlan.zhihu.com4 同步电机的阻尼绕组/阻尼棒同步电机是一种可以振荡的系统。稳态工作下的小幅负载角的变动&#xff0c;都对应了负载转矩的变动。这样的…...

编程日记 2024/11/2 6:00:05

wordpress这么安装不了/百度指数查询移动版

---创建测试环境&#xff1a;E1表&#xff0c;模拟大量重复值的表&#xff1b; SQL> create table e1 as select * from emp; SQL> insert into e1 select * from e1; 112 rows created. SQL> commit; --如何提取去重后的数据呢&#xff1f; select distinct empno,sa…...

编程日记 2024/11/2 5:14:20

wordpress搭建企业官网/网络营销百度百科

第三十二~三十三章&#xff1a;最小操作数&#xff0c;木块砌墙问题作者&#xff1a;July、caopengcs、红色标记。致谢&#xff1a;fuwutu、demo。时间&#xff1a;二零一三年八月十二日题记再过一两月&#xff0c;便又到了每年的九月十月校招高峰期&#xff0c;在此依次推荐&a…...

编程日记 2024/11/2 3:37:25