JavaWeb——HTML标签学习

最新推荐文章于 2023-09-13 18:17:59 发布
最新推荐文章于 2023-09-13 18:17:59 发布
阅读量343 收藏 1
点赞数
分类专栏： JavaWeb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xubuhui/article/details/90737487
版权

HTML介绍

  • 1.什么是HTML？
    超文本标记语言：
    超文本：比普通文本功能更加强大
    标记语言：使用一组标签对内容进行描述的一门语言，它不是编程语言！

  • 2.HTML 怎么使用？
    语法和规范：

  • 所有的 html 文件后缀名都是以.html 或者.htm 结尾的，建议使用.html 结尾。

  • 整个 html 文件分别由头部分和体部分组成

  • Html 标签都是由开始标签和结束标签组成(
    )

  • Html 标签忽略大小写的，建议大家使用小写。

  • 3.HTML 相关标签的学习
    - 3.1 标题标签

    标题标签
    使用<hn></hn>,n 从 1 到 6 逐渐变小。超过 6 的按 6 的进行显示
    特点：加粗加黑显示**，单独占用一行。与其它行有一定的行间距。
    注释：

快捷键：ctrl+/
- 3.2 水平线标签

 <hr />
  • 4.3 段落标签

段落标签：<p></p>

  • 3.4 字体标签
    字体标签使用<font></font>
    必须结合其属性才能具备一定的样式效果。
    设置颜色：color(可以是英文单词也可以是十六进制)
    设置字体：face(那些字体必须是你本机已经有的)
    设置大小的：size (从 1 到 7 逐渐变大，超过 7 的部分按照 7 来显示)

案例一 网站信息显示界面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网页信息显示界面</title><br />
	</head>
	<body>
		
		<h1>公司简介</h1>
			<hr />
		<p>
			<font color="red" face="微软雅黑" size="5">“中关村黑马程序员训练营”</font>
			<font>是由<b>传智播客</b>联合中关村软件园、<i>CSDN</i>，并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。 目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。
			</font>
		</p>
		<p>
			黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。
		</p>
		<p>
			中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新，不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
		</p>
		<p>一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。</p>
	</body>
</html>

显示效果如下：
在这里插入图片描述

二、网站图片信息显示页面

1.图片标签
图片标签：<img />
图片的位置属性：src
SRC:
绝对路径：带有盘符的
相对路径：

  1. 如果是同级，直接写文件名称或者./文件名称
  2. 如果是上一级：…/文件名称(如果是多层，那么多写几个…/)
  3. 如果是下一级：写目录名称/文件名称
    width:设置图片的宽度
    height：设置图片的高度
    alt：当图片无法正常显示的时候给出的提示信息。
  • 案例二：网站图片信息显示页面
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片标签</title>
	</head>
	<body>
		<img src="./logo2.png" width="150px" height="50px" alt="无法正常显示图片"/><br />
		<img src="header.png" width="265px" height="60px" alt="图片加载失败" />
		
	</body>
</html>

显示效果如下：
在这里插入图片描述

三、网站友情链接页面显示

列表标签：

  • 有序列表：<ol></ol>
    属性：type 有 5 个取值 start 其实位置，reverse：倒序
  • 无序列表: <ul></ul>
    属性：type 有 3 个取值
  • 超链接标签
<a href=”#” target=”_self / _blank”>点我</a>
  • 案例三：网站友情链接页面显示
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>友情链接显示页面</title>
	</head>
	<body>
		<ul></ul>
			<li><a href="../案例一：网站信息显示页面/排版相关标签学习/最后--网站信息显示界面.html" target="_blank">黑马</a></li>
			<li><a href="https://www.vmall.com"target="_blank">华为</a></li>
			<li><a href="https://www.jd.com" target="_blank">京东</a></li>
		</ul>
	</body>
</html>

显示效果如下：

在这里插入图片描述

四、网站首页显示页面

1.表格标签
表格标签使用的是

<table></table>
<table>
<tr>
<td></td>
</tr>
</table>

Table 属性：
边框：border
宽度：width
高度：height
背景颜色：bgcolor
边框与边框的：cellspacing
边框与内容的：cellpadding
居中显示：align
表格的跨行、跨列操作：是针对单元格的！

  • 案例四：网站首页显示页面
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>黑马商城</title>
	</head>
	<body>
	
		<!--创建一个八行一列的表格-->
		<table border="1px" width="1300px" align="center" cellspacing="0px" cellpadding="0px">
			<tr>
				<td>
					<!--嵌入一行三列表格-->
					<table border="1px" width="100%"  >
						<tr height="50px">
							<td width="33.3%">
								<img src="../../案例二：网站图片信息显示页面/图片标签/logo2.png" />
							</td>
							<td width="33.3%">
								<img src="../../案例二：网站图片信息显示页面/图片标签/header.png" />
							</td>
							<td width="33.3%">
								<a href="#">登录</a>
								<a href="#">注册</a>
								<a href="#">购物车</a>
									
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<!--导航栏-->
			<tr height="50px">
				<td bgcolor="black">
					
					<a href="#"><font size="5" color="white">首页</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#"><font size="5" color="white">手机数码
						</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#"><font size="5" color="white">电脑办公
						</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#"><font size="5" color="white">化妆品
						</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#"><font size="5" color="white">运动户外
						</font></a>
				</td>
			</tr>
			<!--嵌入大图片-->
			<tr>
				<td>
					<img src="1.jpg" />
				</td>
			</tr>
			<tr>
				<td>
					<!--嵌入一个三行七列的表格-->
					<table border="1px" width="100%" height="100px" cellspacing="0px"  >
						<tr>
							<td colspan="7" ><font>热门商品</font>&nbsp;<img src="课堂演示图片汇总/title2.jpg"></img></td>
						
						</tr>
						<tr>
							<td rowspan="2"><a href="#"><img src="课堂演示图片汇总/big01.jpg" width="100%"></img></a></td>
							<td align="center"><a href="#"><img src="课堂演示图片汇总/small01.jpg" ></img></a><br /><font color="black">
								<a href="#" >冬瓜</a>
							</font><br /><br /><font color="red">$199</font></td>
							<td align="center"><a href="#"><img src="课堂演示图片汇总/small02.jpg"></img></a><br /><font color="black">
								<a href="#" >冬瓜</a>
							</font><br /><br /><font color="red">$199</font></td>
							<td colspan="2" align="center"><a href="#"><img src="课堂演示图片汇总/small03.jpg"></img></a><br /><font color="black">
								<a href="#" >冬瓜</a>
							</font><br /><br /><font color="red"> $198 </font></td>
							<td align="center"><a href="#"><img src="课堂演示图片汇总/small04.jpg"></img></a><br /><font color="black">
								<a href="#" >冬瓜</a>
							</font><br /><br /><font color="red">$199</font></td>
							<td align="center"><a href="#"><img src="课堂演示图片汇总/small08.jpg"></img></a><br /><font color="black">
								<a href="#" >冬瓜</a>
							</font><br /><br /><font color="red">$199</font></td>
						</tr>
						<tr>
							<td align="center"><a href="#"><img src="课堂演示图片汇总/small08.jpg"></img></a><br /><font color="black">
								<a href="#" >冬瓜</a>
							</font><br /><br /><font color="red">$199</font></td>
							<td align="center"><a href="#"><img src="课堂演示图片汇总/small04.jpg"></img></a><br /><font color="black">
								<a href="#" >冬瓜</a>
							</font><br /><br /><font color="red">$199</font></td>
							<td align="center"><a href="#"><img src="课堂演示图片汇总/small02.jpg"></img></a><br /><font color="black">
								<a href="#" >冬瓜</a>
							</font><br /><br /><font color="red">$199</font></td>
							<td align="center"><a href="#"><img src="课堂演示图片汇总/small04.jpg"></img></a><br /><font color="black">
								<a href="#" >冬瓜</a>
							</font><br /><br /><font color="red">$199</font></td>
							<td align="center"><a href="#"><img src="课堂演示图片汇总/small01.jpg"></img></a><br /><font color="black">
								<a href="#" >冬瓜</a>
							</font><br /><br /><font color="red">$199</font></td>
							<td align="center"><a href="#"><img src="课堂演示图片汇总/small02.jpg"></img></a><br /><font color="black">
								<a href="#" >冬瓜</a>
							</font><br /><br /><font color="red">$199 </font></td>
						</tr>
					</table>
		<!--第五行-->
				</td>
			</tr>
			<tr>
				<td><img src="课堂演示图片汇总/ad.jpg" width="100%" height="100%"></img></td>
			</tr>
			<!--第六行-->
			<tr>
				<td><img src="课堂演示图片汇总/footer.jpg" width="100% " height="100%"></img></td>
			</tr>
			<!--第七行-->
			<tr>
				<td align="center"><font><a href="#">
					关于我们&nbsp;
				</a></font>
				<font><a href="#">联系我们&nbsp;</a></font>
				<font><a href="#">招贤纳士&nbsp;</a></font>
				<font><a href="#">法律声明&nbsp;</a></font>
				<font><a href="#">友情链接&nbsp;</a></font>
				<font><a href="#">支付方式&nbsp;</a></font>
				<font><a href="#">配送方式 &nbsp;</a></font>
				<font><a href="#">服务声明&nbsp;</a></font>
				<font><a href="#">广告声明</a></font>
				</td>
			</tr>
			<!--第八行-->
			<tr>
				<td align="center"><font>Copyright © 2005-2016 传智商城 版权所有</font></td>
			</tr>
			
		</table>
	</body>
</html>

显示效果如下：
在这里插入图片描述

五、网站后台管理系统页面

1.框架集结构标签

<frameset >
</frameset>

属性：
cols:进行垂直切割划分，可以切割为任一块。(参数的值相加=100%，其中有一块可以
使用表示)
rows: 进行水平切割划分，可以切割为任一块。(参数的值相加=100%，其中有一块可
以使用表示)
一 旦划 分区 域之后 ，我 们需 要对 具体的 区域 进行 内容 的填充 ，此 时需 要使 用

<frame></frame>标签

属性：
批注 [ThinkPad2]: 此标签作用：将页面的进行区域的
划分
src:指定该区域显示的文件(路径)
name:它通常会结合超链接的 target 属性使用，来定义最终的显示位置。

案例五：网站后台管理系统页面
top.html:

top.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body><h1>
		欢迎您进入后台系统
		</h1>
	</body>
</html>

left.html:

left.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<a href="right.html" target="right"><h3>会员管理</h3></a><br />
		<a href="#"><h3>商品管理</h3></a><br />
		<a href="#"><h3>品牌管理</h3></a><br />
		<a href="#"><h3>分类管理</h3></a>
	</body>
</html>

right.html

right.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		所有用户信息
	</body>
</html>

网站后台系统显示页面.html:

网站后台系统显示页面.html:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网站后台系统显示页面</title>
	</head>
	<frameset rows="20%,*">
		<frame src="top.html" />
		<frameset cols="20%,*">
			<frame src="left.html" />
			<frame name="right" />
			
		</frameset>
	</frameset>
</html>

显示效果如下：
在这里插入图片描述

xubuhui
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaWeb——css基础知识与它的三种使用方法和三种选择器
01-08
什么是css css，全称Cascading Style Sheets，中文名：层叠样式表。...选择器：浏览器根据“选择器”决定受CSS样式影响的HTML元素（标签,id或者类） 属性（ property）是你要改变的样式名，并且每个属性
01-javaWeb-html.7z
07-02
【HTML的概述】 ...为什么学习HTML HTML是设计页面基础 在哪些地方可以使用HTML 设计页面的时候都可以使用HTML ——————————— 原文链接：https://blog.csdn.net/qq_38247809/article/details/106976834
Java学习笔记：HTML基础
薛定谔的猫
10-02 257
1、服务器并不是把网页的图像传递给浏览器，而是给到一个HTML的文本文档，因为这样不仅节省流量，而且浏览器可以根据分辨率，设备等进行不同的图形渲染。2、用途：获取没有提供接口的网站中的数据。2、超链接是a，内部文本是超链接显示内容，href属性为超链接的网址，可以是相对路径，也可以是绝对路径，也可以是全网址。4、id是唯一的编号；4、网站内容一直在变，可能你看的时候的网站内容和讲课时候不一样了，学思想，而不是死记硬背。3、图片是img，src是图片的路径，可以是相对路径，也可以是绝对路径，也可以是全网址。
JavaWeb《HTML基础标签》
weixin_44981126的博客
05-02 1171
本笔记学习于Acwing平台本笔记学习于Acwing平台MDN官方文档。
JavaWeb之HTML标签
m0_47209867的博客
01-01 278
JavaWeb之HTML标签那些事 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录一、文件标签二、文本标签三、图片标签四、列表标签五、链接标签六、表格标签八、表单标签总结 一、文件标签 <!-- 1.文件标签：构成html最基本的标签(保证了html的整体框架) *<html>:根标签，格式：<html></html> *<head>:头标签，指定文本一些属性，也可用于引入外部资源文件(CSS中详细介绍
【JavaWeb】HTML常用标签
p_fly的博客
03-03 694
标签大部分成对出现，代表开始和结束 如 标签中的内容
Educoder/头歌JAVA——HTML：基本标签
舟舟的博客
12-08 3186
HTML是超文本标记语言（HyperText Markup Language），是使用标签来描述网页的一种语言。 本实训从创建第一个标签开始学起，一步一步直到能独立完成一个网页。
JavaWeb——HTML基础标签table标签与form标签的学习与理解
01-08
使用表格标签制作规整的表格 table标签是表格标签， border属性设置表格的边框厚度， width属性设置表格的宽度， align设置表格的对齐方式， cellspacing设置单元格的间距 tr是行标签， td是单元格标签， th是字体...
Javaweb前端——HTML常用标签.pdf
04-09
Javaweb前端——HTML常用标签.pdf
基于JavaWeb的英雄联盟管理系统源码+项目说明.zip
08-22
| 前端 | HTML+CSS+JavaScript | —— | | | | | | 数据库工具api | 阿帕奇 commons-dbutils | 1.3 | | 后端开发框架 | JavaWeb | | | JDK版本 | Java | 1.8 | | 数据持久层 | C3P0连接池 | 0.9.12 | | 数据库...
java操作修改html标签
08-13
NULL 博文链接：https://guoyulong005.iteye.com/blog/2305737
JavaWeb 标准标签
weixin_62270300的博客
04-13 708
web.xml的欢迎界面 新建一个项目 点两下Next 就会出现如下选项 将Generate web.xml deployment descriptor选项勾上 完成之后就会在WEB-INF目录底下就会出现一个web.xml文件 点开之后在页面左下方选择Source 下方界面是修改后的（注意：改了web.xml的代码都必须重新发布重启服务） 常用的jsp标签（自带） <jsp:include page="页面"> 包含 <jsp:param name="n...
【Java Web】HTML 标签 总结
m0_73381672的博客
09-13 1477
HTML 不是一种编程语言，而是一种标记语言。 Html主要用来描述网页中所需要的组件，例如：文本框、表格、图片、视频等等，也对网页进行排版。 HTML的源文件，称为“网页”，通常以.html或者.htm为结尾。 可以使用任意文本编辑器编辑，需要使用浏览器执行。
前端——HTML中的常用标签详解
xh1605004242的博客
05-06 5572
HTML中的常用标签
JavaWeb：HTML基础标签
weixin_50905233的博客
02-10 139
HTML基础标签
【JAVAWEB】HTML的常见标签
m0_57248752的博客
05-28 1457
1.HTML结构 1.1认识HTML标签 1.2HTML文件基本结构 1.3标签层次结构 1.4快速生成代码框架 2.HTML常见标签 注释标签 标题标签：h1-h6 段落标签:p 换行标签：br 格式化标签 图片标签 超链接标签：a 表格标签
JavaWeb——HTML表单标签详解(input、label、select、textarea)
数字世界 万物互联
05-18 6745
目录 1、表单标签概述 2、表单项标签 3、注册页面案例实现 1、表单标签概述 表单，是用于采集用户输入数据的，用于和服务器进行交互。比如登录系统，使用的标签是form，可以定义一个范围，范围代表采集用户数据的范围，表单中的数据要想被提交，必须指定name属性。属性： action：指定提交数据的URL method：指定提交方式，一共7种，2个比较常用get、post，区别如下： 序号 get post 1 请求参数会在地址栏中显示，封装在请求行中 请
HTML基础
SICAUliuy的博客
09-12 265
文章目录HTML概念：是最基础的网页开发语言快速入门基本标签学习： HTML 概念：是最基础的网页开发语言 Hyper Text Markup Language 超文本标记语言 1. 超文本: 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本. 2. 标记语言: 由标签构成的语言。<标签名称> 如 html，xml 标记语言不是编程语言 快速入门 基本 ht...
【JavaWeb—HTML标签】
DJL_new_life的博客
07-29 864
HTML
JavaWeb——HTTP
最新发布
10-07
它通过客户端和服务器之间的交互来传输文本和超文本数据，如HTML、图片、音乐、视频等。JavaWeb开发中使用HTTP协议来实现客户端和服务器之间的通信，通过HTTP请求向服务器发送请求，服务器接收请求后处理并返回相应...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值