本篇目录

本篇目录

什么是HTML

html5htm跨平台开辟课程02熟悉HTML Vue.js

HTML的浸染

HTML发展史

IETF简介

W3C简介

网页的固定格式

html标签

head标签

title标签

body标签

head内部标签

meta标签

HTML标签

HTML标签分类

HTML标签关系分类

DTD文档声明

HTML和XHTML、HTML5差异

htm 和 .html扩展名差异

什么是HTML

HTML实在是HyperText Markup Language的缩写, 超文本标记措辞

HTML的浸染

1.首先利用记事本保存了一个标题和两段描述, 然后修正纯文本文件的扩展名为.html, 然后再利用浏览器打开

2.打开之后创造显示的格式不对, 不对的缘故原由是由于在纯文本文件中所有笔墨都是同级别的, 浏览器不知道哪些笔墨代表什么意思. 也便是浏览器不知道哪些笔墨是标题, 哪些笔墨是段落…., 以是导致了显示的格式禁绝确

正是由于如此, 以是HTML运用而生. HTML就只有一个浸染, 它是专门用来描述文本的语义的. 也便是说我们可以利用HTML来见告浏览器哪些是标题, 哪些是段落.

这些用于描述其它文本语义的文本, 我们称之为标签. 并且这些用于描述文本语义的标签将来在浏览器中是不会被显示出来

以是正是由于HTML的这些标签是专门用来描述其它文本语义的, 并且在浏览器中不会被显示出来, 以是我们称这些文本为\"大众超文本\"大众, 而这些文本又叫做标签, 以是HTML被称之为\"大众超文本标记措辞\"大众

把稳事变:

虽然我们利用H1标签描述一段文本之后, 这段文本在浏览器中显示出来会被放大和加粗, 看上去我们是利用HTML的标签修正了被描述的那段文本的样式. 但是一定要记住, HTML只有一个浸染, 它是专门用来给文本添加语义的, 而不是用来修正文本的样式的

H1标签它的浸染是什么?

缺点: H1标签可以用来修正笔墨的大小, 并且还可以将笔墨加粗

精确: H1标签的浸染是用来见告浏览器, 哪些笔墨是标题. 也便是H1标签是专门用于给指定的笔墨添加标题语义

HTML发展史

IETF简介

IETF是英文Internet Engineering Task Force的缩写, 翻译过来便是”互联网工程任务组”

IETF卖力定义并管理因特网技能的所有方面。
包括用于数据传输的IP协议、让域名与IP地址匹配的域名系统(DNS)、用于发送邮件的大略邮件传输协议(SMTP)等

W3C简介

W3C是英文World Wide Web Consortium的缩写, 翻译过来便是W3C理事会或万维网同盟, W3C是环球互联网最具威信的技能标准化组织.

W3C于1994年10月在麻省理工学院打算机科学实验室成立。
创建者是万维网的发明者Tim Berners-Lee

W3C卖力web方面标准的制订,像HTML、XHTML、CSS、XML的标准便是由W3C来定制的。

Tim Berners-Lee(蒂姆·伯纳斯-李),万维网之父、html设计者、w3c创始人

百度百科

网页的固定格式

1.编写网页和写信一样都有一套规范和哀求, 这套规范和哀求中规定了写信的固定格式

2.写信基本构造

3.编写网页的步骤:

3.1.新建一个文本文档

3.2.利用记事本打开

3.3.编写THML代码

3.4.保存并且修正纯文本文档的扩展名为.html

3.5.利用浏览器打开编写好的文件

4.网页基本构造:

5.通过不雅观察我们创造, HTML基本构造中所有的标签都是成对涌现的, 这些成对涌现的标签中有一个带/有一个不带/, 那么这些不带/的标签我们称之为开始标签, 这些带/的我们称之为结束标签

html标签

浸染:

用于见告浏览器这是一个网页, 也便是说见告浏览器我是一个HTML文档

把稳点:

其它所有的标签都必须写在html标签里面, 也便是写在html开始标签和结束标签中间

head标签

浸染:

指定网站的标题 / 指定网站的小图片

添加网站的SEO干系的信息(指定网站的关键字/指定网站的描述信息)

外挂一些外部的css/js文件

添加一些浏览器适配干系的内容

用于给网站添加一些配置信息

例如:

把稳点:

一样平常情形下, 写在head标签内部的内容都不会显示给用户查看, 也便是说一样平常情形下写在head标签内部的内容我们都看不到

title标签

浸染:

专门用于指定网站的标题, 并且这个指定的标题将来还会作为用户保存网站的默认标题

把稳点:

title标签必须写在head标签里面

body标签

浸染:

专门用于定义HTML文档中须要显示给用户查看的内容(笔墨/图片/音频/视频)

把稳点:

虽然说有时候你可能将内容写到了别的地方在网页中也能看到, 但是千万不要这么干, 一定要将须要显示的内容写在body中

一对html标签中(一个html开始标签和一个html结束标签)只能有一对body标签

head内部标签

meta标签

1.为什么会有乱码征象?

由于我们在编写网页的时候没有指定字符集

2.如何办理乱码征象?

在head标签中添加<meta charset=\公众GBK\公众 />, 指定字符集

3.什么是字符集

字符集便是字符的凑集, 也便是很多字符堆在一起. 实在字符集很像我们古代的”活字印刷术”, 在活字印刷术中便是将很多刻有汉字的小章放到一个盒子中, 然后须要印刷笔墨的时候再去盒子中取这个小章出来用, 正是由于如此, 以是导致了乱码问题

假设北方人和南方人都拥有装满小章的盒子, 但是南方人和北方人在盒子中存储小章的顺序不太一样, 那么这个时候如果北方人和南方人都须要去取”李”字, 在南方人影象中李字在第6个盒子的第6行的第6列中(666), 在北方人的影象中李字在第8个盒子的第8行的第8列中(888). 那么此时如果让一个南方人去北方人的盒子中取”李”字的小章, 一定找不到,, 以是就导致了乱码问题

这个地方北方人的存储小章的盒子和南方人存储小章的盒子就对应网页中指定的字符集, 在网页中我们常见的字符集有两个GBK/UTF-8, GBK就对应北方人存储的盒子, UTF-8就对应南方人存储的盒子

以是在网页中指定字符集的意义就在于见告浏览器我用的是哪个盒子, 你该当如何去查找才能找到对应的精确的内容

4.GBK(GB2312)和UTF-8差异

提交比较大

体积比较小

GBK(GB2312)里面存储的字符比较少, 仅仅存储了汉字和一些常用外文

UTF-8里面存储的天下上所有的笔墨

5.那么在企业开拓中我们该当利用GBK(GB2312)还是UTF-8呢?

如果你的网站仅仅包含中文, 那么推举利用GB2312, 由于它的体积更小, 访问速率更快

如果你的网站除了中文以外, 还包含了一些其它国家的措辞 , 那么推举利用UTF-8

6.把稳点:

在HTML文件中指定的字符集必须和保存这个文件的字符集同等, 否则还是会涌现乱码

以是仅仅指定字符集不一定能办理乱码问题, 还须要保存文件的时候, 文件的保存格式必须和指定的字符集同等才能担保没有乱码问题

HTML标签

HTML标签分类

单标签

只有开始标签没有结束标签, 也便是由一个<>组成的

双标签

有开始标签和结束标签, 也便是由一个<>和一个</>组成的

HTML标签关系分类

并列关系(兄弟/平级)

嵌套关系(父子/高下级)

DTD文档声明

什么是DTD文档声明?

由于HTML有很多个版本的规范, 每个版本的规范之间又有一定的差异. 所以为了让浏览器能够精确的编译/解析/渲染我们的网页, 我们须要在HTML文件的第一行见告浏览器, 我们当前这个网页是用哪一个版本的HTML规范来编写的. 浏览器只要知道了我们是用哪一个版本的规范来编写之后, 它就能够精确的编译/解析/渲染我们的网页

DTD文档声明格式:

把稳事变:

不写也能运行

H5网页里面用H4也能运行

<!DOCTYPE>声明必须是 HTML 文档的第一行,位于 <html> 标签之前

<!DOCTYPE> 声明不是 HTML 标签

<!DOCTYPE> 声明没有结束标签

<!DOCTYPE> 声明对大小写不敏感

这个声明浏览器会看, 但是并不是完备依赖于这个声明, 浏览器有一套自己的默认的处理机制

HTML5之前2大种规范, 每种规范中又有3小种规范

大规范小规范HTMLStrict (严格的)HTMLTransitional(过度的,普通的,宽松的)HTMLFrameset(带有框架的页面)XHTMLStrict (严格的)XHTMLTransitional(过度的,普通的,宽松的)XHTMLFrameset(带有框架的页面)

HTML的DTD文档声明和XHTML的DTD文档声明有何差异?

XHTML本身规定比如标签必须小写、必须严格闭合、必须利用引号引起属性等等, 而HTML会更加疏松没有这么严格

Strict表示严格的, 这种模式里面的哀求更为严格.这种严格紧张表示在有一些标签不能利用

例如font标签/u标签等

font标签可以修正一个文本的字号、颜色、字体,但这和HTML的实质有冲突,由于HTML只能卖力语义,不能卖力样式,而font标签是用于修正样式的,以是在Strict中是不能利用font标签

u标签可以给一个文本加高下划线,但这和HTML的实质有冲突,由于HTML只能卖力语义,不能卖力样式,而u标签是用于添加下划线是样式.以是在Strict中是不能利用u标签

Transitional表示普通的, 这种模式是没有一些别的哀求

例如可以利用font标签、u标签等

但是在企业开拓中不会利用这些标签,由于这违背了HTML的实质, 而是将这些标签作为css的钩子利用

Frameset表示框架, 在框架的页面利用

后面学到框架/NodeJS 再做详细理解

常见的DOCTYPE有如下几种

有这么多规范我们学习过程中到底利用哪一种比较得当呢?

www.baidu.com (B)

www.taobao.com (A)

www.qq.com (T)

www.sohu.com(大奇葩)

无论是HTML还是XHTML,过去企业级开拓中用的比较多的大部分都是Transitional类型的文档声明

但是HTML5的时期已经到来,以上6中规范仅仅作为理解, 往后都用HTML5类型的文档声明, HTML5向下兼容(求此刻WC3心里阴影面积)

目前海内一线网站都更新到了HTML5的文档声明, 所往后续授课也是全程利用HTML5的文档声明

HTML和XHTML、HTML5差异

在HTML的早期发展中,大部分标准都是所谓的retro-spec,即先有实现后有标准
在这种情形下,HTML标准不是很规范浏览器也对HTML页面中的缺点相称宽容
这反过来又导致了HTML开拓者写出了大量含有缺点的HTML页面

html措辞本身有一些毛病(例如: 内容和形式不能分离;标签单一;数据不能复用等等),随着xml的兴起人们希望xml来填补html的不敷,但是目前有成千上万的网页都是用html编写的,以是完备利用xml来替代html还为时过早,于是W3C在2000年推出了xhtml1.0, 建立xhtml的目的便是实现从html向xml的过度

为了规范HTML,W3C结合XML制订了XHTML 1.0标准,这个标准没有增加任何新的标签,只是按照XML的哀求来规范HTML,并定义了一个新的MIME type application/xhtml+xml。
W3C的初衷是哀求浏览器对这个MIME type实施强缺点检讨,如果页面有HTML缺点,就要显示缺点信息
但是由于已有的web页面中已经有了大量的缺点,很多开拓者谢绝利用新的MIME type
W3C不得已,在XHTML 1.0的标准之后增加了一个附录C许可开拓者利用XHTML语法来写页面,同时利用旧的MIME type,application/html,来分发页面

W3C随后在XHTML 1.1中取消了附录C,即利用XHTML 1.1标准的页面必须用新的MIME type来分发。
于是这个标准并没有很多人采取

有了XHTML的教训,W3C在制订下一代HTML标准时(HTML5),就将向后兼容作为了一个很主要的原则
HTML5确实引入了许多新的特性,但是它最主要的一个特性是,不会break已有的网页
你可以将任何已有的网页的第一行改成<!DOCTYPE html>,它就成也一个HTML5页面,并且可以还是在浏览器里正常的展示。

简而言之

HTML语法非常宽松容错性强;

XHTML更为严格,它哀求标签必须小写、必须严格闭合、标签中的属性必须利用引号引起等等;

HTML5是HTML的下一个版本以是除了非常宽松容错性强以外,还增加许多新的特性

.htm 和 .html扩展名差异

DOS操作系统(win95或win98)下只能支持长度为3的后缀名,所以是htm

但在windows后缀长度可以大于3位,以是windows下无所谓htm与html,html是为长文件的格式命名的

以是htm是为了兼容过去的DOS命名格式存在的

关于课程的疑问和谈论,可以登录http://bbs.520it.com/forum.php?mod=viewthread&tid=2423。