感谢你的路过，希望学生的笔记能给你一点微不足道的参考
Java基础思维导图，完整Java体系的链接

一，B/S: Browser/Server 浏览器/服务器端

* 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
* 优点：
	1. 开发、安装，部署，维护 简单
* 缺点：
	1. 如果应用过大，用户的体验可能会受到影响
	2. 对硬件要求过高
 B/S架构详解
	* 资源分类：
		1. 静态资源：
			* 使用静态网页开发技术发布的资源。
			* 特点：
				* 所有用户访问，得到的结果是一样的。
				* 如：文本，图片，音频、视频, HTML,CSS,Javascript
				* 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
		2. 动态资源：
			* 使用动态网页及时发布的资源。
			* 特点：
				* 所有用户访问，得到的结果可能不一样。
				* 如：jsp/servlet,php,asp...
				* 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
* 我们要学习动态资源，必须先学习静态资源！
	* 静态资源：
		* HTML：用于搭建基础网页，展示页面的内容
		* CSS：用于美化页面，布局页面
		* Javascript：控制页面的元素，让页面有一些动态的效果

二， HTML 2.1. 概念：是最基础的网页开发语言

* Hyper Text Markup Language 超文本标记语言
		* 超文本:
			* 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
		* 标记语言:
			* 由标签构成的语言。<标签名称> 如 html，xml
			* 标记语言不是编程语言。 HTML 运行在浏览器上，由浏览器来解析。

2.2 快速入门：

1. html文档后缀名 .html 或者 .htm
2. 标签分为
	1. 围堵标签：有开始标签和结束标签。如  
	2. 自闭和标签：开始标签和结束标签在一起。如 

3. 标签可以嵌套：
	需要正确嵌套，不能你中有我，我中有你
		错误：
		正确：
4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
5. html的标签不区分大小写，但是建议使用小写。

2.3 开发工具:HBuilder

再给的资料里，直接解压就能用

2.4 常用标签：

	1.基本结构：构成html最基本的标签
			* html:html文档的根标签
				其他标签都要在他里面
				 lang属性：你的文件是那个国家的
			* head：头标签。用于指定html文档的一些属性。引入外部的资源
			* title：标题标签。
				定义浏览器标题的
			* body：体标签
				定义浏览器内容的
			* ：html5中定义该文档是html文档
			* HTML注释以结尾。 可以是一行，也可以是多行

代码：


	

	
	
		
		这是我的第一个HTML页面
	
	
	
		hello html 这是我的第一个HTML页面

2. 文本标签：和文本有关的标签标签 * to ：标题标签 * h1~h6:字体大小逐渐递减 *
：换行标签 *

：段落标签 *

：展示一条水平线 * 属性： * color：颜色 * width：宽度 * size：高度 * align：对其方式 * center：居中 * left：左对齐 * right：右对齐 * ：范围标签一般在大段内容中，为了突出部分内容的时候使用的标签；很少独立使用，一般嵌套在其他的标签中使用。不是因为有了范围标签，局部内容的样式才有变化；是为了改变局部内容样子，我们才通过范围标签包裹，然后修改它的样式。

代码：

1、与文本相关的标签

摸鱼儿.雁丘词

为世间情为物,很难大彻大悟；

感情上的事，真的不能过于盲目。

为世间情为物,很难大彻大悟；
感情上的事，真的不能过于盲目。

1级标题

2级标题

3级标题

4级标题

5级标题

6级标题

3. 图片标签：
		*< img/>：展示图片
			* 属性：
				* src：指定图片的位置
		相对路径
			* 以.开头的路径
				* ./：代表当前目录  ./image/1.jpg
				* ../:代表上一级目录
		热点区域（例子）：

代码：



	
		
		
	
	
		2、图片标签



	
		
		
	
	
		我是圆形

a

	
		
		
	
	
		我是多边型--三角形



	
		
		
	
	
		我是矩形

	4. 列表标签：
			* 有序列表：
				*  
				*  
			* 无序列表：
				*

代码：



	
		
		
	
	
		3、列表标签：有序列表，无序标签
		
		
			
			超时首页
			超值量贩
			超值量贩
			超值量贩
			超值量贩
			超值量贩
		
		
			超时首页
			超值量贩
			超值量贩
			超值量贩
			超值量贩
			超值量贩

	5.定义描述标签：
			dl-dt-dd:定义描述标签:
				dl:只是盛放dt和dd标签，不推荐盛放其他内容
				dt:一般用来盛放图片或者标签
				dd:一般用来补充对dt的描述与说明

代码：



	
		
		
	
	
				4、定义描述标签
		
		
			热销商品
			产品名称：小熊饼干
			价格：￥125.0
		
		
			


			产品名称：小熊饼干
			价格：￥125.0

	6.布局标签 层 div
			div:每一个div占满一整行。块级标签
				属性：id,作用：语意

代码：



	
		
		
	
	
		5、布局标签-div
		
			我是布局标签div
							
				超时首页
				超值量贩
				超值量贩
				超值量贩
				超值量贩
				超值量贩

2.5 标签分类

html标签可以分为块状元素和行级元素两类。 
			块状元素：一般都是新起一行，可以容纳行内元素和其他块级元素； 
			行级元素：一般都是语义级别的基本元素，一般只能容纳文本或者其他行内元素。 
		PS:区分的简单方法：是否独占一行。 块状元素和行内元素的区别： 
		1、 块级元素会独占一行，其宽度自动填满其父元素宽度； 行内元素会排列到同一行里，其宽度随元素的内容变化而变化。 
		2、块级元素可以设置宽高；行内元素设置宽高无效。 
		3、块级元素可以设置margin，padding属性；行内元素的水平方向的padding会有边距效果，但是竖 直方向的padding没有效果。（此处的属性稍后介绍） 
		我们上面已经讲过的标签中归类一下：
		属于块状元素的： 标题标签 h1-h6, 段落标签 p , 水平线标签 hr, 有序列表标签 ol--li， 无序列表标签 ul--li， 定义描述标签 dl-dt-dd， 容器标签 div 
		属于行级元素的： 范围标签span 图像标签：img

2.6 链接标签：

	作用1：跳转到其他资源
		        	 属性： href="目标资源路径" //路径推荐相对路径
		        	  	 target="打开资源的位置" 默认值：_self ---在当前页面打开
		        	  	  					      常用值:_blank ---在新页面打开资源
	作用2：锚链接
		        	步骤：1、目标位置定义锚点
		        		 2、超链接的href属性使用锚点锚链接

代码：



	
		
		超链接
	
	
		
		点击我试试
		
		锚链接--点击我可以跳转到运动户外
		锚链接--点击我可以跳转到其他页面的运动户外
		
			品牌热卖--设置高度，目的是让页面超过一屏
		
		
			奶制品--设置高度，目的是让页面超过一屏
		
		
			宠物园艺--设置高度，目的是让页面超过一屏
		
		
			
			
			运动户外--设置高度，目的是让页面超过一屏



	
		
		超链接222222222222
	
	
		
			品牌热卖--设置高度，目的是让页面超过一屏
		
		
			奶制品--设置高度，目的是让页面超过一屏
		
		
			宠物园艺--设置高度，目的是让页面超过一屏
		
		
			
			运动户外--设置高度，目的是让页面超过一屏

2.7 表格标签：

		规格表格：
		* ：定义表格
			* width：宽度
			* border：边框
			* cellpadding：定义内容和单元格的距离
			* cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
			* bgcolor：背景色
			* align：对齐方式
			* margin: 居中
		*  ：定义行
			* bgcolor：背景色
			* align：对齐方式
		* ：定义单元格
			* colspan：合并列
			* rowspan：合并行
		* ：定义表头单元格



	
		
		表格-规则表格
	
	
		
		
			
			
				
				序号 商品名称 价格
			
			
				1 

125
			
			
				2 Kitty饼干 96.0

序号	商品名称	价格
1		125
2	Kitty饼干	96.0

不规格表格：
	colspan:colspan属性用在td标签中，用来指定单元格横向跨越的列数
	rowspan:的作用是指定单元格纵向跨越的行数.



	
		
		不规则表格
	
	
		
		
			
				
				个人简历
			
			
				
				姓名: 贾宝玉 个人照片
			
			
				出生年月: 1998-6
			
			
				电话: 137123456789

高级标签：
	* ：表格标题
	* ：表示表格的头部分
	*  ：表示表格的体部分
	* ：表示表格的脚部分



	
		
		表格-高级标签
	
	
		
			
			资产负债表
			
				
					月份 负债 资产					
				
			
			
				
					1月份 10000 10000					
				
				
					2月份 150000 150000						
				
				
					3月份 50000 50000						
				
			
			
				
					总计 210000 210000

资产负债表
月份	负债	资产
1月份	10000	10000
2月份	150000	150000
3月份	50000	50000
总计	210000	210000

2.8 表单标签：非常重要（建议直接看代码，更详细）

* 概念：用于采集用户输入的数据的。用于和服务器进行交互。
*  ：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
* 属性：
	* action：指定提交数据的URL
		URL类似于一个位置，索引
	* method:指定提交方式
		* 分类：一共7种，2种比较常用
			* get：
				1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
				2. 请求参数大小是有限制的。
				3. 不太安全。
			* post：
				1. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
				2. 请求参数的大小没有限制。
				3. 较为安全。
	* enctype:表单中有上传的文件的时候必备该属性，且取值为multipart/form-data表单项标签。
表单项元素中的一些属性：
	id:元素的唯一表示，不重复 
	name:表单项元素的名称，很重要--提交数据到服务器之后，服务器获取数据通过该名称 
	value:表单项元素的值，服务器获取数据通过name获取到的就是value 
	type:表示表单项元素的呈现形式 
	class:表示样式名称 
	readonly:表示只读，用户只能看不能改 
	disabled：表示禁用，该元素不能改而且背景是灰色
* ：可以通过type属性值，改变元素展示的样式
		* type属性：
			* text文本输入框，默认值
			* placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息	
					* password密码输入框
						密文显示
					* radio单选框
						* 注意：
							1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
							2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
							3. checked属性，可以指定默认值
					* checkbox复选框
						* 注意：
							1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
							2. checked属性，可以指定默认值
					* file：文件选择框
					*date 表示年月日，datetime-local"表示既有年月日又有时间
					*< textarea>< /textarea>：文本域
							cols：指定列数，每一行有多少个字符
							rows：默认多少行。
					* hidden：隐藏域，用于提交一些信息。
					* 按钮：
						* submit：提交按钮。可以提交表单
						* button：普通按钮
						* image：图片提交按钮
							* src属性指定图片的路径	
			* select: 下拉列表
				* 子元素：，指定列表项
				 multiple：多选下拉框，size：元素个数
			补充：
				 语义化标签：html5中为了提高程序的可读性，提供了一些标签。
					1. ：页眉
					2. ：页脚

代码：



	
		
		表单
	
	
		
		水泊梁山英雄会注册		
		
						
			
			
			用户名：
			
			

			密码：
			
			

			
			性别：男
				 女
				 未知

			婚姻状态：已婚
					未婚

			
			爱好：游泳
				NBA
				电影
				音乐

			
			头像：

			
			邮箱：

			
			生日：

			
			

			
			想去的公司：
					
					  
			
			隐藏域：

			
				

				
			协议：					水泊梁山英雄会注册会员条款说明：
					1、必须遵守........
					2、................

2.9 框架

Iframe:直接看代码

内嵌框架--在浏览器上显示不止一个页面

查询我的订单我关注的店铺

2.10 常用的布局组合标签

	div-ul-li/div-ol-li：常用于导航布局 
	div-dl-dt-dd:常用于图文混编布局 
	div-form:常用于表单布局 
	div-table:常用于局部规则数据展示布局

2.11 HTML4与HTML5的区别

form新属性 
	autocomplete 属性 
		autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。 
			当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。 提示: autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。
			注意: autocomplete 适用于 标签，以及以下类型的 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。

	input 新属性 
		list属性 l
			list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
		multiple 
			multiple 属性是一个 boolean 属性. multiple 属性规定 元素中可选择多个值。 
			注意: multiple 属性适用于以下类型的 标签：email 和 file
		placeholder 
			placeholder 属性提供一种提示（hint），描述输入域所期待的值。 简短的提示在用户输入值前会显示在输入域上。 
			注意: placeholder 属性适用于以下类型的 标签：text, search, url, telephone, email 以及 password。
		required 
			required 属性是一个 boolean 属性. required 属性规定必须在提交之前填写输入域（不能为空）。 
			注意:required 属性适用于以下类型的 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
		HTML5新的表单元素--了解
			标签 描述 
			datalist input标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。 
			keygen 规定用于表单的密钥对生成器字段。 
			output 标签定义不同类型的输出，比如脚本的输出。
		HTML5中新的input类型
			color date datetime datetime-local email month number range search tel time url week 
			注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们 了。即使不被支持，仍然可以显示为常规的文本域。
		HTML5中新增的音频 
		HTML5中新增的视频



	
		
		视频音频
	
	
		音频
			
		
		视频

2.12 转义符号

转移符号 描述   
	  转义为空格 
	<转义为小于号< 
	≤转义为小于等于号≤
	> 转义为大于号> 
	≥转义为大于等于号≥ 
	©转义为版权符号 
	补充：
	：居中



	
		
		常用的转义符号
	
	
		
		你     好！
		html页面的根标签是<html">>
		
		©

练习：

需求：

作业效果

参考：距离记笔记的时候过了一段时间，如果我的笔记有明显借鉴了您的内容，请见谅。（我记忆力很差的，当初写笔记的时候，参考文档记录的可能不全）
资料下载链接（笔记+代码+其他）：百度网盘
链接：https://pan.baidu.com/s/1fl9n-QmvbTLBHQacVdQT9Q
提取码：1111
感谢阅读，祝你从此一帆风顺。

20-HTML与HTML5常用标签(前端)

Java相关栏目本月热门文章

个人简历
姓名:	贾宝玉	个人照片
出生年月:	1998-6
电话:	137123456789