首页 > WEB开发 > 前端开发 > HTML/CSS
2014
08-03

HTML/CSS

HTML

Html是通过标签来定义的语言,代码都是由标签所组成。

1、排版标签

1)<br/> 换行

2)<p></p> 段落标签:在开始和结束的位置上会留一个空行。

属性:align 对齐方式

3)<hr /> 水平线,属性有width(宽度),align,size(粗细),color。

4)<div></div> 声明一块区域(块级元素)

5)<span></span> 声明一块区域(行内元素)

2、字体标签

1)<font>文本内容</font>,属性有size(字号,取值为1~7),color,face(字体)

2)标题标签:<h1></h1> … <h6></h6>

3)<B></B>粗体

4)<I></I>斜体

3、列表标签

1)<dl></dl>定义列表:两层列表清单,<dt></dt>用于定义条目,<dd><dd>定义内容,如下图所示:

dl dt dd

2)有序列表(ol)和无序列表(ul

属性:

type:列表前序标号

start:从第几个开始。

ol和ul的列表项均为:<li>数据内容</li>

4、图片标签:<img src=”” width=”” height=”” alt=”” />

5、超链接标签:<a></a>

作用:

1)链接资源:通过href属性链接到资源。

注意:href属性值的写法需指定所使用协议,若不指定,默认是file文件协议;如果指定的协议浏览器不能解析,则调用相应的应用程序打开(如mailto,thunder等)。

2)定位:通过name属性定义锚点。

6、表格标签:

1)<table></table>,属性有border,width,cellspacing(外边距),cellpadding(内边距)

2)<tr></tr>,属性有align(对齐方式)

3)<td></td>,属性有width,height,colspan(合并列),rowspan(合并行)

4)<th></th>,在td的基础上加粗、居中显示。

5)<caption></caption>表格的标题。

7、表单标签(重中之重):用于和服务器交互

1)<form></form>,属性有action,method。method有get和post两种,区别为:

①get方式表单封装的数据直接显示在url上,post方式数据不显示在url上。

②get方式安全级别较低,post级别较高。

③get方式数据的长度有限,post支持大数据。

2)<input /> ,必须要指定name属性,另外不同的type属性值代表的不同输入组件:

①type=text 文本框

②type=password 密码框

③type=radio 单选按钮

④type=checkbox 多选按钮

⑤type=reset 重置按钮

⑥type=submit 提交按钮

⑦type=file 上传文件的输入项

⑧type=button 按钮

⑨type=image 图片(也是提交按钮,可以用css控制submit按钮达到同样的效果)

⑩type=hidden 隐藏标签(用户不用看到的,但是开发时必须要使用的,可以把数据封装到隐藏标签中,和表单一起提交到后台)。

3)<select></select>,下拉列表,列表项用<option></option>表示

4)<textarea></textarea>文本域

8、框架标签

1)<frameset rows=”” cols=””>

<frame src=”” />

 </frameset>

注意:<frameset>标签不能写在body标签里面,也不能写在body标签后面。一般写在</head><body>中间。

2)<iframe ></iframe>

9、HTML的头部标签(位于<head></head>内)

1)<title></title> 网页标题

2)<base href=”” target=”_blank”> 规定页面中所有链接的基准URL。浏览器会使用指定的基准URL来解析所有的相对URL(默认相对于本文档)。

3)<meta http-equiv=”” name=”” content=”” /> 指定页面的元信息(meta-information),其中content为必选属性,http-equiv和name为可选属性,在content中定义与 http-equiv 或 name 属性相关的元信息。

4)<link /> 定义当前文档与其它文档的关系。

属性:

rel 定义当前文档与目标文档的关系。

type 目标文档的MIME类型。

href 目标文档或资源的URL

如:<link rel=”stylesheet” type=”text/css” href=”*.css”>

CSS

CSS将网页内容和显示样式进行分离,提高了显示功能。

1、在html中使用CSS的方式

1)style属性:每个html标签都支持style属性。

2)style标签方式:<style type=”text/css”>……</style>

3)<link rel=”stylesheet” type=”text/css” href=””>

2、CSS基本选择器(指定css要作用的标签)

1)标签名选择器

2)类选择器(在html标签中指定class属性)

3)ID选择器(在html标签中指定id属性)

注意:

①不同选择器的优先级为:标签名 < class < id < style属性

②class属性,为CSS而生;id属性,为JS而生。使用css时也可使用id属性,但要注意id的唯一性,不要用一个id指定多个元素。(规范问题)

3、CSS扩展选择器:

1)派生选择器:根据文档的上下文关系来确定某个标签的样式,通过合理地使用派生选择器,我们可以使 HTML 代码变得更加整洁。

2)组合选择器:对多个不同选择器进行相同样式设置的时候应用此选择器。

3)伪元素选择器

①超链接:

a:link 超链接未点击状态。

a:visited 被访问后的状态。

a:hover 光标移到超链接上的状态(未点击)。

a:active 点击超链接时的状态。

②:first-child

③:focus 选择获得焦点的元素

4、盒子模型

每个div都可以看成是一个盒子,盒子模型用于计算盒子的宽度、高度,它等于div本身的width(或height) + border值 + padding值 + margin值。

5、CSS布局(Layout)

1)定位(position):position属性的默认值为static,这里重点掌握position属性的relative和absolute,即相对定位和绝对定位。(可实现文字悬于图片上的效果)

relative:设置为relative的元素相对于本身理应所在的位置进行偏移,这也是relative“相对”的意思所在。

absolute:设置为absolute的元素从文档流完全删除,并相对于其包含块定位。元素A的包含块有两种情况:

①元素A的父级元素也设置了position属性,且position的属性值为absolute或relative时,此时元素A按照这个父级元素进行定位。

②如果不存在这样的父级元素,则元素A会以body为定位对象。

fixed:fixed是特殊的absolute,即fixed总是以body为定位对象的。

关于CSS的定位知识可参考:http://www.cnblogs.com/Zigzag/archive/2009/02/19/position.html

2)浮动(float

设置了浮动的元素框会从从文档流中删除,元素框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。(可实现图文混排效果)

3)清除浮动(clear

none :  默认值。允许两边都可以有浮动对象

left :  不允许左边有浮动对象

right :  不允许右边有浮动对象

both :  不允许有浮动对象

 


HTML/CSS》有 1 条评论

留下一个回复

你的email不会被公开。