Before Coding [3]-第一个网页

HTML介绍

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

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

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

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

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

HTML5 介绍

HTML5 是新一代的HTML,即超文本标记语言,于去年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">

这是包含语言说明的<html>标签,例如,"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平台查看文档与手册。

原文:《第一个网页》(From 《Before Coding》

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,029评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,395评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,570评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,535评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,650评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,850评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,006评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,747评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,207评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,536评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,683评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,342评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,964评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,772评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,004评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,401评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,566评论 2 349

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,737评论 1 92
  • 格式后期处理。 Jeremy Keith在 Fronteers 2010 上的主题演讲 今天我想跟大家谈一谈HTM...
    LordZhou阅读 1,123评论 0 17
  • HTML5 标签comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。为代码编写注释的好处是...
    才気莮孒阅读 4,051评论 1 25
  • 简介网络浏览器很可能是使用最广的软件。在这篇入门文章中,我将会介绍它们的幕后工作原理。我们会了解到,从您在地址栏输...
    wengjq阅读 2,013评论 2 15
  • 1. 浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层、表示层、行为层分别是:HTML、CSS、Ja...
    程序猿人王小贱阅读 1,869评论 1 11