1篇文章内容教你学会HTML

假如你不致力于变成美工的话,那末做为开发设计人员,能够读懂HTML、必要时能开展简易改动便可。下面跟随我的思路,确保1篇文让你看懂HTML,自然,再看的全过程中,最好是自身动手能力试试,这样了解就更深了。Ok,下面刚开始:(下面的标记均为英文情况下键入)

1、  html基础标准

<html>

<head>

<title>我的网页页面</title>

………………………..

</head>

<body>

………………….

</body>

</html>

基本上全部的网页页面全是依照这个文件格式来的,这是1个网页页面务必具有的标识,每一个标识都放在< >里,以</ >完毕,只但是在省略号的地区加了许多乱78糟的物品,也便是大家看到的內容。

将以上编码拷贝到1个记事本,随后另存为a.html文档,就变成1个网页页面,试一试呢

下面,以记事本方法开启,在<body>之间再加“主页”2字,储存,再开启以后看到如图:

接着,在主页 的前后左右再加标识<a> 变成 <a href=”#”>主页</a>,储存,再看看实际效果呢?

是否便是大家平常上网看到的超连接了呢?只是这里点一下“主页”没转变,由于大家加上的空联接,乘热打铁,大家照着前面的方式,在建1个网页页面,储存为b.html,随后将上面的“#”更换为b.html,在开启,点一下主页,是否就自动跳转到b网页页面了呢。(自然a和b网页页面都要在同1文件目录下)到这里为止,你应当掌握到,实际上网页页面上全部的作用全是由不一样的相近于<a>这样的标识来完成,你必须做的时记牢这些标识的作用罢了。

2、  网页页面构造

假如你上网时留意的话,实际上网页页面全是分层的,如图所示

自然这只是1个大概的构造,你还能够依据必须分为许多块,分层关键是以便改动层面及明确各有的主要表现款式。

这关键根据<div></div>标识来完成,下面我在 “主页”再加<div>标识试试:

<div>

<a href=”b.html”>主页</a>

</div>

储存,在开启试试,甚么实际效果呢?

是否還是和改动以前1样呢,下面大家为其再加1些装饰:

<div style=”width:200px;height:100px;border-style:solid;” >

在运作,大家标识的这1块就以蓝色情况表明出来啦!

在添加许多的<div></div>块便可以将网页页面大卸8块了,呵呵,随后在你每一个块里放上你想放的物品便可。

自然,许多个<div>都再加style=””,假如这些style设定都类似的话,大家每个设定就太不便了,大家1般将style这些放在此外的.css文档(操纵网页页面中各标识的显示信息款式)中,随后开展必须启用的地区开展启用,下面来试试

新建1个记事本,重取名为c.css随后开启,写入:

#header{width:200px;height:100px;border-style:solid;}

并将其在a.html里删除

随后再</head>前添加 <link rel="stylesheet" type="text/css" href="c.css" />
也便是将c.css这个文档引进进来。将css放入独立的文档益处是:假如许多地区都引入了这个款式,大家要是改动这1个地区,就所有都转变了,要不然大家成功动改动每处,不好于后期维护保养。

最终将a.html的<div> 改成<div id=header>

实际效果是否和以前1样呢?

类似,到这里,应当“不容易作诗也会吟”了吧,这篇文章内容关键是以便让大伙儿大体上对html有个掌握,了解大约是如何回事,也有许多标识都没涉及到到,这个就必须你找本网页页面设计方案的书看来1看,背1背了。