目录
正文
一、html的基本语法和文档结构
html即超文本标记语言hypertext markup language，最新版本是html5系列、语法上由标签和属性的键值对以及多层嵌套结构组成。比如，这是一个典型的html5结构：
<!DOCTYPE html>
<html lang="语言">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
正文
</body>
</html>
二、标签
这些标签的用法可以在w3c标准手册上找到；MIME type可以在计算机->注册表->HKEY_LOCAL_MACHINE->SOFTWARE->Classes中找到，进入注册表还可以是命令行输入regedit。
1.文本
del、ins、h1到h6、p、hr、a、abbr、address、pre、blockquote、strong、i、b、sup、sub、bdo、br
2.图像
canvas、
3.列表
ol、ul、li、dl、dt、dd
4.表格表单
input、form、fieldset
5.多媒体
video、audio、object、param、source、embed
6.容器
div、span、figure、fieldset
7.控件
<a/>的href的内容可以使网址，当前站点中的html页面名称，#id值、做锚点
command、progress、details、meter、a
8.特殊符号
|
© |
版权 |
|
|
空格 |
|
< |
小于号 |
|
> |
大于号 |
|
≶ |
不等于 |
|
¥ |
人民币 |
|
" |
双引号 |
|
& |
& |
|
® |
注册商标圈R |
|
→ |
左到右箭头 |
|
↓ |
上到下箭头 |
|
<!-- --> |
注释 |
三、属性
1.标签属性
标签属性会随着标签的不同而不同，w3c标准手册会有具体的说明
2.标准属性
|
class |
类，可以使用多个类、之间用空格分隔 |
|
contenteditable |
内容是否可编辑，取值true或false |
|
contextmenu |
仅火狐浏览器支持，右键显示添加的元素 |
|
dir |
对齐方式 |
|
draggable |
是否可以拖动 |
|
id |
定义id，用来唯一标示一个东西 |
|
irrelevant |
|
|
lang |
语言，可以选择en英文、fr法语、zh-cn中文、ar阿拉伯语等 |
|
ref |
|
|
registrationmark |
|
|
tabindex |
定义tab键的切换顺序，数值从1开始 |
|
template |
|
|
title |
鼠标移上去时出现的提示 |
3.事件属性
|
onabort |
|
|
onbeforeunload |
|
|
onclick |
点击触发 |
|
oncontextmenu |
|
|
ondblclick |
|
|
ondrag |
拖动时触发 |
|
ondragend |
|
|
ondragenter |
|
|
ondragleave |
|
|
ondragover |
|
|
ondragstart |
|
|
ondrop |
|
|
onerror |
|
|
onfocus |
获得焦点时触发 |
|
onkeydown |
|
|
onkeypress |
|
|
onkeyup |
|
|
onload |
加载时触发 |
|
onmessage |
|
|
onmousedown |
|
|
onmousemove |
|
|
onmouseover |
|
|
onmouseout |
|
|
onmouseup |
|
|
onmousewheel |
|
|
onresize |
浏览器窗口大小改变时触发 |
|
onscroll |
|
|
onselect |
|
|
onsubmit |
|
|
onunload |
四、css的引入
html的历史显然要早于css；css即层叠样式表，引入css的目的是实现页面内容和表现分离、方便页面维护；css也可以在手册中找到具体的用法。
1.内联样式
比如<p style=”…”></p>
2.内部样式表
在页面中定义样式<style type=”text/css”>…</style>，…中也可以引入外部样式@import url(“…”);
3.外部样式表
在页面外定义样式、在页面中引入<link rel=”stylesheet” type=”text/css” href=”…”/>
五、css的选择器
用类选择器结合其他选择器说明一段html代码块的样式，是种好的做法；如果有冲突、页面将适应最精确的选择器，不冲突页面在效果上叠加
|
通用 |
*开头，匹配任意符合的情况 |
|
标签 |
标签开头 |
|
属性 |
选择具有某个属性的对象 |
|
包含 |
比如选择器0 选择器1{}，表示选择选择器0下面的选择器1 |
|
子对象 |
比如body>p{…}，选择body的直接后代p |
|
id |
#开头，适合用于固定的对象，比如网页模板的设计 |
|
类 |
标签.选择器{…}、.选择器{…}，选择某些class符合的对象 |
|
分组 |
选择器间逗号分隔统一定义 |
|
相邻 |
标签0+标签1{…}，选择标签0后一个标签1 |
|
同级 |
标签0~标签1{…}，选择标签0后面同级的标签1 |
|
伪类 |
选择器:伪类{…} |
六、css属性的运用
在参考手册中css属性有着非常详细的介绍，但是要考虑的是怎么用这些属性解决遇到的问题；可以先将margin、padding初始为0，再根据先后顺序写需要的选择器；通过box-sizing（有兼容性要求）设置盒式模型，怪异的盒式模型在一些情况下可能会实用些
1.对齐
长度一样、方向一致才有可能对齐。比如登录页面用width限定输入框提示文字的长度而且文字的方向都向右，这样在列的方向上就都能对齐。
2.换行
(1)用br标签，用在文字上可能会好些
(2)上面内容是浮动，一个属性是clear:both;的div能够实现换行
2.居中
(1) margin: 0 auto;，可以使div居中、前提是div的宽度不是全屏
(2) position:relative;left:50%;margin-left:div一半的距离;，也可以实现div的居中
(3) text-align:center;，标签中的行内元素（比如文字）居中，但是无法使标签本身和块级元素居中
(4) 设置height等于line-height，上下垂直居中，设置单行文本居中时比较常见
(5) 设置vertical-align实现垂直居中，前提是使用表格
3.溢出处理
溢出会破坏容器和页面布局，所以一定要选择合适的处理办法，关于overfow属性在参考手册上有非常具体的介绍。
4.布局
(1)网页结构控制
布局中的定位：relative相对自己原来应该在的位置、absolute相对已经定位的祖先元素、fixed相对窗口，并结合top、left等属性来定位自己的位置
①div结合float属性进行布局
这种办法兼容性强，缺点是div的底部不能自动对齐
②div结合display:box;进行布局，box有兼容性要求
盒子是垂直排列，盒子中的div水平排列
③div结合columns属性，columns有兼容性要求
主要用于div中的文字排版，不适合运用于整个页面
④框架集
这种布局一般要结合javascript来使用，缺点是页面框架固定、不够灵活
(2)页面中的元素
①图片
a.图片的相框可以用容器的padding结合box-shadow来做；图片说明和img嵌在一个容器中（比如a标签，设置为浮动left），并将img设置为block显示，可以得到比较好的效果。
b. 一种全局图片背景的实现办法，固定网页背景，position:fixed; height:100%;100%;
②导航栏
对li标签用浮动可以得到一个粗糙的页面导航条，后面再进行加工直到出现想要的结果
七、特效
经常是结合伪类来使用，或者用javascript事件进行触发
1.二维平面变换
(1)css属性
|
transform:rotate(); |
旋转 |
|
tansform:scale(); |
缩放 |
|
transform:translate(); |
平移 |
|
transform:skew(); |
错切，效果上是skewx()和skewy()的叠加 |
|
transform-origin |
定义对象的变换原点 |
(2)兼容性
|
标准属性 |
css标准 |
|
-webkit-标准属性 |
Webkit引擎的浏览器，谷歌、世界之窗 |
|
-moz-标准属性 |
Mozilla引擎的浏览器，火狐 |
|
-o-标准属性 |
Presto引擎的浏览器 |
|
-ms-标准属性 |
微软IE9 |
2.三维平面变换
css中设置观察者距离perspective，设置transform-style是三维空间，运用三维空间中的css属性；其他和二维平面的变换类似
3.渐变过渡
必须要设置的是过渡属性transition-property，然后选择设置过渡时间、延迟时间等属性
4.媒体查询
媒体查询的使用内容很丰富，比如查询屏幕或设备显示的方向、尺寸等内容来限制引入的资源，最常用的可能是查询屏幕尺寸动态设定css样式，比如：
@media all and (min-height:300px) and (max-height:500px){
body{color:#f00;}
}
5.帧动画
注意兼容性；使用animation:…;，之后定义需要的帧动画；多个动画之间的先后顺序可以通过时间的延迟的决定；如果动画的效果不好，不妨尝试其他动画过渡的函数
@keyframes ball
{
/*定义帧中每一个时间段的css效果*/
0% {left:0; top:0;}
25%{left:200px; top:0;}
50%{left:200px; top:200px;}
75%{left:0; top:200px;}
100%{left:0; top:0;}
}
八、附录
1.素材网址
|
http://hao.uisdc.com |
素材 |
|
http://huaban.com/ |
素材 |
|
https://500px.com/ |
素材 |
|
http://www.w3.org/ |
W3C官网 |