HTML

HTML

标记语言
HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。21世纪以来,多媒体网络这一新兴媒介发展异常迅速,日趋成熟、规范。网站建设也由以往的仅靠技术应用向艺术领域发展,而网页的艺术设计作为一门新兴的设计类和网络的交叉科学,近几年随着网络的发展而被越来越多的网站建设者们所注重[1]。
    中文名:超文本标记语言 外文名:Hyper Text Markup Language 类型:标记语言 阅读方式:网页浏览器 外语缩写:HTML 文件扩展名:html或htm

简介

由来

HTML的英文全称是 Hyper Text Markup Language,即超文本标记语言。HTML是由Web的发明者Tim Berners-Lee和同事Daniel W.Connolly于1990年创立的一种标记语言,它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台(如UNIX,Windows等)。使用HTML,将所需要表达的信息按某种规则写成HTML文件,通过专用的浏览器来识别,并将这些HTML文件“翻译”成可以识别的信息,即现在所见到的网页。

自1990年以来,HTML就一直被用作万维网的信息表示语言,使用HTML描述的文件需要通过web浏览器显示出效果。HTML是一种建立网页文件的语言,通过标记式的指令(Tag),将影像、声音、图片、文字动画、影视等内容显示出来。事实上,每一个HTML文档都是一种静态的网页文件,这个文件里面包含了HTML指令代码,这些指令代码并不是一种程序语言,只是一种排版网页中资料显示位置的标记结构语言,易学易懂,非常简单。HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题,从一个页面跳转到另一个页面,与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP的制定使浏览器在运行超文本时有了统一的规则和标准。

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

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

定义

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

HTML版本

HTML是用来标记Web信息如何展示以及其他特性的一种语法规则,它最初于1989年由CERN的Tim Berners-Lee发明。HTML基于更古老一些的语言SGML定义,并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据,所以很早就得到各个Web浏览器厂商的支持。

HTML历史上有如下版本:

①HTML1。0:在1993年6月作为互联网工程工作小组(IETF)工作草案发布。

②HTML2。0:1995年11月作为RFC1866发布,于2000年6月发布之后被宣布已经过时。

③HTML3。2:1997年1月14日,W3C推荐标准。

④HTML4。0:1997年12月18日,W3C推荐标准。

⑤HTML4。01(微小改进):1999年12月24日,W3C推荐标准。

⑥HTML5:HTML5是公认的下一代Web语言,极大地提升了Web在富媒体、富内容和富应用等方面的能力,被喻为终将改变移动互联网的重要推手。Internet Explorer8及以前的版本不支持。

HTML在Web迅猛发展的过程中起着重要作用,有着重要的地位。但随着网络应用的深入,特别是电子商务的应用,HTML过于简单的缺陷很快凸现出来:HTML不可扩展。HTML不允许应用程序开发者为具体的应用环境定义自定义的标记。HTML只能用于信息显示。HTML可以设置文本和图片显示方式,但没有语义结构,即HTML显示数据是按照布局而非语义的。随着网络应用的发展,各行业对信息有着不同的需求,这些不同类型的信息未必都是以网页的形式显示出来。例如。当通过搜索引擎进行数据搜索时,按照语义而非按照布局来显示数据会具有更多的优点。

互联网的出现和飞速发展,彻底改变了人类社会获取、处理与利用信息的方式和效率,并且正在将信息传播的能量从网络延伸到网络之外更为广阔的社会生活领域。其中,作为信息发布与交互平台的网站所发挥的作用至关重要。

总而言之,HTML的缺点使其交互性差,语义模糊,这些缺陷难以适应Internet飞速发展的要求,因此一个标准、简洁、结构严谨以及可高度扩展的XML就产生了。

特点

超文本标记语言文档制作不是很复杂,但功能强大,支持不同数据格式的文件镶入,这也是万维网(WWW)盛行的原因之一,其主要特点如下:

简易性:超文本标记语言版本升级采用超集方式,从而更加灵活方便。

可扩展性:超文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超文本标记语言采取子类元素的方式,为系统扩展带来保证。

平台无关性:虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超文本标记语言可以使用在广泛的平台上,这也是万维网(WWW)盛行的另一个原因。

通用性:另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。

编辑方式

编辑

HTML其实是文本,它需要浏览器的解释,它的编辑器大体可以分为以下几种:

基本文本、文档编辑软件,使用微软自带的记事本或写字板都可以编写,当然,如果你用WPS或Word来编写也可以,不过保存时请使用。htm或。html作为扩展名,这样就方便浏览器认出直接解释执行了。

半所见即所得软件,如:FCK-Editer、E-webediter等在线网页编辑器;尤其推荐:Sublime Text代码编辑器(由Jon Skinner开发,Sublime Text2收费但可以无限期试用)。

所见即所得软件,使用最广泛的编辑器,完全可以一点不懂HTML的知识就可以做出网页,如:AMAYA(出品单位:万维网联盟);FRONTPAGE(出品单位:微软);Dreamweaver(出品单位Adobe)。Microsoft Visual Studio(出品公司:微软):其中所见即所得软件与半所见即所得的软件相比,开发速度更快,效率更高,且直观的表现更强。任何地方进行修改只需要刷新即可显示。缺点是生成的代码结构复杂,不利于大型网站的多人协作和精准定位等高级功能的实现。

字符集

除了常见的ASCII字符和汉字,HTML还有许多特殊字符,它们一起构成了HTML字符集。有2种情况需要使用特殊字符,一是网页中有其特殊意义的字符,二是键盘上没有的字符。HTML字符可以用一些代码来表示,代码可以有2种表示方式。即字符代码(命名实体)和数字代码(编号实体)。字符代码以“&”符开始,以分号";"结束,其间是字符名,如®。数字代码也以“&#”符开始,以分号";"结束,其间是编号,如®。

数据类型

超文本标记语言定义了多种数据类型的元素内容,如脚本数据和样式表的数据,和众多类型的属性值,包括ID、名称、URI、数字、长度单位、语言、媒体描述符、颜色、字符编码、日期和时间等。所有这些数据类型都是专业的字符数据。

显示结果

描述

实体名称

实体编号

空格

 

<

小于号

<

<

>

大于号

>

>

&

和号

&

&

"

引号

"

"

'

撇号

'(IE不支持)

'

¢

¢

£

£

日元

¥

¥

欧元

§

小节

§

§

©

版权

©

©

®

注册商标

®

®

商标

×

乘号

×

×

÷

除号

÷

÷

常见实体

整体结构

一个网页对应多个HTML文件,超文本标记语言文件以。htm或。html(外语缩写)为扩展名(其中。htm是因为之前的文件系统只支持最多三位扩展名)。可以使用任何能够生成TXT类型源文件的文本编辑器来产生超文本标记语言文件,只用修改文件后缀即可。标准的超文本标记语言文件都具有一个基本的整体结构,标记一般都是成对出现(部分标记除外例如:
 ),即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。

部分标记也可以不成对出现,如

,但是一般并不赞同这样做。

标记符,说明该文件是用超文本标记语言来描述的,它是文件的开头;而,则表示该文件的结尾,它们是超文本标记语言文件的开始标记和结尾标记。

头部内容

标记符:说明该文件是用超文本标记语言来描述的,它是文件的开头,而则表示该文件的结尾,它们是超文本标记语言文件的开始标记和结尾标记。

:这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容,它本身不作为内容来显示,但影响网页显示的效果。头部中最常用的标记符是标题标记符和meta标记符,其中标题标记符用于定义网页的标题,它的内容显示在网页窗口的标题栏中,网页标题可被浏览器用做书签和收藏清单。

标签

描述

定义了文档的信息

</span></p><p><span>定义了文档的标题</span></p></tr><tr><p><span><base></span></p><p><span>定义了页面链接标签的默认链接地址</span></p></tr><tr><p><span><link></span></p><p><span>定义了一个文档和外部资源之间的关系</span></p></tr><tr><p><span><meta></span></p><p><span>定义了HTML文档中的元数据</span></p></tr><tr><p><span><script></span></p><p><span>定义了客户端的脚本文件</span></p></tr><tr><p><span><style></span></p><p><span>定义了HTML文档的样式文件</span></p></tr></table><h3><span style="font-weight:bold;">主体内容</span></h3><p><span><body><body/>;,网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。</span></p><ul style="list-style-type:disc;"><span>标题:总共有6个等级,定义方法如下</span><p><span><h1><h1/>定义一级标题</span></p><p><span><h2><h2/>定义二级标题</span></p><p><span><h3><h3/>定义三级标题</span></p><p><span><h4><h4/>定义四级标题</span></p><p><span><h5><h5/>定义五级标题</span></p><p><span><h6><h6/>定义六级标题</span></p><p><span>以此类推</span></p><ul style="list-style-type:disc;"><span>文本</span><p><span><p><p/>定义文本</span></p><ul style="list-style-type:disc;"><span>换行符</span><p><span><br/>换行符</span></p><table style="width:322px;"><caption>示例:</caption><colgroup><col width="38" /><col width="284" /></colgroup><tr><p><span>1</span></p><p><span>2</span></p><p><span>3</span></p><p><span>4</span></p><p><span>5</span></p><p><span>6</span></p><p><span>7</span></p><p><span>8</span></p><p><span>9</span></p><p><span>10</span></p><p><span>11</span></p><p><span>12</span></p><p><span>13</span></p><p><span>14</span></p><p><span>15</span></p><p><span>16</span></p><p><span>17</span></p><p><span>18</span></p><p><span>19</span></p><p><span>20</span></p><p><span><!DOCTYPE html></span></p><p><span><html lang="en"></span></p><p><span><head></span></p><p><span><meta charset="UTF-8"></span></p><p><span><title>Title<title/></span></p><p><span><head/></span></p><p><span></span></p><p><span><body></span></p><p><span><h1>这是一级标题<h1/></span></p><p><span><h2>这是二级标题<h2/></span></p><p><span><h3>这是三级标题<h3/></span></p><p><span><h4>这是四级标题<h4/></span></p><p><span><h5>这是五级标题<h5/></span></p><p><span><h6>这是六级标题<h6/></span></p><p><span><p>定义文本<p/></span></p><p><span></span></p><p><span><p>随便字符<br/>《-换行符<p/></span></p><p><span><body/></span></p><p><span><html/></span></p></tr></table><h2><span style="font-weight:bold;">相关要求</span></h2><p><span>在编辑超文本标记语言文件和使用有关标记符时有一些约定或默认的要求。</span></p><p><span>文本标记语言源程序的文件扩展名默认使用htm(磁盘操作系统DOS限制的外语缩写为扩展名)或html(外语缩写为扩展名),以便于操作系统或程序辨认,除自定义的汉字扩展名。在使用文本编辑器时,注意修改扩展名。而常用的图像文件的扩展名为gif和jpg。</span></p><p><span>超文本标记语言源程序为文本文件,其列宽可不受限制,即多个标记可写成一行,甚至整个文件可写成一行;若写成多行,浏览器一般忽略文件中的回车符(标记指定除外);对文件中的空格通常也不按源程序中的效果显示。完整的空格可使用特殊符号(实体符)“ (注意此字母必须小写,方可空格)”表示非换行空格;表示文件路径时使用符号“/”分隔,文件名及路径描述可用双引号也可不用引号括起。</span></p><p><span>标记符中的标记元素用尖括号括起来,带斜杠的元素表示该标记说明结束;大多数标记符必须成对使用,以表示作用的起始和结束;标记元素忽略大小写,即其作用相同,但完整的空格可使用特殊符号“ (注意此字母必须小写,方可空格)”;许多标记元素具有属性说明,可用参数对元素作进一步的限定,多个参数或属性项说明次序不限,其间用空格分隔即可;一个标记元素的内容可以写成多行。</span></p><p><span>标记符号,包括尖括号、标记元素、属性项等必须使用半角的西文字符,而不能使用全角字符。</span></p><p><span>HTML注释由"<!--"号开始,由符号”-->“结束,例如<!--注释内容-->。注释内容可插入文本中任何位置。任何标记若在其最前插入感叹号,即被标识为注释,不予显示。</span></p> </article> <h2>相关词条</h2> <ul id="xgword"> <li> <a href="/cn/item/2.html" ><img src="/static/assets/images/nopic.gif" border="0" alt="电位滴定仪" width="70px" height="70px" /><span>电位滴定仪</span></a> </li> <li> <a href="/cn/item/1.html" ><img src="/uploadfile/202412/dc4fa7763cbdf93.jpg" border="0" alt="色度仪" width="70px" height="70px" /><span>色度仪</span></a> </li> <li> <a href="/cn/item/44774.html" ><img src="/uploads/202201/a5c02c58816da0417b63c086cc46f186.jpg" border="0" alt="透光石" width="70px" height="70px" /><span>透光石</span></a> </li> <li> <a href="/cn/item/49045.html" ><img src="/uploads/202201/3a72d40b367146ae24699a4ffa6ef7b2.jpg" border="0" alt="MUI" width="70px" height="70px" /><span>MUI</span></a> </li> <li> <a href="/cn/item/49031.html" ><img src="/uploads/202201/0600227a70b32c86147fa239e6057e82.jpg" border="0" alt="声卡" width="70px" height="70px" /><span>声卡</span></a> </li> <li> <a href="/cn/item/49072.html" ><img src="/uploads/202201/994550420f35e926d2e12f95c5e83bf1.jpg" border="0" alt="TFSI发动机" width="70px" height="70px" /><span>TFSI发动机</span></a> </li> <li> <a href="/cn/item/49051.html" ><img src="/uploads/202201/a3f986e0aed18e939517081cccdf3f94.jpg" border="0" alt="SuperCache" width="70px" height="70px" /><span>SuperCache</span></a> </li> <li> <a href="/cn/item/49039.html" ><img src="/uploads/202201/2b5ba084296c22ecc9dc5f4ae334b606.jpg" border="0" alt="联想Y530" width="70px" height="70px" /><span>联想Y530</span></a> </li> <li> <a href="/cn/item/49075.html" ><img src="/uploads/202201/c1446ac3be25923a42de9d0ceaa91877.jpg" border="0" alt="信号量" width="70px" height="70px" /><span>信号量</span></a> </li> <li> <a href="/cn/item/48947.html" ><img src="/uploads/202201/081410d9314172aa014da3432d744de3.jpg" border="0" alt="88毫米高射炮" width="70px" height="70px" /><span>88毫米高射炮</span></a> </li> <li> <a href="/cn/item/49013.html" ><img src="/uploads/202201/befebff90e2a03c5f10bdccdb1b2895e.jpg" border="0" alt="路由器vpn" width="70px" height="70px" /><span>路由器vpn</span></a> </li> <li> <a href="/cn/item/48965.html" ><img src="/uploads/202201/0a3ddaa58ac25b641f990299dc479e51.jpg" border="0" alt="公道杯" width="70px" height="70px" /><span>公道杯</span></a> </li> <li> <a href="/cn/item/48941.html" ><img src="/uploads/202201/74701069f9b3e47407011484b9f3749c.jpg" border="0" alt="投石车" width="70px" height="70px" /><span>投石车</span></a> </li> <li> <a href="/cn/item/49063.html" ><img src="/uploads/202201/5e232e211e9485b7a0cad9c063cc53f6.jpg" border="0" alt="外置显卡" width="70px" height="70px" /><span>外置显卡</span></a> </li> <li> <a href="/cn/item/48938.html" ><img src="/uploads/202201/f60e5c469144477c639d41d7f31fec35.jpg" border="0" alt="手板" width="70px" height="70px" /><span>手板</span></a> </li> <li> <a href="/cn/item/49060.html" ><img src="/uploads/202201/8c02f025f148a4a8515d92df2d47108e.jpg" border="0" alt="su9400" width="70px" height="70px" /><span>su9400</span></a> </li> <li> <a href="/cn/item/49078.html" ><img src="/uploads/202201/cd72263e61120556624437c36301180a.jpg" border="0" alt="http" width="70px" height="70px" /><span>http</span></a> </li> <li> <a href="/cn/item/48962.html" ><img src="/uploads/202201/04b191d827f25821004751400a098115.jpg" border="0" alt="搪玻璃" width="70px" height="70px" /><span>搪玻璃</span></a> </li> <li> <a href="/cn/item/48983.html" ><img src="/uploads/202201/00f4b642f0b2d53d5a7bf72db32562de.gif" border="0" alt="api接口" width="70px" height="70px" /><span>api接口</span></a> </li> <li> <a href="/cn/item/49001.html" ><img src="/uploads/202201/01727f033bc855c2cb7a2ce5e8e22f4c.jpg" border="0" alt="光电鼠标" width="70px" height="70px" /><span>光电鼠标</span></a> </li> </ul> <div style="clear: both"></div> <h2>相关搜索</h2> <ul id="xlword"> <li> <a href="/cn/item/311989.html" >良构xhtml</a> </li> <li> <a href="/cn/item/310188.html" >vhtml</a> </li> <li> <a href="/cn/item/262543.html" >XHTML</a> </li> <li> <a href="/cn/item/171570.html" >html代码</a> </li> <li> <a href="/cn/item/97290.html" >html编辑器</a> </li> <li> <a href="/cn/item/49084.html" >HTML</a> </li> <li> <a href="/cn/item/45648.html" >HTML5</a> </li> <li> <a href="/cn/item/5938.html" >html标签</a> </li> </ul> <div style="clear: both"></div> <h2>其它词条</h2> <ul id="xlword"> <li> <a href="/cn/item/343.html" >红枝蒲桃</a> </li> <li> <a href="/cn/item/368.html" >红松</a> </li> <li> <a href="/cn/item/334.html" >天女木兰花</a> </li> <li> <a href="/cn/item/360.html" >汉麻</a> </li> <li> <a href="/cn/item/317623.html" >李万祺</a> </li> <li> <a href="/cn/item/2.html" >电位滴定仪</a> </li> <li> <a href="/cn/item/314203.html" >望月有感</a> </li> <li> <a href="/cn/item/158663.html" >琼瑶</a> </li> <li> <a href="/cn/item/109.html" >合欢花</a> </li> <li> <a href="/cn/item/102.html" >水稻</a> </li> <li> <a href="/cn/item/1.html" >色度仪</a> </li> <li> <a href="/cn/item/385.html" >海红果</a> </li> <li> <a href="/cn/item/391.html" >南非万寿菊</a> </li> <li> <a href="/cn/item/78757.html" >宋昰昀</a> </li> <li> <a href="/cn/item/3198.html" >无花果</a> </li> <li> <a href="/cn/item/418.html" >翠菊</a> </li> <li> <a href="/cn/item/450.html" >紫花玉簪</a> </li> <li> <a href="/cn/item/424.html" >金坛雀舌</a> </li> <li> <a href="/cn/item/21536.html" >司马相如</a> </li> <li> <a href="/cn/item/21512.html" >司马徽</a> </li> </ul> </div> </div> </div> <script> if (document.documentElement.clientWidth < 768) { document.writeln('<script src="/static/default/web/scripts/tocmobile.js"><\/script>'); document.writeln( '<link rel="stylesheet" type="text/css" href="/static/default/web/css/dirmobile.css" \/>' ); } else { if ( document.documentElement.offsetHeight > 768 || document.body.offsetHeight > 768 ) { document.writeln('<div class="post-nav"> '); document.writeln('<div class="nav-heading">百科目录</div> '); document.writeln('<div id="toc"></div> '); document.writeln("</div>"); document.write('<script src="/static/default/web/scripts/tocify.js"><\/script>'); document.write( '<link rel="stylesheet" type="text/css" href="/static/default/web/css/dir.css" />' ); } } </script> <script> if (document.documentElement.clientWidth < 768) { $("article").autoc(); $("a[href^=#][href!=#]").click(function () { var target = document.getElementById(this.hash.slice(1)); if (!target) return; var targetOffset = $(target).offset().top - 46; $("body").animate({ scrollTop: targetOffset }, 1000); $("#toc").window.close(); return false; }); } </script> <div id="footer"> HTML-标记语言<a href="/">中文百科频道</a> </div> </body> </html>

以下表格列出了HTML head元素: