web基础-HTML&CSS
一、程序的分层
1、界面层：
某种类型的应用程序：
a、DOS(控制台运行)
b、桌面应用程序—独立安装，独立运行
c、web类型—现在流行的
单机版：电脑上要安装，程序升级之后，电脑上也要升级--桌面应用程序
网络版：电脑上不装，输入一个url地址，直接用(web类型)
2、业务逻辑层：数据访问—数据交互
3、数据存储层：myssql jdbc
二、web类型的应用程序
理解：应用程序位于服务器，用户只需要通过浏览器就能访问和交互的 --注意和前端网站开发的区别
1、网站—最常见
2、程序—OA、CRM
三、需要掌握的知识
1、客户端：
页面的创建：搭建--美化--动态的显示效果
↓ ↓ ↓
HTML--CSS--JS
2、服务器端：页面和数据库的交互：JSP&Servlet→Ajax&Jqery
Web基础相关的技术：HTML--CSS--JS 不要求学的很精细，但是前端给你必须能看的懂
JSP&Servlet对于学Java的必须学
学习时间：HTML—3天 JS—3天
四、HTML 课程
1、概述：
定义：超文本标记语言，一种纯文本类型的语言
作用：设计网页
特点：文件以html/htm为后缀；由浏览器解释执行；扩展性很强，可嵌套脚本语言编写程序段，如VBScript,JavaScript
2、web浏览器：
主要功能：代理访问者提交请求；作为HTML的解释器和内嵌脚本程序执行器；以图形化界面的方式显示HTML文档
主流产品：IE Firefox Chrome Opera Safari
注意：同样的HTML代码在不同的浏览器上，效果上可能有所不同
3、基本概念：
标记/标签：<>包围的单词；大多成对，有开始标记和结束标记之分
元素：<>包围的部分：<body>body的元素<body/>用谁包围的就称是谁的元素
属性：用来修饰元素；每个属性都有值；属性放在开始标签中
单标签（空标记）和双标签之分：<br />--标准和<br>→早期版本写法
元素和标签的概念并没有严格的区分。
4、HTML的文档结构：
版本信息：<!DOCTYPE> 版本声明
分 类：
Strict DTD 严格型 按照W3C定义的标准
Transitional DTD 传统/过渡型 兼容最新的标准和就的标准
Frameset DTD 框架型
选择问题：从头写用→严格型；在别人的基础上维护→ 过渡型
HTML页面：
文档头部：<head></head> 定义和整个文档相关的信息
<title>标题<title>
<meta charset=utf-8 />--定义网页基本信息--元数据 常用属性：content/http-equiv
<meta http-requiv="refresh" comtent="10" />刷新页面
文档主体：<body></body> 定义文档显示的内容
整个文档：<html></html> 定义文档的范围
注 释：<!--文档注释-->
5、<body>元素：
<1>文本标记
作用：文本是网页上的基本成分
直接书写的文本会用浏览器默认的样式显示；包含在标记中的文本则会被显示为标记所拥有的样式
分类：
特殊字符：
注 释：<!-- 内容-->
标题元素：<h1></h1>...
段落元素：<p></p>元素前后会有间距 元素内容独占一行
换行元素：<br > 单标签一般不需要添加内容 所以也就只有一个标签 间距比段落小
分区元素：需要进行统一设置时使用
<span></span>单行设置，格式没有变化不会影响布局 <div>会独占一行，块元素，用于多行设置
块元素(block)和行内元素（inline）：块--独占一行的元素，前后会自动换行→div/p/h1-h6
行内元素：和其他元素位于一行 如 ：span/a
注：空格折叠：html默认多个空格或制表符压缩成单个空格即显示为一个空格；特殊字符可以用转义字符，也称字符实体
<2>图像和链接
img:引入图像 单标签<img src="资源路径" />
写 法：
<img src="d:/a.jpg">--绝对路径 在web里面是行不通的 不推荐
<img src="a.jpg">--相对路径 当前文件夹下（同一目录）在当前站点下找资源
<img src="http://tts.tarena.com.con/a.jpg">url路径 去其他地方找资源
注：图片显示的大小默认和原来一样，一般在引入时会设置width或height 不清楚比例时 就写一个 因为原图会等比例缩小/放大
超链接：点击去往其他资源/页面
<a href="url">被单击的内容：文字/图片<a /> href 是引用的意思
写 法：<a href="a.html"><a />去当前路径的去找a.html的文件
<a href="http://tts6.tarena.com.con/ target="blank"></a> 引用一个网页
target：默认值_self→替换当前 _blank→在新窗口打开
实际应用中可以图片链接:img嵌套a标签
锚 点：当前页面不同位置的跳转
第一步 定点：在目标位置定义一个锚点 如<a name="link1"></a>是一个隐藏标记 不显示
第二步 链接：使用链接href指向link1 <a href="#link1">to link1</a> #是告知浏览器这不是页面而是锚点
注：锚点是针对有滚动效果的页面 才会有效果 内容较少时看不出效果，因为这样的跳转无意义有目录结构使用的较多
特殊用法：直接回到页面顶端的情况使用比较多，经常使用，因此有一种简化的写法：<a href="#">text</a>--返回界面顶端 相当于刷新的效果
<3>列表
什么是列表？将具有相似或先后顺序的几项文字进行对齐排列
特 点：所有的列表都由列表类型和列表项组成
列表类型：有序列表--<ol>和无序列表<ul> ol指ordered list 排完序的列表 ol和ul只代表列表的开始和结束
列表项： <li>用于指示具体列表内容
嵌套列表：实际应用中最多 嵌套是嵌套在<li>标签当中
1 <ul> 2 <li>书籍 3 <ul> 4 <li>童话</li> 5 <li>诗歌</li> 6 <li>散文</li> 7 </ul> 8 </li> 9 <li>家电</li> 10 <li>电子</li> 11 </ul>
<4>表格
a、作用：显示网格数据和页面布局
如：在表单注册时冒号对齐，使用表格的align右对齐
b、创建表格：表格的基本结构--table/tr(table row)/td(table defination)
注：表格的高宽默认自适应 如果设置了宽高，宽高会按原有比例进行分配
对列设置宽--影响整列，对列设置高--影响整行
对齐方式：默认水平居左--align(水平对齐属性)，垂直居中--valign(垂直对齐属性)
c、常用属性：
表格的属性：border(外边框)/width/height/align/cellpadding(内容与边框--内边距)/cellspacing(单元格与单元格的间距--外边距)
单元格的属性：width/height/align/valign
标题：位于<table>元素中 <caption> 并且是第一个子元素
d、分组：如果用div就破坏了表格的结构所以不能用
行分组，只能包含tr元素：
thead 只能出现一次
tbody 可以出现多次
tfoot 只能出现一次
e、不规则表格：单元格的合并/拆分--实现跨行/跨列
表格无法同时既跨行又跨列。
对于td元素而言，有colspan,rowspan属性设置单元格跨行/跨列
colspan:单元格跨列--横着长
rowspan:单元格跨行--竖着长
f、表格的嵌套：<table>元素嵌套在<td>里 嵌套不能破坏原有表格的结构 和列表嵌套一类似
6、表单：交互--页面上录入数据并且提交服务器端
<1>表单元素--form 用来承载其他交互的元素，以表单作为单位提交
<2>form可以承载的元素
A、<from action="login.jsp" method="post"></form>
ation--提交的地址 method--提交的方式get/post
B、input元素：
(1)文本框：type="text" --也是默认的类型<input /> value表示初始值 --全名叫单行文本框区别于文本域即多行文本框
(2)密码框：type="password" value表示初始值
(3)单选框：type="radio" 互斥的选择 用name设置相同的值来达到分组的功能 名字相同就是一组
(4)多选框：type="checkbox"
(5)提交按钮：type="submit" 提交给服务器
(6)值：value 为服务器传值 如果是功能是单选或多选则表示值 如果是按钮则显示按钮文字
(7)重置：type="reset" 如果恢复到初始情况 设置了初始值的情况下 重置初始值不在取消的范围内
(8)文件：type="file"
(9)隐藏域：type="hidden" 记载页面不希望用户看见的内容
注：value属性的值：取决于元素的类型、可以作初始值、提交值、按钮文本
name属性：单选或者多选按钮的分组
练习：做一个注册界面
C、普通按钮：<input type="button" value="按钮"> 不具备特殊功能 需要有功能需要设置onclick事件
<3>其他元素
A、lable标签 for属性 <input type="checkbox" id="r1"><lable for="r1">关联的文本</lable> 单击文本时如同单击关联的元素
B、选择框--多个选项供用户选择
下拉选择：<select></select> 选项<option value="选择一">选择一<option>
列表选择：<select size="5">size表示列表能呈现的选项
区 别：size属性区别下拉或列表
C、分组：<fieldset>
<legend>标题</legend>--边框线上的文字 注意在表格中使用不要破坏其结构
</filedset> --翻译过来字段集合
表单元素特有的分组 前面学过 span单行 div多行 table中tr td
效果：将包围的表单元素外围加一个边框，并在边框中线上显示提示文字
D、文本域：textarea 用css来设置样式
7、浮动框架：<iframe src="a.html"></iframe>
功能：在当前文档引入其他页面--页面嵌套效果 常用类似于广告页面的嵌入--方便维护 直接改引入的广告代码不会对布局造成影响
五、CSS层叠样式表
1、为什么要使用css？
a、早期依靠html元素的属性来设置样式，每个元素的属性设置样式不尽相同--使用混乱
b、需要一种标准通用的样式，所有元素通用：CSS
2、作用--对页面做统一的设置，实现页面和内容的分离
3、如何使用？
补充小知识：head标签内的信息不显示在页面上，但效果是针对整篇文档的CSS样式和JS所以都可以这样写在里面
a、内联样式：将样式定义在元素的style属性里 很直观，但缺点是样式的重用性很差，不便于修改和维护 仅限于当前元素的使用
b、内部样式表：样式定义在head标签之间style标签内部，但是仅限于当前页面的重用
c、外部样式表：将样式定义在单独的css文件里由页面引入他--可重用性和维护性提高
在head标签内<link rel="stylesheet" type="text/css" href="myStyle.css"/>实现数据（内容）和表现分离
4、css的优先级问题
全 称：Cascading Style Sheets--层叠样式表
继 承：子元素会继承父元素的特征
三个样式表之间存在继承+并集+优先级
优先级：内联>内部或外部；内部和外部的优先级相同，就近原则，以最后一次定义为优先
应 用：如果发现别人的样式太多，可以定义在最后将前面的全部覆盖，就不用去看前面别人写的代码了
eg:h1{color:red}
5、选择器：
A、元素选择器：以Html的元素的名称作为定义的标准--一类元素
缺点：不同元素的样式相同--跨元素/同一类元素下的细分这两者仅靠元素选择器是无法实现的
B、类选择器：.name{样式申明} .表示自定义的某种选择器
eg:.name{color:blue}
<h1 class="name">h2 text</h1> <a href="#" class="name">click to top</a>
C、分类选择器：元素名.类名{}--同一类元素下的细分 这样比前面两者都更加精准
eg:input.name{color:red} input.st{color:blue}
<input class="name" value="mary"> <input class="st" type="button" value="按钮">
D、ID选择器：个别的元素使用--常用页面上某些大的标题 使用关键字#
#name {color:red}
上面的选择器的范围是逐步缩小，更加精准：A>B>C>D
练习：使用选择器为h4和div定义相同的样式：颜色和字体，使用分类选择器定义按钮的宽，文本框的宽
使用元素选择器ID定义某个span
E、派生选择器：
div span{color:red}注意空格 包含在divli 又包含在span里 依靠层次包含关系
常用于某个大元素里某类元素的定义
F、选择器分组：对某些选择器定义统一的设置
h1,p,div{ }
G、伪类选择器：有些元素有不同的状态，典型的是a元素，常用的状态有：
focus--获得焦点
link--未访问过的--超链接所特有
active--激活
hover--鼠标悬停/移入
visited--访问过的--超链接所特有
写法：a:link{color:orange} a:hover{font-size:20pt}
六、各种样式声明
1、css单位
尺寸:
%--百分比;in--英寸;cm--厘米;mm--厘米;pt--磅(1pt=1/72英寸);px--像素;em--1em=当前字体尺寸，2em=当前字体的两倍
px相对尺寸在不同的分辨率中的1像素代表的长度不同，但是pt是绝对尺寸直接是具体多少厘米;一般情况下字体用pt,宽高用px可以根据设定的页面像素按比例变化
尺寸属性：
width和height
overflow:当前内容溢出元素框时如何处理
-visible--默认
-hidden--溢出的部分被隐藏(常用)
-scroll--不管是否溢出总是添加滚动条
-auto--只有内容溢出才显示滚动条(常用)
2、边框属性：如果没有边框效果就无法看到溢出的效果
简写方式：boder:width style color
boder:1px solid red 将边框全部定义
单边定义：boder-left/right/top/bottom:width style color
boder-top:1px solid red 单边线定义
boder-width:boder-left/right/top/bottom-width
boder-style:boder-left/right/top/bottom-style线型
boder-color:boder-left/right/top/bottom-color
应 用：立体效果，设置单边框的上边线和左边线浅色，线条稍细;下边线和右边线深色，线条稍粗就会形成视觉上的立体感
3、颜色：
rgb(x,y,z):RGB值，eg:rgb(255,0,0)
rgb(x%,y%,z%):eg:rgb(100%,0%,0%)
#rrggbb:十六进制数，eg：#ff0000
#rgb:简写的十六进制数，#f00 两两一样的时候可以这样简写 不一样就不能
4、框模型：(Box Model)定义了元素框处理元素内容、内边距、边框和外边距的方式 W3C叫框模型，有的也叫盒子模型
注意：要确认参照物
内边距:padding
外边距：margin
写法：padding：30px--外边距上下左右都是30px
padding-left/right/top/bottom--指定具体某一边
padding:10px 20xp--上下 左右
padding:10x 20px 30px 40px--顺时针 上 右 下 左
特殊写法：对于margin而言--某个框居中显示
<div style="width:100px;height:50px;margin:0px aoto></div>
margin的上下外边距为0px 左右由(系统-width)/2 这样平均分配
注意：如果两个框模型指定了相同width和height，增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总面积
5、背景的设置：
background-color:背景色
background-image:url(路径)背景图
平铺的问题：backgroun-repeat:repeat--重复的平铺 默认
background-repeat:no-repeat--不重复
background-repeat:repeat-x--水平方向
background-repeat:repeat-y--垂直方向
渐变色问题：常用平铺来解决渐变色问题
位 置：background-position:默认在左上角
如果图比框小，不想平铺，又想只出现一次，可以考虑设置位置会相对好看些
background-position:10px 0px 左边距 上边距
如何放在框中间？
background-position:center 50% 水平居中 上下各取50%
附着方式：background-attachment:scroll/fixed 背景图是否跟随文字滚动 一般只用在背景图上面而且背景图还比较大的情况
6、文本格式化：
<1>指定字体：font-family:
<2>字体颜色：color
<3>字体大小：font-size
<4>字体加粗：font-weight:normal/bold 默认normal
<5>文本对齐：text-align:left/center/right
<6>行 高：line-height--文本垂直居中对齐的设置
<7>文本修饰：text-decoration:none/uderline 超链接可以取消下滑线
<8>文本缩进：text-indent 可以用在段落的缩进 注意是首行缩进
比较：空格 padding都有类似的效果，但是 不可取，padding是全缩进而不是首行缩进
7、表格样式：表格所特有的
border-collapse:collapse 边线折叠 用于设置细边框
vertical-align:单元格垂直方向的对齐方式
8、浮动：float:left/right
块级元素的排列方式 让元素脱离原来的流布局模式（html从上到下，从左往右的显示方式）浮动、停靠
取消某侧的浮动元素带来的影响 clear:left/rigth/both
9、display--设置元素的显示方式
html元素行内元素和块级元素
行内元素：位于一行中，高和宽都是自适应
块级元素：独占一行，自定义高和宽
有些时候，希望改变元素的显示方式 行内元素-->块级元素
display:none/block/inline 常会和JS结合实现动态效果
10、列表样式：list-style-type:列表样式类型
定义列表项前面的标志：
list-style-type:none/disc/circle 无序列表
list-style-imge:url()
