您的位置：首页 > Web前端 > HTML

学习html（1）

2015-06-29 08:47 603 查看

1.介绍

出处：W3c组织

Html超文本标记语言文件头具有HTML

Xhtml HTML+xml 文件头具有XHTML

Html5 跨平台性，语法包容性文件头具有html

.html结尾 .css结尾 .js结尾

2.工具

Sublime 火狐等好的工具更多的语法提示，更加的方便

3.主要构成

大致分成三部分：

1.<doctyp……> 说明是html文档，以什么标准进行解析。最常用的是strict.dtd严格的，兼容性好，transitional.dtd兼容的，frameset.dtd

2.<html>

3.<head>给搜索引擎看的信息

4.</head>

5.<body>写给人看的信息，主要在这里面写程序

6.</body>

7.</html>

4.布局

首先了解所作网页的整体结构，形势分布，将不同的部分分割出来，然后再一步一步进行添加其中的内容。

<title></title>网页的名字

<div></div>网页的分块

5.Css控制div

<!DOCTYPE html >

<html>

<head>

<title>利用css来控制div块</title>

<style>

div{

height:200px;

background: blue;

}

#main{

background:green;

}

#footer{

background: gray;

}

</style>

</head>

<body>

<div id="header"></div>

<div id="main"></div>

<div id="footer"></div>

</body>

</html>

利用div布局，利用css控制布局，不同的对象需要使用id来区分，而想要选择则需要使用#加上名字进行使用。

6.浮动控件

利用float进行div块的浮动，而浮动的块是会将没有浮动属性的块进行覆盖的。

7.清除浮动

利用clear清除左侧浮动和右侧浮动，left，right，both，指在一个div上面不允许有浮动控件

8.初步整体

<!DOCTYPE html >
<html>
<head>
<title>利用div和float来首页布局</title>
<style>
#container{
width: 1002px;
background: gray;
}

#head{
height: 120px;
background: orange;
}

#main{
height: 600px;
background: green;
}

#lside{
width: 700px;
float: left;
height: 600px;
background: pink;
}

#rside{
width: 302px;
float: right;
height: 600px;
background: purple;
}

#footer{
height: 120px;
background: blue;
}
</style>
</head>
<body>
<div id="container">
<div id="head"></div>
<div id="main">
<div id="lside"></div>
<div id="rside"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航