html5 简书,HTML5最全手册

(写在文前的只言片语、意书情殇)长歌破晓穿云过,响彻碧霄振九天.------Jason Zhang

web开发已现世多年,技术成熟且学习平台广泛,笔者针对其中细节从本质上进行解释.力求透彻.

本篇内容如下:

1什么是html?

2到底什么是文档说明?

1什么是htmlHTML是英语Hyper Text Markup Language超文本标记语言的缩写.我们都知道.png是图片格式 .mp4是视频格式 ,类比可知 .html是网页文件的格式.图片使用图片浏览器打开显示,使用图片编辑软件进行编辑.视频使用视频播放器打开显示,使用视频编辑软件进行编辑.网页文件使用各种浏览器打开显示.使用各种软件对其进行编辑.如记事本、sublime、webstrom、Hbulider等等

浏览网页文件的工具->各种浏览器

浏览工具.jpeg

编辑网页文件的工具->各种开发软件

编辑软件.jpeg

上述逻辑是:

1使用任一款网页编辑软件进行编辑一>2将编辑的文件保存文件为.html格式一>3使用各种浏览器打开.html文件进行浏览当然,高手以树叶为剑,大杀四方.所以选择哪种开发工具并不重要,关键是掌握核心技术.

网页逻辑.png

那么,问题来了,纯文本文档如.txt文件和网页文件有什么区别?

见下图分析:纯文本文档没有语义,如标题 段落 区块等,所有文本内容的语义是没办法描述的.所有文字都没有语义

html的作用.png

为了表示出文本的语义,要使用html来描述文本的意思.如下图:

html作用2.png

代码解释

代码解释.png

结论:

用html这种特殊的文本去描述文本内容的语义,这里h是heading标题的缩写,表示该文本的语义是一个标题,所以html就是用来描述文本内容的语义,其标记并不会显示在网页中,只是用来描述文本内容的语义而已.这也就是超文本标记语言的解释.弄清了这个本质,接下来就是学习记忆各种常用的html标记.

2什么是文档说明?任何标准的HTML页面,都是如下的结构:

我是测试用的网页的标题

笔者将对上述的代码片段的第一行进行解释:这行是文档声明头DocTypeDeclaraion此标签可以告诉浏览器该网页文档是哪种规范.具体的规范:HTML4.01是IE6开始兼容的.HTML5是IE9开始兼容的.但是IE6、7、8这些浏览器不能立刻淘汰.所以大多数网页还是使用HTML4.01规范.规范(DTD)分为两大类:HTML和XHTML(X代表'严谨'),每大类规范又有三小类规范:Strict、Transitional、Frameset.不同的规范代表html标记不同的写法和注意.常用的6种DOCTYPE 声明

HTML 5HTML 4.01 Strict该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。HTML 4.01 Transitional该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。HTML 4.01 Frameset该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。XHTML 1.0 Strict该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。必须以格式正确的 XML 来编写标记。XHTML 1.0 Transitional该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。必须以格式正确的 XML 来编写标记。XHTML 1.0 Frameset该 DTD 等同于 XHTML 1.0 Transitional，但允许框架集内容。

上述不同规范下的标准的html界面的的Emmet语法:html:4t (HTML 4.01 Transitional)html:4s (HTML 4.01)html:xt (XHTML 1.0)html:xs (XHTML 1.0 Strict)html:xxs (XHTML 1.1)html:5 (HTML5)比如:在支持Emmet语法的开发工具中敲:html:4s + tab键会自动生成如下代码:

Document

总结:本篇旨在解释学习html中的一些细节注意.下篇将继续从本质上解释"字符集、关键字"等内容.希望多多支持,互相交流.