【HTML&CSS】

Java Web

第二章 HTML&CSS

---

---

HTML标签：表单标签

概念：用于采集用户输入的数据的。用于和服务器进行交互。

from:用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围

属性：
	action：指定提交数据的URL
	method:指定提交方式
		分类：一共七种，这里举例两种常用的
			get：
				1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议章节中会详细讲解)。
				2. 请求参数大小是有限制的。
				3. 不太安全。
			 post：
			 	1.请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议章节中会详细讲解)。
			 	2.请求参数的大小没有限制。
			 	3. 较为安全。
表单项中的数据要想被提交：必须指定其name属性

表单项标签：

input：可以通过type属性值，改变元素展示的样式
	type属性：
		text：文本输入框，默认值
			placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息	
		password：密码输入框
		radio:单选框
			注意：
				1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
				2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
				3. checked属性，可以指定默认值
		checkbox：复选框
			注意：
			1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
			2. checked属性，可以指定默认值

		file：文件选择框
		hidden：隐藏域，用于提交一些信息。
		按钮：
			submit：提交按钮。可以提交表单
			button：普通按钮
			image：图片提交按钮
				src属性指定图片的路径	
				
	label：指定输入项的文字描述信息
			注意：
				label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。
select: 下拉列表
	子元素：option，指定列表项

textarea：文本域
	cols：指定列数，每一行有多少个字符
	rows：默认多少行。

---

CSS：页面美化和布局控制

概念

概念： Cascading Style Sheets 层叠样式表

层叠：多个样式可以作用在同一个html的元素上，同时生效

---

好处

1. 功能强大

2. 将内容展示和样式控制分离

   • 降低耦合度。解耦
   • 让分工协作更容易
   • 提高开发效率

---

CSS的使用：CSS与html结合方式

内联样式

 * 在标签内使用style属性指定css代码
 * 如：<div style="color:red;">hello css</div>

内部样式

• 在head标签内，定义style标签，style标签的标签体内容就是css代码

代码如下（示例）：

<style>
       div{
           color:blue;
       }

   </style>
<div>hello css</div>

外部样式

1. 定义css资源文件。
2. 在head标签内，定义link标签，引入外部的资源文件
   代码如下（示例）：
   a.css文件：

div{
    color:green;
}

<link rel="stylesheet" href="css/a.css">
<div>hello css</div>
<div>hello css</div>

注意：
1.内联样式、内部样式、外部样式，3种方式 css作用范围越来越大
2.内联方式不常用，在开发中常用内部样式和外部样式
3.外部样式还可以这么写：<style> @import "css/a.css"; </style>

---

css语法

格式：
选择器 {
	属性名1:属性值1;
	属性名2:属性值2;
	...
}
选择器:筛选具有相似特征的元素
注意：每一对属性需要使用；隔开，最后一对属性可以不加；

---

选择器：筛选具有相似特征的元素

基础选择器

id选择器

选择具体的id属性值的元素.建议在一个html页面中id值唯一

语法：#id属性值{}

元素选择器

选择具有相同标签名称的元素

语法： 标签名称{}
tips：id选择器优先级高于元素选择器

类选择器

选择具有相同的class属性值的元素。

语法：.class属性值{}
tips：类选择器选择器优先级高于元素选择器

扩展选择器

选择所有元素

语法： *{}

并集选择器

选择器1,选择器2{}

子选择器：筛选选择器1元素下的选择器2元素

语法： 选择器1 选择器2{}

父选择器：筛选选择器2的父元素选择器1

语法： 选择器1 > 选择器2{}

属性选择器：选择元素名称，属性名=属性值的元素

语法： 元素名称[属性名=“属性值”]{}

伪类选择器：选择一些元素具有的状态

语法： 元素:状态{}

状态：
	link：初始化的状态
	visited：被访问过的状态
	active：正在访问状态
	hover：鼠标悬浮状态

---

属性

字体、文本

• font-size：字体大小
• color：文本颜色
• text-align：对其方式
• line-height：行高

背景

• background：

边框

• border：设置边框，符合属性

尺寸

• width：宽度
• height：高度

盒子模型：控制布局

• margin：外边距
• padding：内边距
  • 默认情况下内边距会影响整个盒子的大小
  • box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小
• float：浮动
  • left
  • right

---