JavaWeb初级学习之 HTML

最新推荐文章于 2023-04-03 22:05:57 发布

OnlyLove_longshao

最新推荐文章于 2023-04-03 22:05:57 发布

阅读量3.2k

点赞数 4

分类专栏：【JavaWeb】 JavaWeb从入门到精通文章标签： html java web 标签思维导图

本文链接：https://blog.csdn.net/onlylove_longshao/article/details/52877033

版权

【JavaWeb】同时被 2 个专栏收录

11 篇文章 4 订阅

订阅专栏

JavaWeb从入门到精通

10 篇文章 14 订阅

订阅专栏

1、思维导图

首先为大家提供本文所要阐述的知识点的思维导图，帮助大家更好的了解本文要阐述的知识。

2、HTML简介

Hyper Text Markup Language（超文本标记语言）简写：HTML标记语言，我们也叫标签语言,Html通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）

2.1、创建html文件

1.用记事本方式创建 html 文件。

1).先打开window记事本程序

2).在记事本中。书写你要显示的内容

3).保存记事本文件为.html后缀名，然后用浏览器打开访问

2.用Eclipse 创建html 文件。

1）我们要创建一个静态的web工程

在web工程中有一个目录叫webContent 这个目录下放的是web的静态资源文件。html，CSS。图片等等

2）在webContent目录下创建html文件。

<!DOCTYPE html>
<html> <!-- 表示整个html文件的开始 -->
	<head> <!-- head标签是头信息标签，主要包含三部分内容。标题信息，CSS样式信息。还有JavaScript代码 -->
		<meta charset="UTF-8"> <!-- 告诉浏览器当前页面使用UTF-8编码来查看页面 -->
		<title>我很帅</title> <!-- title就是标题 -->
	</head>
	<body> <!-- body标签是整个html要显示的主体内容 -->
		hello world！
	</body>
</html> <!-- 表示整个html文件的结束 -->

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

2.2、html文件的书写规范

<html> <!--表示整个html文件的开始 -->
<head> <!-- 是整个html头部信息 主要包括三部分内容1.标题信息，2.CSS样式信息，3.JavaScript代码-->
<title>html标题</title>  <!-- 这是html标题信息 -->
</head>
<body> <!-- body标签是整个html页面要显示的主体内容  -->
……
</body>
</html><!--表示整个html文件的结束 -->

html中多行注释的快捷键 Shirt + Ctrl + / 取消多行注释 Shirt + Ctrl + \
Html 的代码注释

2.3、html标签介绍

1.标签的格式: <标签名>封装的数据</标签名>

2.标签名大小写不敏感。
3.标签拥有自己的属性。

基本属性：bgcolor="red"

事件属性： οnclick="alert('你好！');"

4.标签又分为，单标签和双标签。

单标签格式： <标签名 />

双标签格式: <标签名> ...封装的数据...</标签名>

标签的语法：

<!-- ①标签不能交叉嵌套 -->
正确：<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/>
错误：<!--    <!--  这是错误的html注释    -->     -->
<hr />

注意事项：html 代码不是很严谨。有时候标签不闭合，也不会报错。

2.4、常用标签介绍

2.4.1、font字体标签

font字体标签它可以显示文件内容
需求1：在网页上显示我是字体标签，并修改字体为宋体，颜色为红色。

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

2.4.2、特殊字符

需求1：把 <br> 换行标签变成文本转换成字符显示在页面上

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2.特殊字符.html</title>
</head>
<body>
	<!-- 特殊字符 
	需求1：把 <br> 换行标签 变成文本 转换成字符显示在页面上
		因为<>这种特殊的字符，在html中是拥有含义含义
		< 特殊字符   <
		> 特殊字符 >
		空格   特殊字符   
		在html中它会把连接的字格当成一个空格来处理。
	-->	
	我是 <br > <br/>
	我很          帅.
</body>
</html>

2.4.3、标题标签

需求1：标题1到标题6的演示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3.标题标签.html</title>
</head>
<body>
	<!-- 标题标签
		需求1：标题1到 标题6的演示
		h1表示最大的标题
		标题标签是h1 - h6
		h1 最大
		h6最小
		align 属性是对齐属性:left、center、right
	 -->
	<h1 align="left">我是标题1</h1>
	<h2 align="center">我是标题2</h2>
	<h3 align="right">我是标题3</h3>
	<h4>我是标题4</h4>
	<h5>我是标题5</h5>
	<h6>我是标题6</h6>
</body>
</html>

2.4.4、超链接（ **** 重点，必须掌握 * ）

超连接我们使用 <a>标签去定义

需求1：普通的超连接。
需求2：网页常见，**联系我们**，可以发邮件
需求3：迅雷的下载连接
需求4：javaScript的连接

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4.超链接.html</title>
</head>
<body>
	<!-- 超链接 
		需求1：普通的 超连接。
			<a href="http://www.baidu.com" target="_blank">百度 _blank</a>
		需求2：网页常见，**联系我们**，可以发邮件
			<a href="mailto:491581714@qq.com">联系我们</a>
		需求3：迅雷的下载连接
			<a href="thunder://1234123412341243.avi">蓝波.avi</a>
		需求4：javaScript的连接
			<a href="javascript:alert('坑你坑你.com');" >忽悠你</a>
	
		a标签是超连接标签
			href 属性设置超连接的连接地址
			target 属性设置哪个目标窗口去进行加载连接
				_self 默认 表示当前窗口加载连接
				_blank 表示打开一个新的窗口加载连接
	-->
	<a href="http://www.baidu.com" target="_self">百度 _self</a>
	<a href="http://www.baidu.com" target="_blank">百度 _blank</a>
	<a href="mailto:491581714@qq.com">联系我们</a>
	<a href="thunder://1234123412341243.avi">蓝波.avi</a>
	<a href="javascript:alert('坑你坑你.com');" >忽悠你</a>
	<a href="javascript:void(0)" οnclick="alert(1);">忽悠你2</a>
</body>
</html>

2.4.5、列表标签

有序列表和无序列表，有序列表即列表前按1、2、3...标注，无序列表则是有菱形或圆形标注。
无序列表 ul li
有序列表 ol li

需求1：分别有序，无序，列表方式，把东北F4显示出来，刘能、小沈阳，宋小宝、赵四

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 
	需求1：分别有序，无序，列表方式，把东北F4显示出来，刘能、小沈阳，宋小宝、赵四
		ul 是无序列表标签
			li 是列表标签中的每一项
			type属性可以修改li列表的符号 或者 序号
		ol 是有序列表标签
			li 是列表中的每一项
	 -->
	 <ul type="square">
	 	<li>刘能</li>
	 	<li>小沈阳</li>
	 	<li>宋小宝</li>
	 	<li>赵四</li>
	 </ul>
	 <br/>
	 <ol type="1">
	 	<li>刘能</li>
	 	<li>小沈阳</li>
	 	<li>宋小宝</li>
	 	<li>赵四</li>
	 </ol>
</body>
</html>

2.4.6、img标签

<img src=”” alt=”” >
src 属性设置图片的源路径
alt 属性是设置当图片找不到的时候，用来替代显示的文本内容

需求1：使用img标签显示一张美女的照片。并修改宽高，和边框属性

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5.img标签.html</title>
</head>
<body>
	<!-- 
	需求1：使用img标签显示一张美女的照片。并修改宽高，和边框属性
	相对路径 
		. 当前文件的目录
		.. 表示上一级目录
		./ 可以省略
	绝对路径
		C:\\1.jpg 这是错误的
		http://127.0.0.1:8080/abc/1.jpg  正确的绝对路径
		http://www.baidu.com/xxx/2.jpg
	
		img 标签是图像标签
			alt 属性是设置当图片找不到的时候，用来代替显示的文本内容
			src 属性是图片的源路径 
			width 属性是设置图片的宽度 
			height 属性设置 图片的高度
			border 属性设置图片的边框
	  -->
	<img width="100" height="130" border="1" alt="图片丢失了！" src="../imgs/1.jpg" />
	<img width="100" height="130" border="1" alt="图片丢失了！" src="0.jpg" />
	<img width="100" height="130" border="1" alt="图片丢失了！" src="../10.jpg" />
</body>
</html>

2.4.7、表格标签（ **** 重点）

table：表格标签
tr：表格中的行标签
td ：表格中行的列标签
需求1：做一个带表头的，三行，三列的表格，并显示边框
需求2：修改表格的宽度，高度，表格的对齐方式，单元格间距。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>6.表格标签.html</title>
</head>
<body>
	<!-- 
		需求1：做一个 带表头的 ，三行，三列的表格，并显示边框
		需求2：修改表格的宽度，高度，表格的对齐方式，单元格间距。


		center是居中


		 table 标签是 表格标签
		 	border 属性设置表格的边框
		 	cellpadding 属性设置单元格的内边距
		 	width 属性设置表格的宽度
		 	height 属性设置表格的高度
		 	cellpadding 设置单元格的内边距
		 	cellspacing 设置单元格的间距
		 
		 tr 是表格的行标签
		 td 是表格的单元格标签
		 th 是表格的表头标签 居中、加粗
		 
		 b 标签是加粗标签
	  -->
	<center>
		<table border="1" width="200" height="200" cellpadding="10" cellspacing="0">
			<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>
	</center>
</body>
</html>

2.4.8、跨行跨列表格（* 次重点 *）

rowspan 属性：设置跨行
colspan 属性：设置跨列
需求1：新建一个五行，五列的表格，第一行，第一列的单元格要跨两列，第二行第一列的单元格跨两行，第四行第四列的单元格跨两行两列。

<!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>Insert title here</title>
</head>
<body>
	<!-- 
	
		需求1：新建一个五行，五列的表格，
		第一行，第一列的单元格要跨两列，
		第二行第一列的单元格跨两行，
		第四行第四列的单元格跨两行两列。
	 -->
	<center>
		<h1>表格的跨行跨列</h1>
		<table border="1" width="500" cellspacing="0" height="500">
			<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>
	</center>
</body>
</html>

2.4.9、了解iframe框架标签 (内嵌窗口)

iframe 是在当前页面中内嵌一个小的窗口

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>8.iframe标签.html</title>
</head>
<body>
	iframe
	<!-- 
		iframe是在当前浏览器窗口中内嵌一个小窗口
			src 属性设置小窗口的html源路径 
	-->
	<iframe name="iiframe" width="300" height="300" src="4.超链接.html"></iframe>
	
	<!-- 
		1.先使用a标签设置好href属性，也就是iframe要去加载的新的html页面的路径
		2.给iframe添加一个name属性值，起一个名字做标识
		3.设置target属性值 为 iframe和name属性值
			 _self 当前页面 
			 _blank 新的窗口
	 -->
	<a href="5.img标签.html" target="iiframe">修改iframe连接5.img标签.html</a>
</body>
</html>

2.4.10、表单标签（ ***** 重点 * ）

需求1:创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。性别（单选），性趣爱好（多选），国籍（下拉列表）。
隐藏域，自我评价（多行文本域）。重置，提交。效果如下图：

<!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>Insert title here</title>
<style type="text/css">
	textarea{
		vertical-align: bottom;
	}


</style>
</head>
<body>

	<!-- 
	需求1:创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。性别（单选），性趣爱好（多选），国籍（下拉列表）。
	隐藏域，自我评价（多行文本域）。重置，提交。
	 	
	 	form 标签是表单标签
	 	input 标签是表单的表单项
	 		type = text 表示普通的文本输入框   value 属性表示输入框里的默认值
	 		type = password 表示密码输入框  value属性是密码框里的默认值
	 		type = radio 是单选框  name属性可以给单选框进行分组。在同一组里面单选框只能选择一个
	 						checked 属性表示默认选中
	 		type = checkbox 表示复选框  checked属性可以设置默认被选中
	 		type = submit 表示表单的提交 按钮  value属性设置按钮显示的文本
	 		type = reset 表单重置按钮  value属性值是按钮上显示的文本
	 		type = file 是文件上传表单项
	 		type = button 是按钮 标签
	 		
	 	select 标签是下拉列表框
	 	option 标签是下拉列表中的每一项 selected="selected" 表示默认选中
	 	textarea 是多行文本输入框
	 		rows 属性设置 它的高度
	 		cols 属性设置 它的宽度 
	 		多行文本输入框的默认值是起始标签和结束标签中间的文本内容
	 		
	 		
	 	button标签也是按钮，在button起始标签和结束标签里的文本，就是按钮 显示的文本
	 -->
	 	
	<form action="http://www.baidu.com">
		<table border="1">
			<tr>
				<td>用户名:</td>
				<td><input type="text" value="abc"/></td>
			</tr>
			<tr>
				<td>密码：</td>
				<td><input type="password" value="wzg168" /></td>
			</tr>
			<tr>
				<td>性别：</td>
				<td>
					<input type="radio" name="sex" checked="checked"/>男
					<input type="radio" name="sex"/>女
				</td>
			</tr>
			<tr>
				<td>兴趣爱好：</td>
				<td>
					<input type="checkbox" checked="checked"/>学习
					<input type="checkbox" />睡觉
					<input type="checkbox" />看动画片
					<input type="checkbox" />看宝宝的电影
				</td>
			</tr>
			<tr>
				<td>国家：</td>
				<td>
					<select>
						<option>--请选择国家--</option>
						<option selected="selected">中国</option>
						<option>日本</option>
						<option>韩国</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>自我介绍：</td>
				<td>
					<textarea  rows="10" cols="20"></textarea>
				</td>
			</tr>
			<tr>
				<td>
					<input type="submit" value="提 交" />
				</td>
				<td align="center">
					<input type="reset" value="重　置"/>
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

2.4.11、form表单的细节（ ***** 重点 * ）

需求1：模拟tomcat 接收表单的提交信息。
问题1：表单action，method都有什么作用。
action属性：设置表单提交到服务器的地址
method属性：设置表单提交的方式

问题2：为什么表单内容没有提交过去。
1.表单项没有添加name属性值
2.没有被form标签包起来

问题3：get方式和post方式提交有什么不同

GET请求：

1.不安全
2.浏览器地址栏有长度限制

POST请求
它会把所有的表单项以name=value&name=value的形式进行拼接，然后以二进制流的形式发送到服务器浏览器地址里，只有form表单action的属性值，
POST请求的特点：
1.安全
2.它可以发送大量数据到服务器

<!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>12-表单提交详细</title>
<style type="text/css">
	textarea{
		vertical-align: bottom;
	}

</style>
</head>
<body>

	<!-- 
		127.0.0.1 是访问本机的IP地址


		form 标签是表单标签
			action 属性设置表单提交到服务器的地址
			method 属性设置表单提交的方式  GET  POST


		在form表单里，只有给表单项添加name属性值，表单项在提交的时候，才会被提交到服务器。
		在get请求中，浏览器地址栏的地址是action?name=value&name=value
		Get 请求会把每一个表单项以name=value&name=value的形式进行字符串的拼接。
		所以get请求式地址栏的完整地址格式是
			action?name=value&name=value
		
		get请求特点：
		1.不安全
		2.浏览器地址栏有长度限制
	
		POST请求
		它会把所有的表单项以name=value&name=value的形式进行拼接，然后以二进制流的形式发送到服务器
		浏览器地址里，只有form表单action的属性值，
		POST请求的特点：
		1.安全
		2.它可以发送大量数据到服务器
	 -->
	<form action="http://127.0.0.1:8080" method="POST">
		<table>
			<tr>
				<td>用户名:</td>
				<td><input name="username" type="text" value="abc"/></td>
			</tr>
			<tr>
				<td>密码：</td>
				<td><input name="password" type="password" value="wzg168" /></td>
			</tr>
			<tr>
				<td>性别：</td>
				<td>
					<input type="radio" name="sex" checked="checked" value="boy"/>男
					<input type="radio" name="sex" value="girl"/>女
				</td>
			</tr>
			<tr>
				<td>兴趣爱好：</td>
				<td>
					<input name="hobby" value="学习" type="checkbox" checked="checked"/>学习
					<input name="hobby" value="睡觉" type="checkbox" />睡觉
					<input name="hobby" value="看动画片" type="checkbox" />看动画片
					<input name="hobby" value="看宝宝的电影" type="checkbox" />看宝宝的电影
				</td>
			</tr>
			<tr>
				<td>国家：</td>
				<td>
					<select name="country">
						<option value="none">--请选择国家--</option>
						<option value="cn" selected="selected">中国</option>
						<option value="jp">日本</option>
						<option value="kr" >韩国</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>自我介绍：</td>
				<td>
					<textarea name="desc" rows="10" cols="20"></textarea>
				</td>
			</tr>
			<tr>
				<td>
					<input type="submit" value="提 交" />
				</td>
				<td align="center">
					<input type="reset" value="重　置"/>
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

这是GET请求方式收到的数据

GET /?sex=on HTTP/1.1

Host: 127.0.0.1:8080

User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:48.0) Gecko/20100101 Firefox/48.0

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language: zh-CN,zh;q=0.8,en-US;q=0.5,en;q=0.3

Accept-Encoding: gzip, deflate

Connection: keep-alive

Upgrade-Insecure-Requests: 1

POST请求接收的数据格式

post 的http请求格式分三段

请求行

请求头

空行

请求体

POST / HTTP/1.1

Host: 127.0.0.1:8080

User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:48.0) Gecko/20100101 Firefox/48.0

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language: zh-CN,zh;q=0.8,en-US;q=0.5,en;q=0.3

Accept-Encoding: gzip, deflate

Connection: keep-alive

Upgrade-Insecure-Requests: 1

Content-Type: application/x-www-form-urlencoded

Content-Length: 107

地址栏显示：username=abc&password=123456&sex=boy&hobby=%E5%AD%A6%E4%B9%A0&hobby=%E7%9D%A1%E8%A7%89&country=cn&desc=asdf

2.4.12其他标签

需求1：div、span、p标签的演示

div 块标签：经常和CSS组合使用来进行布局
span 内联标签：它主要用来显示文本
p 段落标签：表示是一个段落

<!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>Insert title here</title>
</head>
<body>
<!-- 	div 块标签 经常和CSS组合使用来进行布局 -->
<!-- 	span 内联标签 它主要用来显示文本 -->
<!-- 	p 段落标签   -->
	<!-- 
		div是块标签，它会自动的独占一行	
		span 是内联标签 这的宽度就是它封装的文本的宽度		
		p 段落标签它会自动的上方和下方，各空出一行来
	-->
	<div>div标签1</div>
	<div>div标签1</div>
	
	<span>span标签1</span>
	<span>span标签2</span>
	
	<p>段落1</p>
	<p>段落2</p>
</body>
</html>

OnlyLove_longshao

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
JavaWeb初级学习之 HTML

1、思维导图首先为大家提供本文所要阐述的知识点的思维导图，帮助大家更好的了解本文要阐述的知识。2、HTML简介Hyper Text Markup Language（超文本标记语言）简写：HTML标记语言，我们也叫标签语言,Html通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如
复制链接

扫一扫