静态内容(页面HTML+CSS美化)
HTML静态页面
开发步骤:
1)创建工程,java Web工程
在New中选择Web创建Dynamic Web Project。
拓展:java工程和java web工程有什么不同?
不同:
a) 图标,java工程只有 ,java Web工程有两个
b) 目录结构不同:
JAVA工程 src(存放类)
java web工程,目录规范要求,约定大于配置。
src (存放类,如果类写完保存,eclipse会自动编译)
build(编译后的文件java编译class,不用自己管理)
2)创建HelloWolrd.html
查看自己的文件存放的路径;包视图的样子和真实目录存储的样子
开发时最好使用谷歌浏览器,浏览器程序,有容错性,对于部分标签没有按规矩写,照样可以运行。
3)Hello HTML信息在页面上
<!DOCTYPE html> 标识这是一个html文件
<html> 大多的HTML标签都必须闭合。
<head> head头信息,页面携带特殊标记,字符集,链接样式,链接js文件
<meta charset="UTF-8"> meta元信息,内部信息,字符集为utf-8
<title>Insert titlehere</title> title给网页设置一个标题,在浏览器页夹上展现
</head>
<body> 页面内容放在body中
HelloWorld. 例如内容上放置HelloWorld
</body>
</html>
其中HTML技术换行和页面源代码中换行不一样
在HTML中换行<br/>
<div>块换行<div></div>
其中Css stylesheet样式表
规则:a) 有很多定义好的关键字font-size
b) 分隔符冒号:
c) 结尾分号;
样式表发生冲突,遇到冲突,怎么解决呢?
解决方案:就近原则!最近的样式生效
如果在页面中加入很多css的样式修饰,
a)效果是可以达到的,但是页面内容非常杂乱。
b)相同效果,修改是还需修改多处。
然后可以把样式提炼出来,形成一个样式的文件xxx.css文件,放置于css的文件夹内,
有效解决上面的问题。
提出自己的样式表,但是样式表和html文件没有挂钩,
怎么让它们关联起来呢?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet"href="css/base.css">(在title上加上此行以此来关联样式表)
<title>HelloWorld</title>
</head>
<body>
样式表:
1)全局修饰,在样式表中加关键字标签作为名称body,div
2) 局部修饰,两种方式
a) 针对标签的class属性 <div class=”please”>,样式表.please(一般用这个)
b) 针对标签的id属性<div id=”please”>,样式表中#please。id代表唯一
修饰语法:
1) 修饰美化css,字体大小,颜色,背景,padding,margin
width:40px; 分隔符冒号,结尾分号
2) 表格,width=”40”,没有单位,分隔符=,没有分号结尾
常用样式小结:
@CHARSET "UTF-8"; 旧版本就没有,设置这个文件的类型utf-8
body{ 标准HTML标签的名称,小写
font-size:8px;width:280px; font-size修改字大小,px单位,像素
}
.please{ font-size:28px } .please针对class; #please针对id
.me{ padding-left:100px; } padding-left div左边空100个像素
.line{ border:dashed 1px;} border线,默认实线solid,虚线dashed
.note{ padding-top:15px;padding-bottom:10px; } 上边空15个像素,下面空10个像素
最后今天学习的是如何生成二维码以及如何将二维码加入页面中
1)可以实现表现信息更多,
2) 下面部分支持容错
二维码的特点:
a)二维码就必须有高度和宽度,一般一样
b)二维码本质是一张图片
c)保存图片的路径
@Test单元测试,功能测试,开发人员自己
在方法上面加@Test
把支持jar包放入
只需添加一次即可
增加二维码jar支持
把这两个jar放入,Web工程,WebContent/WEB-INF/lib
最后把生成图片引入到页面中去
a)把图片放到系统中img/qr.png
需要在WebContent下创建一个文件夹:在WebContent上右键,在New中点击Folder,然后创建img的文件夹,再将生成好的二维码图片放入此文件夹中。
b)<img src=”img/qr.png”> 即将此二维码输入到最终的页面中。
小结:
1)HTML
标签,HTML规范
<html> 表示是一个HTML网页
<head> 头信息,存储一些特殊信息<meta>字符集
<link rel=”stylesheet” href=”css/base.css”> 引入样式表
<title> 网页标题,在浏览器页夹名字上显示
<body> 网页内容存放地
<div> 块,主流页面修饰div+css
<hr> 画线 solid默认,dashed虚线
<table> 表格
<tr> 行
<td> 列
<br/> 换行
<img> 图片
空格(一般需要7个 才能使开头汉字空两格)
2)CSS样式表,美工,前端工程师
样式3种形式
a.)全局样式 body,div标准的html指定关键标签都可以进行全局修饰
b.)局部class,.me{}
c.)局部id,#me{}
font-size:8px; 字体大小8个像素
padding-left:100px; 这个div左边空出100个像素
(left righttop bottom)
border:1px solid red; 边是一个像素,实线,红色
border:dashed 1px; 边是一个像素,虚线
width:100px; 标签宽度为100个像素
width:80%; 宽度是整个浏览器窗口的80%,自适应
height:30px; 高度为30个像素
3)二维码
a.)导入jar,WebProject,把第三方jar保存WebContent/WEB-INF/lib目录
b.)导入2个jar
c.)放入,引用jar
4) 执行程序方法
a)main函数,在每个类中只能有一个main,必须static静态。
b)junit test方式,一个类可以有多个@Test,@Test在类的方法上写,不能使用static。