jsp页面中控件设置水平居中软件编程难学html基本跟着淼哥学php全栈之路7

感谢小伙伴们的持续关注，

上次我们讲解了web开拓的根本知识，也知道了web开拓的事理。

这次我们连续讲解web开拓措辞 html。
上次课程我们先容了web开拓中html就相称骨骼，css就相称于样式，js就相称于动作。

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

jsp页面中控件设置水平居中软件编程难学html基本跟着淼哥学php全栈之路7 Bootstrap

•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文档是由一系列的元素和标记组成。

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

例如：

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\"大众 \"大众http://www.w3.org/TR/html4/frameset.dtd\公众>

XHTML

<!DOCTYPE html PUBLIC \"大众-//W3C//DTD XHTML 1.1//EN\公众 \"大众http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd\"大众>

HTML5

<!DOCTYPE html>

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

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

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

<!DOCTYPE html PUBLIC \公众-//W3C//DTD XHTML 1.1//EN\"大众 \"大众http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd\"大众>

html：表示该文档的跟元素为htmlPUBLIC 公共的所有人都能查看-//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（标准）模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。