Java WEB 三

已于 2023-02-14 19:19:35 修改
阅读量178 收藏
点赞数 3
文章标签： html 列表
于 2021-06-16 00:14:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44211905/article/details/117876253
版权
这篇博客详细介绍了HTML的基础知识，包括图像、表格、列表、表单和iframe框架的使用方法。通过实例展示了如何插入图片、创建表格、设置列表、构建表单以及使用内联框架。此外，还提到了HTML头部元素和脚本的相关内容，如元数据的设置和JavaScript脚本的插入。博主强调了练习和理解这些基本标签的重要性，并预告接下来将学习CSS。
摘要由CSDN通过智能技术生成

HTML实例【续篇】

三、HTML实例

7、HTML 图像

<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8"> 
		<title>HTML图像</title> 
	</head>
	<body>
		<!--1、插入动态图和静态图【插入动图的语法和静态图的语法是一样的】-->
		<p>一个图像:<img src="图像路径格式" alt="重命名【别名】" width="32" height="32"></p>
		<p>一个动图:<img src="图像路径格式" alt="重命名【别名】" width="48" height="48"></p>
		<!--2、从不同的位置插入图片【一个来自文件夹中的图像】-->
		<p>一个来自文件夹中的图像:</p>
		<img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32"><p>一个来自菜鸟教程的图像:</p>
		<img src="//www.baidu.com/images/logo.png" alt="baidu.com" width="336" height="69">
		<!--3、排列图片-->
		<!--注意:在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。-->
		<img src="图像路径格式" alt="重命名【别名】" width="32" height="32"> 
		<img src="图像路径格式" alt="重命名【别名】" align="middle" width="32" height="32">
		<img src="图像路径格式" alt="重命名【别名】" align="top" width="32" height="32">
		<!--4、图片在段落中的左浮动和右浮动-->
		<!--注意: 在这里我们使用了 CSS float 属性，在HTML 4 中 float 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。-->
		<img src="图像路径格式" alt="重命名【别名】" style="float:left" width="32" height="32">
		<img src="图像路径格式" alt="重命名【别名】" style="float:right" width="32" height="32">
		<!--5、创建图像链接-->
		<p>创建图片链接:<a href="超链接地址"><img  border="10" src="图像路径格式" alt="重命名【别名】" width="32" height="32"></a></p>
		<p>无边框的图片链接:<a href="超链接地址"><img border="0" src="图像路径格式" alt="重命名【别名】" width="32" height="32"></a></p>
	</body>
</html>

8、HTML 表格

<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8"> 
		<title>HTML 表格</title> 
	</head>
	<body>
<!--1、简单表格
	每个表格从一个 table 标签开始。 
	每个表格行从 tr 标签开始。
	每个表格的数据从 td 标签开始。-->
	<h4>一列:</h4>
	<table border="1">
		<tr>
 		 	<td>100</td>
		</tr>
	</table>

	<h4>一行三列:</h4>
	<table border="1">
		<tr>
 			 <td>100</td>
 			 <td>200</td>
 			 <td>300</td>
		</tr>
	</table>

	<h4>两行三列:</h4>
	<table border="1">
		<tr>
  			<td>100</td>
  			<td>200</td>
  			<td>300</td>
	   </tr>
	   <tr>
  			<td>400</td>
 			<td>500</td>
  			<td>600</td>
	   </tr>
	</table>
	<!--2、无边框表格-->
	<table>
		<tr>
		  <td>100</td>
		  <td>200</td>
		  <td>300</td>
		</tr>
		<tr>
		  <td>400</td>
		  <td>500</td>
		  <td>600</td>
		</tr>
	</table>

	<table border="0">
		<tr>
		  <td>100</td>
		  <td>200</td>
		  <td>300</td>
		</tr>
		<tr>
		  <td>400</td>
		  <td>500</td>
		  <td>600</td>
		</tr>
		</table>
		<!--3、水平表头和垂直表头-->
		<h4>水平表头:</h4>
		<table border="1">
		<tr>
		  <th>姓名：</th>
		  <th>电话：</th>
		  <th>地址：</th>
		</tr>
		<tr>
		  <td>九灵</td>
		  <td>18822125521</td>
		  <td>陕西西安</td>
		</tr>
	</table>
	
	<h4>垂直表头:</h4>
	<table border="1">
		<tr>
		  <th>姓名：</th>
		  <td>九灵</td>
		</tr>
		<tr>
		  <th>电话:</th>
		  <td>18822125521</td>
		</tr>
		<tr>
		  <th>地址：</th>
		  <td>陕西西安</td>
		</tr>
	</table>
	<!--3、表格标题-->
	<table border="1">
	<caption>表格标题</caption>
	  <tr>
	    <th>月份</th>
	    <th>工资</th>
	  </tr>
	  <tr>
	    <td>1月</td>
	    <td>$100</td>
	  </tr>
	  <tr>
	    <td>2月</td>
	    <td>$50</td>
	  </tr>
	</table>
	<!--4、跨行跨列
	colspan：跨列
	rowspan：跨行-->
	<h4>单元格跨两列:</h4>
	<table border="1">
		<tr>
		  <th>姓名：</th>
		  <th colspan="2">电话：</th>
		</tr>
		<tr>
		  <td>九灵</td>
		  <td>18822128898</td>
		  <td>18722128898</td>
		</tr>
	</table>
	
	<h4>单元格跨两行:</h4>
	<table border="1">
		<tr>
		  <th>姓名:</th>
		  <td>九灵</td>
		</tr>
		<tr>
		  <th rowspan="2">电话:</th>
		  <td>18822128898</td>
		</tr>
		<tr>
		  <td>18722128898</td>
		</tr>
	</table>
	<!--5、单元格边距-->
	<!--无单元格边距-->
	<table border="1">
	<!--有单元格边距-->
	<table border="1" cellpadding="10">
	<!--6、单元格间距-->
	<!--无单元格间距-->
	<table border="1">
	<!--有单元格间距-->
	<!--单元格间距="0"-->
	<table border="1" cellspacing="0">
	<!--单元格间距="10"-->
	<table border="1" cellspacing="10">
</body>
</html>

9、HTML 列表

<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8"> 
		<title>HTML 列表</title> 
	</head> 
	<body>
		<!--1、无序列表-->
		<ul>
		  <li>列表1</li>
		  <li>列表2</li>
		  <li>列表3</li>
		</ul>
		<!--2、有序列表-->
		<ol>
		  <li>列表1</li>
		  <li>列表2</li>
		  <li>列表3</li>
		</ol>

		<ol start="50">
		  <li>列表50</li>
		  <li>列表51</li>
		  <li>列表52</li>
		</ol>
		<!--3、不同类型的有序列表-->
		<ol>【按数字排序】</ol>  
		<ol type="A">【按大写字母排序】</ol>  
		<ol type="a">【按小写字母排序】</ol>  
		<ol type="I">【按大写罗马数字排序】</ol>  
		<ol type="i">【按小写罗马数字排序】</ol>  
		<!--4、不同类型的无序列表-->
		<ul style="list-style-type:disc">【黑圆点列表】</ul>  
		<ul style="list-style-type:circle">【圆圈列表】</ul>
		<ul style="list-style-type:square">【正方形列表】</ul>
		<!--5、嵌套列表-->
		<ul>
		  <li>五谷杂粮</li>
		  <li>肉类
		    <ul>
		      <li>牛肉</li>
		      	  <ul>嫩牛肉</ul>
		      	  <ul>雪花牛肉</ul>
		      <li>猪肉</li>
		    </ul>
		  </li>
		  <li>蛋类</li>
		</ul>
	</body>
</html>

10、HTML Forms 和 Input

<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8"> 
		<title>HTML Forms 和 Input</title> 
	</head>
	<body>
		<!--1、文本域(Text fields)-->
		<!--注意：表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。-->
		<form action="">
			First name: <input type="text" name="firstname"><br>
			Last name: <input type="text" name="lastname">
		</form>
		<!--2、密码文本-->
		<!--注意：密码字段中的字符是隐藏的(显示为星号或圆圈)。-->
		<form action="">
			Username: <input type="text" name="user"><br>
			Password: <input type="password" name="password">
		</form>
		<!--3、复选框-->
		<form action="">
			<input type="checkbox" name="vehicle" value="Bike">自行车<br>
			<input type="checkbox" name="vehicle" value="Car">汽车
		</form>
		<!--4、单选框-->
		<form action="">
			<input type="radio" name="sex" value="male">男士<br>
			<input type="radio" name="sex" value="female">女士
		</form>
		<!--5、下拉列表 selected标签为默认预选-->
		<form action="">
			<select name="cars">
				<option value="benchi">奔驰</option>
				<option value="dazhong">大众</option>
				<option value="fute" selected>福特</option>
				<option value="baoma">宝马</option>
			</select>
		</form>
		<!--6、文本框-->
		<textarea rows="10" cols="30"></textarea>
		<!--7、按钮-->
		<form action="">
			<input type="button" value="按钮!">
		</form>
		<!--8、带标题的框-->
		<form action="">
			<fieldset>
				<legend>个人信息：</legend>
				姓名: <input type="text" size="30"><br>
				邮箱: <input type="text" size="30"><br>
				出生日期: <input type="text" size="10">
			</fieldset>
		</form>
		<!--9、上传输入框信息-->
		<form action="需要提交信息的页面">
			First name: <input type="text" name="首次修改" value="张三"><br>
			Last name: <input type="text" name="最后修改" value="李四"><br>
			<input type="submit" value="提交">
		</form>
		<!--10、上传复选框信息-->
		<form action="需要提交信息的页面" method="get">
			<input type="checkbox" name="vehicle[]" value="Bike">自行车<br>
			<input type="checkbox" name="vehicle[]" value="Car" checked="checked">汽车<br>
			<input type="submit" value="提交">
		</form>
		<!--11、上传单选框信息-->
		<form action="需要提交信息的页面" method="get">
		    <input type="radio" name="sex" value="Male"> 男士<br>
		    <input type="radio" name="sex" value="Female" checked="checked">女士<br>
		    <input type="submit" value="提交">
		</form>
		<!--12、发送邮件表单-->
		<form action="邮件上传地址" method="post" enctype="text/plain">
			昵称:<br>
			<input type="text" name="name" value="your name"><br>
			E-mail邮箱:<br>
			<input type="text" name="mail" value="your email"><br>
			评论:<br>
			<input type="text" name="comment" value="your comment" size="50"><br><br>
			<input type="submit" value="发送">
			<input type="reset" value="重置">
		</form>
	</body>
</html>

11、HTML iframe框架

<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8"> 
		<title>HTML iframe框架</title> 
	</head> 
	<body>
	    <!--1、内联框架-->
		<iframe src="//www.baidu.com"></iframe>
		<!--属性：-->
		<!--2、Iframe - 设置高度与宽度-->
		<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>
		<!--3、Iframe - 移除边框-->
		<iframe src="demo_iframe.htm" frameborder="0"></iframe>
		<!--4、使用iframe来显示目标链接页面-->
		<iframe src="空白的框架页面" name="iframe_a"></iframe>
		<p><a href="http://www.baidu.com" target="iframe_a" rel="noopener">百度</a></p>
	</body>
</html>

12、HTML 头部元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>HTML 头部元素</title>
		<!--3、提供文档元数据-->
		<meta name="description" content="百度一下">
		<meta name="keywords" content="文库,贴吧,网盘,知道">
		<meta name="author" content="baidu">
	</head>
	<body>
		<!--1、段落标签-->
		<p>文本的段落标签。</p>
		<!--2、链接标签和图片引入-->
		<img src="logo.png"><br><br>
		<a href="//www.baidu.com">baidu</a>
	</body>
</html>

13、HTML 脚本

<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8"> 
		<title>HTML 脚本</title> 
	</head>
	<body>
	</body>
</html>
<!--1、插入一个JavaScript脚本-->
<script>
	document.write("Hello World!")
</script> 
<!--2、插入一个脚本-->
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

总结：

      今天终于将HTML常用的标签整理完了，这些标签都是比较常用的！没有别的办法，只能靠自己多练！大部分的页面基本上都是以这些标签为骨架，CSS样式只是用来修饰这些骨架的，而JavaScript是用来前后端交互传递数据的各司其职！ 先一步一步来学习，循序渐进才能有所收获！
      从明天开始就进入CSS的学习了，CSS样式学习完以后就可以用CSS样式写一些花里胡哨的页面和一些效果了。比如：登陆页面和一些大部分的页面，甚至还可以用来模仿天猫商城和淘宝商城以及小米商城等等，在模仿的同时可以增加自己的熟练度！对这些标签也就更加的熟悉了！
      我的博客都是一个字一个字精心的写出来的，目的是尽量最简洁、最通俗易懂！也都是会用到的，绝对没有多余的废话，满满干货！说实话，写博客的时候虽然苦，虽然累，但是特别的值得！一位高人曾指点我说过一句话：“在什么时间段就要做什么时间段该做的事”！ 现在年轻，正是拼搏上进的时候！苦点累点又能算什么呢？今天的博客就先分享到这里咯！明天我们不见不散！
      如果本篇博客对大家有帮助，希望大家能够点赞、关注！在此先谢过各位小伙伴了！
      最后，愿我们都能在各行各业中能够取得不同的成就，不负亲人、朋友、老师、长辈和国家的期望！能够用自身的所学知识为国家贡献出自己的一份力量！一起加油！
                                                                                                                       2021年6月15日夜

jiulingcode
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Javaweb03-（页面跳转方式&JDBC交互）
m0_67777597的博客
03-24 1822
1.表单提交的两种方式以及区别？ get:数据会显示在地址栏上，数据量小，安全性低 post：相反。 2.request可以接收哪两种方式的值？ ①通过form表单 <form action="index.html" method = "post">跳转到index.html</form> ②通过超链接传值 <a href = "a.jsp?username=admin&password=123">跳转到a.jsp获取</a&...
Java Web 3
qq_55751359的博客
11-04 466
通过HTTP协议和客户端进行交互。 1、 （1）如下所示建立新的项目 （2）、进行编写如下 （3）编写web.xml （4）进行添加 （6）运行后在网站在搜索 2、同理 3、同理 ...
javaweb3
xiaoran19901012的专栏
03-11 490
day3：Java基础加强第一天 JDK5.0 新特性、反射  day24：Java基础加强第二天 注解技术、动态代理、多线程编程、Socket网络编程 JDK5 新特性 九个： 泛型技术、枚举技术、自动装箱拆箱、静态导入、增强for循环、可变参数、字符串格式化、注解技术、多线程并发库 特性一：泛型技术（基础学习在集合中使用） 应用场景一： 集合对象中，如果不使用泛型，
java_web3
wjl31802的博客
04-24 1257
文章目录学习目标day91 jqueryday02 ajax & jsonday03 redisday01 JQuery1. JQuery 基础1. 概念2. 快速入门3. jquery对象和js对象的区别和转换2. 选择器1. 基本操作学习2.1 基本选择器1. 标签选择器(元素选择器)2. id选择器3. 类选择器4. 并集选择器2.2 层级选择器1. 后代选择器2. 子选择器2.3...
JavaWeb（三）
qq_53142368的博客
12-04 509
JavaWeb（三）
java web接口开发demo
06-03
【Java Web接口开发】是Web应用程序开发中的一个重要环节，它允许不同的系统或客户端通过网络进行数据交互。在Java世界中，实现Web接口通常涉及到Servlet、JSP、Spring MVC或者RESTful API等技术。本示例"java web...
java web3j 直连以太坊节点 区块数据解析
05-26
该工程通过java web3j 直连以太坊节点（可自建或使用免费节点） 进行区块数据解析 支持数据进行mysql存储
轻松学Java Web开发
11-30
轻松学Java Web开发，很经典的一个学习课件，希望帮到大家。
java web 高级编程
07-03
本人见过最好的国外java web编程书籍，手把手教会小白搭建基于spring框架和hibernate的web应用，并且还着重介绍了websocket，spring security等技术。
tomcat和java web源码
11-06
Java Web与Tomcat是开发和部署Web应用程序的关键技术。Java Web是使用Java语言进行服务器端Web应用开发的一系列技术和框架的总称，包括Servlet、JSP（JavaServer Pages）、JavaBeans等。Tomcat则是一个开源的Java ...
java开源web项目3
07-13
java
web3j-3.3.1.zip(以太坊Java环境的web3j封装库文件jar的压缩包)
03-14
以太坊web3j的github最新版下载地址https://github.com/web3j/web3j/releases 国内很多地方无法下载，我下载了上传到csdn供大家下载。
Java Web3 - Servlet
qq_1403034144的博客
04-21 262
进入：http://localhost:8080/HelloServlet_war_exploded/重启 tomcat，进入 http://localhost:8080/html/input.html。重启 tomcat，进入 http://localhost:8080/html/input.html。重启 tomcat，进入 http://localhost:8080/inputServlet。进入：http://localhost:8080/html/input.html。
Java学习笔记：web3
zhanghaitaogege的博客
04-16 1408
https://www.bilibili.com/video/BV1qv4y1o79t?p=276&spm_id_from=pageDriver
java入门-javaWeb(三)
wanping0201的博客
05-25 236
MVC三层架构 三层架构也就是：实体层，视图层，控制层 实体层Model：包括业务service层，crud操作数据库的dao层，实体类pojo/entity,以及jdbc跟数据库进行连接。 视图层view:包括jsp,html,vue等界面，展示数据模型，供用户操作。 控制层controller：接收用户请求，响应用户请求，视图跳转（转发和重定向）。 ...
Java web3
weixin_58526600的博客
11-01 96
新建web项目file-new-Dynamic Web Project 新建servlet，右击chapter03-new-servlet 命名 next-next不勾第一个框框 -finish add and remove进入wed应用界面
配置servlet 相关接口的应用和运用:
weixin_55897821的博客
11-02 209
1.servletconfig接口和servletcontext接口来实现相互寻找来实现任务: 创建一个新的包用来存放新的servlet编译程序: 在这些文件中,我们运用到servletconfig接口,来实现互通,创建xml文件: 1.2实现第一个servlet程序: 通过浏览器访问servlet2这个servlet文件 1.3servlet的生命周期: servlet的生命周期跟人一样,会结束,从创建到使用直到最后被销毁,整个过程就...
JavaWeb（3）——HTML、CSS、JS 快速入门
白白白鲤鱼的博客
07-13 2612
JavaWeb（3）——HTML、CSS、JS 快速入门
JavaWeb3-Javascript初识
qq_45913017的博客
03-04 271
一、基本概念 JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。 二、快速入门 1、在HTML语言中引入script标签 <script type="text/javascript"> </script> 2、在该标签里面编写应用 <!DOC
java web 3d试衣间
最新发布
10-27
Java Web 3D试衣间的实现原理是通过建模、渲染和交互三个主要步骤来完成。首先，通过CAD软件或3D建模软件对服装进行建模，包括衣领、袖口、裙摆等细节。其次，通过渲染技术将建模后的服装以真实的材质、颜色呈现给...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值