****是重要，####是少用（这些都是我学的过程的一些笔记，记下来自己也可以复习和供需要的朋友学习，要是有不对的地方望指出，谢谢谢谢。）
一：html(css为主，html为辅，css比html强大多得多)
1）文字和段落
设置页面的边距的，由上下左右的距离所控制，想写的话就是分别是<body topmargin=0
leftmargin=20 rightmargin=20 bottomnargin=0 >
2）字体
<br>表示回车换行，<p>是会自动换行
显示块级标签div无论有多少都会占一行，内联标签span只会占它本身的字符串的位置（从左至右）
注释是<!-- -->
想打出<>得写出<和>空格是
<b>是加粗<i>是斜体<u>是下划线
<tt>是打印机风格
<code>和<kbd>都是等宽文字设置，1比较宽，2是窄
****<pre>很好用，比较用来显示古诗，可以很形象的表现出来
####<blockquote>是缩进，一般很少用
####比较少用<ruby>是表示被说明的文字，而<rt>是文字的标注，这2个一般都是同时使用，比如我用<ruby>打出 吴东瑜心地善良 ，但是外国的朋友开不懂中文，我就在上面备注一下英语就是<rt>了，就是<ruby>吴东瑜<rt>wudongyu</rt><ruby>
****3）超链接，一般分为绝对路径（http://127.0.0.1/index）和相对路径(同一目录直接输入链接的文档，上一目录要先输入../再输入目录名，下个目录先输入目录名，再加/)和根路径(一般不用，以"/"开头，后面加文件路径/donwnload/index.html)
超链接是最经常用的<a href='http://www.baidu.com'>要打开百度，请点击</a>，一般都是强力建议使用绝对路径
图像链接,就是点击图片来跳转，一般格式为
<p><img src="1.jpg" width="50" height="50" usemap="#map" alt=""></p>
<p><map name="map">
<area shape="rect"<!--img是图片路径，map表示插入图像映射，area是图片映像区域，coords是感应区域坐标，href链接网站位置-->
coords="2,9,149,40"
href="http://www.baidu.com"
alt="">
</p>
****4)表格的运用
表格不外乎就3个命令，第一个是<table>，但是一般都会在<table border="1">,是边框粗细问题，cellspacing="5"是设置间距，然后就可以在里面建立格了，<tr>是行<td>是列，在写td的时候也可以加上align="center（居中）"valign="middle（中间）"，记住是先有行再列。在写<table>之后也可以加上标题，用<caption> <td rowspan="2">可以实现跨行，2就是占用2行 colspan="2"是跨列。
5)层的运用(得懂，为什么不重要呢，因为用css来写比较好，所以理解了解就好)
不外乎就是<div id="Layer1" style="position:absolute; left:29px;z-index:1;top:12px;width:165px; height:104px;layer-">position是绝对定位，left和top是左边距和顶端间距，width和height是宽度和高度，z-index是属性定义,最后是颜色</div>
也可以在<div>写好了之后再后面写上<img src="1.jpg" width='100' height:"50" alt="">来弄成图片
6)框架的运用(就是在一个网页显示多个网页的技术，通过超链接来为框架之间建立内容联系，从而实现页面导航功能)
****7)表单的运用<form>
--表单标记的基本语法
<form name="" method="" action="" enctype="" target="">其中name是表单的名称，method是设置表单的发送方式，可以是post和get，其中get不会传到服务器，post会，action是表单的处理程序，就是发送到哪里去，enctype是编码方式，target是显示目标,这个很少用</form>
列子<form name="liezi" method="post" action="www.baidu.com" enctype='text/plain'></form>
--信息的输入<input>
<input name="text" type="text" maxlength="" size="" value="">
，建议在写的时候type和name写一样，其中，name是显示插入的控件的名称，type是类型，比如单行文本框text,就是明文输入，
比如密码输入框password，
文件域file，
插入复选框checkbox,
单选按钮radio，就是有个小圆点
标准按钮button 提交按钮submit，
重置按钮reset
插入文字域textarea ，可以设置rows列数和cols行数
插入图像域image ×要在选项添加个src="url"
--<select name='' size=''>下拉菜单，name是名称，size是一次显示几个
二：css(其实就是在title写好了之后写上
<style type="text/css">
body {font-size:50px;font-family:"隶书"}
</style>)
然后body也就是页面的字体就会发生变化 想让段落发生变化就用p，也可以自己定义）
****1)css”类“选择符类型
比如要设置2个不同的文字颜色的段落,一样就是在
<style type="text/css">#也可以用.来表示
p.red{color:red}
p.blue(color:blue)
</style>
用的话就
<p class="red">hh
<p class="blue">aa
****2)id选择符，列子依然是字段字体颜色
<style type="text/css">
#wdy{color:red}
</style>
用的话就
<p id="wdy">wwww
3)还有包含选择符和伪类
比如table b{font-size:11px}就只是说明表格b内的字号为11像素，对表格外的字号没有影响
4)插入css样式表有4种，分别为链接外部样式表，内部样式表，嵌入样式表,导入外部样式表
****5)文本的精细排版（上面说了怎么用选择符类型来写css，所以现在在操作的时候就省略啦）
css可以调整字符间距，用letter-spacing，比如
.h{font-family:黑体;font-size:20px;font-weight:bold;letter-spacing:normal;text-align-center} #其中的font-weight是粗体，字符间距为正常normal，设置成5px,就是间距为5。
word-spacing是单词间距，只可以单词，
text-decoration是文字修饰选项有underline添加下划线,overline上划线，line-through删除线，blink文字闪烁效果，但是不兼容,none是默认值
text-align文本排列方式，很熟悉，经常用来center,text-align:选项有left,right,center,justify(2端对齐)
text-indent段落缩进 选项是长度或者%
line-height调整行高
text-transform英文大小写 uppercase全大写，lowercase全小写，capitalize开头大写
****6)颜色和背景
字体颜色直接color:#ffffff,或者color:red,其他甚么函数值就知道就好
背景颜色background-color:选项一样
****插入背景图片background-image:url("/ss/ss")
插入背景附件background-attachment用来设置背景图片是否跟随滚动条移动而移动，scroll是跟，fixed是不跟
设置重复背景图片background-repeat选项repeat水平和垂直平铺，repeat-x水平平铺，repeat-y垂直平铺no-repeat不平铺
*****设置背景图片位置background-position
*****7）边框和边距
********边框属性包括边框样式，边框颜色，以及边框宽度，每一个网页都可以看成一个大方框，在这里大方框里面又有小方框
设计边框样式border-style，因为边框为4条组成的，所以就有5条边框的样式，看语法代码就知道分别代表甚么，分别为：
border-style:
border-top-style：
border-bottom-style:
border-left-style:
border-right-style:
边框样式属性取值说明：
none 不显示
dotted 点线
dashed 虚线
solid 实线
double 双直线
groove 凹型线
ridge 凸型线
inset 嵌入式
outset 嵌出式
****边框的宽度border-width
语法为：
border-width:关键字(thin)|长度(xp)
border-top-width:
border-bottom-width:
border-left-width:
border-right-width:
关键字：
thin 细边框
medium 中等边框，一般默认
thick 粗边框
#一起写的话是这样的
.p2{
border-style:dotted solid double;border-width:5px 10px 15px 20px
}
<p class="p2">段落边框的上边框为点线，左右为实线，下边为双直线,边框宽度为上右左下</p>
****设置边框颜色border-color
border-color:aqua red blue yellow #上右下左分别为水绿，红 蓝 黄
**************边距
基本语法pt=类样式ml
margin-top：10px
margin-bottom:10pt
margin-left:
margin-right:
margin:
********填充(填充属性是用来控制边框和其内部元素之间的空白距离)
padding-top:
padding-bottom:
padding-left:
padding-right:
padding:
----end-----
补充一些高级运用
1.设置图片热区链接
<img src="图片地址" usemap="#映射图片名称" alt="">
<map name="映射图片名称">
<area shape="热区形状" coords="热区坐标" href="url">
</map>
其中：shape值有rect，circle，poly分别代表矩形，圆形，多边形,coords是坐标
2.插入多媒体文件<embed>
语法
<embed src="多媒体文件位置" width="文件宽度,都可以用数字和像素表示" height="文件高" autostart="true|false，设置自动播放还是不要" loop="true|false，设置循环播放要不要"/>
列子：
<embed src="我以为.mp3" autostart="true" loop="true"/>
3.
1)设计列表样式 list-style-type
值：disc (圆点，为默认值)
circle (空圆点)
square （小黑方块）
decimal (按数字123排序)
lower-roman (按小写罗马)
upper-roman（大写罗马）
lower-alpha(大写字母)
upper-alpha（小写字母）
none (不显示)
列子:
.p1{list-style-type:upper-roman;}
**2)添加列表图像 list-style-image
基本语法: list-style-image:none|url
列子:
.p1{font-size:16pt;list-style-image:url(dwuhu.png)
3).还有列表位置缩进 list-style-position|outside|inside
4.定位方式（主要包括绝对定位，相对定位，静态定位，绝对定位是以网页的左上角为参照点，而相对定位是以其相近的元素为参照点，静态则没有特殊指定，是以网页元素定位的默认值）
语法：
position:static|absolute|relative
绝对定位：
.d1{background-color:yellow;position:absolute;top:60px;left:40px}
5.
1)浮动 float
语法：float:left|right|none
运用起来很简单：
img{float:left;}
<img src="/1.jpg" alt="float">
2)清除 clear(和浮动对立)
clear:left:right|both|none (left是不允许某元素的左边有浮动元素，right是不允许右边，both是都不要，none是都允许)
6.
**1）层空间 z-index(层空间的话就是立体的东西，如果把网页看成一个立体的物体的话，左到右是x轴，上到下是y轴，而z就是前到后来，所以z轴属于三维空间的z轴，值越大，层就越处于上层，值低，则越下层，1为最下层。)
语法
z-index:数字|auto
**2）层栽切 clip(是css的一种栽切的方法，将需要的留下，不要的去掉，栽切的部分一定是一个矩形区域，而矩形区域的大小则上右下左4个顶点的坐标来确定)
语法
clip:rect{(上 右 下 左)} |auto
列子
.d1{font-family:黑体;position:absolute;top:45px;left:20px;z-index:1}
.d2{position:absolute;top:100px;left:35px;font-family:楷体;font-size:14pt;color:red;z-index:2;clip:rect(10px 6cm 80px 12px)}
3)层大小 width height
语法 width:auto|长度
height:auto|长度
4)层溢出 overflow(有层大小，那溢出的部分呢，所以使用溢出属性来控制超出的范围的内容)
语法:overflow:visible|hidden|scroll|auto (visible是扩大层的容纳范围，将所有内容显示出来，hidden是隐藏超出的部分，scroll表示一直显示滚动条，auto当层内容溢出时，就显示滚动条)
列子：
.p1{position:absolute;top:80px;left:35px;font-family:楷体;font-size:14pt;color:red;z-index:2;width:250px;height:90px;overplow:scroll}
.p2{position:absolute;top:18px;left:30px;z-index:1;height:230px;width:210px;overplow:hidden}
<div class="p2"><img src="1.png" alt=""></div>
<div class="p1">111111111111111111111111111111</div>
5)层可见 visibility
语法：visibility:visible|hidden|inherit (visible可见,hidden隐藏,inherit不可见)
7.
1）鼠标指针 cursor (当鼠标移到某个对象元素上，所显示的鼠标指针不同)
语法:
cursor:auto|关键字|url(图像位置)
关键字：auto 自动获得浏览器默认
corsshair 精确定位
default 正常
move 移动
等
8.滤镜
语法
filter:滤镜属性(参数)
1）属性：alpha(透明和渐变效果)
参数：opacity（代表透明等级，0到100,0完全透明，100不透明）
还有很多参数
2）blur(快速移动的模糊效果)
。。。想更详细的运用的话可以在w3c等网站查看
www.w3cschool.cn/cssref/css3-pr-filter.html
http://www.runoob.com/cssref/css3-pr-filter.html
