html中第⼀⾏代码,HTML5CSS3初学者指南(1)–编写第⼀⾏
代码
介绍
⽹络时代已经到来。现在对⼈们来说,每天上⽹冲浪已经成为⼀种最为常见的⾏为。
如果你也曾想要了解你屏幕上的这些⽹页是如何被创建出并以各式各样的⽅式渲染的,那么这⾥正是你可以了解到这些知识的地⽅。让我们⼀起⾛进在浏览器中创建了这么多⽹页的两项核⼼技术HTML、CSS。
简单的说,HTML提供了页⾯基本的框架,⽽CSS丰富了页⾯的表现。俗话说:“⼀图胜千⾔”。下图1中也很好的诠释了应⽤CSS前后之间的差别。
应⽤CSS之前 应⽤CSS之后
很早之前
HTML的诞⽣
时间回到1989年,⼀个CERN的年轻天才软件⼯程师Tim Berners-Lee ,发明了万维⽹。次年,他创作了奠定今天⽹络基础的三项技术:
HTML:超⽂本标记语⾔。⽤于构建、发布和链接⽹络⽂件的标准。
URL:统⼀资源标识符。分配给⽹络上每个资源⼀个独特的“地址”,以便更容易的访问。
HTTP:超⽂本传输协议。⼀个⽤于⽹络上定义⽹页与消息的格式与传输的通信协议。
顾名思义,HTML通过将内容嵌⼊在某些预定义的标签中,如
、和
来标记⽹页上的每⼀个⽂本。任何浏览器都知道如何正确地显⽰括号标签中⽂本。
在⽹络迅速成长的同时,⼀些新的HTML标签,如和
混乱状态
随着⽹络的普及,许多不同的浏览器出现了。⼀个接⼀个,马赛克,⽹景,紧接着微软也进军浏览器市场,每⼀个都引⼊⾃⼰独有风格的标签来达到增加市场份额和迎合Web开发者需求的⽬的。HTML已经开始偏离原先作为纯粹的结构提供者的根本了。
20世纪90年代中期,浏览器战争爆发了,这也带来了⽹络的混乱,很多⽤户感到不满。⽹页中专属标签展现不同内容或者在对⽴的浏览器中⽆法展⽰完全都是常见的抱怨。混乱的状态也引起了浏览器的兼容性问题。
在90年代后期,这种混乱的状态终于在万维⽹联盟(W3C)的控制下结束。他们决定清理HTML,以使其回到原有结构提供者的⾓⾊。同时引⼊⼀种新技术,起到⽹页中展现的作⽤。这个明智的举动,促成了CSS的引进。
CSS的黎明
CSS的全名是层叠样式表。它是Web的展现语⾔。它通过向各个HTML标签分配字体、颜⾊或布局的值,来增加了⽹页的样式。然
⽽,CSS是不只⽤于HTML,它也适⽤于任何基于XML标记的语⾔。
这种关注点的分离,带来了很多好处。这也使得从⼀个单个CSS页⾯将层叠样式应⽤到⼀个⽹站的不同页⾯成为了可能,避免了要在⽹站中的每⼀个页⾯艰难的编写相同的信息代码。换句话说,使⽤CSS极⼤的释放了⽹站的维护。
此外,这也使得不同环境中,在相同⽂件应⽤不同的CSS成为可能。例如⼤屏幕、⼩屏幕或者打印机,这些让使⽤者感觉欣喜。
HTML5和CSS3
html导航源码HTML5是HTML的最新标准,取代了以前的HTML 4.01。
HTML5诞⽣于W3C和Web超⽂本应⽤技术⼯作组(WHATWG)之间的合作。HTML5的创建,是以以下三点为⽬标:
减少对插件的依赖(如Flash)
使⽤标记代替脚本
独⽴的设备和平台
读取HTML设计原则,有助于更好地理解为什么HTML5就像是今天这个样⼦。
说到CSS,它的最新标准是CSS3,这与早期版本是完全向后兼容的。CSS3的规范是由W3C 开发的,⽬前仍处于开发阶段,其最新的版本是CSS Snapshot 2010。
HTML编辑器
要以原本的形式了解HTML的本质,我强烈建议使⽤⽂本编辑器如PC版的Notepad,Mac的TextEdit,或者任何开源⽂本编辑器如Notepad++。在这个阶段,远离那些承诺所见即所得的专业HTML编辑器,这些编辑器并⾮能帮你有效的学习。
来吧,现在启动你的⽂本编辑器。
步骤1 - 请真实的键⼊以下图2中到⽂本编辑器。我特意挑选了截图⽂字显⽰的代码⽚段,请不要简单的复制和粘贴。
图2:编写HTML代码
第2步 - 创建⼀个新的叫mysite的⽂件夹。此⽂件夹中,保存你新创建的以.htm或.html为⽂件扩展名的HTML⽂件。事实上,我建议你第⼀次创建这个⽂件夹时,就打开这个⽂件夹并保存你的⽂件。我选择将⽂件命名为hello.html第3步 - 双击你的HTML⽂件,并在浏览器中查看你的第⼀个⽹页(图3)。恭喜!你刚刚成功地创建HTML⽹页。
图3:查看关于浏览器
第4步 - 将你的⽂本编辑器和浏览器并排放置,并交叉检查它们。在⼀侧你可以看到HTML源代码,另⼀侧可以看到浏览器是如何解释和渲染它。你将看到封闭在各⾃的标签内的内容显⽰在浏览器中,⽽标签并未显⽰。看起来有⼀个问题。为什么你“真实”键⼊的空格和缩进,没有显⽰出来?“Hello HTML”的标题标签显⽰在哪⾥?你能在浏览器页⾯中到它吗?
请往下阅读
HTML基础
正如你所注意到的,HTML的内容都包含在标签对中,如
title>,
h1>和
p>。让我们开始使⽤⼀些基本的HTML标签来熟悉⼀下。
任何HTML⽂档都是以标签开始的第⼀⾏代码。这句代码会告诉浏览器页⾯中编写HTML代码的版本,以便浏览器能正确的渲染。从这个意义上来说,不是HTML标签。
HTML 4.01版本的看起来是这样的
我们⽰例⽂件中声明的为HTML5,这是HTML的最新标准。它⽐前⾯的版本更加简洁易读。
在W3C上可以到更多的信息。
标签意味着HTML⽂件的开始,同时在⽂件的最后⼀⾏必须以 html>标签的⽂标签结束。
,
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论