(写在文前的只言片语、意书情殇)长歌破晓穿云过,响彻碧霄振九天.------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页面,都是如下的结构:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>我是测试用的网页的标题</title></head><body></body></html>
笔者将对上述的代码片段的第一行进行解释:<! DOCTYPE ......>这行是文档声明头DocTypeDeclaraion此标签可以告诉浏览器该网页文档是哪种规范.具体的规范:HTML4.01是IE6开始兼容的.HTML5是IE9开始兼容的.但是IE6、7、8这些浏览器不能立刻淘汰.所以大多数网页还是使用HTML4.01规范.规范(DTD)分为两大类:HTML和XHTML(X代表'严谨'),每大类规范又有三小类规范:Strict、Transitional、Frameset.不同的规范代表html标记不同的写法和注意.常用的6种DOCTYPE 声明
HTML 5<!DOCTYPE html>HTML 4.01 Strict该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">HTML 4.01 Transitional该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">HTML 4.01 Frameset该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">XHTML 1.0 Strict该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">XHTML 1.0 Transitional该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">XHTML 1.0 Frameset该 DTD 等同于 XHTML 1.0 Transitional，但允许框架集内容。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
上述不同规范下的标准的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键会自动生成如下代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Document</title></head></html>
总结:本篇旨在解释学习html中的一些细节注意.下篇将继续从本质上解释"字符集、关键字"等内容.希望多多支持,互相交流.
