1.2 第一个网页

必备基础:安装了Sublime Text

HTML介绍

HTML,全称Hyper Text Markup Language,即超文本标记语言。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。

超文本标记语言的结构包括“头”部分(Head)、和“主体”部分(Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。

万维网上的一个超媒体文档称之为一个页面(Page)。作为一个组织或者个人在万维网上放置开始点的页面称为主页(Homepage)或首页,主页中通常包括有指向其他相关页面或其他节点的指针(超级链接),所谓超级链接,就是一种统一资源定位器(URL,Uniform Resource Locator)指针,通过激活(点击)它,可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站(Website)。超级文本标记语言(HTML)是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。

网页的本质就是超文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。

超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。

HTML5 介绍

HTML5 是新一代的HTML,即超文本标记语言,于2014年10月28日正式发布,它是全新的、互联网上构建页面的标准语言。

那么究竟什么是HTML5?在 W3C HTML5 的常见问题中,关于HTML5是这样说明的:HTML5是一个开放的平台下开发的免费许可条款。

具体来说,对这句话有以下两种理解:

  • 指一组共同构成了未来开放式网络平台的技术。这些技术包括 HTML5规范、CSS3、SVG、MATHML、地理位置、XmlHttpRequest、Context 2D、Web 字体以及其他技术。这一套技术的边界是非正式的,且随时间变化的。
  • 指HTML5规范,当然也是开放式网络平台的一部分。

基础的 HTML5 页面

简单的 HTML5 页面

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>基础的HTML5页面</title>
</head>
<body>
Hello Airing!
</body>
</html>

演示 1-2-1

运行结果如下:

示例1-2-1

HTML是由一个个形如尖括号<>的标签元素组成,这些标签通常是成对出现,并且标签之间只能嵌套不能交叉

扩展:

成对出现的叫做闭合标签,单个出现的叫做单标签。不管怎样都是闭合的(单标签可以不闭合,但是在XHTML中严格要求了闭合)。闭合标签又分为开始标签和结束标签,如<body>是开始标签,</body>是结束标签。自标签如<input/> <br/>等。

关于更多的标签,建议大家自行了解一下。推荐去W3school平台查看文档与手册。

这里我们着重讲一下上述代码中出现的标签。

<!doctype html>

这个标签说明 Web 浏览器将在标准模式下呈现页面。根据 W3C 定义的 HTML5 规范,这是 HTML5 文档所必需的。这个标签简化了长期以来在不同的浏览器呈现 HTML 页面时出现的奇怪差异。它通常为文档中的第一行。

<html lang="en">

这是包含语言说明的标签,例如,"en"为英语,"zh"为中文。

<head>...</head>

这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容,它本身不作为内容来显示,但影响网页显示的效果。头部中最常用的标记符是<title>标记符和<meta>标记符。

以下表格列出了 HTML head 元素下的所有标签和功能:

标签 描述
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了HTML文档中的元数据
<script> 定义了客户端的脚本文件
<style> 定义了HTML文档的样式文件
<meta charset="UTF-8">

这个标签说明 Web 浏览器使用的字符编码模式,这里通常设置为UTF-8。如果没有需要特别设置的没必要改变它。这也是 HTML5 页面需要的元素。

<title>...</title>

这个标签说明在浏览器窗口展示的 HTML 的标题。这是一个很重要的标记,它是搜索引擎用来在 HTML 页面上收录内容的主要信息之一。

<body>...</body>

网页中显示的实际内容均包含在这2个<body>之间。

综上,HTML5网页是由第一行的<!doctype html><html>部分组成,而<html>主要分为两部分——由<head>标签规定的头部部分,和由<body>规定的主体部分。

这样,我们就把最简单的HTML网页的基本结构给捋出来了。

HTML 学习资源

因为 HTML 为基础,且内容简单,所以本节不会花过多的篇幅去介绍标签的使用,需要读者们自行去学习。

笔者强烈推荐慕课网(www.imooc.com)的HTML课程( 《HTML+CSS基础课程》:http://www.imooc.com/learn/9),认真按顺序学完本课程内容,即可掌握 HTML 与 CSS 的基础内容。另外,学习之余还可以去W3school平台查看文档与手册。

本节任务

results matching ""

    No results matching ""