<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>