Java Web 第七节HTML&CSS

最新推荐文章于 2024-06-13 02:48:16 发布

小珵哟

最新推荐文章于 2024-06-13 02:48:16 发布

阅读量200

点赞数

文章标签：前端 java html

本文链接：https://blog.csdn.net/qq_52322244/article/details/122629276

版权

这是阿锃总结黑马程序员的第七节的内容，主要是对于HTML、CSS的相关知识和操作，总结到这里，希望可以帮助到大家，若是大家也想要跟随黑马程序员学习JAVA WEB可以打开我的主页查找第一节的文章，里面有黑马程序员的视频链接。

上才艺：

## HTML
	1. 概念：市局出的网页开发语言
	2. 快速入门
		* 语法
			1. html文档后缀名：.html			htm
			2. 标签类型：
				1. 围堵标签：<html></html>
				2. 自闭和标签：<br/>
			3. 标签可以嵌套：
			4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号引起来
			5. html的标签不区分大小写，建议使用小写
	3. 标签学习
		1. 文件标签：构成htnl最基本的标签
			* html:html文档的跟标签
			* head：头标签。用于指定html文档的一些属性。引入外部的资源
			* title：标题标签
			* body：体标签
			* <!DOCTYPE html>:html5中定义该文档是html文档
		2. 文本标签：
			* 注释：<!--注释内容-->
			* <h1> to <h6>:标题标签
				* h1-h6字体大小逐渐递减
			* <p>:段落标签
			* <br>:换行标签
			* <hr>:展示一条水平线
				* 属性：
					* color：颜色
					* width：宽度
					* size：高度
					* align：对齐方式
						* center
						* left
						* right
			* <b>:字体加粗
			* <i>:字体斜体
			* <font>:字体标签
				* 属性：
					* color
					* size
					* face字体
			* 属性定义：
				* color：
					1. 英文单词：red
					2. rgb（0-255，0-255，0-255）
					3. #（00-FF，00-FF，00-FF）
				* width
					* 数值:width = '20'单位为px（像素）
					* %：占比相对于父元素的比例
		3. 图片标签：
			* img：展示图片
		4. 列表标签
			1. 有序标签：
			2. 无序标签：
		5. 表单标签
			* 概念：用于采集用户输入的数据，用于和服务器进行交互。
			* 使用标签：form
			* 属性：
				1. action：指定提交的增删改
				2. method：指定提交方式
					* 分类：（常用 ）
						1. get：	
							1. 请求参数会在地址栏显示
							2. 请求参数的长度有限制
							3. 不太安全
						2. post：
							1. 请求参数不会在地址栏显示，会封装在请求体中
							2. 请求参数的长度无限制
							3. 比较安全
				* 表单项中的数据要想被提交，必须指定其name属性
			6. 表单项标签
				* input：可以通过type的属性值，改变元素展示的样式
					* type属性：
						1. text（默认属性）：文本输入框
							* palceholder：指定输入框的提示信息，当输入框内容发生变化会自动清空
						2. password：密码输入框
						3. radio：单选框
							* 注意：要想让多个单选框实现单选的效果，则多个单选框的name属性必须一样
							* 一般会给每一个单选框提供指定的属性值
							* checked，可以指定默认值
						4. checkbox：复选框
							* 一般会给每一个单选框提供指定的属性值
							* checked，可以指定默认值
						5. file：文件选择框
						6. hidden：隐藏域
							* 用于提交一些信息
						7. 按钮	
							* submit：提交按钮
							* button：按钮
							* image：图片提交按钮（图片当按钮）
							
						8. color：取色器（颜色的取值）
						9. date：日期
						10. datetime-local：详细日期
						11. email：邮箱（会给你进行验证是否正确）
						12. number：只能是数字
					* label：指定输入项的文字描述信息
						* 注意：
							1. label的for属性一般会和input的id属性对应。如果对应，点击label会让text标签获得聚焦
				* select：下拉列表
					* option：列表名称
				* textarea：文本域
					* 属性：
						1. cols：指定列数
						2. rows：指定行数

## CSS:页面美化和布局控制
	1. 概念：层叠样式表
	2. 好处：
		1. 功能强大
		2. 将内容展示和样式控制分离
			* 降低耦合度
			* 让分工协作更和谐
			* 提高开发效率
		3. 使用
			1. 内联样式：不建议 
			2. 内部样式：在head标签里面，定义style标签，style里面写CSS代码
			3. 外部样式：定义CSS资源，在head标签中，定义link标签，引入外部的资源文件
		4. 语法：
			* 格式:
				选择器{
					属性名：属性值
				}
			* 注意：
				* 每一个属性加分号，可以不加分号
		5. 选择器：筛选具有相似特征的元素
			* 分类：
				1. 基础选择器：
					1. id选择器：选择具体的id属性的元素
						* #id属性值{}，id值建议唯一
					2. 元素选择器：选择具有相同标签名称的元素
						* 标签名称{}
						* 注意：id选择器优先级大于元素选择器
					3. 类选择器：选择具有相同class的属性值的元素
						* .class属性值{}
						* 注意：类选择器大于元素选择器
				2. 扩展选择器
					1. 选择所有元素
						* 语法：*{}
					2. 并集选择器
						* 选择器1，选择器2{}
					3. 子选择器：筛选选择器1元素下的选择器2元素
						* 选择器1	选择器2{}
					4. 父选择器：筛选选择器2的父元素选择器1
						* 选择器1>选择器2{}
					5. 属性选择器：选择元素名称，属性名 = 属性值的元素
						* 元素名称[属性名 = "属性值"]{}
					6. 伪类选择器：选择一些元素具体的状态
						* 元素：状态{}
						* 如：<a>
							* 状态：
								* link：初始化状态
								* visited:被访问过的状态
								* active:正在访问的状态
								* hover:鼠标悬浮的状态
		6. 属性:
			1. 字体，文本
				* font-size
				* color
				* text-align
				* line-heigh
			2. 背景
				* background
			3. 边框
				* border 
			4. 尺寸
				* width
				* heigh
			5. 盒子模型：控制布局
				1. margin：外边距
				2. padding：内边距
					* 默认情况下内边距会影响整个盒子的大小
					* box—size:boeder-box	设置盒子的属性，让width和heigh就是最终盒子的大小

				3. float：浮动
					* left
					* right