Java前端学习笔记--Html学习

一、HTML学习

1、HTML的概念

超文本标记语言。
作用：需要将java在后台根据用户请求处理的请求结果在浏览器中显示给用户，在浏览器中数据需要使用友好的格式展现给用户，最大作用是告诉浏览器接收到的数据使用什么样的数据组织形式进行展示。

2、HTML的三大基石

URL：统一资源定位符（唯一的定位一个网络资源）
HTTP：超文本传输协议（规范浏览器和服务器之间数据交互的格式）
HTML：超文本标记语言（有效的组织数据在浏览器端的显示）

3、HTML的头标签

title网页标题标签：

	<title>html 学习title>

网页编码格式标签：
	H5:

	<meta charset="utf-8"/>

	H4:

	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

网页搜索优化标签：

	<meta name="keywords" content="HTML,stars"/>
	<meta name="description" content="本网页是关于HTML学习的"/>
	<meta name="author" content="李老师"/>

网页自动跳转标签：

	<meta http-equiv="refresh" content="5,url=http://www.baidu.com"/>

4、HTML的主体标签

标题标签h1-h6：会将其中的数据加粗加黑显示，并且尺寸依次减小。自带换行功能（块级标签）
标题标签的属性：align（center、left、right）是对标签的功能进一步的补充
水平线标签hr：会在页面显示一条水平线

	<hr width="1200px" size="20px" color="red" align="center"/>

像素单位（px）占据的是电脑屏幕的大小，百分比（%）占据的是浏览器窗口的大小
段落标签p:会将一段数据作为整体进行显示，主要是进行css和js操作时比较方便
	换行符br   空格符 
权重标签b：会将内容加黑显示 i：会将内容斜体显示 u：给内容加下划线  del:增加中划线 (可嵌套使用)
列标签：
	无序列表ul:默认数据前有一个黑圆圈符号
	有序列表ol：会自动给列表内容顺序编码，格式从小到大并且连续，tpye属性可改变（默认1）
	自定义列表dl：dt数据的标题，dd数据的内容

5、HTML的图片标签img

注意：不自动换行（行内元素）
使用本地资源：属性-src：图片路径或者图片的网址
	width/height：设置图片的宽度或高度，若单独设置，图片在保证不失真的情况下自动缩小或放大
	title：图片的标题，鼠标放到图片上会显示
	alt：当图片加载失败显示的提示语

6、HTML的超链接标签href

	<a href="HTML图片标签学习.html" target="_blank">图片a>

	target：指明要跳转的网页资源的显示位置   _self:在当前网页刷新显示
	_blank：在新的标签页显示 _top：在顶层页面显示 _parent：在父级页面显示
锚点：在一张网页中进行资源跳转，回到顶部就是（重新打开网页）：

	<a href="#">回到顶部a>

7、HTML的表格标签table

table:声明一个表格   tr:声明一行，设置行高即改行所有单元格的宽度   table>tr*10>td*2
td:声明一个单元格，默认居左   th：声明一个单元格，默认居中加粗，单元格的宽度即列宽
	属性： border--增加边  width—设置表格宽度  height--表格高度
		  cellpadding—设置内容距边框的距离  cellspacing：设置边框的大小
单元格的合并：首先确认表格是一个规整的表格、再根据要合并的单元格，找到其所在的源码位置
行合并：在要合并的单元格中的第一个单元格上使用属性rowspan=“2”，并删除另一个单元格
列合并：在要合并的单元格中的任意一个单元格中使用属性colspan=“2”，并删除另一个单元格

8、HTML的内嵌标签iframe

作用：在网页内加载其他网页资源
src:要显示资源的地址  width：设置显示区域的宽度  height：设置显示区域的高度
name：设置内嵌区域的名字，结合超链接标签的target属性使用

9、HTML的框架标签frameset

注意：一定要删除body标签
	rows：按照行进行切分页面    cols：按照列进行切分页面
	子标签：frame—进行切分区域的占位，一个frame可以单独加载网页资源。
		  	src：资源路径    name：区域名，结合超链接使用

10、HTML的表单form

作用：收集并提交用户数据到指定服务器，form标签会收集齐标签内部的数据
	属性：action--收集的数据提交地址即URL
			method—收集的数据的提交方式    post：适合大量数据，安全
				get：适合小量数据，表单数据以？隔开，拼接在URL后面，不同键值对使用&隔开，不安全
使用：在点击数据提交时，form标签会将其中所有form表单域标签中用户书写的数据按照method指明的提交方式，提交给action属性所指明的提交地址
	form表单域标签：给用户提供可以进行数据书写或者选择的标签，要提交的表单项必须拥有name属性值，否则不会提交，提交的数据为键值对，name为键，值为用户提交的数据
	文本框input：type--text、password、submit  name--数据提交的键  value--默认值  
	单选框input：type—radio  name属性值必须相同 value--要提交的数据  checked—默认的单选
	多选框input：type—checkbox  checked—默认选择
	单选下拉框select：子标签option—一个option标签代表一个下拉选项
	文本域textarea：声明一个可以书写大量文字的文本区域  rows：行数  cols：列数
	普通按钮input：type—button
	隐藏标签input：type—hidden  用户不可见