博学谷 > 问答库 > 在学html之前,你需要知道的

在学html之前,你需要知道的

收藏
HTML/HTML5
24
Mar 21, 2018

在学html之前,应该了解什么是html?

超文本标记语言到底是什么意思?

编辑软件和浏览器的关系是什么?

文档声明是什么意思?

回答

小泽回答

1什么是html?
HTML是英语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>

 

(0)

相似问题

提交成功