HTML字符的应用.docx
《HTML字符的应用.docx》由会员分享,可在线阅读,更多相关《HTML字符的应用.docx(83页珍藏版)》请在冰豆网上搜索。
HTML字符的应用
HTML字符的应用
超文本标记语言或超文本链接标示语言(标准通用标记语言下的一个应用)HTML(HyperTextMark-upLanguage)是一种制作万维网页面的标准语言,是万维网浏览器使用的一种语言,它消除了不同计算机之间信息交流的障碍。
它是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言。
HTML文件是由HTML命令组成的描述性文本,HTML命令可以说明文字、图形、动画、声音、表格、链接等。
HTML文件的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。
HTML文件是可以被多种网页浏览器读取,产生网页传递各类资讯的文件。
从本质上来说,Internet(互联网)是一个由一系列传输协议和各类文档所组成的集合,html文件只是其中的一种。
这些HTML文件存储在分布于世界各地的服务器硬盘上,通过传输协议用户可以远程获取这些文件所传达的资讯和信息。
网络浏览器,例如NetscapeNavigator或MicrosoftInternetexplorer,能够解释HTML文件来显示网页,这是网络浏览器的主要作用。
当你使用浏览器在互联网上浏览网页时,浏览器软件就自动完成HTML文件到网页的转换。
优点:
打开速度快,操作简单,无需下载其他阅读器。
缺点:
改变格式,无法直接引用,界面不友好,阅读不方便。
来查看一个HTML文件的例子。
打开你喜爱的网络浏览器,在浏览器的地址输入框内敲入相关网址,进入ActiveServerPages的网点(你的计算机应该已连上了Internet)。
当在屏幕上显示了此网页后,从网络浏览器的菜单条上选择ViewSource命令。
此时屏幕上就会弹出一个新的窗口并显示一些古怪的文字。
你所看到的这些文字就是HTML文件。
万维网上的一个超媒体文档称之为一个页面(外语:
page)。
作为一个组织或者个人在万维网上放置开始点的页面称为主页(外语:
Homepage)或首页,主页中通常包括有指向其他相关页面或其他节点的指针所谓超级链接,就是一种统一资源定位器(UniformResourceLocator,外语缩写:
URL)指针,通过激活(点击)它,可使浏览器方便地获取新的网页。
这也是HTML获得广泛应用的最重要的原因之一。
在逻辑上将视为一个整体的一系列页面的有机集合称为网站。
超级文本标记语言(英文缩写:
HTML)是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。
网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:
脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。
因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。
超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后,后继的HTML5和其它标准被束之高阁,为了推动Web标准化运动的发展,一些公司联合起来,成立了一个叫做WebHypertextApplicationTechnologyWorkingGroup(Web超文本应用技术工作组-WHATWG)的组织。
WHATWG致力于Web表单和应用程序,而W3C(WorldWideWebConsortium,万维网联盟)专注于XHTML2.0。
在2006年,双方决定进行合作,来创建一个新版本的HTML。
HTML5草案的前身名为WebApplications1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的HTML工作团队。
HTML5的第一份正式草案已于2008年1月22日公布。
HTML5仍处于完善之中。
然而,大部分现代浏览器已经具备了某些HTML5支持。
2012年12月17日,万维网联盟(W3C)正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。
根据W3C的发言稿称:
“HTML5是开放的Web网络平台的奠基石。
”2013年5月6日,HTML5.1正式草案公布。
该规范定义了第五次重大版本,第一次要修订万维网的核心语言:
超文本标记语言(HTML)。
在这个版本中,新功能不断推出,以帮助Web应用程序的作者,努力提高新元素互操作性。
本次草案的发布,从2012年12月27日至今,进行了多达近百项的修改,包括HTML和XHTML的标签,相关的API、Canvas等,同时HTML5的图像img标签及svg也进行了改进,性能得到进一步提升。
支持Html5的浏览器包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari,Opera等;国内的遨游浏览器(Maxthon),以及基
在此之前的几年时间里,已经有很多开发者陆续使用了HTML5的部分技术,Firefox、GoogleChrome、Opera、Safari4+、InternetExplorer9+都已支持HTML5,但直到今天,我们才看到“正式版”。
HTML5将会取代1999年制定的HTML4.01、XHTML1.0标准,以期能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求,为桌面和移动平台带来无缝衔接的丰富内容。
超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。
网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:
文字如何处理,画面如何安排,图片如何显示等)。
浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。
但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。
在网页
一个网页对应多个HTML文件,超文本标记语言文件以.htm(磁盘操作系统DOS限制的外语缩写)为扩展名或.html(外语缩写)为扩展名。
可以使用任何能够生成TXT类型源文件的文本编辑器来产生超文本标记语言文件,只用修改文件后缀即可。
标准的超文本标记语言文件都具有一个基本的整体结构,标记一般都是成对出现(部分标记除外例如:
),即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。
有三个双标记符用于页面整体结构的确认。
标记符,说明该文件是用超文本标记语言(本标签的中文全称)来描述的,它是文件的开头;而,则表示该文件的结尾,它们是超文本标记语言文件的开始标记和结尾标记。
超级文本标记语言文档制作不是很复杂,但功能强大,支持不同数据格式的文件镶入,这也是万维网(WWW)盛行的原因之一,其主要特点如下:
简易性:
超级文本标记语言版本升级采用超集方式,从而更加灵活方便。
可扩展性:
超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。
平台无关性:
虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超级文本标记语言可以使用在广泛的平台上,这也是万维网(WWW)盛行的另一个原因。
通用性:
另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。
它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。
在网页中除了可显示常见的美国信息交换标准代码(外语缩写:
ASCII)字符和汉字外,HTML还有许多特殊字符,它们一起构成了HTML字符集。
有2种情况需要使用特殊字符,一是网页中有其特殊意义的字符,二是键盘上没有的字符。
HTML字符可以用一些代码来表示,代码可以有2种表示方式。
即字符代码(命名实体)和数字代码(编号实体)。
字符代码以“&”符开始,以分号";"结束,其间是字符名,如®。
数字代码也以“”符开始,以分号";"结束,其间是编号,如®。
一个网页对应多个HTML文件,超文本标记语言文件以.htm(磁盘操作系统DOS限制的外语缩写)为扩展名或.html(外语缩写)为扩展名。
可以使用任何能够生成TXT类型源文件的文本编辑器来产生超文本标记语言文件,只用修改文件后缀即可。
标准的超文本标记语言文件都具有一个基本的整体结构,标记一般都是成对出现(部分标记除外例如:
),即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。
有三个双标记符用于页面整体结构的确认。
标记符,说明该文件是用超文本标记语言(本标签的中文全称)来描述的,它是文件的开头;而,则表示该文件的结尾,它们是超文本标记语言文件的开始标记和结尾标记。
一、HTML基本概念
什么是HTML文件
HTML的英文全称是HypertextMarkedLanguage,中文叫做“超文本标记语。
和一般文本的不同的是,一个HTML文件不仅包含文本内容,还包含一些Tag,中文称“标记。
要浏览这个first.html文件,双击它。
或者打开浏览器,在File菜单选择Open,然后选择这个文件就行了。
示例解释
这个文件的第一个Tag是,这个Tag告诉你的浏览器这是HTML文件的头。
文件的最后一个Tag是,表示HTML文件到此结束。
在
和之间的内容,是Head信息。
Head信息是不显示出来的,你在浏览器里看不到。
但是这并不表示这些信息没有用处。
比如你可以在Head信息里加上一些关键词,有助于搜索引擎能够搜索到你的网页。
在
和之间的内容,是这个文件的标题。
你可以在浏览器最顶端的标题栏看到这个标题。
在
和之间的信息,是正文。
在和之间的文字,用粗体表示。
顾名思义,就是bold的意思。
HTML文件看上去和一般文本类似,但是它比一般文本多了Tag,比如,等,通过这些Tag,可以告诉浏览器如何显示这个文件。
HTML元素(HTMLElements)
∙HTML元素(HTMLElement)( p,title就是HTML元素。
∙HTML元素用Tag表示,Tag以<开始,以>结束。
∙Tag通常是成对出现的,比如
。
起始的叫做OpeningTag,结尾的就叫做ClosingTag。
∙目前HTML的Tag不区分大小写的。
比如,和其实是相同的。
HTML元素(HTMLElements)的属性
HTML元素可以拥有属性。
属性可以扩展HTML元素的能力。
比如你可以使用一个bgcolor属性,使得页面的背景色成为红色,就像这样:
再比如,你可以使用border这个属性,将一个表格设成一个无边框的表格。
如下:
属性通常由属性名和值成对出现,就像这样:
name="value"。
上面例子中的bgcolor,border就是name,red和0就是value。
属性值一般用双引号标记起来。
属性通常是附加给HTML的OpeningTag,而不是ClosingTag。
二、基础HTMLTag
HTML里,比较基础的Tag主要用于标题,段落和分行。
学习HTML最好的方法,就是跟着示例学。
正文标题
这个示例告诉你如何在HTML文件里定义正文标题。
HTML用
到这几个Tag来定义正文标题,从大到小。
每个正文标题自成一段。
Thisisaheading
Thisisaheading
Thisisaheading
Thisisaheading
Thisisaheading
Thisisaheading
段落划分
在HTML里用
和
划分段落。
Thisisaparagraph
Thisisanotherparagraph
换行
通过使用
这个Tag,可以在不新建段落的情况下换行。
没有ClosingTag。
用
换行是个坏习惯,正确的是使用
。
This
isapara
graphwithlinebreaks
HTML注释
在HTML文件里,你可以写代码注释,解释说明你的代码,这样有助于你和他人日后能够更好地理解你的代码。
注释可以写在
--和-->之间。
浏览器是忽略注释的,你不会在HTML正文中看到你的注释。
--Thisisacomment-->
一些小建议
HTML文件会自动截去多余的空格。
不管你加多少空格,都被看做一个空格。
一个空行也被看做一个空格。
有些Tag能够将文本自成一段,而不需要使用来分段。
比如
之类的标题Tag。
更多示例
这个示例显示了段落的特性。
这一段
在源代码里
包含很多分行,
但是浏览器忽略
这些分行。
这一段在浏览器里
包含很多空格,
但是浏览器忽略多余空格。
你使用的浏览器的窗口大小决定了段落的行数。
如果你改编浏览器窗口的大小,段落的行数会因此改变。
换行
这个示例告诉你如何在HTML文件里换行。
要
在一段
里
换行
请使用
br这个Tag。
正文标题
这个示例教会你如何在HTML文件里显示正文标题。
这是1号标题
这是2号标题
这是3号标题
这是4号标题
这是5号标题
这是6号标题
居中的正文标题
这个示例告诉你如何将正文标题居中显示。
这是标题
上面的标题是居中显示的。
加条横线
这个示例演示了如何在HTML文中加条横线。
用hr这个Tag可以在HTML文件里加一条横线。
村妇想像皇宫的生活:
皇后得用金扁担挑水吧。
问:
谁是世界上最可怜的人?
答:
炮兵连炊事班战士!
问:
为什么?
答:
戴绿帽背黑锅看别人打炮。
初中某数学老师讲方程式变换,在讲台上袖子一挽大声喝道:
同学们注意!
我要变形了!
……
代码注释
这个示例演示如何在HTML代码中加上代码注释,这些注释只显示在HTML源代码中,而源代码最终形成的网页里是看不到这些注释的。
--这是代码注释-->
代码注释是不会显示在网页里的。
背景颜色
这个示例演示如何改变HTML文件的背景色。
看,这个页面是黄色的。
三、Html常用格式
HTML定义了一些文本格式的Tag,比如利用Tag,可以将字体变成粗体或者斜体。
从下面的示例,你可以了解各种文本格式Tag如何改变HTML文本的显示。
常用文本格式Tag
示例
HTML常用的格式Tag
这个示例用了上述Tag,你可以对比一下HTML的显示结果。
粗体用b表示。
斜体用i表示。
芙蓉姐姐这个词当中划线表示删除。
想唱就唱这个词下划线插入。
X2其中的2是下标
X2其中的2是上标
好好学习,天天向上。这句话缩进表示引用
这是
预设(preformatted)文本.
在pre这个tag里的文本保留
空格和
分行。
callgetOrders
用code显示计算机代码,code里显示的字符是等宽字符。
如何看HTML的源代码
在浏览器看到的HTML网页,是浏览器解释HTML源代码后产生的结果。
要查看这个HTML的源代码,有两种方法。
一是点击鼠标右键,点击ViewSource(查看源文件)命令;二是选择浏览器菜单View(查看)中的Source(源文件)命令。
利用ViewSource得到网页的源代码,你可以由此借鉴一下别人写得好的地方。
不过在你对HTML知识尚少的情况下,看别人复杂的HTML源代码,只会让你头晕。
建议你还是再等等,先掌握一些基础再说。
四、Html特殊字符显示
HTML字符实体(CharacterEntities)
有些字符在HTML里有特别的含义,比如小于号<就表示HTMLTag的开始,这个小于号是不显示在我们最终看到的网页里的。
那如果我们希望在网页中显示一个小于号,该怎么办呢?
这就要说到HTML字符实体(HTMLCharacterEntities)了。
一个字符实体(CharacterEntity)分成三部分:
第一部分是一个&符号,英文叫ampersand;第二部分是实体(Entity)名字或者是#加上实体(Entity)编号;第三部分是一个分号。
比如,要显示小于号,就可以写<或者<。
用实体(Entity)名字的好处是比较好理解,一看lt,大概就猜出是lessthan的意思,但是其劣势在于并不是所有的浏览器都支持最新的Entity名字。
而实体(Entity)编号,各种浏览器都能处理。
注意:
Entity是区分大小写的。
如何显示空格
通常情况下,HTML会自动截去多余的空格。
不管你加多少空格,都被看做一个空格。
比如你在两个字之间加了10个空格,HTML会截去9个空格,只保留一个。
为了在网页中增加空格,你可以使用 表示空格。
最常用的字符实体(CharacterEntities)
显示结果
说明
EntityName
EntityNumber
显示一个空格
<
小于
<
<
>
大于
>
>
&
&符号
&
&
"
双引号
"
"
其他常用的字符实体(CharacterEntities)
显示结果
说明
EntityName
EntityNumber
©
版权
©
©
®
注册商标
®
®
×
乘号
×
×
÷
除号
÷
÷
ISOLatin-1字符集(见附件1)
五、HTML的超链接
先看两个示例
建立一个超链接
这个示例演示了如何在HTML文件里创建超链接。
这是一个链接
站长网站长学院站点链接
将一个图片作为一个超链接
这个示例演示了如何将一个图片作为一个超链接,即点击一个图片,可以连接到其它文件。
你可以将一张图片作为一个链接,点击这个图片。
a和href属性
HTML用来表示超链接,英文叫anchor。
可以指向任何一个文件源:
一个HTML网页,一个图片,一个影视文件等。
用法如下:
链接的显示文字
点击当中的内容,即可打开一个链接文件,href属性则表示这个链接文件的路径。
比如链接到
target属性
使用target属性,可以在一个新窗口里打开链接文件。
站长网站长学院