最近看了看PHP的东西，看之前又翻 了翻前端页面脚本的知识。略微整理，放在这里，权作记录。大家如果要看看，也权当基础参考资料。
本文知识参考：
《HTML与CSS入门经典 第七版》（美）Dick Oliver； Michael Morrison
《CSS网站布局实录--基于web标准的网站设计指南 第二版》李超
--------------------------------------------------------------------------------------------------
一.首先要知道的东西。
XHTML编程时：
1.有标记和属性两部分
2.不区分大小写，建议全部使用小写，规范化
3.多个属性使用空格分开，每个属性几乎都是可选的，属性的值使用双引号，规范化【可以使用单引号、双引号、不加引号（使用双引号）】eg.<font color=“red” size=“7”>
4.注释方法： <!-- 注释内容 -->
注意：在注释中不能再有注释，在注释掉的标记之后，要保证还是一个结构完好的文档。
5.使用回车或空格进行代码排版，任何回车或空格在源代码中都不起作，如果需要空格需使用字符实体。
字符实体：以&开头，一个实体名或是使用#号和一个体编号，以分号;结束
eg.< 就是 < 或 <
> 就是 > 或 >
二.大体结构：
<html>
<head>
这里是头信息，不会显示在浏览器中，包括基本的描述，整个网页的公共属性
<title>网页标题</title>
显示在标题栏中，有利搜索引擎
<base>
用于设定浏览器中文件的绝对路径，网页中的文件只需要写下文件的相路径即可，这个路径就是base中指定下的路径
<link rel="stylesheet" type="text/css" href="test.css">
用来链接css文件
<meta name="keywords" content="frank,blog">关键词
<meta name="description" content="这是frank的博客">描述
<meta name="robots" content="index">机器人
<meta name="author" content="frank">作者
<meta name="copyright" content="2011 frank">版权
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="refresh" content="3000;url=http://www.baidu.com">
<meta http-equiv="expires" content="0">
<meta http-equiv="Windows-Target" content="_top">
<meta http-equiv="Page-Enter" content="revealTrans(Transition=5,Duration=1.000)">
</head>
<body>
是网页文件的主体部分,正文 ：文字、图片、链接、表单等
</body>
</html>
文档类型定义DTD：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
三.标签：
格式标签：
<br /> 换行
<p> 段落
<hr /> 水平分隔线
<ul><li> 无序列表，可以加属性style="list-style-style:disc",disc实心圆圈/circle空心圆圈/square实心方框三种
<ol><li> 有序的列表，可以加属性style="list-style-style:upper-roman",upper-roman罗马数字/upper-alpha大些字母/lower-alpha小写字母三种
通常都使用图片替换列表序号符
不常用：
<center> 居中
<pre> 保留文字在源代码中的格式
文本标签：
<hn>如：h1 h2 h3
调整字体尽量使用css：例子：
<p style="font-family:arial;font-size:12pt;font-weight:bold;color:red;"></p>
对部分内容进行格式化，使用<div></div>或者<p></p>,<p>可以调整整个段落，对每一行细微调整使用<span></span>
<b>粗体，同<strong>
<i>斜体，同<em>，以上二者尽量都使用后者
不常用的有：
<u>
<sub>上标<sup>下标
<font><tt><cite><small><big>
链接：
链接网页内部：
<a id="abc"></a>然后<a href="#abc">点我到abc看</a>
链接网页：
<a href="abc.html">abc</a>
链接到另一网页特定部分：
<a herf="abc.html#xyz">到abc网页的xyz部分看</a>
链接到email地址：
<a href="mailto:[email protected]">send me a message</a>
主题和邮件地址之间使用?，主题和内容之间使用#的字符实体&
<a href="mailto:[email protected]?subject=book&body=when is the next edition come out?">mail me</a>
也可以使用字符实体替换地址中的字母，防止垃圾邮件。
图像：
<img src="abc.jpg" alt="说明文字" />标准要求alt属性，图像不显示时可以看到alt中的文本，建议小图像不添加说明时可以使用空alt=""
图像链接：
<a href="abc.jpg"><img src="abc_sm.jpg" alt="abc" /></a>
水平对齐：
<div style="text-align:center"></div>
文本围绕图像：
<img src="abc.jpg" style="float:left" />
垂直跟文本对齐：
<img src="abc.jpg" style="vertical-align:middle" />有text-top、text-bottom、middle、baseline四种
指定宽和高：
<img src="abc.jpg" width="200" height="100">
使用图像本来大小像素值，如果使用的值比原图小或大，会通过浏览器压缩或放大图像，可能会失真。
颜色：
可以使用名称，有十几种：blank white red green blue yellow magenta cyan purple gray lime maroon navy olive silver teal 还可以fuchsia aqua
用处：网页背景颜色，文字颜色，链接颜色
<body style="background-color:teal;color:fuchsia">color指的是网页文本，页面中的文本还可以指定color来覆盖上面的颜色。
自定义颜色：
#rrggbb 红绿蓝三种
每一种的：00 33 66 99 CC FF 分别代表颜色深度的0% 20% 40% 60% 80% 100%
亮红色就是FF00000 蓝紫色660099 中灰色999999 深绿色003300
<body style="background-color:#FF0000;color:#003300">
注意：因为不同计算机显示环境不同，所以要尽量使用颜色名称。
使用背景图片平铺：背景图像在背景色之上覆盖
<body style="background-image:url(abc.jpg)">
平铺方法：默认是repeat,就是在x和y方向重复。有repeat/repeat-x/repeat-y/no-repeat
<body style="background-image:url(abc.jpg);background-repeat:repeat-x">
使用透明图像：gif或png，gif只支持一种透明颜色，png效果更好。
表格：
<table>
<tr>开始一行，<td>一个单元格，<th>一个表头的单元格（浏览器会居中并加粗文字），可以用任何数量的单元格，但是每行应包括相等数量的列,解决：使用colspan属性跨越多列。
<table>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
colspan跨越多列，rowspan跨越多行。<th colspan="2">A</th>
编写表格的html现在纸上画出草稿可以节省时间。
表格或单元格的背景颜色和背景图片：
<td style=""bankground-color:silver">
<td style=""bankground-image:url(abc.jpg)">
border:表格边框粗细
cellspacing:边框之间间距，单位像素
cellpadding:单元格中信息与四周的间距（会使表格放大或缩小），单位像素，0表示靠近边框
<table border="2" cellpadding="4" cellspacing="2">
css中，上述两项为border-spacing和padding，当前浏览器对css这两项属性意见不一，先暂时不使用。
CSS基础部分
布局属性：包括宽度，高度，边距，填充，对齐方式，或准确位置。
display:block; 有block,list-item,inline,none四种
width height,单位有点pt，像素px，英寸in，厘米cm，毫米mm，最好统一单位，如字体用pt，尺寸用px。
格式化属性：控制外观。
border:四周的一个可见的边框。
border-width:5px; 边框宽度
border-color:blue;
border-style:dotted; 有值：solid单实线,double双实线,dashed虚线,dotted点线,groove沟线,ridge脊线,inset内陷边框,outset外凸边框,none无边框(默认)
border-left,border-right,border-top,border-bottom单独为每一边设置边框
border:10px double red;border可以后接border-width、border-style、border-color
color:black;指的是文字颜色
bankground-color:orange;文字背景颜色
text-align:center;内容的对齐，有left、right、center
text-indent:12px;内容从左边的缩进距离
font-family:arial;逗号分隔优先顺序的字体
font-size:12pt;通常用点做单位
font-style:italic;斜体或正常
font-weight:medium;粗体程度
样式类class
<h1 class="abc">abc</h1>
h1.abc{font:36pt arial;}
<div class="abc">abc</div>
div.abc{font-size:12pt;}
几个不常用的格式化文本属性：
font-variant:small-caps; 小型大写字母，有small-caps和none两种
letter-spacing:5px;字母间距
word-spacing:10px;单词间距
text-transform:uppercase;自动转换字母大小写。none默认，uppercase转为大写，lowercase转为小写，capitalize首字母大写
链接外观：
四种链接状态：link,hover,active,visited
用伪类操作(使用冒号)：
a:link{
color:#19619A； 淡蓝色
font-weight:bold; 粗体
text-decoration:none; 去掉下划线
}
css代码注释：用于内部或外部样式表
/* css commment */
css技巧：
通用类：
.abc{font-weight:bold;} 作用于支持font-weight属性的所有abc类的标签
指定多个选择符：
a:link,a:visited,a:active{略}
混合样式类：
a.abc:link,a:abc:visited,a.abc:active{略}
a.abc:hover{略}
ID类：内容中指定所属ID类，样式规则中使用#开头规划样式，不鼓励这样做，因为XHTML要求一个网页中每个id属性是唯一的。
CSS布局知识：
相对定位：与原始位置相对的定位，原位置仍占位。具体定位的top和left是相对于父对象，即相对于“根据父对象定位好的它自身的本来位置”。
绝对定位：绝对定位是参照浏览器定位的，如果想依照父对象来绝对定位，需要加上一个父对象，并使其为相对定位，然后子对象绝对定位，这样控制。
position:
relative 相对
absolute 绝对
四个属性:right右边的边缘偏移，left左边的边缘偏移，top顶部边缘偏移，bottom底部边缘偏移。这四个属性用在绝对定位和相对定位时的情况不同。绝对定位时，是根据边缘对父元素边缘的距离；相对定位时，是元素边缘对本来相对位置的偏移。
绝对定位时可以重叠，z-index值大的在上面。
边距margin：针对元素周边空间
margin所有边距，margin-top上边距，margin-bottom下边距，margin-left左边距，margin-right右边距。单位是px和%，%代表的是相对整个页面的百分数
边距只显示在元素四周。
简化写法：一个值代表四周，两个值代表上下的和左右的，四个值按顺序代表上下左右。
eg.margin:5px 10%;
填充padding：针对元素内部空间
也是padding,padding-top,padding-bottom,padding-left,padding-right
水平对齐text-align:值有left,right,center,justify(两端对齐)
垂直对齐vertical-align:值有top,middle,bottom,text-top,baseline,text-bottom,sub,super。
二者都是相对父元素来说的，比如内联元素垂直对齐只是在同一行内来说。
文本与图像：
float:文本绕图像排列。值有left和right
clear:清除浮动。不绕图像排列。值有none，left，right，both
overflow:元素过小文字要溢出出的规则。visible自动扩大，hidden隐藏溢出的文本，scroll出现滚动条。
XHTML表单：
文本框：
Your first name:<input type="text" size="20" maxlength="30" name="firstname"/>
size:宽度为多少字符 maxlength:最多输入字符数
复选框：
<input type="checkbox" name="a1" checked="checked" />a1<br />
<input type="checkbox" name="a2" />a2
checked表示默认选择,元素和内容如果靠的太近，则加个空格(举例：……/> 内容)
超过两个时，name一样，value不同：
<input type="checkbox" name="abc" value="a1" checked="checked" />a1<br />
<input type="checkbox" name="abc" value="a2" />a2<br />
<input type="checkbox" name="abc" value="a3" />a3
单选按钮：
<input type="radio" name="abc" value="a1" checked="checked" />a1<br />
<input type="radio" name="abc" value="a2" />a2
选择列表：
<select name="abc" size="3" multiple="multiple"/>
<option selected="selected">a1</option>
<option>a2</option>
<option>a3</option>
</select>
size同时显示多少项，数字比项目少时出现滚动条
size=1时是下拉列表:
<select name="abc">
<option>visa</option>
<option>mastercard</option>
</select>
multiple可同时选择多项
文本区域（超过一行）：
<textarea name="comment" rows="4" cols="20">Please send more information</textarea>
提交：
默认submit和reset按钮：value为按钮上文字
<input type="submit" value="Place My Order Now!" />
<input type="reset" value="Clear This Form and Start Over" />
或使用自己的图像：<input type="image" src="abc.jpg" alt="Order Now!" />