黑马程序员HTML、CSS学习笔记
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标签元素：
<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>
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>控制字体的显示：
font-family//字体选择属性，用来定义使用的字体。 font-size//字体大小属性，用来控制字体的显示尺寸。 font-style//字体样式属性，用来定义字体的显示样式。 font-weight//字体加粗属性，用来定义字体是否显示加粗或者变细的效果。 color//字体颜色属性，用来定义字体使用的颜色。 text-decoration//字体修饰属性，用来定义字体的修饰效果。 text-transform//转换大小写属性，用来定义英文字母大小写之间的转换。 font-variant//小型大写字母属性，用来定义英文字母是否显示小型大写字母的效果。小型大写字母是介于大写字母和小写字母之间的一种效果。 letter-spacing//字母间隔属性，用来定义字母或(中文文字)之间的间隔大小。 word-spacing//单词间隔属性，用来定义单词之间的间隔大小。 line-height//行高属性，用来定义文本中行高的大小。
控制文本的显示：
text-indent//文本缩进属性，用来定义文本段落中段首的缩进效果。 text-align//水平对齐属性，用来定义元素的水平对齐效果。 direction//文本方向属性，用来定义元素中文本的显示方向。
控制列表元素的显示：
list-style-type//列表符号属性，用来定义列表中使用的预设符号。 list-style-image//列表图像属性，用来定义列表元素中替换列表符号的图像。 list-style-position//标记位置属性，用来定义列表中标记的显示位置。
控制元素的定位：
position//元素的定位属性，用来定义元素的定位方式。常用的属性是absolute(绝对定位)和relative(相对定位)。 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;//移动背景图片的位置。
TAG:
