码迷,mamicode.com
首页 > Web开发 > 详细

自学html--one

时间:2016-01-30 22:37:28      阅读:306      评论:0      收藏:0      [点我收藏+]

标签:

一、.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,浮动布局
 
 
 

自学html--one

标签:

原文地址:http://www.cnblogs.com/HOYF/p/5172154.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!