1.1 了解Html
-
什么是html文档
html是一种超文本标记语言 -
.html .htm .shtml的区别
html和htm:均为静态网页后缀，可认为无区别，后缀名可以互换
shtml和html:本质上均为静态网页。html属于纯静态网页。shtml可以使用ssl。shtml是服务器动态产生的html. -
shtml是什么格式,相比于比html有何好处?
shtml是由服务器动态产生的一种html，而html没有服务器的脚本，不需要服务器读取执行相关的脚本。
shtml命名的文件里，使用了SSI的一些指令，Web网页服务器会先扫一遍shtml,看有没有SSI指令，有就按web server解释SSI指令。
shtml可以使用include引入info.htm,经过服务器生成动态页面，也就是说，假如A页面为静态页面，我们利用include将B页面引入A中，这样我们在A中就可以看到B页面的内容。
但是相比于html客户端浏览器读取htlm什么内容就会呈现给浏览者什么内容。而且，SSI还有一个作用就是在制作网页结构的时候不需要“牵一发而动全身”，只需要将文本传送到服务器，程序按照模板自动生成。所以使用shtml运转速度更快，效率更高。
1.2 开发环境准备
浏览器：火狐，Chrome
开发工具：sublime text
1.3 认识html组成
- 了解html发展历史
-
概述
HTML从1993到如今的发展，同时针对其以后的发展进行评测。
HTML语言作为网络语言标准规范，在计算机的发展史中有着不可或缺的地位。在HTML上的成就也决定着一个时代的发展。 -
HTML语言的产生HTML的全称是Hypertext Markup Language（超文本标记语言）。
HTML是用于描述网页文档的标记语言。现在我们常常习惯于用数字来描述HTML的版本（如：HTML5），但是最初的时候我们并没有HTML1，而是1993年IETF团队的一个草案，并不是成型的标准。两年之后，在1995年HTML有了第二版，即HTML2.0，当时是作为RFC1866发布的。有了以上的两个历史版本，HTML的发展可谓突飞猛进。1996年
HTML3.2成为W3C推荐标准。之后在1997年和1999年，作为升级版本的4.0和4.01也相继成为W3C的推荐标准。在2000年基于HTML4.01的ISO HTML成为了国际标准化组织和国际电工委员会的标准。于是被沿用至今，这期间虽然有点小的改动但大方向上终归没有什么变化。从1993-2000之间短短的7年时间，HTML
语言有着很大的发展，基于诸多人的努力，终于产生了我们现在用的HTML语言。 -
HTML语言的特点
HTML文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，这也是WWW盛行的原因之一，其主要特点如下： -
简易性
HTML版本升级采用超集方式，从而更加灵活方便。 -
可扩展性
HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。 -
平台无关性
虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上，这也是WWW盛行的另一个原因。
-
-
现在HTML语言正处于从HTML4向HTML5过度的一个阶段。HTML4得到了界内的广泛的认同。虽然HTML4中有着一些固定的格式特性，但是有些布局和格式仍然需要CSS来解决，HTML5的基本就立足于此。为了有一个好的未来也为了在未来巩固自己的霸主地位，HTML迫不得已的需要发展自身迎接挑战。
-
HTML语言的未来为了更好的人机交互与图形化界面，HTML5就有了发展方向。在多种网络编程语言兴起的时候。HTML5必须能够尽可能多的兼容这些语言，并提供一个良好的编程环境。简洁的界面和良好的交互成了发展的重点。对于CSS的结合再也不容忽视。HTML的几大优点不能忽视，用户需求也不能缺少，现在已经到了HTML
语言发展的关键时期，同时也掌握着好多公司发展的前景，在能够更好的兼容并包HTML5，在市场上分得一杯羹。HTML5的标准也成为了大家竞争的焦点。如今HTML5已经有了草案，并且被W3C接受，相信在不远的将来，HTML5将会给我们带来更好的网络体验。
2.xhtml和html的区别
- strict html 4.01 标准
<head>和<body> 是 <html>中一定有且只有的元素
<head> 必须有 <title>， <meta>和<style>可选, 他们只能在<head>里
<body> 里只能有 block元素
block元素不能放在inline元素里
block元素不能放在<p>里
<ul>和<ol>中只能有<li>元素,但<li>里可以放其他，包括block元素
<blockquote>中只能放block元素
- xhtml 1.0 标准
元素名必须是小写字母
元素属性用"包围,不能为空值
在内容里不能有&, 需要转义，包括其他特殊字符<>
空元素以 />结尾
3.doctype有几种类型
DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。
其中的DTD叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。
要建立符合标准的网页，DOCTYPE声明必不可少；
有以下几种：
- 过渡的(Transitional)：要求非常宽松
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- 严格的(Strict)：不能使用任何表现层的标识和属性，例如
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- 框架的(Frameset)：专门针对框架页面设计使用的DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
如果不写DOCTYPE的话，会造成低版本的ie不兼容，产生bug
1.4 网页布局之切豆腐
- 先布局
- 从上往下，从左到右，布局细节。
- div布局，css控制。
1.几种引入方式？
在HTML中引入CSS的方法主要有四种，它们分别是行内式、内嵌式、链接式和导入式。
-
行内式
行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。 -
内嵌式
嵌入式是将CSS样式集中写在网页的<head></head>标签对应的<style></style>标签对中。格式如下：
<head>
<style type="text/css">
...此处写CSS样式
</style>
</head>
缺点是对于一个包含很多网页的网站，在每个网页中使用嵌入式，进行修改样式时非常麻烦。单一网页可以考虑使用嵌入式。
- 导入式
将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：
<style type="text/css">
@import"mystyle.css"; 此处要注意.css文件的路径
</style>
导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。
- 链接式
也是将一个.css文件引入到HTML文件中，但它与导入式不同的是链接式使用HTML规则引入外部CSS文件，它在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件，使用语法如下：
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。
总结：一般来说，做网站时把样式多写在多个样式表文件中，因此我们先用链接式引入一个总的CSS文件，然后在这个CSS文件中在使用导入式来引入其他的CSS文件。但如果通过JavaScrip来动态引入CSS文件则只能使用链接式。
2.div除了可以声明id来控制，还可以用什么声明控制？
还可以使用class
3.如何让2个div并排显示？
代码地址：https://github.com/xiaobeifeng/Eight-hours-to-learn-HTML-development-Source-Code
网友评论