Java Web

第二章 HTML&CSS

---

---

HTML标签：表单标签

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

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

属性：action：指定提交数据的URLmethod:指定提交方式分类：一共七种，这里举例两种常用的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

---