一java体系结构
1.数据库
SQL跟服务器JDCB连接
2.服务器
Spring:java基础,javaSE,
JDCB(MyBatis Hibernate)跟数据库SQL连接,
Servlet(Hibernate)跟浏览器连接
3.浏览器
HTML,CSS,JavaScript(jQuery)
二.浏览器主要内容
1.HTML
用来勾勒出网页的结构和内容
2.CSS
用来美化网页
3.JavaScript
让网页呈现动态的数据和效果
4.jQuery
框架,可以提高js编程效率
常用浏览器:
1.IE 2.Edge 3.Firefox 4.Chrome(Opera) 5.safari
三.web三要素:
HTTP,HTML存储在服务器上,HTML运行在浏览器上
四.XML和HTML
1.XML ——>区分大小写
可扩展(自定义)标记语言
标记、属性、嵌套关系都可以定义
用来存储或传输数据
2.HTML ——>不区分大小写——>是标签固定的XML规范
超文本标记语言
标记、属性、嵌套关系是固定(w3c)的
用来显示数据
某些版本的HTML完全符合XML规范
五.创建WEB项目注意事项
1.切换视图(在Eclipse右上角选择javaEE视图)
2.选择war包(在创建maven项目最后一步,选择war)
3.解决报错(展开项目,右键点击Deployment,选择Generate...)
六.在WEB项目下src下,main下,webapp下建包写HTML文档(无加说明都是双标签)
同样在webapp下建images包保存图片
1.主要构成部分:
声明网页版本(<!DOCTYPE html>),声明网页的编码(<meta charset="UTF-8">——单标签),
唯一的根元素(<html>),头部元素(<head>)跟身体元素(<body>)
2.<head>里的标签:
<title>、<meta>、<link>、<style>、<script>等
3.<body>里的元素:
(1)标题元素(从<h1>到<h5>),
(2)段落元素(<p>),
(3)列表元素:有序列表:<ol>,无序列表:<ul>,列表项:<li>
(4)分区元素:<div>——<div style="color:red;">
(5)行内元素:<span>,<i>斜体,<em>,<b>加粗,<strong>,<u>加下划线,<del>加删除线
(6)空格折叠 :默认情况下多个空格,换行,默认是一个空格,<br>单标签换行 ,<hr>单标签水平线
(7)图像:<img alt="flower" src="../images/f1.jpg">(width,height)等属性
(8)超链接:<a href="http://www.">点我跳转</a>
target="_blank"(另起一个网页打开)"_self"(本网页打开——默认方式)
锚点用法 1:<a id="suyan">如果</a>
<a href="#suyan">please</a>——点击回到页面如果那里
锚点用法2:<a href="#">顶部</a>——点击回到页面顶部
(9)表格:<table>,<tr>(行),<td>(列)
<table> 属性:border边框,width,height,align
cellpadding(单元格边框与内容之间的间距),cellspacing(单元格之间的间距)
<tr> 属性:align,valign
<td> 属性:align,valignwidth,width,height, colspan(跨列),rowspan(跨行)
行分组:表头行分组:<thead></thead>,表主体行分组:<tbody></tbody>,
表尾行分组:<tfoot></tfoot>
七.做网页:仅供参考
1.分区:所有区域宽为960px,水平居中
加边框style="border:1px solid red;width:960px;margin:0 auto;"
1.数据库
SQL跟服务器JDCB连接
2.服务器
Spring:java基础,javaSE,
JDCB(MyBatis Hibernate)跟数据库SQL连接,
Servlet(Hibernate)跟浏览器连接
3.浏览器
HTML,CSS,JavaScript(jQuery)
二.浏览器主要内容
1.HTML
用来勾勒出网页的结构和内容
2.CSS
用来美化网页
3.JavaScript
让网页呈现动态的数据和效果
4.jQuery
框架,可以提高js编程效率
常用浏览器:
1.IE 2.Edge 3.Firefox 4.Chrome(Opera) 5.safari
三.web三要素:
HTTP,HTML存储在服务器上,HTML运行在浏览器上
四.XML和HTML
1.XML ——>区分大小写
可扩展(自定义)标记语言
标记、属性、嵌套关系都可以定义
用来存储或传输数据
2.HTML ——>不区分大小写——>是标签固定的XML规范
超文本标记语言
标记、属性、嵌套关系是固定(w3c)的
用来显示数据
某些版本的HTML完全符合XML规范
五.创建WEB项目注意事项
1.切换视图(在Eclipse右上角选择javaEE视图)
2.选择war包(在创建maven项目最后一步,选择war)
3.解决报错(展开项目,右键点击Deployment,选择Generate...)
六.在WEB项目下src下,main下,webapp下建包写HTML文档(无加说明都是双标签)
同样在webapp下建images包保存图片
1.主要构成部分:
声明网页版本(<!DOCTYPE html>),声明网页的编码(<meta charset="UTF-8">——单标签),
唯一的根元素(<html>),头部元素(<head>)跟身体元素(<body>)
2.<head>里的标签:
<title>、<meta>、<link>、<style>、<script>等
3.<body>里的元素:
(1)标题元素(从<h1>到<h5>),
(2)段落元素(<p>),
(3)列表元素:有序列表:<ol>,无序列表:<ul>,列表项:<li>
(4)分区元素:<div>——<div style="color:red;">
(5)行内元素:<span>,<i>斜体,<em>,<b>加粗,<strong>,<u>加下划线,<del>加删除线
(6)空格折叠 :默认情况下多个空格,换行,默认是一个空格,<br>单标签换行 ,<hr>单标签水平线
(7)图像:<img alt="flower" src="../images/f1.jpg">(width,height)等属性
(8)超链接:<a href="http://www.">点我跳转</a>
target="_blank"(另起一个网页打开)"_self"(本网页打开——默认方式)
锚点用法 1:<a id="suyan">如果</a>
<a href="#suyan">please</a>——点击回到页面如果那里
锚点用法2:<a href="#">顶部</a>——点击回到页面顶部
(9)表格:<table>,<tr>(行),<td>(列)
<table> 属性:border边框,width,height,align
cellpadding(单元格边框与内容之间的间距),cellspacing(单元格之间的间距)
<tr> 属性:align,valign
<td> 属性:align,valignwidth,width,height, colspan(跨列),rowspan(跨行)
行分组:表头行分组:<thead></thead>,表主体行分组:<tbody></tbody>,
表尾行分组:<tfoot></tfoot>
4.显示方式:
(1)块:有宽高,垂直排列:hn,p,ol,ul,div,table,form
(2)行内:无宽高,水平排列:span,i,em,b,strong,u,del,a,label
(3)行内块:有宽高,水平排列:img,input,select,textarea
(4)修改显示方式:
display:block;display:inline;display:inline-block;display:none;
(10)居中标签:<center>不推荐使用,推荐用CSS样式剧中文本
节,区域标签:<section>
缩小字体标签:<small>
放大字体标签:<big>
练习Demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>演示各种标签</title>
</head>
<body>
<!-- 1.标题 -->
<h1>welcome to linsa's homepage</h1>
<h2>please look</h2>
<h3>haha</h3>
<!-- 2.段落 -->
<p>Apple round</p>
<p><a href="#suyan">Apple</a> red</p>
<!-- 3.列表 -->
<!-- 1)有序列表 -->
<ol>
<li>Apple juicy</li>
<li>Apple sweet</li>
<li>Apple apple</li>
</ol>
<!-- 2)无序列表 -->
<ul>
<li>I love you</li>
<li>Apple sweet</li>
<li>I love to eat</li>
</ul>
<!-- 4.分区元素 -->
<div style="color:green;">
<!-- 3)嵌套列表 -->
<ol>
<li>
flower
<ul>
<li>rose</li>
<li>lily</li>
</ul>
</li>
</ol>
</div>
<!-- 5.行内元素 -->
<p>
你落入<i>封闭</i>的地牢,<span>发不出<b>求救</b>的讯号,我<u>折返</u>这古堡</span>
</p>
<!-- 6.空格折叠 -->
<p>
爱转角 遇见了谁,<br>
爱转角 以后的街,<br>
是不是 由我来陪。<br>
</p>
<!-- 7.图片 -->
<!-- 1)绝对路径 -->
<!-- 2)相对路径 -->
<p>
<!-- 一般是这样 -->
<img alt="flower" src="../images/f1.jpg">
</p>
<!-- 8.超链接 -->
<!-- 1)基本用法 -->
<p>
<a href="http://www.baidu.com">百度</a>
<a href="http://maven.aliyun.com/nexus" target="_blank">文档</a>
</p>
<!-- 2)锚点 -->
<p>
<a id="suyan">如果</a>再看你一眼,是否还会有感觉。
</p>
<!-- 3)顶部默认是锚点,没有名字 -->
<p>
<a href="#">顶部</a>
</p>
<!-- 9.表格 -->
<!-- 1)基本用法 -->
<table border="1" cellspacing="0" width="20%">
<tr>
<td>red</td>
<td>green</td>
</tr>
<tr>
<td>blue</td>
<td>yellow</td>
</tr>
</table>
<br>
<!-- 2)跨列 -->
<table border="1" cellspacing="0" width="20%">
<tr>
<td colspan="2"><center>red</center></td>
<!-- <td>green</td> -->
</tr>
<tr>
<td>blue</td>
<td>yellow</td>
</tr>
</table>
<br>
<!-- 3)跨行 -->
<table border="1" cellspacing="0" width="20%">
<tr>
<td rowspan="2">red</td>
<td>green</td>
</tr>
<tr>
<!-- <td>blue</td> -->
<td>yellow</td>
</tr>
</table>
<br>
<!-- 4)行分组 -->
<table border="1" cellspacing="0" width="30%">
<thead>
<tr>
<td>编号</td>
<td>名称</td>
<td>金额</td>
</tr>
</thead>
<tbody style="color:orange;">
<tr>
<td>1</td>
<td>鼠标</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>键盘</td>
<td>200</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">合计</td>
<td>300</td>
</tr>
</tfoot>
</table>
</body>
</html>
七.做网页:仅供参考
1.分区:所有区域宽为960px,水平居中
加边框style="border:1px solid red;width:960px;margin:0 auto;"