以下为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.特殊字符(或转义符,或转义码)

空格  &nbsp;

版权号  &copy;

注册商标  &reg;

“  &quot;

&  &amp;

<  &lt;

>  &gt;

注(1)在源代码中,通常文本的第一个文字前的空格在浏览器中无效,两个文字间的空格仅有效1个。如果想要更多空格,可以使用"pre"标签或"&nbsp;"特殊字符

(2)不建议使用键盘上的空格键,建议使用"&nbsp;"特殊字符

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"标签的权限等级是相同的