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

写给自己看的HTML、CSS、XHTML指南 二

2010-05-13 10:37 204 查看
在上一章节中，我们反复的提到了HTML，那么它到底是什么东西呢？

这一章，让我们来揭开它神秘的面纱吧，HTML是英文HyperText Markup Language的缩写形式，中文译为：超文本标记语言。

超文本标记语言，有二层含义：超文本则代表着我们可以通过HTML语言中的<a>元素创建一个页面到另一个页面的链接，而标记则用来标明文本（内容）的结构，在21世纪的今天，编写一个具有良好结构的网页变得越来越重要，回到上一章我们讨论的问题，用户可能通过多种不同的途径来浏览网页，如果你的网页不够严谨，那对于视觉障碍人士而言，是非常可怕的事；另外对于结构性好的页面，应用样式和JavaScript脚本语言将变得非常容易，那么什么是样式和JavaScript脚本语言呢？别心急，心急吃不了热豆腐，后续文章将会陆续提及。

什么是标记？标记是用尖括号（<>）括起来的字母或者单词，例如<head>、<p>等，它负责告知浏览器，嘿，我定义了一个结构，你必须以最良好的状态来显示我！

在2010年的今天，一个符合W3C标准的网页，必须出现以下元素：<!Doctype>、<html>、<head>、<title>、<body>标记对（元素）且只能出现一次，当然了，我们可以在这些元素中嵌入其它一些元素或内容。

等等，什么是标记对（元素）？

标记对就是由：开始标记 + 内容 + 结束标记 组成的，开始标记由<>和元素名组成，比如<head>，内容就是被标记的文本（内容），结束标记由</>和元素名组成，例：<title>这是第一个网页</title>

在HTML中有没有办法加入注释？比如告诉别人，这个网页是我写的？

有的，用标记<!-- 和 -->把注释内容包含起来，例：<!-- 这是我的第一个网页 -->，浏览器在解析HTML时，遇到此标记，将直接忽略（即不进行解析），继而处理下一个标记，用户必须查看网站源文件，才能看到此注释~

下面来看一个简单的例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"> 　　

<html>

<head>

<title>这是我的第一个网页</title>

</head>

<body>

<p>这是一个段落</p>

<!-- 可能出现的一些元素和内容 -->

</body>

</html>

这段简单的代码，告诉浏览器在页面中显示一个标题（<title>）和一个段落（<p>），红色部分表示当前网页使用的HTML版本（DOCTYPE），根据这个版本（DOCTYPE），效验器会根据这个DOCTYPE验证当前页面的HTML代码的合法性，现在我们暂不去考虑它，下章将具体介绍什么是效验。

等等，你是不是忘记教我们如何运行它了？

哦，对，是我疏忽了，对不起，现在来说明吧：在WINDOWS操作系统中，选择桌面，右键鼠标 --> 新建文本文档，然后将以上代码复制到其中，修改文件名后缀为.html或.htm，然后双击浏览器即可看到实际效果，title元素包含的内容告诉浏览器，这个网页的标题是什么，其一般显示在浏览器的最顶部。p元素则告诉浏览器创建一个段落，并包含文字“这是一个段落”。（等等，你看不懂以上代码？没关系，后面我们会详细介绍，暂时不去考虑它们）

必须强调的是：在WINDOWS系统中，默认是不显示文件扩展名的，因此我们必须要进行设置，打开我的电脑，在菜单栏中找到工具栏，选择文件夹选项，将弹出一个窗口，单击查看项，将隐藏已知文件类型的扩展名默认的选中框取消，然后应用，即可显示扩展名。

祝贺你，第一个HTML页面完成了！是不是有点激动呢？原来网页设计并不像传说中的那么可怕。

那么，你准备好学习更高级一点的课程了嘛？继续往下读....

在上面的代码中，<html>元素用来告诉浏览器网页是从这里开始的，<head>元素则告诉浏览器此网页的一些元信息，比如<title>元素（标题），<body>告诉浏览器此网页需要显示（包含）的内容，比如<p>元素代表一个段落。<!-- --> 这个元素前面已经说过了，用来注释信息，但并不在页面显示。

必须要记住的是：HTML是一种树形结构。“等等，恕我愚昧，打断一下，何为树形结构？”大家都见过小树吧？“嗯”。知道树有树根对吧？树包含一个树根，树上会有很多树枝，对吧？树枝又分为大树枝和小树枝之分，大树枝包含小树枝，树枝包含树叶，若不明白，可以这样理解：<html>元素为树根，<head>元素、<body>元素为大树枝，<title>元素为<head>大树枝的上的小树枝，<p>元素为<body>大树枝上的小树枝。<title>小树枝上包含树叶，树叶就是内容，也就是：这是我的第一个网页。类似的，<p>的树叶为：这是一个段落。

HTML就是这样相互嵌套的，若还不明白，先休息休息，然后慢慢消化。

若不理解这里，对未来的学习将大打折扣，建议先理清思维再继续向下。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航