软件编程难学？html基础，跟着淼哥学php全栈之路7
感谢小伙伴们的持续关注，小编这几天太忙了，是在抱歉没有及时更新文章，请见谅。
上次我们讲解了web开发的基础知识，也知道了web开发的原理。
这次我们继续讲解web开发语言html。上次课程我们介绍了web开发中html就相当骨骼，css就相当于样式，js就相当于动作。
那么究竟什么才是html呢？究竟如何来学习呢？
•HTML(HyperTextMark-upLanguage)即 超文本标记语言
• htm L 是用来 描述网页 的一种语言。
•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文档是由一系列的 元素和标记 组成。
<head></head> 元素和标签都是一个意思。标签都是成对出现的。当然也有单闭合标签后面讲。
•元素名不区分大小写，HTML用 标记来规定元素的属性和它在文件中的位置 ，HTML超文本文档分 文档头和文档体 两部分
在 文档头 里，对这个文档进行了一些 必要的定义 ， 文档体 中才是要 显示的各种文档信息 。
4、HTML代码格式
<!DOCTYPE html> ————————-DOCTYPE 声明了文档类型
<html> ————————————文档类型html开始标记
<head> ———————————–头部标记
<title>我的第一个标题</title>
</head> ———————————-头部结束标记
<body> ———————————文件主体
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body> ———————————-文件主体结束
</html> ———————————-文档类型html结束标记
<html> 与 </html> 之间的文本描述网页。
<body> 与 </body> 之间的文本是可见的页面内容。
<h1> 与 </h1> 之间的文本被显示为标题。
<p> 与 </p> 之间的文本被显示为段落。
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页面杂乱无章，比如<h1>标签有开始，没有结束标签</h1>，于是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的区别？
- 所有的 标签和属性都是小写 的。是指标签和属性本身。
- 所有的 标签都需要关闭 ，双标签 <div></div> 单标签 <br /> <img />。
- 所有的 属性都应该有值 ，如果属性没有指，则使用自身来表示。
- 所有的 属性都应该使用引号括起来，单双均可 。
- 标签是 可以嵌套的，但是不能相互交叉 （骑跨）<div><h2></h2></div> √ <div><h2></div></h2> ×
而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标签的分类
•标签分两种结构：双闭合标签和单闭合标签
双闭合标签
<标签名 属性名1=值1 属性名2=值2 ..>标签中的内容</标签>
单闭合标签
<标签名 属性1=值1 属性2=值2 ../>
例如：
<input type=text id=“name”/>
7、<!DOCTYPE>声明（ DTD ）
<!DOCTYPE>是用来 声明文档类型的 ，浏览器只有了解 文档的类型 ，才能正确的显示文档。（声明必须是 HTML 文档的第一行，位于 <html> 标签之前）
从web诞生早期至今，已经发展处多个HTML版本：
对于已经发布了这么多的版本，那么浏览器该如何解释这些版本的html网页呢？到底你的网页是利用哪个版本的标记语言来写的呢？是用html2.0还是html5版本来写的呢？比如我用html3.2版本写了一个很大的项目。如果要修改这个项目要修改好几年。这个时候就体现出DTD的作用了。
就是使用DTD来进行区分的。
我们来看看常用DTD的格式吧。
HTML 顶级元素 可用性 “注册//组织//类型 标签//定义 语言””URL”；
上面是一个html的格式。
例：
HTML4.01
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “”>
XHTML
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “”>
HTML5
<!DOCTYPE html>
看出来区别了吧。以前的DTD在编写的时候，简直是程序员的噩梦。反正我是记不住，有可以记得住的大神吗？也可以站出来指教指教。o(*￣︶￣*)o开玩笑了。
那么以前的DTD到底是什么意思呢？我们来继续分析。
以XHTML的DTD为示例，我们来讲解下。
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “”>
- html ：表示该文档的跟元素为html
- PUBLIC 公共的所有人都能查看
- -//W3C//DTD XHTML 1.1//EN 文档是由W3C所发布的XHTML类型 版本1.1 EN是语言 ，它是一个文档类型的公共标识符，是一个xhtml1.1的文档。如果文档中出现Transitional就说明该文档为过渡型文档。解析到这里，浏览器就去寻找这个DTD，如果找到了就用这个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{text-align:center};#content{text-align:left}
4.兼容模式下Table中的字体属性不能继承上层的设置，white-space:pre会失效，设置图片的padding会失效。
有的小伙伴可能会说。小编你写的这些我看不懂。没关系，等你学了后面的知识在回过头来看，就会懂了。现在就知道有区别就可以了。
今天就写这么多吧。下篇文章继续带领小伙伴来认识html。
小编手写不宜，请小伙伴们多多留言点赞哦。。小编十分感谢。
（注：本内容属于原创，未经许可严禁抄袭。内容真实性已考证，图片来源于网络，图片如有侵权请联系作者删除）
