⿊马程序员HTML、CSS学习笔记
HTML：
//预格式化：保留⽂字在源代码中的格式，页⾯中显⽰的和源代码中的效果完全⼀致。浏览器在显⽰其中的内容时，会完全按照其真正的⽂本格式来显⽰。
例如，原封不动地保留⽂档中的空⽩，如空格、制表符等。
//HTML中空格的显⽰：使⽤ ；或者加空格的时候将输⼊法设为全⾓。
//超链接：指从⼀个⽹页指向⼀个⽬标的连接关系，这个⽬标可以是另⼀个⽹页，也可以是相同⽹页上的不同位置，还可以是⼀个图⽚、⼀个电⼦邮件地址、⼀个⽂件或者⼀个应⽤程序。超⽂本链接是超链接的⼀种，是指⽤⽂字链接的形式来指向⼀个⽬标。
HTML⽂档类型:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/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=""></a>//HTTP路径
<a href="ftp://"></a>//FTP路径
<a href="mailto:xxx@sina"></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>
cssclass属性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;//移动背景图⽚的位置。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。