JavaWeb初学——HTML文件（一）

最新推荐文章于 2024-05-19 14:33:54 发布
最新推荐文章于 2024-05-19 14:33:54 发布
阅读量1.4k 收藏 5
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45832286/article/details/107340293
版权

一.创建HTML文件：

1.创建一个Web工程（静态的web工程）
选择新建一个project。
在这里插入图片描述
选择static Web
在这里插入图片描述
新建一个项目，起名为hello。
在这里插入图片描述
代码如上
在这里插入图片描述
选择一个浏览器运行
在这里插入图片描述
运行结果如上

注意：Java文件需要先编译，再由Java虚拟机跑起来。但HTML文件不需要编译，直接由浏览器进行解析执行

二.HTML文件的书写规范：

< html >：表示整个html页面的开始
		< head >头信息
			< title >标题</ title >		标题
		< /head >
		< body >		body是页面的主体内容
		页面主体内容
		< /body >
< /html >：				表示整个html页面的结束
注释：< !- -     - - >

三.HTML标签：

1.标签的格式：

<  标签名 >封装的数据<  /标签名 >

2.标签名大小写不敏感
3.标签拥有自己的属性：
a.分为基本属性：bgcolor=“red” 可以修改简单的样式效果
b.事件属性：onclick=“alert('你好！');”可以直接设置事件响应后的代码
4.标签又分为，单标签和双标签。
a.单标签格式： < 标签名 / >br换行 hr水平线
b.双标签格式：< 标签名 > … 封装的数据 … < /标签名 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0-标签语法.html</title>
</head>
<body>

	<!-- ①标签不能交叉嵌套 -->
	正确：<div><span>早安，尚硅谷</span></div>
	错误：<div><span>早安，尚硅谷</div></span>
	<hr />

	<!-- ②标签必须正确关闭（闭合） -->
	<!-- i.有文本内容的标签： -->
	正确：<div>早安，尚硅谷</div>
	错误：<div>早安，尚硅谷
	<hr />
	
	<!-- ii.没有文本内容的标签： -->
	正确：<br />
	错误：<br >
	<hr />
	
	<!-- ③属性必须有值，属性值必须加引号 -->
	正确：<font color="blue">早安，尚硅谷</font>
	错误：<font color=blue>早安，尚硅谷</font>
	错误：<font color>早安，尚硅谷</font>
	<hr />
		
	<!-- ④注释不能嵌套 -->
	正确：<!-- 注释内容 --> <br/>
	错误：<!-- 注释内容<!-- 注释内容 --> -->
	<hr />
</body>
</html>

四.常用标签介绍：

1.font标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1.font标签.html</title>
</head>
<body>
	
	<!-- 字体标签
	 需求 1：在网页上显示 我是字体标签 ，并修改字体为 宋体，颜色为红色。
	 font
	 	 标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)
	 color 
	 	 属性修改颜色 face 属性修改字体 size 属性修改文本大小
	 -->
	<font color="red" face="宋体" size="7">我是字体标签</font>

	
</body>
</html>

运行结果：在这里插入图片描述

2.特殊字符：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1.font标签.html</title>
</head>
<body>
	
	<!-- 字体标签
	 需求 1：在网页上显示 我是字体标签 ，并修改字体为 宋体，颜色为红色。
	 font 标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)
	 color 属性修改颜色 face 属性修改字体 size 属性修改文本大小
	 -->
	<font color="red" face="宋体" size="7">我是字体标签</font>

	
</body>
</html>

运行结果：
在这里插入图片描述

3.标题标签：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3.标题标签.html</title>
</head>
<body>
	
	<!-- 标题标签
	需求 1：演示标题 1 到 标题 6 的
	h1 - h6 都是标题标签
	h1 最大
	h6 最小
	align 属性是对齐属性
	left 左对齐(默认)
	center 剧中
	right 右对齐
	-->
	<h1 align="left">标题 1</h1>
	<h2 align="center">标题 2</h2>
	<h3>标题 3</h3>
	<h4>标题 4</h4>
	<h5>标题 5</h5>
	<h6>标题 6</h6>



	
</body>
</html>

运行结果：
在这里插入图片描述

4.超链接：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4.超链接.html</title>
</head>
<body>

	<!-- 超链接
	a 标签是 超链接
	href 属性设置连接的地址
	target 属性设置哪个目标进行跳转
	_self 表示当前页面(默认值)
	_blank 表示打开新页面来进行跳转
	-->
	<a href="http://localhost:8080">百度</a><br/>
	<a href="http://localhost:8080" target="_self">百度_self</a><br/>
	<a href="http://localhost:8080" target="_blank">百度_blank</a><br/>
</body>
</html>

运行结果：
在这里插入图片描述

5.列表标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--需求 1：使用无序，列表方式，把东北 F4，赵四，刘能，小沈阳，宋小宝，展示出来
    ul 是无序列表
    type 属性可以修改列表项前面的符号
    li 是列表项 -->
    <ul type="none">
        <li>赵四</li>
        <li>刘能</li>
        <li>小沈阳</li>
        <li>宋小宝</li>
    </ul>
</body>
</html>

运行结果：
在这里插入图片描述

6.img标签：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5.img标签.html</title>
</head>
<body>
    <!-- 使用 img 标签显示一张美女的照片。并修改宽高，和边框属性
     img        标签是图片标签,用来显示图片
     src        属性可以设置图片的路径
     width      属性设置图片的宽度
     height     属性设置图片的高度
     border     属性设置图片边框大小
     alt        属性设置当指定路径找不到图片时,用来代替显示的文本内容
     在 JavaSE 中路径也分为相对路径和绝对路径.
        相对路径:
            从工程名开始算
        绝对路径:
            盘符:/目录/文件名
     在 web 中路径分为相对路径和绝对路径两种
         相对路径:
            .    表示当前文件所在的目录
            ..   表示当前文件所在的上一级目录
            文件名    表示当前文件所在目录的文件,相当于 ./文件名       ./ 可以省略
          绝对路径:
            正确格式是:        http://ip:port/工程名/资源路径
            错误格式是:        盘符:/目录/文件名
    -->
    <img src="../imgs/1.jpg"width="200" height="260" border="1" alt="美女找不到"/>
    <img src="../imgs/2.jpg" width="200" height="260" />
    <img src="../imgs/3.jpg" width="200" height="260" />
    <img src="../imgs/4.jpg" width="200" height="260" />
    <img src="../imgs/5.jpg" width="200" height="260" />
    <img src="../imgs/6.jpg" width="200" height="260" />
</body>
</html>

运行结果：在这里插入图片描述

7.表格标签：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>表格标签</title>
	</head>
	<body>

	<!--
	需求 1：做一个 带表头的 ，三行，三列的表格，并显示边框 需求
	2：修改表格的宽度，高度，表格的对齐方式，单元格间距。
	table 标签是表格标签
	border 设置表格标签
	width 设置表格宽度
	height 设置表格高度
	align 设置表格相对于页面的对齐方式
	cellspacing 设置单元格间距

	tr 是行标签
	th 是表头标签
	td 是单元格标签
	align 设置单元格文本对齐方式
	b 是加粗标签
		-->
	<table  align="center" border="1" width="300" height="300" cellspacing="5">
		<tr>
			<th>1.1</th>
			<th>1.2</th>
			<th>1.3</th> </tr>
		<tr>
			<td>2.1</td>
			<td>2.2</td>
			<td>2.3</td>
		</tr> <tr><td>3.1</td>
			<td>3.2</td>
			<td>3.3</td>
			</tr> </table>

	</body>
</html>

运行结果：在这里插入图片描述

8.表格跨行跨列：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>7.表格的跨行跨列</title>
	</head>
	<body>
	<!--
	需求 1： 新建一个五行，五列的表格，
	第一行，第一列的单元格要跨两列，
	第二行第一列的单元格跨两行，
	第四行第四列的单元格跨两行两列。
	colspan 属性设置跨列
	rowspan 属性设置跨行
	-->
	<table width="500" height="500" cellspacing="0" border="1">
		<tr>
			<td colspan="2">1.1</td>
			<td>1.3</td>
			<td>1.4</td>
			<td>1.5</td>
		</tr>
		<tr>
			<td rowspan="2">2.1</td>
			<td>2.2</td>
			<td>2.3</td>
			<td>2.4</td>
			<td>2.5</td>
		</tr>
		<tr>
			<td>3.2</td>
			<td>3.3</td>
			<td>3.4</td>
			<td>3.5</td>
		</tr>
		<tr>
			<td>4.1</td>
			<td>4.2</td>
			<td>4.3</td>
			<td colspan="2" rowspan="2">4.4</td>
		</tr>
		<tr>
			<td>5.1</td>
			<td>5.2</td>
			<td>5.3</td>
		</tr>
	</table>

		
	</body>
</html>

9.iframe标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>8.iframe标签.html</title>
</head>
<body>
    我是一个单独的完整的页面<br/><br/>
    <!--
        ifarme 标签可以在页面上开辟一个小区域显示一个单独的页面
        ifarme 和 a 标签组合使用的步骤:
            1 在 iframe 标签中使用 name 属性定义一个名称
            2 在 a 标签的 target 属性上设置 iframe 的 name 的属性值
     -->
    <iframe src="3.标题标签.html" width="500" height="400" name="abc"></iframe>
    <br/>
    <ul><li><a href="0-标签语法.html" target="abc">0-标签语法.html</a></li>
        <li><a href="5.img标签.html" target="abc">5.img标签.html</a></li>
        <li><a href="2.特殊字符.html" target="abc">2.特殊字符.html</a></li>
    </ul>
	
</body>
</html>

运行结果：
在这里插入图片描述

Yrshyx
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web前端开发基础之HTML文件
herbinh的博客
05-02 343
1.3HTML文件 1.3.1HTML 文件的基本结构 HTML文件后缀名为html或htm。 例example1.1.html <!doctype html> <!--文档声明：告诉浏览器以下文件用html5版本解析--> <html> <!--告诉浏览器HTML文件开始--> <head>
html学习手册
03-05
本手册由 lemon 整理编辑 OICQ:27550369 E_mail:lemon_zj@163.com lemon_zj4618@163.com 本手册的内容全部来自Microsoft MSDN Library，若有疑问可直接访问Microsoft MSDN Library。 由于链接众多，错误之处在所难免，希望各位用户指正。由此带来的一切后果，本人概不负责。 其他参考文献(前台): script.chm Microsoft Windows 脚本技术 1.37MB Jscript.chm Microsoft JScript 语言参考 602KB vbscript.chm Microsoft VBScript 语言参考 530KB lsh_htccom1.chm Microsoft Windows 脚本部件 140KB wsh.chm Microsoft Windows 脚本宿主 136KB MSXML.chm Microsoft XML 4.0 Technology Preview 2.37MB css.chm css 2.0 中文手册(苏昱) 258KB cssfilter.chm 样式表滤镜中文手册(苏昱) 386KB behavior.chm 默认行为中文手册(苏昱) 149KB methods.chm 文档对象模型中文手册(苏昱) 187KB 以上资料可在http://clgigi.8u8.com上下载。
Java快速生成html接口文档和CHM文件详细过程
weixin_46801673的博客
08-29 1599
java快速生成接口文档和CHM文件详细过程
java web项目打包部署
javasunjava的专栏
12-01 857
一. 打包阶段：      1.在MyEclipse中找到你要打包的项目，点击右键-Export.      2.在弹出框找到J2EE-WAR file后 点击next.      3.选择war存放的路径，点击finish ,打包就ok了。 二 部署阶段：      1.把打好的war包放在服务器（物理机）的服务器容器（比如tomcat）的webapps下。      2.将服务器容
JavaWeb（1） HTML入门
最新发布
Theodore_1022的博客
05-19 1284
本篇对JavaWeb中所需要的HTML技术进行了总结与概括，部分内容源于网络，如有侵权，请联系作者删除，谢谢。
web.xml
dizhu3909的博客
03-13 144
在“Web页”节点下，展开WEB-INF节点，然后双击web.xml文件进行查看。 web.xml文件包含Facelets应用程序所需的几个元素。使用NetBeans IDE创建应用程序时，将自动创建以下所有内容。 指定项目阶段的上下文参数： 上下文参数提供Web应用程序所需的配置信息。应用程序可以定义自己的上下文参数。此外，JavaServer Faces技术和Java...
Web基础—HTML文件
Mindy的专栏
10-27 563
超文本标记语言或超文本链接标示语言（标准通用标记语言下的一个应用）HTML（HyperText Mark-up Language）是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。 它是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文件是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、
WEB之HTML
weixin_47314449的博客
03-15 812
一、HTML简介二、HTML文档1、创建html文件2、编写html文件内容3、html文档结构 一、HTML简介        HTML是超文本标记语言（Hyper Text Markup Language)。其中，超文本是指连接单个网站或多个网站间的网页的链接。HTML不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML、CSS、JavaScript是构建web程序的三剑客。 二、HTML文档 1、创建html文件 我使用.
JavaWeb小白——项目实战——油画商城源码.zip
03-12
这个"JavaWeb小白——项目实战——油画商城源码"是专为初学者设计的，旨在帮助他们从零开始理解并掌握JavaWeb开发的核心概念。源代码完全开放，用于教学目的，可以作为学习者自我提升和实践的宝贵资源。 首先，我们...
javaweb课程设计——服装商城
07-14
【JavaWeb课程设计——服装商城】是一个基于SSH（Spring、Struts、Hibernate）框架和MySQL数据库的电商项目实例。这个项目旨在帮助学习者理解和实践如何构建一个完整的网上购物平台。SSH框架是JavaWeb开发中常用的...
javaWeb训练专用——软件项目信息管理
04-14
JavaWeb训练专用——软件项目信息管理系统是一个针对初学者和进阶者设计的实践项目，旨在提升开发者在JavaWeb领域的技能。这个项目的难度等级为3星，比基础的2星项目更具挑战性，涵盖了更多核心技术和实际应用。 在...
java实现读取html网页文件
08-27
可以读取任何html网页的内容,适用于读取网页内容保存到数据库字段中
javaweb项目——jsp社交系统
09-10
【标题】"javaweb项目——jsp社交系统"是一个基于JavaWeb技术开发的社交网络平台。这个项目展示了如何使用JavaServer Pages（JSP）技术来构建一个完整的社交系统，为用户提供交互式的网络服务。JSP是Java平台上的...
javaweb大作业——简单的学生成绩管理系统
10-21
这是一个基于JavaWeb技术的学生成绩管理系统的项目，适合初学者或者作为大作业的实践案例。JavaWeb是一种用于构建动态web应用程序的技术，它结合了Java语言的强大功能和网页开发的便利性。这个项目的主要目标是实现...
Web前端开发之HTML篇
qq_18814985的博客
12-16 1773
前端开发是用来设计给用户看的网页的部分，而Web前端开发则是通过创建Web页面来呈现给用户的过程，其包含了html（结构），css（样式），JavaScript（行为）三大部分。在本篇文章中，我主要对html进行一个讲解。 目录 基础概念 ...
javaweb学习基础(认识html)
qq_41968946的博客
06-21 193
1.0认识htmlhtml：超文本标签    html：    作用：展示    超文本：超越看一搬文本，描述文本的颜色，图片 字体    标签：标记    html的书写规则：        文件的后缀名： .html或者。htm        标签必须用&lt;&gt;引起来     已经定义好的标签        属性            格式：key="value"           ...
JavaWeb的学习 -- 第一阶段 html
m0_63224330的博客
03-26 1237
基础定义：（了解） 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。描述页面，包含HTML标签及文本内容。 您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 第一个实例（上手多敲） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoo
java web之html详解
jinqizhe的博客
08-05 235
java web html部分 -<!DOCTYPE html>:声明html版本 -<head>:放置网页的头信息 -<body>:放置网页的内容信息,这些内容都显示在浏览器页面中 如: <!DOCTYPE html> <html> <head> <!-- 告知网...
配置-jsp、javabean连接html文件的要点
Kulyma的博客
03-22 690
为了一个javabean和jsp耽误时间 防止下次再忘记，记录一下。 文件结构： l ogin.html和login2.html都在WebContent下。myBean.java在包mypack里面。 1、这是html文件，action里面是jsp的路径。重点关注 input name="username"。username是参数名，用户输入的是参数值。 <html> <head> <title>helloapp</title> &l..
JavaWeb——HTTP
10-07
JavaWeb中的HTTP指的是在JavaWeb开发中使用的超文本传输协议(HTTP)。HTTP是一种简单的请求-响应协议，通常在TCP/IP协议上运行。它通过客户端和服务器之间的交互来传输文本和超文本数据，如HTML、图片、音乐、视频等。JavaWeb开发中使用HTTP协议来实现客户端和服务器之间的通信，通过HTTP请求向服务器发送请求，服务器接收请求后处理并返回相应的HTTP响应。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值