软件编程难学？html基础，跟着淼哥学php全栈之路7

感谢小伙伴们的持续关注，小编这几天太忙了，是在抱歉没有及时更新文章，请见谅。

上次我们讲解了web开发的基础知识，也知道了web开发的原理。

这次我们继续讲解web开发语言html。上次课程我们介绍了web开发中html就相当骨骼，css就相当于样式，js就相当于动作。

那么究竟什么才是html呢？究竟如何来学习呢？

•HTML(HyperTextMark-upLanguage)即超文本标记语言

•HTML 是用来描述网页的一种语言。

•HTML不是一种编程语言，而是一种标记语言

html并不是真正意义上的编程语言，而是由一套标签和内容组成的标记语言。

标记语言是一套标记标签(markup tag)

•HTML 使用标记标签来描述网页。（换句话说，碰到浏览器认识的标签，就按照这个标签的意义来渲染网页）

•HTML 文档包含了HTML 标签及文本内容。

•HTML 文档也叫做web 页面

•HTML 文档描述网页

•HTML 文档包含 HTML 标签和纯文本

•HTML 文档也被称为网页

•Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：

html是由W3C这个组织维护的。如果不清楚的小伙伴，可以查看我的上一篇文章了解内容。

我将html的学习阶段分三个阶段、初级、中级、高级。（当然高级也不难）o(*￣︶￣*)o

1、html编写方法

•使用手工编写

记事本和各类IED进行编写，文件名存为.htm .html格式。

•使用可视化HTML编辑器

Frontpage、Dreamweaver等所见即所得的编辑器进行编写。

•由web服务器（或称HTTP服务器）一方实时动态的生成

由WEB相关编程语言，动态生成html文件。

有的小伙伴，可能不清楚如何开启电脑显示后缀名。

我的电脑是windows10操作系统。这样就可以在电脑中显示文件的后缀名了。

其中.html就是我们的网页了。

2、html文件命名

•*.htm或*.html

•无空格

•无特殊字符（例如&符号）只可以有”_”，只可以为英文、数字（为什么不能以中文方式命名？）

•区分大小写

•首页文件名默认为：index.htm或index.html 和其他动态语言文件如index.php index.asp index.jsp

为什么不建议中文命名！

1、计算机是老外开发的、操作系统是老外开发，HTML语法也是老外开发的、所以网页文件默认也就只能按老外的命名规则了（用英语）中文需要经过一定的转码才能让浏览器认识，不然根本不认识

2、这个就是中文命名的后果咯。找不到对应的路径下的文档。

The requested URL /demo/qzb/分享界面.html was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

2、 使用Apache或Nginx（web服务器）部署时需要修改配置才能支持中文、外国的软件默认都不支持中文的,建议不要使用中文作为文件名。

3、html的基本架构

•一个HTML文档是由一系列的元素和标记组成。

元素和标签都是一个意思。标签都是成对出现的。当然也有单闭合标签后面讲。

•元素名不区分大小写，HTML用标记来规定元素的属性和它在文件中的位置，HTML超文本文档分文档头和文档体两部分

在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。

4、HTML代码格式

-------------------------DOCTYPE 声明了文档类型

------------------------------------文档类型html开始标记

-----------------------------------头部标记

我的第一个标题

----------------------------------头部结束标记

---------------------------------文件主体

我的第一个标题

我的第一个段落。

----------------------------------文件主体结束

----------------------------------文档类型html结束标记

与 之间的文本描述网页。

与 之间的文本是可见的页面内容。

与

之间的文本被显示为标题。

与

之间的文本被显示为段落。

head部分 有点像人的思想，不能被别人看到的，有很多内容是给http协议和电脑看的信息。

body部分，是浏览器具体渲染的内容，可以被别人看到的内容。

5、从html历史来认识html。

现在我们常常习惯于用数字来描述HTML的版本（如：HTML5 这是一个泛称），但是最初的时候我们并没有HTML1，而是1993年IETF团队的一个草案，并不是成型的标准。

两年之后，在1995年HTML有了第二版，即HTML2.0。

有了以上的两个历史版本，HTML的发展可谓突飞猛进。

1996年HTML3.2成为W3C推荐标准。之后在1997年和1999年，作为升级版本的4.0和4.01也相继成为W3C的推荐标准。

在2000年基于HTML4.01的ISO HTML 成为了国际标准化组织和国际电工委员会的标准。

于是被沿用至今，这期间虽然有点小的改动但大方向上终归没有什么变化。

从1993-2000之间短短的7年时间，HTML 语言有着很大的发展，基于诸多人的努力，终于产生了我们现在用的HTML语言。

由于当时html的前端程序员编写html页面杂乱无章，比如标签有开始，没有结束标签，于是w3c组织又出了一种新的标记语言打算代替html语言。就是我们知道的XML语言（eXtensible Markup Language，可扩展标记语言）来替代html。

但是w3c组织是在是太天真了。习惯已经养成了，程序员很难改掉自己编写的习惯，所以这个计划没能完成。

于是在html的基础上，来了一个叫xhtml的标记语言，xhtml和html4没有任何区别，只是多了几个小规定。

•XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）。

•XHTML 的目标是取代 HTML。

•XHTML 与 HTML 4.01 几乎是相同的。

•XHTML 是更严格更纯净的 HTML 版本。

•XHTML 是作为一种 XML 应用被重新定义的 HTML。

•XHTML 是一个 W3C 标准。

•XHTML 是 HTML 与 XML（扩展标记语言）的结合物。

•XHTML 包含了所有与XML 语法结合的 HTML 4.01 元素。

XHTML和html的区别？

所有的标签和属性都是小写的。是指标签和属性本身。

所有的标签都需要关闭，双标签

单标签

。

所有的属性都应该有值，如果属性没有指，则使用自身来表示。

所有的属性都应该使用引号括起来，单双均可。

标签是可以嵌套的，但是不能相互交叉（骑跨）

√

×

而xml也改变了自己的命运，后来也被广泛应用，主要作用是传输和存储。（后面会讲到）

w3c这个组织在2004年的时候认为Html已经发展到了巅峰，就一直没有进行更新。

这个时候出现了一种新的技术，叫ajax改变了整个web领域的格局。

WHATWG（Web Hypertext Application Technology Working Group 互联网应用科技工作小组）这个组织，在2004年就说w3c不发布，我自己发布Web Applications 1.0（html5前身）。

于 2007 年被 W3C 接纳， 并成立了新的 HTML 工作团队。

在 2008 年 1 月 22 日，第一份正式草案已公布,预计将在 2010 年 9 月正式 向公众推荐。WHATWG 表示该规范是目前正在进行的工作，仍须多年的努力。

换句话，W3C这个组织看到了WHATWG发布的版本，发现原来html还可以这么玩？不行html一直是由我来维护的。来吧，把这个必须交给我维护.........就有了现在的html5.

而现在的h5是一个泛称，并不单单指的是html的版本。而是指html5+css3+javascript的一个统称。

6、html标签的分类

•标签分两种结构：双闭合标签和单闭合标签

双闭合标签

标签中的内容

单闭合标签

例如：

7、声明（DTD）

是用来声明文档类型的，浏览器只有了解文档的类型，才能正确的显示文档。（声明必须是 HTML 文档的第一行，位于 标签之前）

从web诞生早期至今，已经发展处多个HTML版本：

对于已经发布了这么多的版本，那么浏览器该如何解释这些版本的html网页呢？到底你的网页是利用哪个版本的标记语言来写的呢？是用html2.0还是html5版本来写的呢？比如我用html3.2版本写了一个很大的项目。如果要修改这个项目要修改好几年。这个时候就体现出DTD的作用了。

就是使用DTD来进行区分的。

我们来看看常用DTD的格式吧。

HTML 顶级元素 可用性 "注册//组织//类型 标签//定义 语言""URL"；

上面是一个html的格式。

例：

HTML4.01

XHTML

HTML5

看出来区别了吧。以前的DTD在编写的时候，简直是程序员的噩梦。反正我是记不住，有可以记得住的大神吗？也可以站出来指教指教。o(*￣︶￣*)o开玩笑了。

那么以前的DTD到底是什么意思呢？我们来继续分析。

以XHTML的DTD为示例，我们来讲解下。

" _src="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">" style="font-size: 16px; text-decoration: underline;">

html：表示该文档的跟元素为html

PUBLIC公共的所有人都能查看

-//W3C//DTD XHTML 1.1//EN文档是由W3C所发布的XHTML类型 版本1.1 EN是语言，它是一个文档类型的公共标识符，是一个xhtml1.1的文档。如果文档中出现Transitional就说明该文档为过渡型文档。解析到这里，浏览器就去寻找这个DTD，如果找到了就用这个DTD的要求去渲染你的网页，如果找不到呢？看下面

http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd，如果浏览器没有找到上面的解析文档，就会去这个url地址下载DTD并使用该dtd文件来渲染解析网页。

当然，如果掌握了DTD的语法，我们就知道如何来定义DTD了。具体会在讲解PHP解析XML来详细讲解DTD定义。

DTD显示会有两种模式

标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。

在兼容模式（怪异模式）中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。简单的说，就是尽可能的显示能显示的东西给用户看。

DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现

标准模式与兼容模式（怪异模式）各有什么区别?（了解即可）

1.width不同

在严格模式中 ：width是内容宽度 ，元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width + margin-right;

在兼容模式中 ：width则是元素的实际宽度 ，内容宽度 = width - ( padding-left + padding-right + border-left-width + border-right-width)

2.兼容模式下可设置百分比的高度和行内元素的高宽

在Standards（标准）模式下，给span等行内元素设置wdith和height都不会生效，而在兼容模式下，则会生效。

在standards（标准）模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。

3.用margin:0 auto设置水平居中在IE下会失效

使用margin:0 auto在standards模式下可以使元素水平居中，但在兼容模式下却会失效（用text-align属性解决）

body;#content

4.兼容模式下Table中的字体属性不能继承上层的设置，white-space:pre会失效，设置图片的padding会失效。

有的小伙伴可能会说。小编你写的这些我看不懂。没关系，等你学了后面的知识在回过头来看，就会懂了。现在就知道有区别就可以了。

今天就写这么多吧。下篇文章继续带领小伙伴来认识html。

小编手写不宜，请小伙伴们多多留言点赞哦。。小编十分感谢。

（注：本内容属于原创，未经许可严禁抄袭。内容真实性已考证，图片来源于网络，图片如有侵权请联系作者删除）