标签：黑马课程
<pre>
W3C:World Wide Web Consortium,万维网联盟
HTML
html:Hyper Text Markup Language,超文本标记语言。
书写规范：XHTML
标签要正确关闭，包括呼应关闭与自关闭。
常见自关闭标签有：<hr/>、<br/>、<input/>、<img/>、<area/>，它是不需要修饰和装饰其它的
标签或文本的。
标签名和属性名必须小写
属性值要引号括起来，””或’’
标签要正确嵌套
<marquee behavior=”alternate”></marquee>
标签的作用：说明内容的功能
属性的作用：描述内容的特征
html注释：<!--注释内容 仅此一种-->
下面总结下常见标签，只总结它们的特有属性。
颜色表示方法：单词，6个十六进制字符、rgb(m,n,k)。
排版标签
p:段落标签：如果p标签中包裹了内容，那么p标签内容的上下会各空出1行。
如果P标签没有内容，那p标签就相当于一个空行。
如果是两个p标签连续出现，它们之间也只会空一个空格，而不是两个。
注意与br标签的区别：br只是换行，并不会空出1行。而p标签不但换行而且还空出1行。
hr:水平线标签：
属性
size:粗细
width:宽度
div:块级标签，会自动换行。如p、hr、h1-h6也是块级标签。
span:行级标签，不会自动换行。如br是行级标签，它换行之后不会再换行。
字体标签
h1-h6:从大到小的6个级别的标题文字，没有size属性。注意字体是块级标签。
font:
属性
face:字体类型
size:字体大小（从1-7的数字，默认是3）
图像标签
img:
属性
src:图片路径
title:鼠标悬停在图片上时的提示文字，其实几乎每个标签都有这个功能。
alt:当图片不存在时的提示文字
map:必须要定义name属性，因为它要被图片img引用，在img中定义属性usemap=”#mapname”来引
用。
子标签area:
属性
shape:形状
coords:参数，相对于图片（如果shape是circle的话，是x,y,r；如果是矩形的话，
是两个点的坐标。
href:点击了area之后跳转的链接，可以是网页，也可以是图片。
title:当鼠标移动到坐标限定的范围时提示的文字。
清单标签（ol、ul、极其子标签li）
共有属性
type:对于ol，取值可以是Aa和及罗马数字I、i以及阿拉伯数字，共有5种。默认是阿拉伯数
字。如果不想从第一字母或数字开始，可以再加个start属性，指定偏移量。
对于ul，取值可以是disc（实心点）、square（实心矩形）、circle（空心点），但实
际发现ul也可以使用ol的type属性值。默认的是实心点
超链接标签a
属性
href:跳转目标路径，一定要这个路径，如果不想跳转用#。否则文本不会有这个标签的特有
显示效果。
target:跳转方式，取值_self(默认) :在本窗口打开。 _blank ：在新窗口打开
_parent
_top
表单标签
form标签：收集用户信息，将信息传递到指定的服务器
属性：
action:表单数据提交的目标位置。
method:提交方式
get:（默认）明文提交，不安全。数据量有限制，不超过1k。
post:暗访提交，安全。可以提交大的数据，数据量没有限制。
input子标签：真正地采集用户信息
语法：<inputtype=”” name=”” value=”” />
type:input标签的类型（一共有10种）
text:文本框
password:密码框
radio:单选按钮
checkbox:复选框
checked=”checked”默认被选中
submit:提交按钮
button:普通按钮
reset:重置按钮
image:图片按钮 作用同submit
file:文件上传
hidden:隐藏域:既不想让用户看到，又要将数据提交到服务去。
value:标签中的内容，供服务器接收数据的。
name:
》供服务器接收数据的。
》给相同类型的标签分组，如radio。
下拉列表标签select
option:下拉列表项
selected=”selected”默认被选中
语法：<select>
<option>一般第1个option写标题</option>
<optionvalue=””>一般与value值一样</option>
<optionvalue=””>一般与value值一样</option>
</select>
文本域标签textarea
属性
cols:显示的列数
rows:显示的行数
readonly:标记文本只读，取值readonly。防止用户修改内容。
表格标签table
属性
cellspacing:单元格之间的距离
cellpadding:单元格与内容的距离
caption标签：表格标题，写在table标签的首行。
thead:页眉
tbody:主体
tfoot:页脚
可以用这些标签在操作多个tr。
子标签tr:行
子标签td:列
属性
colspan:跨列，从左往右合并。
rowsapn:跨行，从上往下合并。
th:列头，与td同级别。
CSS
CSS:Cascade Style Sheet,层叠样式表。
CSS的好处：
1.网页内容和样式分离，有利于团队开发。
2.提高代码的复用性，有利于后期维护。
3.功能强大，实现更美观的效果。
CSS基本语法：
1.行内样式，定义在标签内，作用于当前标签。
<p style=”color:red”><p>
2.内嵌样式，作用于当前页面。
<style type=”text/css”> 表示标签内容为样式代码
/*CSS注释，仅此一中*/
选择器{
属性名：属性值；
属性名：属性值；
...
}
</style>
注意格式：属性名与属性值用：分隔，属性值没有引号，每个规则以；结束。
3.外部样式，作用于多个页面。
<link rel="stylesheet" type="text/css" href="theme.css" />
CSS选择器：
标签选择器：标签名，同类标签具有相同风格时使用。
类选择器：.类名，同类标签中部分标签有其它的风格时。
ID选择器：#ID名，通常与div结合使用。
CSS常见属性：
字体：font属性
font-xxx:子类属性
文本：
text-xxx系列
text-decoration:可以设置下中下划线或无线。
列表属性：list-style属性
list-style-xxx:子类属性
list-style-image:url(“图片路径”); //自定义列表符号
背景属性：background属性
background-xxx:子类属性
background-attachment:设置背景是否随着页面的其余部分滚动。
background-color:
background-image:url(“图片路径”);
background-repeat:属性设置是否及如何重复背景图像。
background-position:设置背景图片的起始位置，相对于父容器的x和y
距离。
定位属性：
浮动定位
float:流式布局（浮动），取值left right 2种
clear:清除浮动，取值 left rightboth none 4种
position
absolute:绝对定位，一般和top、left属性配合使用。
relative:相对定位
z-index:取值是整数，默认0。越大越靠近上面。
CSS盒子模型：
任何一个标签都是一个盒子模型，所以每个标签都有下面这些属性。
内边距padding
padding-left
padding-right
padding-top
padding-bottom
padding:10px 30px 50px 30px 表示上 右 下 左（从上开始顺时针旋转）
padding:30px 80px // 30表示上下 80表示左右
外边距margin
margin-left
margin-right
margin-top
margin-bottom
margin:0 auto //水平居中
margin:auto 0 //垂直居中
外边距合并：取较大者。
边框border
border-style
border-width
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
...
CSS：通过属性即使给标签设置了什么东西，如图片，它是属于这个标签的，并没有创建一个新的
对象。
假如想给div设置一张图片，图片距离div的上边距是10px，那么应该设置div的padding-top
为10px，且应在div中嵌套一个<img/>标签。不能投机取巧，使用CSS中的
background:url()no-repeat来设置，这个属性只是给div设置了背景图片，但是这个图片并不
是它的子元素，仅仅只是一个属性，所以padding对它无效。
伪类：
a:link {color: #FF0000} /* 未访问的链*/a:visited {color: #00FF00} /*已访问的链接 */
a:hover {color: #FF00FF} /*鼠标移动到链接上 */
a:active {color: #0000FF} /*选定的链接 */
当然，在选择器还可以定义其它的属性，而且属性是会反弹的。比如在
hover中设置了一个字体大小属性，当鼠标移到链接上时字体会改变，
但当鼠标挪走之后又会恢复原来的大小。
注意：定义是有顺序的。
-----------------------------------------------------------------------------------------
最后，作一下总结，HTML就是用来显示内容的，而CSS用来定义样式，就是美化内容的显示。
HTML标签和CSS样式非常多，怎么学？
抓住重点，特性，记忆重点，其它的就去查API文档。
</pre>
本文出自 “行意天下” 博客，请务必保留此出处http://4259297.blog.51cto.com/4249297/1665222
标签：黑马课程
原文地址：http://4259297.blog.51cto.com/4249297/1665222
