您的位置：首页 > Web前端 > HTML

Html初步介绍二

2016-12-17 13:54 169 查看

Html初步介绍二

这篇文章将给大家介绍html的组成部分，包括HTML骨架、HTML的基本语法特性。

HTML骨架

上一篇文章中简单的提到了html骨架，那么一个html文件的标准骨架长什么样尼?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>

这就是一个html文件的标准骨架，接下来我将对上面的代码进行分析。首先介绍文档的声明头。

Html骨架之文档声明头

任何一个标准的HTML页面，第一行一定是一个以

<!DOCTYPE ……

开头的语句。

这一行，就是文档声明头，DocType Declaration。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

到底有哪些规范呢？

首先我们先确定一件事儿，我们现在学习的是HTML4.01这个版本，这个版本是IE6开始兼容的。HTML5是IE9开开始兼容的。但是IE6、7、8这些浏览器还不能过早的淘汰，所以这几年网页还是应该用HTML4.01来制作。后面将知道手机、移动端的网页，就可以使用HTML5了。

HTML4.01里面有两大种规范，每大种规范里面又各有3种小规范。所以一共6种规范（见下面）：

HTML4.01里面规定了普通、XHTML两大种规范。

HTML觉得自己有一些规定不严谨，比如，标签是否可以用大写字母呢？

<H1></H1>

所以，HTML就觉得，把一些规范严格的标准，又制定了一个XHTML1.0。在XHTML中的字母X，表示“严格的”。

总结一下，一共有6种DTD，说白了，HTML第一行语句一共有6种：

strict表示“严格的”，这种模式里面的要求更为严格。这种严格体现在哪里？有一些标签不能使用。

比如，u标签，就是可以让一个本文加上下划线，但是这和HTML的本质有冲突，因为HTML只能负责语义，不能负责样式，而u这个下划线是样式。所以，在strict中是不能使用u标签的。

怎么给文本增加下划线呢？今后的css将使用css属性来解决。

如果对html5有认识的小伙伴的话，会发现HTML5中极大的简化了DTD，也就是说HTML5中就没有XHTML了，而是：

<!DOCTYPE html>

Html骨架之字符集

我们先来看这一句代码

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

字符集用meta标签定义，meta表示“元”。“元”配置，就是表示基本的配置项目。

可以看出charset=UTF-8中的charset就是字符集的意思，那么我们常用的字符集有UTF-8、gb2312、gbk这三种。其中

UTF-8是国际通用字库，里面涵盖了所有地球上所有人类的语言文字，比如阿拉伯文、汉语……

gb2312 是国标，是中国的字库，里面仅涵盖了汉字和一些常用外文，比如日文片假名，和常见的符号。

我们用meta标签可以声明当前这个html文档的字库，但是一定要和保存的类型一样，否则乱码！

Html骨架之关键字和页面描述

我们在网页中通过输入要搜索的信息时候，往往会得到与我们输入的信息相对来说比较匹配的网页内容，这从技术上是怎么实现的勒？比较简单的做法就是通过meta设置关键字和页面描述。

首先来看设置页面描述：

<meta name="Description" content=JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早..." />

只要设置的Description页面面熟，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO，search engine optimization，搜索引擎优化。

咱们抽象一下：

<meta name=”” content=”” />

name就是“名字”的意思，content是“内容”的意思。

也就是说，我们定义了一个名字是“Description”（描述）的meta。内容是JavaScript一种直译式脚本语言……

定义关键词：

<meta name="Keywords" content="Javascript,弱类型,编程语言" />

这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。

Keywords就是“关键词”的意思。

Html骨架之title标签

title也是有助于SEO搜索引擎优化的:

<title>JavaScript 是属于网络的脚本语言！
JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。
JavaScript 是因特网上最流行的脚本语言。</title>

网页的head标签里面，表示的是页面的配置，有什么配置？

字符集、关键词、页面描述、页面标题。

今后我们还能看见一些配置：IE适配、视口、iPhone小图标等等……

HTML的基本语法特性

HTML对换行不敏感，对tab不敏感

HTML只在乎标签的嵌套结构，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。

换不换行、tab不tab，都不影响页面的结构。

所以可以看出:

<div>
<h3></h3>
<p></p>
</div>

和

<div>
<h3></h3>
<p></p>
</div>

是完全等价的

也就是说，HTML不是依靠缩进来表示嵌套的，就是看标签的包裹关系。但是，我们发现有良好的缩进，代码更易读。要求大家都正确缩进标签。

百度为了追求极致的显示速度，所以HTML标签都没有换行、都没有缩进（tab），HTML和换不换行无关，标签的层次依然清晰，只不过程序员不可读了：

空白折叠现象

HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。

代码：里面有空格、缩进、换行

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>我是

Html</p>
</body>
</html>

显示的时候，出现了空白折叠了：

标签要严格封闭

<p>
我是Html
<p>

虽然也能够在浏览器中显示出来，但是在我们进行编程过程中一定要遵循相应的规定。否则可能会出现意想不到的结果。

Over!!!!

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航