自学html--one(div布局)-白红宇

自学html--one(div布局)

阅读量：4458 次

发布时间：2019-06-08

本文共 8333 字，大约阅读时间需要 27 分钟。

一、.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" "">

<head>

<title>用css来控制</title>

<style>

div{

height: 200px;

background: blue;

}

#main{

background: green;

}

#footer{

background: gray;

}

</style>

</head>

<body>

</body>

</html>

效果图：

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

三种，

第一种：最常用的，引入样式表，在样式表中编写样式，引入方式如下：

第二种：在Html头部用<style></style>包起来，在这里面编写样式：

padding: 0;margin: 0

}

</style>

第三种:在标签里面直接编写行内样式。

问题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" "">

<head>

<style>

#lside{

height: 100px;

width:100px;

background: green;

float: left;

}

#rside{

width:100px;

height: 100px;

background: red;

float: right;

}

#comm{

width: 300px;

height: 300px;

background: orange;

}

</style>

</head>

<body>

<div id="comm">我是普通div</div>

</body>

</html>

效果图：

问题4：清除浮动

示例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">

<head>

<style>

#lside{

height: 100px;

width:100px;

background: green;

float: left;

}

#rside{

width:100px;

height: 200px;

background: red;

float: right;

}

#comm{

height: 300px;

background: orange;

/*clear:left;/*清除左浮元素*/

/*clear: right;/*清除右浮元素*/

clear: both;/*同时清除左浮和右浮*/

}

</style>

</head>

<body>

<div id="comm">我是普通div</div>

</body>

</html>

效果图：

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

示例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">

<head>

<title>5.实战首页布局</title>

<style>

#container{

width: 1002px;

/*高度暂时不需要设置，子元素的高度会把父元素的高度撑起来*/

background: gray;

}

#header{

height: 120px;

background: orange;

}

#main{

height: 600px;

background: green;

}

#lside{

float: left;

width: 700px;

height: 600px;

background: pink;

}

#rside{

float: right;

width: 302px;

height: 600px;

background: purple;

}

#footer{

height: 120px;

background: blue;

}

</style>

</head>

<body>

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

<head>

<title>用div来占块，布局</title>

<style>

#cont{

width: 1000px;

height: 600px;

background: green;

}

div{

width: 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{

width: 1000px;

}

</style>

</head>

<body>

</div>

</body>

</html>

效果：

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

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>5.实战首页布局</title>

<style>

#container{

width: 1002px;

/*高度暂时不需要设置，子元素的高度会把父元素的高度撑起来*/

background: gray;

}

#header{

height: 120px;

background: orange;

}

#main{

height: 600px;

background: green;

}

#lside{

float: left;

width: 700px;

height: 600px;

background: pink;

}

.four{

width: 330px;

height: 280px;

background: black;

float: left;

margin:10px;

}

#rside{

float: right;

width: 302px;

height: 600px;

background: purple;

}

#footer{

height: 120px;

background: blue;

}

</style>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

效果：

转载于:https://www.cnblogs.com/HOYF/p/5172154.html

你可能感兴趣的文章

基于ajax 的几个例子 session ,ajax 实现登录,验证码 ,实现ajax表单展示

查看>>

连接不上sql server服务器的解决方案

查看>>

记录安装oracle的那些事（二）之双系统安装

【Java面试题】58 char型变量中能不能存贮一个中文汉字?为什么?

查看>>

C++ Primer 第六章函数

查看>>

交互设计算法基础（3） - Quick Sort

算法与分析统计数字问题和整数因子分解问题？

ajax 415 错误 $.ajax 中的contentType

查看>>

【CodeForces】191C Fools and Roads

查看>>

enum hack

查看>>

2017.2.7 开涛shiro教程-第六章-Realm及相关对象（三）

查看>>