[整理]初级CSS & HTML
HTML：
//预格式化：保留文字在源代码中的格式，页面中显示的和源代码中的效果完全一致。浏览器在显示其中的内容时，会完全按照其真正的文本格式来显示。
例如，原封不动地保留文档中的空白，如空格、制表符等。
//HTML中空格的显示：使用 或者加空格的时候将输入法设为全角。
//超链接：指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件或者一个应用程序。超文本链接是超链接的一种，是指用文字链接的形式来指向一个目标。
HTML文档类型:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//只有确定了正确的DOCTYPE，XHTML里的标识和级联样式才能正常生效。在HTML 1.0中有3种DTD声明可以选择，过度的Transitional、严格的Strict和框架的Frameset。使用严格的DTD来制作页面当然是最理想的方式，但对于没有深入了解Web标准的网页设计者，比较合适的是使用过渡的DTD。因为这种DTD还允许使用表现层的标识、元素和属性。
<!DOCTYPE html>：可以这样写而不用声明DTD。
基本结构：
<!--注释内容-->//注释标签用来在源文档中插入注释，注释会被浏览器忽略。
<html>//html元素可告知浏览器这是一个html类型的文档。
<head>//定义在html语言头部的内容不会在网页上直接显示，它用于包含当前文档的相关信息，可以包含title元素、meta元素等。
<title></title>//页面标题元素。
<meta name="信息名称" content="内容1，内容2" />//meta元素用来定义页面的附加信息，其中包括页面的作者、版权、关键字等信息。
<style type="text/css"></style>//编写css代码。
<link href="xx.css" rel="stylesheet" type="text/css" />//引用外部css代码。
<link href="xx.ico" rel="Shortcut Icon" />//在标题栏添加图片。
<script type="text/javascript"></script>//编写javascript代码。
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>//引用外部javascript代码。
</head>
<body></body>//body元素定义文档的主体，它包含文档的所有内容(比如文本、图像、颜色和图形等等)。
</html>
<html>//html元素可告知浏览器这是一个html类型的文档。
<head>//定义在html语言头部的内容不会在网页上直接显示，它用于包含当前文档的相关信息，可以包含title元素、meta元素等。
<title></title>//页面标题元素。
<meta name="信息名称" content="内容1，内容2" />//meta元素用来定义页面的附加信息，其中包括页面的作者、版权、关键字等信息。
<style type="text/css"></style>//编写css代码。
<link href="xx.css" rel="stylesheet" type="text/css" />//引用外部css代码。
<link href="xx.ico" rel="Shortcut Icon" />//在标题栏添加图片。
<script type="text/javascript"></script>//编写javascript代码。
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>//引用外部javascript代码。
</head>
<body></body>//body元素定义文档的主体，它包含文档的所有内容(比如文本、图像、颜色和图形等等)。
</html>
HTML标签元素：
<div></div>//在页面中div元素用来将页面内容分割成各个独立的部分。在每个div元素中，不仅可以包含文本内容，也可以包含图片、表单等。
<p></p>//用来定义一个段落。在p元素中，可以包含文本、图片和用来修饰文本的元素。
<br />//用来使文本换行显示。
<hr />//用一条一定高度的分隔线，分隔页面内容。
<blockquote></blockquote>//缩进显示。
<pre></pre>//用来定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。
<address></address>//用来在内容中定义地址的相关内容。
<b></b>//用来使包含的文本内容加粗显示。
<small></small>//用来使包含的文本内容缩小一号显示。
<i></i>//用来使包含的文本内容以斜体方式显示。
<sup></sup>//用来使包含的文本内容以上标的方式显示。
<sub></sub>//用来使包含的文本内容以下标的方式显示。
<em></em>//用来强调内容，一般被强调的部分会以斜体显示。
<strong></strong>//用来强调内容，一般被强调的部分会加粗显示。
<a href="#1" target="_blank"></a>//用来链接一个目标，_blank表示目标页面在新的窗口显示。
<a href="http://www.xxx.com"></a>//HTTP路径
<a href="ftp://www.xxx.com"></a>//FTP路径
<a href="mailto:xxx@sina.com"></a>//邮件路径，用来链接一个电子邮件的地址。
<img src="#" alt="Alternate Text" />//用来在页面中定义一个图片。路径属性src用来定义一个调用图片的路径，代替图片的文本属性alt用来定义当图片路径错误或者其它原因无法显示时，替代图片的文本。
<img src="naruto.ico" alt="picture" width="258" border="0" usemap="#Map" /><!-- 图像的局部链接 -->
<map name="Map" id="Map">
<area shape="poly" coords="83, 161, 152, 164, 114, 86" href="#" />
<area shape="circle" coords="181, 73, 41" href="#" />
</map>
<form action="/" method="post"></form>//用来创建一个表单。
action:用来指定当提交表单时向何处发送表单数据。method:用来指定如何发送表单数据，可取值为get或者post。
get：以URL变量的形式来发送。post:以HTTP post的形式来发送。
<input type="text" id="name" name="name" value="" /> //用来提供用户输入文本的功能，只能单行显示，超出定义宽度的内容将被隐藏。
<input type="password" id="name" name="name" value="" />//用来提供输入密码。
<input type="submit" id="name" name="name" value="" />//用来发送表单中的内容。
<input type="reset" id="name" name="name" value="" />//用来重置表单中的内容。
<input type="image" id="name" name="name" value="" />//用来发送表单中的内容。
<input type="button" id="name" name="name" value="" />//用来激活相应的行为。
<input type="checkbox" id="name" name="name" value="" />//用来提供用户多项选择的功能。
<input type="radio" id="name" name="name" value="" />//用来提供用户单项选择的功能。
<input type="hidden" id="name" name="name" value="" />//用来隐藏表单控件的内容。
<textarea rows="10" cols="10"></textarea>//用来提供用户输入文本的功能，多行显示。
<label for="id"></label>//用来定义一个关联的标记。
<iframe src=""></iframe>//用来在页面中定义一个框架区域。
<select>//用来在页面中定义一个可以选择的下拉列表。
<optgroup label="">//用来定义下拉列表中的项目的分组。
<option value=""></option>//用来定义下拉列表中的项目。
</optgroup>
</select>
<fieldset>//将表单内的元素分组。
<legend></legend>//定义元素标题。
</fieldset>
<ul>//无序列表元素，用来定义没有顺序编号的列表元素。
<li></li>//用来定义列表中的条目。
</ul>
<ol>//有序列表元素，用来定义有顺序编号的列表元素。
<li></li>
</ol>
<dl>//用来定义类似术语或者词汇表的列表信息。
<dt></dt>//用来定义dl元素中的一个具体的条目，可以在dt元素中使用文本或者图片等。
<dd></dd>//用来定义dl元素中的一个具体的条目说明，可以在dd元素中使用其它的列表元素。
</dl>
<table border="0" cellspacing="0" cellpadding="0" width="100%" >//用来在页面中定义一个表格。
border:定义边框宽度。cellspacing:定义单元格之间的间距。cellpadding:定义单元格与其中的内容之间的间距。width:定义表格宽度。
<caption></caption>//定义表格的标题。
<thead></thead>//定义表格的表头。
<tbody>//定义表格的主体。
<tr>//用来定义表格的行。
<td></td>//用来定义表格的单元格。
</tr>
</tbody>
<tfoot></tfoot>//定义表格的表尾。
</table>
<p></p>//用来定义一个段落。在p元素中，可以包含文本、图片和用来修饰文本的元素。
<br />//用来使文本换行显示。
<hr />//用一条一定高度的分隔线，分隔页面内容。
<blockquote></blockquote>//缩进显示。
<pre></pre>//用来定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。
<address></address>//用来在内容中定义地址的相关内容。
<b></b>//用来使包含的文本内容加粗显示。
<small></small>//用来使包含的文本内容缩小一号显示。
<i></i>//用来使包含的文本内容以斜体方式显示。
<sup></sup>//用来使包含的文本内容以上标的方式显示。
<sub></sub>//用来使包含的文本内容以下标的方式显示。
<em></em>//用来强调内容，一般被强调的部分会以斜体显示。
<strong></strong>//用来强调内容，一般被强调的部分会加粗显示。
<a href="#1" target="_blank"></a>//用来链接一个目标，_blank表示目标页面在新的窗口显示。
<a href="http://www.xxx.com"></a>//HTTP路径
<a href="ftp://www.xxx.com"></a>//FTP路径
<a href="mailto:xxx@sina.com"></a>//邮件路径，用来链接一个电子邮件的地址。
<img src="#" alt="Alternate Text" />//用来在页面中定义一个图片。路径属性src用来定义一个调用图片的路径，代替图片的文本属性alt用来定义当图片路径错误或者其它原因无法显示时，替代图片的文本。
<img src="naruto.ico" alt="picture" width="258" border="0" usemap="#Map" /><!-- 图像的局部链接 -->
<map name="Map" id="Map">
<area shape="poly" coords="83, 161, 152, 164, 114, 86" href="#" />
<area shape="circle" coords="181, 73, 41" href="#" />
</map>
<form action="/" method="post"></form>//用来创建一个表单。
action:用来指定当提交表单时向何处发送表单数据。method:用来指定如何发送表单数据，可取值为get或者post。
get：以URL变量的形式来发送。post:以HTTP post的形式来发送。
<input type="text" id="name" name="name" value="" /> //用来提供用户输入文本的功能，只能单行显示，超出定义宽度的内容将被隐藏。
<input type="password" id="name" name="name" value="" />//用来提供输入密码。
<input type="submit" id="name" name="name" value="" />//用来发送表单中的内容。
<input type="reset" id="name" name="name" value="" />//用来重置表单中的内容。
<input type="image" id="name" name="name" value="" />//用来发送表单中的内容。
<input type="button" id="name" name="name" value="" />//用来激活相应的行为。
<input type="checkbox" id="name" name="name" value="" />//用来提供用户多项选择的功能。
<input type="radio" id="name" name="name" value="" />//用来提供用户单项选择的功能。
<input type="hidden" id="name" name="name" value="" />//用来隐藏表单控件的内容。
<textarea rows="10" cols="10"></textarea>//用来提供用户输入文本的功能，多行显示。
<label for="id"></label>//用来定义一个关联的标记。
<iframe src=""></iframe>//用来在页面中定义一个框架区域。
<select>//用来在页面中定义一个可以选择的下拉列表。
<optgroup label="">//用来定义下拉列表中的项目的分组。
<option value=""></option>//用来定义下拉列表中的项目。
</optgroup>
</select>
<fieldset>//将表单内的元素分组。
<legend></legend>//定义元素标题。
</fieldset>
<ul>//无序列表元素，用来定义没有顺序编号的列表元素。
<li></li>//用来定义列表中的条目。
</ul>
<ol>//有序列表元素，用来定义有顺序编号的列表元素。
<li></li>
</ol>
<dl>//用来定义类似术语或者词汇表的列表信息。
<dt></dt>//用来定义dl元素中的一个具体的条目，可以在dt元素中使用文本或者图片等。
<dd></dd>//用来定义dl元素中的一个具体的条目说明，可以在dd元素中使用其它的列表元素。
</dl>
<table border="0" cellspacing="0" cellpadding="0" width="100%" >//用来在页面中定义一个表格。
border:定义边框宽度。cellspacing:定义单元格之间的间距。cellpadding:定义单元格与其中的内容之间的间距。width:定义表格宽度。
<caption></caption>//定义表格的标题。
<thead></thead>//定义表格的表头。
<tbody>//定义表格的主体。
<tr>//用来定义表格的行。
<td></td>//用来定义表格的单元格。
</tr>
</tbody>
<tfoot></tfoot>//定义表格的表尾。
</table>
CSS：
//CSS又称为级联样式表，通常也简称为样式表。是W3C组织制定的，用于控制网页样式的一种标记性语言。由于使用CSS从页面中剥离了修饰内容，减少了大量的冗余代码，所以代码更加简洁清新、浏览速度更快等好处。
//使用CSS样式，通常有3种方法：元素中直接添加样式、从页面头部<style>元素中调用、采用链接的形式调用。其中元素中直接添加样式优先级最高、从页面头部调用次之、采用链接外部CSS样式最低。
//盒子模型：一个块元素可以看成是一个盒子形状的模型。这个模型的主体部分是元素的内容部分，用来显示元素中的主要内容，这个部分由width(宽)和height(高)属性来控制。在内容部分之外是补白部分，由padding属性控制。在padding属性之外是元素的边框，由border属性控制。在盒子模型的最外面是边界部分，由margin属性控制。
//在HTML中，页面元素可以分为两类。一类是块元素、另一类是内联元素。之所以区分元素，是因为在样式表中有部分属性是只对块元素有效。
块元素：是指那些在默认的情况下会换行显示的元素，如<div>元素、<p>元素等。
内联元素：是指在默认情况下显示方式类似于文本的元素。默认情况下同行显示，直到总体宽度大于父元素的时候才换行。如<a>、<b>、<img>、<input>。
//在网页中，使用浮动属性可以更改块元素的默认显示方式，将原来换行显示的块元素同行显示。
//当绝对定位的盒子的外层的盒子设置了相对定位的属性后，绝对定位的盒子相对于外层盒子的位置进行定位。
使用选择器关联CSS样式：
<style type="text/css">
*{}//选择所有的元素。
div{}//元素选择器，使用元素的名称来关联。
#name{}//id选择器，使用元素的id属性的值来关联。
.name{}//类选择器，使用元素的class属性的值来关联。
div p{}//后代选择器，选择所有div元素里的p元素。
.node>a{}//子元素选择器，选择class为node下的直接a元素。
a,p{}//分组选择器，选择所有的a元素和p元素。
a:link{}//伪类，定义未访问的链接样式。
a:visited{}//伪类，定义已访问的链接样式。
a:hover{}//伪类，定义鼠标悬停时的链接样式。
a:active{}//伪类，定义选定的链接样式。
</style>
*{}//选择所有的元素。
div{}//元素选择器，使用元素的名称来关联。
#name{}//id选择器，使用元素的id属性的值来关联。
.name{}//类选择器，使用元素的class属性的值来关联。
div p{}//后代选择器，选择所有div元素里的p元素。
.node>a{}//子元素选择器，选择class为node下的直接a元素。
a,p{}//分组选择器，选择所有的a元素和p元素。
a:link{}//伪类，定义未访问的链接样式。
a:visited{}//伪类，定义已访问的链接样式。
a:hover{}//伪类，定义鼠标悬停时的链接样式。
a:active{}//伪类，定义选定的链接样式。
</style>
控制字体的显示：
font-family//字体选择属性，用来定义使用的字体。
font-size//字体大小属性，用来控制字体的显示尺寸。
font-style//字体样式属性，用来定义字体的显示样式。
font-weight//字体加粗属性，用来定义字体是否显示加粗或者变细的效果。
color//字体颜色属性，用来定义字体使用的颜色。
text-decoration//字体修饰属性，用来定义字体的修饰效果。
text-transform//转换大小写属性，用来定义英文字母大小写之间的转换。
font-variant//小型大写字母属性，用来定义英文字母是否显示小型大写字母的效果。小型大写字母是介于大写字母和小写字母之间的一种效果。
letter-spacing//字母间隔属性，用来定义字母或(中文文字)之间的间隔大小。
word-spacing//单词间隔属性，用来定义单词之间的间隔大小。
line-height//行高属性，用来定义文本中行高的大小。
font-size//字体大小属性，用来控制字体的显示尺寸。
font-style//字体样式属性，用来定义字体的显示样式。
font-weight//字体加粗属性，用来定义字体是否显示加粗或者变细的效果。
color//字体颜色属性，用来定义字体使用的颜色。
text-decoration//字体修饰属性，用来定义字体的修饰效果。
text-transform//转换大小写属性，用来定义英文字母大小写之间的转换。
font-variant//小型大写字母属性，用来定义英文字母是否显示小型大写字母的效果。小型大写字母是介于大写字母和小写字母之间的一种效果。
letter-spacing//字母间隔属性，用来定义字母或(中文文字)之间的间隔大小。
word-spacing//单词间隔属性，用来定义单词之间的间隔大小。
line-height//行高属性，用来定义文本中行高的大小。
控制文本的显示：
text-indent//文本缩进属性，用来定义文本段落中段首的缩进效果。
text-align//水平对齐属性，用来定义元素的水平对齐效果。
direction//文本方向属性，用来定义元素中文本的显示方向。
text-align//水平对齐属性，用来定义元素的水平对齐效果。
direction//文本方向属性，用来定义元素中文本的显示方向。
控制列表元素的显示：
list-style-type//列表符号属性，用来定义列表中使用的预设符号。
list-style-image//列表图像属性，用来定义列表元素中替换列表符号的图像。
list-style-position//标记位置属性，用来定义列表中标记的显示位置。
list-style-image//列表图像属性，用来定义列表元素中替换列表符号的图像。
list-style-position//标记位置属性，用来定义列表中标记的显示位置。
控制元素的定位：
position//元素的定位属性，用来定义元素的定位方式。常用的属性是absolute(绝对定位)和relative(相对定位)。
z-index//层叠定位属性，用来定义层叠元素的显示顺序。使用没有单位的数字值。
z-index//层叠定位属性，用来定义层叠元素的显示顺序。使用没有单位的数字值。
元素的浮动属性:
float//用来定义块元素的浮动方式。
溢出属性:
overflow//用来定义元素溢出部分的显示方式。
显示方式属性:
display//用来更改元素默认的显示方式。
使用CSS的例子：
body{filter:gray;}//将网页过虑为灰度图，火狐浏览器不兼容。
*{ //消除缝隙。
margin:0px auto;
padding:0px auto;}
.content{ //居中显示。
margin-left:auto;
margin-right:auto;}
border-width:1px 2px 3px 4px;//4个属性值：依次表示上、右、下、左边框的属性。
border-style:double solid dashed;//3个属性值：前者表示上边框的属性，中间表示左右边框的属性，后者表示下边框的属性。
border-color:Black Orange;//2个属性值：前者表示上下边框的属性，后者表示左右边框的属性。
font-size:1.5em;//相对长度单位，相对于当前对象内文本的字体尺寸倍数。如果没有设置字体尺寸则相对于浏览器的默认字体尺寸。
position:relative;//相对定位，相对于原来的位置偏移指定的距离，相对定位的盒子仍在标准流中，其它盒子仍然视其在原来的位置。
position:absolute;//绝对定位，盒子的位置以浏览器窗口为基准进行定位，绝对定位的盒子脱离标准流，其它盒子视其不存在。
position:fixed;//固定定位，盒子的位置以浏览器窗口为基准进行定位，脱离标准流。
top:19px;//使用top、left、right、bottom指定相对定位、绝对定位或者固定定位的盒子的偏移距离。
display:block;//将行内元素改为块级元素。
display:inline;//将块级元素改为行内元素。
display:none;//将元素的显示设为不可见。
background-repeat:repeat-x;//背景图像将在水平方向重复。
background-position:50px 20px;//移动背景图片的位置。
*{ //消除缝隙。
margin:0px auto;
padding:0px auto;}
.content{ //居中显示。
margin-left:auto;
margin-right:auto;}
border-width:1px 2px 3px 4px;//4个属性值：依次表示上、右、下、左边框的属性。
border-style:double solid dashed;//3个属性值：前者表示上边框的属性，中间表示左右边框的属性，后者表示下边框的属性。
border-color:Black Orange;//2个属性值：前者表示上下边框的属性，后者表示左右边框的属性。
font-size:1.5em;//相对长度单位，相对于当前对象内文本的字体尺寸倍数。如果没有设置字体尺寸则相对于浏览器的默认字体尺寸。
position:relative;//相对定位，相对于原来的位置偏移指定的距离，相对定位的盒子仍在标准流中，其它盒子仍然视其在原来的位置。
position:absolute;//绝对定位，盒子的位置以浏览器窗口为基准进行定位，绝对定位的盒子脱离标准流，其它盒子视其不存在。
position:fixed;//固定定位，盒子的位置以浏览器窗口为基准进行定位，脱离标准流。
top:19px;//使用top、left、right、bottom指定相对定位、绝对定位或者固定定位的盒子的偏移距离。
display:block;//将行内元素改为块级元素。
display:inline;//将块级元素改为行内元素。
display:none;//将元素的显示设为不可见。
background-repeat:repeat-x;//背景图像将在水平方向重复。
background-position:50px 20px;//移动背景图片的位置。
~~~行到水穷处，坐看云起时
浙公网安备 33010602011771号