自学html--one(div布局)

自学html--one(div布局)

一、.html  .htm  .shtml三者的区别：
1、.htm与.html没有本质上的区别，表示的是同一种文件，只是适用于不同的环境之下。
2、DOS仅能识别8+3的文件名，所以*.htm的命名方法可以被DOS识别，而*.html的文件命名方式不能被之识别。
3、在UNIX系统中，网页必须使用.html扩展名，如果是htm，在浏览器中打开时则出现源代码；Windows中支持两种扩展名。也可以说，htm和html是Windows和UNIX对抗的产物。
4、如果在网页中同时存在index.html与index.htm，这是浏览器将先解释index.html。
5、.shtml是一种用于SSI（Server Side Include服务器端包含）技术的文件，是WEB在服务器提供的一种功能，并且在服务器端执行。一般说来，要完成较复杂的任务（如：聊天室／留言本等），必须设计专门的CGI或ASP程序；但是如果只是想给网页加上简单的功能(如：显示一篇文档，web服务器环境变量，关于该文档的更新日期／大小等)，则只要SSI就可以完成了

二、html开发环境:字体 ,sublime,firefox,firebug

三、认识html的组成结构
<doctyp…>
<html>
<head>
</head>
<body>
</body>
</html>

1、doctyp  : 这个很重要，这个声明了文档的类型，目前最常用有
//严格
  *<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”“ http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict.dtd”>

  *<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”“ http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

  *<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Framese//EN”“ http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

2、xhtml , html的区别

HTML与XHTML之间的差别，粗略可以分为两大类比较：一个是功能上的差别，另外是书写习惯的差别。关于功能上的差别，主要是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页。
因为XHTML的语法较为严谨，所以如果你是习惯松散结构的HTML编写者，那需要特别注意XHTML的规则。但也不必太过担心，因为XHTML的规则并不太难。下面列出了几条容易犯的错误，供大家引用。

所有标签都必须小写
在XHTML中，所有的标签都必须小写，不能大小写穿插其中，也不能全部都是大写。看一个例子。
错误：<Head></Head><Body></Body>
正确：<head></head><body></body>

标签必须成双成对
像是<p>...</p>、<a>...</a>、<div>...</div>标签等，当出现一个标签时，必须要有对应的结束标签，缺一不可，就像在任何程序语言中的括号一样。
错误：大家好<p>我是muki
正确：<p>大家好</p><p>我是muki</p>

标签顺序必须正确
标签由外到内，一层层包覆着，所以假设你先写div后写h1，结尾就要先写h1后写div。只要记住一个原则“先进后出”，先弹出的标签要后结尾。
错误：<div><h1>大家好</div></h1>
正确：<div><h1>大家好</h1></div>

所有属性都必须使用双引号
在XHTML 1.0中规定连单引号也不能使用，所以全程都得用双引号。
错误：<div style=font-size:11px>hello</div>
正确：<div style="font-size:11px">hello</div

不允许使用target="_blank"
从XHTML 1.1开始全面禁止target属性，如果想要有开新窗口的功能，就必须改写为rel="external"，并搭配JavaScript实现此效果。
错误：<a href="http://blog.mukispace.com" target="_blank">MUKI space</a>
正确：<a href="http://blog.mukispace.com" rel="external">MUKI space</a>

3、doctype 的类型
在默认情况下，FF和IE的解释标准是不一样的，也就是说，如果一个网页没有声明DOCTYPE，它就会以默认的DOCTYPE解释下面的HTML。在同一种标准下，不同浏览器的解释模型都有所差异，如果声明标准不同，不用我说，您自己想就可以了。学习网页标准，浏览器兼容，从哪里开始您自己决定，但是，请认识DOCTYPE。

什么是DOCTYPE
DOCTYPE是Document Type（文档类型）的简写，在页面中，用来指定页面所使用的XHTML（或者HTML）的版本。要想制作符合标准的页面，一个必不可少的关键组成部分就是DOCTYPE声明。只有确定了一个正确的DOCTYPE，XHTML里的标识和CSS才能正常生效。

选择什么样的DOCTYPE
XHTML 1.0中有3种DTD（文档类型定义）声明可以选择：过渡的（Transitional）、严格的（Strict）和框架的（Frameset）。
HTML4.01中也有3种DTD（文档类型定义）声明可以选择：过渡的（Transitional）、严格的（Strict）和框架的（Frameset）。
HTML 5声明很简单<!DOCTYPE html>,现在主流浏览器都用这个声明了，因为 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。
1．过渡的
一种要求不很严格的DTD，允许在页面中使用HTML4.01的标识（符合xhtml语法标准）。过渡的DTD的写法如下：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2．严格的
一种要求严格的DTD，不允许使用任何表现层的标识和属性，例如等。严格的DTD的写法如下：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3．框架的
一种专门针对框架页面所使用的DTD，当页面中含有框架元素时，就要采用这种DTD。框架的DTD的写法如下：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
使用严格的DTD来制作页面，当然是最理想的方式。但是，对于没有深入了解Web标准的网页设计者，比较合适的是使用过渡的DTD。因为这种DTD还允许使用表现层的标识、元素和属性，比较适合大多数网页制作人员。

XHTML 1就是HTML 4.01的XML化，是一种不向前兼容的格式。
HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML(Standard Generalized Markup Language) 标准通用标记语言。

四、用div来占块，布局,用css来控制

代码示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>用css来控制</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="顺手给我new一个对象 http://www.cnblogs.com/HOYF" />
<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>

效果图：

问题1：css有几种引入方式？

三种，

第一种：最常用的，引入样式表，在样式表中编写样式，引入方式如下：
<link href="css/style.css" rel="stylesheet" type="text/css">

第二种：在Html头部用<style></style>包起来，在这里面编写样式：
<style type="text/css">
*{
padding: 0;margin: 0
}
</style>

第三种:在标签里面直接编写行内样式。
<div style="color: #333"><div>

问题2：div除了可以声明id来控制，还可以声明什么控制？

div除了用id赋予它一个名称外，还可以用class来赋予它一个名称。还可以不用赋予它一个名字，直接用style来直接设定它的样式。
唯一区别就是id是唯一的，只能用一次。反而class是可以反复使用的，可以多个div相同的时候用class来定义样式。

一般JS中常用id，因为JS是获取div名字来进行判断的，也是唯一判断，如果用class会出错，如果我们写普通html，用class会好些哦。

问题3：如何让2个div，并排显示?

folat,浮动布局

代码示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>3.浮动布局</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="顺手给我new一个对象 http://www.cnblogs.com/HOYF" />
<style>
#lside{
  height: 100px;
  100px;
  background: green;
  float: left;
}
#rside{
  100px;
  height: 100px;
  background: red;
  float: right;
}
#comm{
   300px;
  height: 300px;
  background: orange;
}
</style>
</head>
    <body>
    <div id="lside">我是左</div>
    <div id="rside">我是右</div>
    <div id="comm">我是普通div</div>
    </body>
</html>

效果图：

问题4：清除浮动

示例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>4.清除浮动</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="顺手给我new一个对象 http://www.cnblogs.com/HOYF" />
<style>
#lside{
  height: 100px;
  100px;
  background: green;
  float: left;
}
#rside{
  100px;
  height: 200px;
  background: red;
  float: right;
}
#comm{
  height: 300px;
  background: orange;
  /*clear:left;/*清除左浮元素*/
  /*clear: right;/*清除右浮元素*/
  clear: both;/*同时清除左浮和右浮*/
}
</style>
</head>
    <body>
    <div id="lside">我是左</div>
    <div id="rside">我是右</div>
    <div id="comm">我是普通div</div>
    </body>
</html>

效果图：

五、实战首页布局代码示例（简单的首页布局,不含margin）

示例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>5.实战首页布局</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="顺手给我new一个对象 http://www.cnblogs.com/HOYF" />
<style>
#container{
   1002px;
  /*高度暂时不需要设置，子元素的高度会把父元素的高度撑起来*/
  background: gray;
}
#header{
  height: 120px;
  background: orange;
}
#main{
  height: 600px;
  background: green;
}
#lside{
  float: left;
   700px;
  height: 600px;
  background: pink;
}
#rside{
  float: right;
   302px;
  height: 600px;
  background: purple;
}
#footer{
  height: 120px;
  background: blue;
}
</style>
</head>
    <body>
    <div id="container">
      <div id="header"></div>
      <div id="main">
       <div id="lside"></div>
       <div id="rside"></div>
      </div>
      <div id="footer"></div>
    </div>

    </body>
</html>

六、盒模型之margin

示例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>用div来占块，布局</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="顺手给我new一个对象 http://www.cnblogs.com/HOYF" />
<style>
#cont{
1000px;
height: 600px;
background: green;
}
div{
400px;
height: 200px;
background: blue;
float: left;
}
#test{
/*1.写一个margin值，四边都会生效
margin: 10px;
*/

/* 分别设置margin值
2.上边距margin值
margin-top: 10px;
background: red;

3.下边距margin值
margin-bottom: 20px;

4.左边距margin值
margin-left: 30px;

5.右边距margin值
margin-right: 40px;
*/

/*从顶部开始，顺时针设置margin值（没有给出值得变跟对边相等）
margin: 10px 20px 30px 40px;
background: red;
*/
}
#test2{
background: orange;
}
#test3{
1000px;
}
</style>
</head>
<body>
<div id="cont">
<div id="test"></div>
<div id="test2"></div>
<div id="test3"></div>
</div>
</body>
</html>

效果：

六、实战首页布局代码示例（利用margin布局）

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>5.实战首页布局</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="顺手给我new一个对象 http://www.cnblogs.com/HOYF" />
<style>
#container{
1002px;
/*高度暂时不需要设置，子元素的高度会把父元素的高度撑起来*/
background: gray;
}
#header{
height: 120px;
background: orange;
}
#main{
height: 600px;
background: green;
}
#lside{
float: left;
700px;
height: 600px;
background: pink;
}
.four{
330px;
height: 280px;
background: black;
float: left;
margin:10px;
}
#rside{
float: right;
302px;
height: 600px;
background: purple;
}
#footer{
height: 120px;
background: blue;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="main">
<div id="lside">
<div class="four"></div>
<div class="four"></div>
<div class="four"></div>
<div class="four"></div>
</div>
<div id="rside"></div>
</div>
<div id="footer"></div>
</div>

</body>
</html>

效果：
相关阅读:
由于挂载的nfs存储目录掉下线，导致创建VM时，无法创建
 使用RVM更新Ruby 版本
 安装logstash+kibana+elasticsearch+redis搭建集中式日志分析平台
 Topic modeling【经典模型】
[第1集] 课程目标，数据类型，运算，变量
 Juint test Case 的2种使用方式
 getJSON方式请求服务器
 Web项目改名的带来的404not found问题
 JavaWeb EL表达式， JSTL标签及过滤器综合学习
 HashMap的几种遍历方式（转载）
原文地址：https://www.cnblogs.com/HOYF/p/5172154.html