JavaSE中路径分为相对路径和绝对路径：
相对路径：从工程名开始算
绝对路径：盘符：/目录/文件名
Web中路径分为相对路径和绝对路径：
相对路径：
. 表示当前文件所在的目录
… 表示当前文件所在的上一级目录
文件名 表示当前文件所在目录的文件，相当于./文件名（./可以省略）
绝对路径：
http://ip:port/工程名/资源路径
HTML+CSS
<!DOCTYPE html> <!--文档声明 -->
<html>
<head> <!--head标签中的内容不会在网页内容中出现-->
<meta charset ="utf-8" /> <!--告诉浏览器网页所采用的编码字符集-->
<meta name="keywords" content="html,java"/> <!--设置网页的关键字-->
<meta name="description" content="发布HTML，java相关的知识"/> <!--指定网页的描述-->
<meta http-equiv="refresh" content="3;url=http://www.baidu.com"/>
<title>网页标题 </title> <!--title网页的标题标签，默认在浏览器的标题栏中 -->
</head>
<body>
<h1>一级标题 </h1> <!--一共6级标题h1~h6,h1~h6重要性依次降低，搜索引擎检索完title，立即查看h1中的内容-->
<p> <!--p标签中的文字默认独占一行； HTML中字符之间写再多的空格/换行，浏览器也会当成一个空格解析 -->
段落标签<br/>
<hr/>
嘎哈 哈工大 <!--实体：< < > > 空格 版权符号：©；-->
</p>
<img src="123.JPG" alt="这是一幅美景" width="200px"/> <!--alt 用于设置图片不能显示时对图片的描述；搜索引擎可通过alt属性来识别不同的图片-->
<p>3秒后跳转页面</p>
</body>
</html>
超链接
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>超链接</title>
</head>
<body>
<a href="#bottom">去底部</a> <br/> <!--#id值 跳转到id为bottom元素所在的位置-->
<a href="http://www.baidu.com" target="_blank">超链接<a/> <br/>
<a href="http://www.baidu.com" target="t">超链接<a/> <br/>
<iframe src="1.html" name="t"></iframe><br/>
<a href="#" id="bottom">回到顶部<a/><br/> <!--若将链接地址设置为#，则点击链接后会自动跳转到当前页面的顶部-->
<a href="mailto:257135@qq.com">联系我们</a>
</body>
</html>
css选择器
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>css</title>
<style type="text/css"> <!--内部样式表-->
p{
color:green;
font-size:12px;
}
#p1{
color:red;
}
.p2{
color :red;
}
#p1,.p2{
color:red; <!--选择器分组-->
}
*{
color:red; <!--通配选择器：选中页面中所有元素-->
}
span.p3{
color:blue; <!--复合选择器；对id选择器不建议使用-->
}
div span{
color:greenyellow; <!--后代元素选择器-->
}
</style>
<link rel="stylesheet" type="text/css" href="style.css"/> <!--将外部css样式表应用到当前页面-->
</head>
<body>
<p style="color:red;font-size:20px">爱像一阵风</p> <!--内联样式只对当前元素中的内容起作用-->
<p>爱星一阵风</p>
<div></div> <!--div是一个块级元素，占用一行空间，主要用于对页面进行布局-->
<span></span> <!--span内联元素，只占用自身大小，主要用来选中文本设置样式-->
<!--一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素；
a元素可以包含任意元素，除了他本身；
p元素不可以包含任何的块元素-->
<p id="p1">hahha</p>
<p class="p2 he">hska</p> <!--一个元素可以同时设置多个class-->
<p class="p2">dqa</p>
<span class="p3">dkjdiwn</span> <br/>
<div>
<span>hdkash</span>
</div>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style type="text/css">
<!--link,visited 需写在hover，active之前-->
a:link{
font-size=12px; <!--未访问过的-->
}
a:visited{
color:blue; <!--访问过的；只能定义字体的颜色-->
}
a:hover{
color:red; <!--鼠标滑过的-->
}
a:active{
color:pink; <!--正在点击的-->
}
input:focus{
background-color:red; <!--文本框获取焦点后，修改背景颜色-->
}
<!--为选中内容设置样式 ::selection-->
<!--------------------->
<!--伪元素 :first-letter首元素 :first-line首行-->
p:before{
content:"维护一点半"; <!--before表示元素最前边的内容;after表示最后边的内容-->
color:red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">f<a>
<a href="http://www.baidu.com">w<a><br/>
<a href="http://www.baidu.com">e<a><br/>
<input type="text"/>
<p>时间啊带回家</p>
</body>
</html>
属性选择器
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>属性选择器</title>
<style type="test/css">
p[title]{
background-color=yellow; <!--[属性名]选取含有指定属性的元素-->
}
p[title="hello"]{
background-color=red; <!--[属性名=“属性值” ]选取含有指定属性值的元素-->
}
p[title^="ab"]{
background-color=blue; <!--[属性名^=“属性值”]选取属性值以指定内容开头的元素-->
}
p[title$="c"]{
background-color=white; <!--[属性名$="属性值"]选取属性值以指定内容结尾的元素-->
}
p[title*="a"]{
background-color=blanck; <!--[属性名*="属性值"]选取属性值包含指定内容的元素-->
}
<!--first-child 选中第一个子元素 last-child 选中最后一个子元素 nth-child(3) 选中任意位置(第3个)的子元素，even表示偶数，odd表示基数 -->
p:first-child{
<!--选中为第一个子元素的p标签-->
}
<!--first-of-type last-of-type nth-of-type -->
p:first-of-type{
<!--选中p标签中的第一个p标签-->
}
span+p{
<!--兄弟元素选择器 为span后一个（紧挨着的）p元素设置-->
}
span~p{
<!--选中span后的所有p元素-->
}
p:not(.hello){
<!--否定伪类：从已选中的元素中剔除某些元素 not（选择器）-->
}
</style>
</head>
<body>
<p title="abc">我是一个段落</p> <!--title属性：当鼠标移动到元素上时，title属性的值将会作为提示文字显示-->
<span></span>
<p></p>
</body>
</html>
HTML部分标签
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="test/css">
ul{
list-style:none; <!--去除默认样式-->
}
</style>
</head>
<body>
<!--em标签表示语气上的强调,默认斜体；strong表示强调的内容，默认粗体-->
<p>
京塔<em>担惊受恐</em>
<strong>注意;sjks </strong>
</p>
<p>
<i>斜体</i>
<b>粗体</b>
</p>
<p>
<small>小字</small>
<cite>《论语》</cite>
</p>
<p>
<q>hah</q> <!--q标签的内容会自动加上引号-->
<blockquote></blockquote> <!--长引用-->
</p>
<p>
2 <sup>2<sup> <!--设置上标-->
H<sub>2</sub> <!--设置下标-->
<del></del> <!--自动添加删除线-->
<ins></ins> <!--表示插入的内容，自动添加下滑线-->
<code> </code> <!--表示代码-->
<pre> </pre><!--保留代码的格式-->
</p>
<ul> <!--无序列表，和有序列表之间可以任意嵌套-->
<li>1</li>
<li>2</li>
</ul>
<ol type="A"> <!--有序列表,type属性可以设置序号的类型-->
<li>jsahk</li>
</ol>
<dl> <!--定义列表-->
<dt>ashdj</dt>
<dd>sjdhia</dd>
</dl>
</body>
</html>
属性
<!--
color:
font-size:
font-family:
font-style: normal默认值文字正常显示
italic文字以斜体显示
oblique文字以倾斜的效果显示
font-weight: normal
bold 文字加粗
font-variant:normal 文字正常显示
small-caps 文本以小型大写字母显示
font:italic bold small-caps 60px "微软雅黑"; 可以将字体样式的值，统一写在font样式中，不同的值之间使用空格隔开
使用font设置字体样式时，斜体 加粗 小大字母，没有顺序要求，甚至可以不写，则为默认值；
但要求文字的大小和字体必须写，而且字体必须是最后一个样式，大小必须是前一个
line-height:设置行高 行间距=行高-字体大小
font也可指定行高 font:30px/50px "微软雅黑"; 50px指行高，如果不指定则使用默认值
text-transform:none 默认值 该怎么显示就怎么小写
capitalize 单词的首字母大写，通过空格识别单词
uppercase 所有字母都大写
lowercase 所有字母都小写
text-decoration:none 默认值
underline 下划线
overline 上划线
line-through 删除线
letter-spacing:设置字符间距
word-spacing:设置单词之间的空格的大小
text-align:left 默认值，靠左
right 靠右
center 居中
justify 两端对齐
text-indent:设置首行缩进（正值向右移，负值向左移）
-->
盒子模型
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
.box1{
<!--内容区宽度高度-->
width:100px;
height:100px;
background-color=#bfa;
<!--设置边框-->
border-width:10px; <!--如果指定四个值：分别设置给上 右 下 左；指定三个值：分别设置给上 左右 下；两个值：分别给上下 左右
border-xxx-width:xxx的值可能是top，right，bottom，left，-->
border-color:red;<!--和宽度一样-->
border-style:soild;<!--none 默认值，没有边框 solid 实线 dotted点状边框 dashed 虚线 double双线
四个边框样式和宽度设置一样-->
<!--border 可以同时设置四个边框的样式，宽度，颜色，且没有顺序要求，指定宽度是同时指定四个边不能同时指定-->
border:red solid 10px;
<!--border-xx xx值可为top，right，bottom，left -->
<!--设置内边距（指内容页到边框的距离）padding-xxx:xxx值为top,right,bottom,left-->
padding-bottom:10px;
padding:100px;<!--可同时设置四边-->
<!--设置外边距（指当前盒子与其他盒子之间的距离）margin-xxx:xxx值为top,right,bottom,left
设置左，上边距会改变自身元素的位置；设置右，下边距会改变其他元素的位置
可设置负值，设置负值会向反方向移动
margin可设置为auto：如只指定左外边距或右外边距的margin为auto，则外边距设置为最大值
如垂直方向外边距设为auto，则外边距默认为0
如果左和右外边距同时设为auto，则将两侧的外边距设置为相同的值--
-->
<!--垂直外边距的重叠：在网页中相邻且垂直方向的外边距会发生外边距重叠
指兄弟元素之间的相邻外边距会取最大值而不是取和
如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素
-->
<!--清除浏览器的默认样式-->
*{
margin:0;
padding:0;
}
<!--内联元素不能设置width和height
设置水平内边距，内联元素可以设置水平方向的内边距
垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局
可以设置边框，垂直边框不会影响布局，水平方向会
只支持水平外边距
水平方向外边距不会重叠，而是求和-->
<!--display样式可修改元素的类型 inline：将一个元素作为内联元素显示
block：将一个元素设置为块元素显示
inline-block:将一个元素转换为行内块元素
none：此元素不会在页面中显示，并且不再占据页面位置
visibility:设置元素的隐藏和显示的状态 visible 默认值，元素默认在页面显示
hidden 元素会隐藏，但位置还占着
-->
<!--子元素默认存在于父元素的内容区中，但如果子元素的大小超过了父元素的内容区，则超过的大小会在元素以外的位置显示，
超出父元素的内容，称为溢出的内容
通过overflow设置父元素如何处理溢出内容 visible 默认值，不对溢出内容做处理
hidden 溢出的内容会被修剪，不会显示
scroll 为父元素添加滚动条，通过滚动条查看完整的内容
该属性不论内容是否溢出，都会添加水平和垂直方向的滚动条
auto 根据需求自动添加滚动条-->
}
</style>
</head>
<body>
<div class="box1">h1
</div>
<span></span>
</body>
</html>
文档流
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文档流</title>
<style type="text/css">
</style>
</head>
<body>
<!--文档流：处在网页的最底层，它表示的是一个页面中的位置，我们创建的元素默认就在文档流中
元素在文档流中的特点：
块元素 1.在文档流中独占一行，块元素会自上而下排列
2.块元素在文档流中默认宽度是父元素的100%
3.块元素在文档流中的高度默认被内容撑开
块元素脱离文档流后，高度和宽度都被内容撑开
内联元素 1.内联元素在文档流中只占自身大小，默认自左向右排列
2.在文档流中，内联元素的宽度和高度默认都被内容撑开
内联元素脱离文档流以后会变成块元素
-->
<!--如果希望块元素在页面中水平排列，可以是块元素脱离文档流，使用float来使元素浮动
可选值：none默认值，元素默认在文档流中排列
left元素会立即脱离文档流，向页面的左侧浮动
right元素会立即脱离文档流，向页面的右侧浮动
当为一个元素设置浮动后，元素会立即脱离文档流，脱离文档流后，它下边的元素会立即向上移动
元素浮动以后，会尽量向页面的左上或右上漂浮，直到遇到父元素的边框或其他的浮动元素
如果浮动元素上是一个没有浮动的块元素，则浮动元素不会超过块元素
浮动元素不会超过他上边的兄弟元素，最多一边齐
浮动元素不会盖住文字，会自动环绕在浮动元素周围，
-->
<!--在文档流中，父元素的高度默认是被子元素撑开的，但是当为子元素设置浮动以后，子元素会完全脱离文档流，
此时将导致父元素的高度塌陷，下面的元素都会向上移动，导致布局混乱
在页面中元素都隐含一个属性BFC，该属性可以设置打开或关闭，默认是关闭的
当开启BFC后，元素会具有如下特性：
父元素的垂直外边距不会和子元素重叠
开启BFC的元素不会被浮动元素覆盖
开启BFC的元素可以包含浮动的子元素
开启元素的BFC：
设置元素浮动
虽然可以撑开父元素，但会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移
设置元素绝对定位
设置元素inline-block
会导致宽度丢失
将元素的overflow设置为一个非visible的值
在IE6及以下设置： zoom：1；
clear用于清除其他浮动元素对当前元素的影响
可选值：none：不清除浮动
left：清除左侧浮动元素对当前元素的影响
right：清除右侧浮动元素对当前元素的影响
both：清除两侧浮动元素对当前元素的影响 ,清除对它影响最大的
可用于直接在噶度塌陷的父元素的最后，添加一个空白的div，因为它没浮动，因此可以撑开父元素的高度
然后对其进行清除浮动，通过这个空白的div来撑开父元素的高度，但增加了多余的结构，因此通过after伪类仙元素的最后添加一个空白的块元素，
对其清除浮动，
.box1:after{
content="";
display:block;
clear:both;
}
在IE6中还需加：
.box1{
zoom:1;
}
-->
<div class="box1">
<div class="box"></div>
</div>
</body>
</html>
定位
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<!--定位：将指定的元素摆放到页面的任意元素，通过定位可以任意的摆放元素，通过position属性来设置元素的定位
可选值：static 默认值，元素没有开启定位
relative：开启元素的相对定位
absolute：开启元素的绝对定位
fixed：开启元素的固定定位
相对定位特点：（相对自身定位）
当开启了元素的相对定位后，而不设置偏移量，元素不会发生任何变化
相对定位是相对于元素在文档流中原来的位置进行定位
相对定位的元素不会脱离文档流
相对定位会使元素提升一个层级
当开启了元素定位时：可通过left，right，top，bottom来设置元素的偏移量
left：元素相对于其定位位置的左侧 偏移量 向右移
绝对定位特点：
开启绝对定位，会使元素脱离文档流
开启绝对定位后，如果不设置偏移量，则元素的位置不会发生变化
绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的，如果所有的祖先元素都没有开启定位，则相对于浏览器窗口进行定位
绝对定位会使元素提升一个层级
绝对定位会改变元素的性质，内联元素变成块元素，块元素的宽度和高度都被内容撑开
固定定位也是绝对定位，大部分和它相同
不同：它永远都是相对于浏览器窗口进行定位
固定定位会固定在浏览器窗口某个位置，不会碎滚动条滚动-->
<!--
如果定位元素的层级是一样的，则下边的元素会盖住上边（结构上）
通过z-index属性可以提高元素的层级
可以为z-index指定一个正整数作为值，该值会作为当前元素的层级
对于没有开启定位的元素不能使用z-index
父元素的层级在高，也不会盖住子元素
-->
<!-- 设置元素的透明度：opacity：用于设置元素的背景透明度
它需要一个0-1之间的值，0表示完全透明，1表示完全不透明
IE8及以下不支持opacity：
filter：alpha（opacity=50）；-->
</body>
</html>
。
<!doctype html>
<html>
<head>
<charset="utf-8">
<style type="text/css">
<!--
background-image:url(图片相对路径);
如果背景图片大于元素，默认会显示图片的左上角
如果背景图片小于元素，默认将背景图片平铺以充满颜色
可以同时指定背景颜色和背景图片，这样背景颜色会作为背景图片的底色
background-repeat设置图片的重复方式--
可选值：repeat：默认值，背景图片会双方向重复
no-repeat：背景图片不会重复，有多大就显示多大
repeat-x 背景图片沿水平方向重复
repeat-y 背景图片沿垂直方向重复
背景图片默认贴着元素的左上角显示
通过background-position可以调整背景图片在元素中的位置
可以使用top right left bottom center中的两个值来指定一个背景图片的位置
如果只写一个值，则第二个值默认为center
也可以指定两个偏移量（可为负值）：第一个是水平偏移量（正值：向右 ，负值：向左），第二个是垂直偏移量(正值：向下，负值：向上)
background-attachmentd用来设置背景图片是否随页面一起滚动
可选值 scroll：默认值，背景图片随着窗口滚动
fixed：背景图片会固定在某一位置，不随页面滚动
图片整合技术：将多张图片整合为一张图片，这样三张图片就可以同时加载，就不会出现闪烁问题，
然后通过background-position来切换要显示的图片的位置
优点：将多个图片整合为一张图片，浏览器只需要发送一次请求，可同时加载多个图片，提高访问效率，提高用户体验
减小了图片的总大小，提高请求速度，增加了用户体验
-->
</style>
</head>
<body>
<div class="box"></p>
<!--表格 table块元素 colspan 横向合并单元格 rowspan纵向合并单元格
table和td边框之间默认有一个距离，通过border-spacing属性设置这个距离，
border-spacing:0px;
border-collapse:collapse; 设置表格的边框合并，如果设置了边框合并，border-spacing自动失效-->
<table>
<tr>
<th></th> <!--表头-->
</tr>
<tr>
<td></td>
</tr>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
</body>
</html>
.
<!--
子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素
使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠,table 可以将一个元素设置为表格显示
-->
<doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.box:before{
content:"";
display:table;
}
.clearfix:before,
.clearfix:after{
content:"";
display:table;
clear:both;<!--即可以解决高度塌陷，又可以解决父元素和子元素的垂直外边距不会重叠-->
}
.clearfix{
zoom=1; <!--兼容IE6-->
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
<div class="clearfix">
<div class="box1"></div>
</div>
<form action=""> <!--form标签中必须指定一个action属性，该属性指向的是一个服务器的地址，当提交表单时将会提到action属性对应的地址-->
<fieldset>
<legend>用户信息</legend>
用户名<input type="text" name="username"/><br/> <!--如果希望表单项中的数据会提交到服务器中，还必须给表单项指定一个name属性，name表示提交的内容-->
<label for="psw">密码</label><input type="password" name="password" id="psw"/><br/>
性别：<input type="radio" value="male" name="gender" checked="checked" id="male"/><label for="male">男</label>
<input type="radio" value="female" name="gender" id="female" /><label for="female">女</label><br/>
</fieldset>
<!--单选按钮使用name属性进行分组,需要用户选择的表单项需要指定一个value属性，这样表单项的value属性自将会最终提交给服务器
checked默认选中-->
<fieldset>
<legend>用户介绍</legend>
爱好：<input type="checkbox" name="hobby" value="" checked="checked"/>足球
<input type="checkbox" name="hobby" value=""/>乒乓球
<input type="checkbox"name="hobby" value=""/>篮球<br/>
<select name="star" >
<optgroup label="男">
<option value="" selected="selected">gh</option> <!--下拉列表的name属性指定给select，value属性指定给option,multiple表示多选-->
<option value="">fj</option>
<option value="">sf</option>
</optgroup>
<optgroup label ="女">
<option value="">sj</option>
<option value="">dr</option>
</optgroup>
</select><br/>
自我介绍：<textarea name="info"></textarea>
</fieldset>
<input type="submit" value="注册"/>
<input type="reset"/>
</form>
</body>
</html>
版权声明：本文为shiranjiu原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。