HTML（XHTML标准+CSS）学习笔记（不定时更新）
以下为HTML+CSS学习笔记，大家可以参考下
如果觉着查手册烦，可以查我这个
本版为1.0.0.1001版，尚未整理
日后等我学完了或访问量大的时候，我会整理一下的
如果我有写错，请各位大神批评指正
1.<fontcolor="颜色"size="数值" face="字体">文本内容</font>
注在"size"属性中，如果填写的数值大于7，将作为7处理，建议填写的数值为1,2,3,4,5,6,7
2.<br />换行不换段
3.<hr />分隔符（或水平直线），同时有换行效果
宽度 <hr width="数值或百分数" />
粗细 <hr size="数值或百分数" />
实体线 <hr noshade="noshade" />
颜色 <hr color="颜色"/>
注（1）在"width"属性中，如果直接输入数值，即表示一个像素（px），这是一个绝对数值，不会因视窗（或窗口）宽度的改变而改变，但如果超出屏幕范围，将会出现滚动条
（2）在"width"属性中，如果输入百分数，即表示一个百分比，这是一个相对数值，会因视窗（或窗口）宽度的改变而改变
（3）在"size"属性中，如果直接输入数值，即表示一个像素（px），这是一个绝对数值，不会因视窗（或窗口）高度的改变而改变，但如果超出屏幕范围，将会出现滚动条
（4）在"size"属性中，如果输入百分数，即表示一个百分比，这是一个相对数值，会因视窗（或窗口）高度的改变而改变
（5）在"size"属性中，属性数值越大，线越粗
（6）如果设置"noshade"属性，该水平直线将呈现为纯色状态（2D效果）；如果没有设置，该水平直线将呈现为双色凹槽状态（3D效果）
4.建议所有标签，值，属性名，都是英文小写
5.标签与属性间用空格，属性与属性间用空格
6.标签的基本样式
双标签 <开始标签>文本内容</结束标签>（如1.）
<开始标签 属性="值" />文本内容</结束标签>
单标签 <标签 />（如2.，单标签建议有“ /”）
<标签 属性="值"/>
7.所有标签要有结束
8.基本网页结构
<html>
<head>
<title>标题</title>
</head>
<body>
正文
</body>
</html>
9.meta标签（SEO搜索引擎优化，文件信息定义）
meta标签放在<head></head>中
<head>
<metaname="keywords" content="站点关键字,站点关键字（用英文逗号","隔开）" />
<metaname="description" content="站点描述" />
<metaname="author" content="作者" />
<metahttp-equiv="content-type" content="text/html;charset=网站编码，如gb2312;utf-8;gbk等" />
<metahttp-equiv="refresh" content="跳转秒数如2;（用英文分号";"隔开）URL=地址" />
</head>
10.在编辑网页时，建议使用 Edit Plus 或 NotePad++ ，不要使用 记事本 （主要防止乱码）
11.注释代码，主要用于开发，用户不会看到
<!--注释文本-->
12.body主体部分的简单代码（可用DIV+CSS代替）
背景颜色 <body bgcolor="颜色">主体</body>
背景图像 <body background="背景图像">主体</body>
文本颜色 <body text="颜色">主体</body>
普通链接文本颜色 <body link="颜色">主体</body>
已访问过的链接文本颜色 <body vlink="颜色">主体</body>
激活（正在点击）链接文本颜色 <body alink="颜色">主体</body>
文本贴近浏览器左边界（即文本左边距）<body leftmargin="数字（如不填，将为默认值）">主体</body>
文本贴近浏览器右边界（即文本右边距）<body rightmargin="数字（如不填，将为默认值）">主体</body>
文本贴近浏览器上边界（即文本上边距）<body topmargin="数字（如不填，将为默认值）">主体</body>
文本贴近浏览器下边界（即文本下边距）<body bottommargin="数字（如不填，将为默认值）">主体</body>
13.浏览器先显示背景颜色，再显示背景图像。如果背景图像不透明，将会盖住背景颜色，即无法看到背景颜色
14.颜色的格式（每行一种）
rgb(x,x,x)
#xxxxxx
colorname
常用颜色格式
（颜色名称英文十六进制）
白色 white #FFFFFF
红色 red #FF0000
蓝色 blue #0000FF
黑色 black #000000
绿色 green #00FF00
灰色 grey #999999
15.HTML元素，HTML标记，HTML标签都是一样的
16.路径
（1）绝对路径提供目标文档的完整主机名称，路径信息及文档全称
（2）相对路径从当前文档开始的路径
如果当前文档和目标文档位置平行，则直接书写目标文档全称
如果当前文档和目标文档所在文件夹位置平行，则书写为文件夹名称/目标文档全称
如果当前文档所在文件夹和目标文档位置平行，则书写为 ../目标文档全称
（3）根相对路径从站点根目录开始的路径，以"/"开头
注 "../"表示向上一级（如"../../"表示上级的上级目录）
17.HTML文件名不建议含有中文（建议 test.html，不建议测试.html）
18.修饰文本的简单标签
加粗 <b>文本</b>
语气强调并伴有加粗效果 <strong>文本</strong>
倾斜 <i>文本</i>
语气强调并伴有倾斜效果 <em>文本</em>
下划线 <u>文本</u>
删除线 <s>文本</s>
上标 <sup>文本</sup>
下标 <sub>文本</sub>
居中（已被废弃） <center>文本</center>
标题（伴有换行，加粗，语气强调，改变字号的效果） <hX>文本</hX>（X取1,2,3,4,5,6）
注（1）"hX"标签通常比"strong"标签语气更强烈，"strong"标签通常比"b"标签语气更强烈；且搜索引擎注重语气是否强烈，虽然看上去"strong"标签与"b"标签的效果是类似的
（2）"hX"标签的对象是段落，而"font"标签的对象是一切文本。即通常在"<p>段落文本</p>"前插入"hX"标签；在任何文本的两侧都可以加上"<font>文本<font>"
（3）"h1"标签比任何一个其他的"hX"标签的权重大。在"hX"标签中，X的取值越小，它的权重越大，并不建议取为大于4的数值，即X的建议取值为1,2,3,4
（4）在"hX"标签中，不建议使用"align"属性，即不赞成使用"<h1>标题文本</h1>"等类似的形式
（5）在XHTML1.0中不允许"align"属性出现在"hX"标签中，但在HTML4.01中却允许（尽管允许，但仍不建议）
19.段落标签 <p>段落文本</p>
对齐方式 <p align="left,center,right">段落文本</p>
20.在XHTML1.0中，所有标签的属性都必须有一个值，如果没有，可以使用属性名代替
21.块引用（使文本缩进） <blockquote>文本</blockquote>
引用地址 <blockquote cite="地址">文本<blockquote>
22.预格式化 <pre>文本</pre>
注（1）在"pre"标签中的一切代码或文本（包括图像代码）都将作为普通文本处理，不会有任何的作用。（如：在"<pre><h1>123</h1></pre>"中，仅显示"<h1>123</h1>"，不会显示含有效果的"123"）
（2）在"pre"标签中的一切代码或文本都将呈现默认的文本形式。如：你在两行间按了回车，但却没有输入"br"标签，浏览器仍会换行
23.特殊字符（或转义符，或转义码）
空格
版权号 ©
注册商标 ®
“ "
& &
< <
> >
注（1）在源代码中，通常文本的第一个文字前的空格在浏览器中无效，两个文字间的空格仅有效1个。如果想要更多空格，可以使用"pre"标签或" "特殊字符
（2）不建议使用键盘上的空格键，建议使用" "特殊字符
24.列表标签
（1）有序列表
<olstart="列表起点（数值）"type="项目符号类型">
<li type="项目符号类型">文本</li>
……
</ol>
有序列表项目符号类型
阿拉伯数字1,2,3,4,5,6[默认] 1
英文小写字母a,b,c,d,e,f a
英文大写字母A,B,C,D,E,F A
大写罗马数字Ⅰ,Ⅱ,Ⅲ,Ⅳ,Ⅴ,Ⅵ I
小写罗马数字��,��,��,��,��,�� i
注如果在无序列表的type属性中输入这些值，浏览器会按照有序列表显示（但仍为无序列表）
（2）无序列表
<ul type="项目符号类型">
<li type="项目符号类型">文本</li>
……
</ul>
无序列表项目符号类型
空心圆○ circle
实心圆●[默认] disc
实心正方形■ square
注如果在有序列表的type属性中输入这些值，浏览器会按照无序列表显示（但仍为有序列表）
（3）定义列表
<dl>
<dt>文本标题1</dt>
<dd>文本内容1</dd>
<dd>文本内容2</dd>
<dt>文本标题2</dt>
<dd>文本内容1</dd>
<dd>文本内容2</dd>
</dl>
注 "dt"标签表示一个项目，插在"dl"标签中；"dd"表示上一个项目的子项目，插在"dt"标签中
25.图像 <img />
插入 <img src="路径"/>
替代文本（当图像无法显示时的替代文本） <img alt="文本" />
标题（鼠标悬停时显示的文本） <img title="文本" />
宽度 <img width="数值或百分比" />
高度 <imgheight="数值或百分比" />
边框宽度 <img border="数值" />
垂直边距（即图像顶部与底部到文本或边界的距离）（需设置"align"标签） <img vspace="数值" />
水平边距（即图像左侧与右侧到文本或边界的距离）（需设置"align"标签） <img hspace="数值" />
对齐方式（1）<img align="left（图像靠左，文本靠右）"/>
（2）<img align="right（图像靠右，文本靠左）"/>
（3）<img align="top（文本垂直居上）" />
（4）<img align="middle（文本垂直居中）"/>
（5）<img align="bottom（文本垂直居下[默认]）" />
WEB最常见的图像格式（1）GIF格式（图形交换格式）能保存256种颜色，支持透明色，支持动画效果
（2）JPEG格式（联合图像专家组）能保存1670万种颜色，不支持透明色，不支持动画效果
（3）PNG格式（网络可移植格式）能保存1670万种颜色，，支持透明色，不支持动画效果
注当图像有"alt"属性，没有"title"属性时，图像仍保留"title"属性，且"title"属性的值与"alt"属性的值是相同的
26.表格 <table>表行</table>
表行 <tr>文本内容或表列</tr>
表列 <td>文本内容</td>
标题栏同时伴有文本加粗与居中效果 <th>文本内容或表行或表列</th>
表格宽度 <table width="数值或百分比">表行</table>
表格高度 <table height="数值或百分比">表行</table>
表格背景颜色 <table bgcolor="颜色">表行</table>
表格背景图像 <table background="路径">表行</table>
表格边框宽度 <table border="数值">表行</table>[如果未设置该属性，值默认为0]
单元格边距（即单元格与其内容的边距）[如果未设置该属性，值默认为2] <table cellpadding="数值">表行</table>
单元格间距（即单元格与单元格的间距）[如果未设置该属性，值默认为2] <table cellspacing="数值">表行</table>
表格边框颜色 <table bordercolor="颜色">表行</table>
表格边框亮色（即单元格的下边与右边和整个表格的上边与左边，需要"border"属性的值大于等于1） <tablebordercolorlight="颜色">表行</table>
表格边框暗色（即单元格的上边与左边和整个表格的下边与右边，需要"border"属性的值大于等于1） <tablebordercolordark="颜色">表行</table>
表格对齐方式 <tablealign="left,center,right">表行</table>
单元格宽度 <td width="数值或百分比">文本</td>
单元格高度 <td height="数值或百分比">文本</td>
单元格背景颜色 <td bgcolor="颜色">文本</td>
单元格背景图像 <td background="路径">文本</td>
单元格文本水平对齐方式 <tdalign="left,center,right">文本</td>
单元格文本垂直对齐方式 <tdvalign="top,middle,bottom">文本</td>
单元格行合并 <td rowspan="数值">文本</td>
单元格列合并 <td colspan="数值">文本</td>
单元格设置不换行 <td nowarp="nowarp">文本</td>
表行宽度 <tr width="数值或百分比">文本</tr>
表行高度 <tr height="数值或百分比">文本</tr>
表行背景颜色 <tr bgcolor="颜色">文本</tr>
表行中所有单元格文本水平对齐方式 <tralign="left,center,right">文本</tr>
表行中所有单元格文本垂直对齐方式 <trvalign="top,middle,bottom">文本</tr>
注（1）"tr"标签插在"table"标签中，"td"标签插在"tr"标签中，"th"标签也插在"tr"标签中
（2）细线表格的公式 border=0，bgcolor=细线颜色，cellspacing=细线粗细
（3）"th"标签与"td"标签的权限等级是相同的
本文出自 “IT团队” 博客，转载请与作者联系！