java ee链接css_JavaEE-4-HTML&CSS

1、图片标签

属性src: 图片路径

路径有两种 :

2.相对路径: 相对本文件所在的文件夹

有两种路径格式:

./表示本文件夹

../上一层文件夹

属性width:图片宽度,可以使用像素,也可以百分比

属性height:图片高度,可以使用像素,也可以百分比

不要同时设置宽度和高度都使用百分比,因为图片会等比例放大或者缩小

属性atl:图片显示有问题时的代替文本

属性title:鼠标移动到图片上面时显示的文字

2、列表标签

• :无序列表

1. :有序列表

列表标签想要显示必须有列表项标签

需要修改列表的序号或者图案

属性type:

ol中type的取值: 1(默认的) a A i I

ul中type的取值: circle(空心圆点) disc(小黑点,默认的) square(小方点)

3、超链接标签

属性href：表示点击后跳转的页面

属性target：表示点击后网页在哪一个位置显示

它的值：_self 本页面 _blank 新页面 framename 其他框架

4、表格

嵌套关系：

表格标签

子标签:

表示行标签

子标签:

表示行中的单元格

table标签的属性:

border:边框的高度 单位 px

align:水平对齐方式,有 左对齐left 右对齐right 中间对齐center

width：···

weight：···

bgcolor:设置整个表格的背景色,tr和td也有bgcolor

align属性用在table上表示整个表格的对齐方式

用在tr上表示行中所有单元格内容的对齐方式

用在td上表示某一个单元格内容的对齐方式

：合并单元格的属性

rowspan：跨行合并,属性具体的值表示跨几行

colspan：跨列合并,属性具体的值表示跨几列

5、框架集标签

作用:把页面进行理论的划分

属性rows:把页面分成几行, 比如分成3行 rows=”10%,20%,*”,

属性cols:把页面分成几列, 比如分成3列 cols=”10%,50%,*”

如果只是划分页面是没有效果的必须配合子标签

每一行我们在

中要添加一个子标签即可

6、

组织标签

这个标签没有什么具体的实际效果，主要是用来组织整个HTML页面的布局关系的。

下面讲表单：

1、表单标签

主要是用来收集用户的数据,提交到服务器，有三类：

写在

标签里面

是一个容器，单独使用没有效果，要在里面加子标签：

：输入域

示例代码

示例代码效果

注意上面示例代码是被包在

中的

type属性,用于设置输入框的样子

text:文本输入域,显示的文本内容(20个字符),默认的

password:密码输入框,显示的是*号代替文本

radio: 单选框

checkbox:复选框

button:普通按钮

reset:重置按钮

submit:提交按钮

(了解)image:图片按钮

hidden:隐藏域(数据会提交,但是页面上看不见)

file:文件上传组件

：下拉框,默认是没有任何内容的,必须加上子标签

空的

示例代码

图示

子标签:

内容

：文本区域，

示例代码图示

属性:

rows 多少行

cols 多少列

2、表单数据提交

只要点击type=submit按钮,数据就会自动地提交到服务器

点击”提交按钮”时,网页会自动把数据提交到服务器

注意这里

这里的type="submit"是写在一个具体的

标签的子标签里，不是写在中。

问题1:以什么样的方式,什么样的数据格式提交到服务器?

以直接跟到地址栏的地址后面这种方式提交到服务器的：

?sex=on&hobby=on&hobby=on

参数的格式:

属性名=属性值 & 属性名=值

问题2:为什么有些数据提交了,有些数据没提交?

只有有name属性的控件上的值才可以提交

?username=laowang&pwd=123

问题3:为什么有些数据值是on,有些是用户填写的真实数据？

radio和checkbox、option每一个选项都必须有value值，否则提交时的值都是on，此时说明有问题出现了，需要在表单标签上加value属性

Tip：表单提交时，设置默认值

type=text 标签的默认值 通过value属性设置

type=passowrd:标签的默认值 通过value属性设置

type=radio:标签的默认值 通过checked属性设置 - checked=“checked" 或者 checked="true" 或者 checked

type=checkbox:标签的默认值 通过checked属性设置 - checked="checked" 或者 checked="true" 或者 checked

:标签的默认值 ,就是写在开始和结束标签之间的内容

:标签的默认值,在子标签option中 加上selected="selected" 或者 selected

3、form表单的自身属性

action：动作,表示你要把数据提交到那个服务器,写的是网络地址(url)

method：表示你要提交数据的方式，他的值有两种:

get(默认方式)：就是我们刚刚试的,把数据直接拼接到地址后面提交,特点是不安全,而且长度是有限制

post：是把用户数据打包后提交,在地址栏上是看不见,相对于get方式更多安全

4、div和span标签

1.div标签：块级元素,独立占一行的元素，特点是会自动换行

div标签

效果

2.span标签：是一个行内元素,不会自动换行

span标签

效果自己想想就知道了

CSS(层叠样式表)用于“渲染”HTML中的文本内容(字体、大小、对齐方式等)、图片外形(高宽、边框样式、边距等)以及版面布局等

Tip：这里的“层叠”指的是一个HTML可以添加多个样式，然后最后这个HTML标签显示的效果是所有样式叠加起来的效果。

1、基本

CSS的代码规则:

选择器{

属性名:属性值;

属性名:属性值;

}

某个属性值由多个单词组成且中间包含空格，则必须为这个属性值加双引号

示例

CSS注解符号：

示例

属性值中数值和单位之间不能有空格，否则会解析错误！

错误示范

2、引入CSS样式的方法

方法一：行内样式

在标签的style属性值中写CSS代码,注意,此时选择器和大括号不用写,只需要：

属性名:属性值;

属性名:属性值;

只对该标签有效

示例

方法二：内部样式

在head标签的子标签

示例

上述示例是写在

标签中的

方法三：外部样式

在另外一个文件中写,这文件他的后缀必须是.css 注意不能省略选择器和大括号

通过

的另外一个子标签 标签引入刚刚写的xxx.css

新建一个CSS文件

在html文件中利用标签引用

上图示例中便签中的属性不用管，记下来即可

3、CSS三种基本选择器介绍

上面引入CSS样式的方法相当于是我们选择引入CSS的位置，然后我们要开始讨论确定位置之后，如何具体地引入。(我们这里都以内部样式为例，对三种选择器进行介绍)

标签选择器/标记选择器/元素选择器: 选中了我们指定名字的所有标签

标签名{

属性名:属性值;

}

标签名是h1

id选择器：给某个标签设置一个id值(可以多个标签共享一个id名)，然后在CSS中对这个id进行操作

#id值{

属性名:属性值;

}

对某个具体id进行渲染

class选择器:选中标签,class值是指定值的标签

.类名{

属性名:属性值;

}

class选择器

4、扩展：属性选择器与包含/后代选择器

属性选择器:只选中符合我们要求属性值的标签

选择器[属性名=属性值]{

属性名:属性值;

}

示例1

示例2

包含选择器/后代选择器：

选择器1 选择器2{

属性名:属性值;

}

就是说加了限制条件，只选中包含在选择器1中的选择器2(这个选择器1和选择器2的关系可以是父子关系，也可以是爷孙关系····)对其进行渲染

即 只有第二个“传智播客”字体被设置成功

特殊情况1：

注意这里的是body父选择器

这里的效果是所有的“传智播客”字体都被放大了，即“击穿”了

特殊情况2：

父选择器也可以是类、id：

示例1

5、CSS中的样式(即选择器中的属性名)

border：

border：边框的宽度 边框的样子 边框颜色;

单位是px double:双线边框 英文单词red,blue

solid:实线边框 #RGB 比如 #FF0000

width：宽度 单位px

height：高度 单位px

color：内容的颜色

color: XXXX

英文单词red,blue

#RGB 比如 #FF0000

font-size：内容的文字大小 单位px

background-color：设置标签的背景色

display： 转换样式, 把一个块级元素转成行内元素

值: block(转成块级元素) inline(转成行内元素) none(隐藏)

float: 浮动,设置元素的浮动效果,让元素浮起来

left：漂起来向左

原来样式

采用left代码

采用left

right：漂起来向右

clear：清楚元素两边的浮动效果

both：清楚该元素左右两边的浮动效果

6、盒子模型

默认，盒子有多大，里面的元素就有多大

(这个描述的就是android开发中padding、margin)