Java复习第十三天学习笔记（HTML），附有道云笔记链接

【有道云笔记】十三 3.29 HTML
https://note.youdao.com/s/Ru3zoNqM

一、基本标签

HTML:超文本标记语言 定义页面结构

CSS：层叠样式表 页面显示的样式、排版 BootStrap

JS: JavaScript 界面交互(动态交互、逻辑) JQuery

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello Html</title> </head> <body> <!-- 标题 headline --> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> <!-- p:paragraph --> <p>京东（股票代码：JD），中国自营式电商企业，创始人刘强东担任京东集团董事局主席兼首席执行官 [1] 。旗下设有京东商城、京东金融、拍拍网、京东智能、O2O及海外事业部等。2013年正式获得虚拟运营商牌照。</p> <p>王老师是Java讲师,朱老师是Java讲师</p> <img src="img/bd.png"/> <img src="img/bd.png" width="100px" height="100px"></img> <br/> <!-- 换行 --> <!-- a:超链接 target="_blank" --> <a href="http://www.baidu.com">超链接跳转到Baidu</a> <a href="http://www.baidu.com" target="_blank">超链接跳转到Baidu</a> <!-- 无序列表 ul=unordered list li=list item --> <ul> <li>北京</li> <li>上海</li> <li>深圳</li> <li>广州</li> </ul> <!-- ol:ordered list --> <ol> <li>北京</li> <li>上海</li> <li>深圳</li> <li>广州</li> </ol> <div>Hello Div1</div> <div>Hello Div2</div> <span>Span1</span> <span>Span2</span> <br/> <span style="color: red;">山东省青岛市城阳区春阳路大润发</span> <br/> <span><u>山东省</u><i>青岛市</i><span style="color: red;">城阳区</span><b>春阳路大润发</b></span> <div> <!-- 空格折叠现象 普通的空格在html里面如果连续出现多个会被当成一个空格， 如果想显示多个连续的空格就需要使用特殊的符号   Non-breaking Space --> 锄禾日当    午<br/> 汗滴禾下    土<br/> 谁知盘中    餐<br/> 粒粒皆辛    苦<br/> </div> </body> </html>

二、div和span

div division : div里面所有的元素都在div区域里面 div里面可以嵌套别的标签

div独占一行

span:功能类似于div，但是不能独占一行

块级元素block：单独成为一行。h、ul、ol、div

行内元素inline：不能独占一行，可以和其他元素并排。img、a、span、input

u(underline):下划线

i(italic):斜体

b(bold):粗体

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello Html</title> </head> <body> <div>Hello Div1</div> <div>Hello Div2</div> <span>Span1</span> <span>Span2</span> <br/> <span style="color: red;">山东省青岛市城阳区春阳路大润发</span> <br/> <span><u>山东省</u><i>青岛市</i><span style="color: red;">城阳区</span><b>春阳路大润发</b></span> <div> <!-- 空格折叠现象 普通的空格在html里面如果连续出现多个会被当成一个空格， 如果想显示多个连续的空格就需要使用特殊的符号   Non-breaking Space --> 锄禾日当    午<br/> 汗滴禾下    土<br/> 谁知盘中    餐<br/> 粒粒皆辛    苦<br/> </div> </body> </html>

三、空格折叠现象

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello Html</title> </head> <body> <div> <!-- 空格折叠现象 普通的空格在html里面如果连续出现多个会被当成一个空格， 如果想显示多个连续的空格就需要使用特殊的符号   Non-breaking Space --> 锄禾日当    午<br/> 汗滴禾下    土<br/> 谁知盘中    餐<br/> 粒粒皆辛    苦<br/> </div> </body> </html>

< less than

> great than >

© ©

<h1> 在html页面输出：

四、表格table

th:table head

tr:table row

td:table data 单元格

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border="1" cellspacing="0" width="400px"> <tr> <th>讲师名称</th> <th>所教班级</th> </tr> <tr> <td>朱老师</td> <td>Java2303</td> </tr> <tr> <td>秦老师</td> <td>UI2303</td> </tr> <tr> <td>鞠老师</td> <td>H52303</td> </tr> </table> <table border="1" cellspacing="0" width="400px"> <tr> <th>讲师名称</th> <th>所教班级</th> </tr> <tr> <td rowspan="2">朱老师</td> <td>Java2303</td> </tr> <tr> <!-- <td>秦老师</td> --> <td>UI2303</td> </tr> <tr> <td>鞠老师</td> <td>H52303</td> </tr> </table> <table border="1" cellspacing="0" width="400px"> <tr> <th>讲师名称</th> <th>所教班级</th> </tr> <tr> <td colspan="2">朱老师</td> <!-- <td>Java2303</td> --> </tr> <tr> <td>秦老师</td> <td>UI2303</td> </tr> <tr> <td>鞠老师</td> <td>H52303</td> </tr> </table> <table border="1" cellspacing="0"> <tr> <td>ID</td> <td>名字</td> <td>年龄</td> <td>性别</td> </tr> <tr> <td>1</td> <td>张三1</td> <td>23</td> <td>男</td> </tr> <tr> <td>2</td> <td>张三2</td> <td>23</td> <td>男</td> </tr> <tr> <td>3</td> <td>张三3</td> <td>23</td> <td>男</td> </tr> </table> </body> </html>

五、form表单

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action=""> <table border="1" cellspacing="0"> <tr> <td>用户名：</td> <!-- readonly="readonly" readonly readonly="true" --> <td><input type="text" value="zhansgan" /></td> </tr> <tr> <td>密码：</td> <td><input type="password"/></td> </tr> <tr> <td>性别：</td> <td> <input type="radio" name="gender" checked/>男 <input type="radio" name="gender"/>女 <input type="radio" name="gender"/>未知 </td> </tr> <tr> <td>城市：</td> <td> <select> <option>--请选择--</option> <option>青岛</option> <option selected>济南</option> <option>烟台</option> </select> </td> </tr> <tr> <td>兴趣爱好：</td> <td> <input type="checkbox"/>音乐<br/> <input type="checkbox"/>看书<br/> <input type="checkbox"/>爬山<br/> </td> </tr> <tr> <td>自我介绍：</td> <td> <textarea>京东(股票代码:JD),中国自营式电商企业,创始人刘强东担任京东集团董事局主席兼首席执行官 [1] 。2021年全年净收入达到9516亿元人民币, [153] 旗下设有京东商城、京东金融、拍拍网、京东智能、O2O及海外事业部等。2013年正式获得虚拟运营商牌照。2014年5月在美国纳斯达克证券交易所正式挂牌上市。2015年7月,京东入选纳斯达克100指数和纳斯达克100平均加权指数。 2016年6月与沃尔玛达成深度战略合作,1号...</textarea> </td> </tr> <tr> <td colspan="2"> <input type="checkbox"/> 同意该协议 </td> </tr> <tr> <td> <input type="submit" value="注册"/> </td> <td> <input type="reset" value="重置"/> </td> </tr> </table> </form> </body> </html>

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

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

相关文章

C++Template＜＞模版的介绍及深度解析

C++Template＜＞模版的介绍及深度解析

一、泛型编程 1.什么是泛型编程 泛型编程&#xff1a;是一种程序设计方法&#xff0c;编写于类型无关的通用代码&#xff0c;实现代码复用。而模版就是泛型编程的基础和核心。 二、template<>模版 1.template模版介绍 模版&#xff0c;顾名思义就是一个模具&#xff0…
阅读更多...
SpringBoot实现RabbitMQ的定向交换机(SpringAMQP 实现Direct定向交换机)

SpringBoot实现RabbitMQ的定向交换机(SpringAMQP 实现Direct定向交换机)

文章目录 Direct 交换机特点实战声明交换及其队列(以注解方式)发消息 应用 上一篇文章中的 Fanout 模式&#xff0c;一条消息&#xff0c;会被所有订阅其交换机的队列都消费。 但是&#xff0c;在某些场景下&#xff0c;我们希望不同的消息被不同的队列消费。这时就要用到 Dir…
阅读更多...
Linux内核之debugfs_create_dir与debugfs_create_file实例与调用栈流程(三十二)

Linux内核之debugfs_create_dir与debugfs_create_file实例与调用栈流程(三十二)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…
阅读更多...
.NET CORE使用Redis分布式锁续命(续期)问题

.NET CORE使用Redis分布式锁续命(续期)问题

结合上一期 .NET CORE 分布式事务(三) DTM实现Saga及高并发下的解决方案(.NET CORE 分布式事务(三) DTM实现Saga及高并发下的解决方案-CSDN博客)。有的小伙伴私信说如果锁内锁定的程序或者资源未在上锁时间内执行完&#xff0c;造成的使用资源冲突&#xff0c;需要如何解决。本…
阅读更多...
Windows12安装Docker

Windows12安装Docker

环境及工具&#xff08;文末提供&#xff09; Docker Desktop Installer.exe &#xff08;官网&#xff09; 一、查看windows相关配置 查看是否开启相应的功能&#xff0c;如果没有需要开启&#xff0c;然后重启电脑 打开任务管理器&#xff08;CTRLSHIFTESC&#xff09;-&g…
阅读更多...
美团二面极差体验

美团二面极差体验

#软件开发2024笔面经# 26号二面的&#xff0c;emo了两天&#xff0c;现在才调整好心态来复盘。 给我的整体感觉就是&#xff0c;极其不尊重人&#xff0c;整个面试环节都在不停打断我&#xff0c;对我的回答不置可否&#xff0c;没有反馈。 上来就让我自我介绍&#xff0c;我刚…
阅读更多...
既有理论深度又有技术细节——深度学习计算机视觉

既有理论深度又有技术细节——深度学习计算机视觉

推荐序 我曾经试图找到一本既有理论深度、知识广度&#xff0c;又有技术细节、数学原理的关于深度学习的书籍&#xff0c;供自己学习&#xff0c;也推荐给我的学生学习。虽浏览文献无数&#xff0c;但一直没有心仪的目标。两周前&#xff0c;刘升容女士将她的译作《深度学习计…
阅读更多...
ssm 设备采购管理系统开发mysql数据库web结构java编程计算机网页源码eclipse项目

ssm 设备采购管理系统开发mysql数据库web结构java编程计算机网页源码eclipse项目

一、源码特点 ssm 设备采购管理系统是一套完善的信息系统&#xff0c;结合springMVC框架完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用SSM框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模…
阅读更多...
java中的继承和组合

java中的继承和组合

继承 在java中继承指的是让类与类之间产生父子关系&#xff0c;被继承的类叫做父类或者基类、超类&#xff0c;继承的类叫做子类或者派生类。这里所说的继承和现实生活中的继承可以理解为同一个意思。当子类继承父类时&#xff0c;子类就能使用父类之中的非私有成员&#xff0c…
阅读更多...
（十二）图像的Sobel梯度锐化

（十二）图像的Sobel梯度锐化

环境&#xff1a;Windows10专业版 IDEA2021.2.3 jdk11.0.1 OpenCV-460.jar 系列文章&#xff1a; &#xff08;一&#xff09;PythonGDAL实现BSQ&#xff0c;BIP&#xff0c;BIL格式的相互转换 &#xff08;二&#xff09;BSQ,BIL,BIP存储格式的相互转换算法 &#xff08;三…
阅读更多...
使用Spring的缓存抽象来集成不同的缓存提供者，如Ehcache、Redis等

使用Spring的缓存抽象来集成不同的缓存提供者，如Ehcache、Redis等

使用Spring的缓存抽象来集成不同的缓存提供者&#xff0c;如Ehcache、Redis等 使用Spring的缓存抽象来集成不同的缓存提供者&#xff0c;如Ehcache、Redis等是非常常见的做法。Spring提供了Cacheable、CachePut、CacheEvict等注解&#xff0c;可以轻松地在Spring应用程序中使用…
阅读更多...
Python类的基本结构

Python类的基本结构

当我们在Python中定义类时&#xff0c;我们实际上是在创建一种新的数据类型。类允许我们定义对象的属性和方法&#xff0c;从而构建更复杂的程序。让我们深入探讨一下关于类的一些重要概念。 定义类&#xff1a;基本结构 一个类的基本结构包括以下部分&#xff1a; 类名&…
阅读更多...
图论- 最小生成树

图论- 最小生成树

一、最小生成树-prim算法 1.1 最小生成树概念 一幅图可以有很多不同的生成树&#xff0c;比如下面这幅图&#xff0c;红色的边就组成了两棵不同的生成树&#xff1a; 对于加权图&#xff0c;每条边都有权重&#xff08;用最小生成树算法的现实场景中&#xff0c;图的边权重…
阅读更多...
UI的设计

UI的设计

一、RGB888的显示 即红色&#xff0c;绿色&#xff0c;蓝色都为8位&#xff0c;即通常说的24位色。可以很好显示各种过渡颜色。从硬件上&#xff0c;R、G、B三基色的连接线各需要有8根&#xff0c;即24根数据线&#xff1b;软件上存储的数据量也需要24位&#xff0c;即3个字节&…
阅读更多...
元素选择器csp

元素选择器csp

1.解题思路 注意标签是不分大小写而id分大小写且每行只含一个元素&#xff0c;所以对于每一行提取出其标签&#xff08;统一转换为小写&#xff09;、id(如果有)和通过点的个数计算层级&#xff0c;对于每一组查询输入&#xff0c;找到最后一层的元素&#xff0c;遍历每一行&a…
阅读更多...
主干网络篇 | YOLOv8更换主干网络之EfficientNet

主干网络篇 | YOLOv8更换主干网络之EfficientNet

前言：Hello大家好，我是小哥谈。EfficientNet是一种高效的卷积神经网络架构，由Mingxing Tan和Quoc V. Le在2019年提出，其设计思想是在不增加计算复杂度的情况下提高模型的准确性。它引入了一个称为"复合系数"的概念，该系数用于同时缩放网络的深度、宽度和分辨率。…
阅读更多...
RabbitMQ 延时消息实现

RabbitMQ 延时消息实现

1. 实现方式 1. 设置队列过期时间&#xff1a;延迟队列消息过期 死信队列&#xff0c;所有消息过期时间一致 2. 设置消息的过期时间&#xff1a;此种方式下有缺陷&#xff0c;MQ只会判断队列第一条消息是否过期&#xff0c;会导致消息的阻塞需要额外安装 rabbitmq_delayed_me…
阅读更多...
光伏发电量预测（Python代码，CNN结合LSTM，TensorFlow框架）

光伏发电量预测（Python代码，CNN结合LSTM，TensorFlow框架）

1.数据集&#xff08;开始位置&#xff09;&#xff0c;数据集免费下载链接&#xff1a;https://download.csdn.net/download/qq_40840797/89051099 数据集一共8列&#xff0c;第一列是时间&#xff0c;特征列一共有6列&#xff1a;"WindSpeed" - 风速 "Sunshi…
阅读更多...
C++template之类模版进一步了解

C++template之类模版进一步了解

前言&#xff1a;这一篇是在我的上一篇文章的基础上&#xff0c;再进一步所写的。 链接&#xff1a;CTemplate&#xff1c;&#xff1e;模版的介绍及深度解析-CSDN博客 一、类模板实例化 1.非类型模版参数 类型模版参数&#xff1a;就是跟在 class后面或者typename后的类型 非…
阅读更多...
visual studio报：引发的异常:“System.DllNotFoundException”(位于 ConsoleCAN1.exe 中)

visual studio报：引发的异常:“System.DllNotFoundException”(位于 ConsoleCAN1.exe 中)

最近在重构CAN通信的代码&#xff0c;把论文中的java转为C#实现&#xff0c;由于某种原因&#xff0c;java不能复现&#xff0c;所以转为c#。 然而c#的重构过程遇到许多问题&#xff0c;因为两种语言的编程方式、线程等等实现上有所差异。 其中一个错误&#xff1a; 引发的异…
阅读更多...
最新文章

Copyright @ 2022~2023