静态页面
目录
正文
一、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%;width: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官网 |