这是一系列的网页设计技术教程夏普550 错误代码H3-02 ,如果你是第一次打开,建议你从头查看,在本章之前,详细的叙述了网页基础知识 可以点击查看
2.1 HTML 简介
在具体的分析HTML之前,我们还必须明确一个概念,HTML不是一中编程语言,而是一中描述性的标记语言,用于描述超文本中的内容方式夏普550 错误代码H3-02 。比如如何在网页中定义一个标题、一段文本或者一个表格等,这些都是利用一个个HTML标记完成的。其最基本的语法就是:;标记;内容;/标记;。标记通常都是成对使用的,有一个开头标记,就对应有一个结束标记。结束标记只是在开头标记的前面加上一个斜杠“/”。当浏览器从服务器接收到HTML文件后,就会解释里面的标记符,然后把标记符的功能表达出来。
例如,在HTML中以;p;;/p;标记来定义一个文本段落,以;table;;/table;标记来定义一个表格夏普550 错误代码H3-02 。当浏览器碰到;p;;/p;标记时,就会把;p;;/p;之间的所有文字以一个段落的样式显示出来。
再进一步,上面说的;p;标记和;table;标记都属于结构标记,也就是它们用于定义网页内容的结构夏普550 错误代码H3-02 。此外,还有一类标记,称之为形式标记,用于定义网页内容的形式。比如浏览器遇到;b;;/b;标记中的文字以粗体样式显示出来。或者,有“;i;网页;/i;”这样一个HTML语句,其显示结果就是斜体的“网页”2字。
大家可以看到,如果我们熟悉这些语法的规定之后,可以很轻易的看懂这些“复杂”的HTML源文件夏普550 错误代码H3-02 。总的原则就是,用什么样的标记,就能得到什么样的效果。希望获得什么样子的效果,就用相应的标记即可。因此学习HTML,其实就是学习HTML的标记。
2.1.1 创建一个HTML文件
大家都会有意无意的使用网页这个概念,那么网页的本质是什么呢?其实网页就是一个文件,只不过这个文件是利用HTML编写的,所以又被称之为HTML文件夏普550 错误代码H3-02 。HTML文件的本质就是一个文本文件,只是拓展名为“.htm”或“.html”的文本文件。所以我们可以利用任何文本编辑软件创造、编辑HTML文件。在我们的电脑上,都会自带一个“记事本”的小工具,这就是最简单的文本编辑软件,当然也可以编辑我们看似复杂的HTML文档,而且杉之呓语很多小页面,都是我在记事本上写的哦!
大家都可以试一试,用记事本来创建我们第一个HTML文件夏普550 错误代码H3-02 。HTML文件的创建其实非常简单,具体看下面的步骤
打开记事本(开始→程序→附件→记事本夏普550 错误代码H3-02 ,或者直接鼠标右键桌面新建记事本就可以)
在新打开的记事本窗口上写入如下代码:
;html;
;head;
;title;test;/title;
;/head;
;body;
;b;
杉之呓语网页设计技术分享
;/b;
;/body;
;/html;
3.编写完成之后夏普550 错误代码H3-02 ,在选择“文件”菜单,“另保存”按钮,会弹出“另存为”对话框,在对话框的“保存类型”选择“所有文件”,然后在“文件名”中输入一个文件名,但是必须以“.htm”或“.html”作为文件的后缀名保存
4夏普550 错误代码H3-02 。双击刚刚我们保存的HTML文件,就会自动打开浏览器,不知道你在浏览器中看到什么了呢?
2.1.2 HTML文件结构
在上面建立的HTML文件里面我们用到了5个HTML标记,下面我就依次讲解这些标记的作用夏普550 错误代码H3-02 。实际上,这些标记构成了最简单的完整的HTML文件结构。
1.;html;标记
;html;标记放在HTML文件的开头,并没有什么实质性的功能,只是一个形式上的标记,单还是希望大家形成一个良好的编写习惯,在HTML文件开头使用;html;标记夏普550 错误代码H3-02 。
2.;head;标记
;head;标记也称为标题标记,一般放在;html;标记里面,起作用就是放置关于此HTML文件的信息,如提供索引,定义CSS样式等夏普550 错误代码H3-02 。
3.;title;标记
;title;标记称之为标题标记,它包含在;head;标记内,它的作用是设定网页的标题,当我们打开浏览器的时候就可以看到这个标题夏普550 错误代码H3-02 。
4.;boby;标记
;boby;标记又称之为主题标记,网页索要显示的内容都放在这个标记内,他是HTML文件的重点所在夏普550 错误代码H3-02 。在以后我们介绍的其他标记都是放在这个标记内的。然而这个标记不能简单认为只是一个形式标记,因为它还可以控制整个网页的背景颜色和背景图像等等。
注意:在构建HTML框架的时候夏普550 错误代码H3-02 ,切不可颠倒哥哥标记的位置,我们可以这么理解,这个标记框架,就如同我们穿衣服一样,总是内衣穿在里面,外套穿在外面…
2.2 简单的HTML示列
多说无疑,接下来我会给大家提供几个写好的HTML代码,遇到特殊的标记我会单独说明,,大家只有多看多比较,才能发现这里面的相同点和不同点,可以把这些代码复制到你的记事本里,存储为.html格式,查看实际的显示样式夏普550 错误代码H3-02 。
【例1】 ;html;
;head;
;title;标题标记;/title;
;/head;
;body;
以下为标题样式:
;h1;H1标题大小;/h1;
;h2;H2标题大小;/h2;
;h3;H3标题大小;/h3;
;h4;H4标题大小;/h4;
;h5;H5标题大小;/h5;
;h6;H6标题大小;/h6;
;/body;
;/html;
这个例子里面,我运用了标题标记;Hn;;/Hn;(n表示1到6的数字)夏普550 错误代码H3-02 。这个标记雍闿设置标题文字以加粗的方式显示在网页中。它共有6个层次,也就是可以设置6种大小的样式。
【例2】 ;html;
;head;
;title;设置文字颜色;/title;
;/head;
;body;
;font color=blue;
这是蓝色文字
;/font;
;/body;
;/html;
;flont color=#;;/font;标记可以用来控制文字颜色,#代表颜色的英文名车夏普550 错误代码H3-02 。这里的标记需要特别注意一下,在标记名称(font)的后面还有一个单词color,它称之为标记的“属性”,用于设置莫一个标记的某些属性性质,例如color这个属性,就用来设置文字的颜色属性,常用的颜色名称有black(黑) gray(深灰) silver(浅灰) green(绿) purple(紫) yellow(黄) red(红) white(白)等。 PS:还有另外一种颜色的表示方式,这个我们在后面会详细的解释的。
【例3】 ;html;
;head;
;title;蓝色粗斜字体;/title;
;/head;
;body;
;b;
;i;
;font color=blue;
这是蓝色粗斜字体
;/font;
;/i;
;/b;
;/body;
;/html;
;b;;/b;标记的作用是加粗,;i;;/i;标记的作用是使文字以倾斜的形式显示夏普550 错误代码H3-02 。 需要特别说明的是,这是一个标记间的相互嵌套,也就是一个标记放在另一个标记之中,它们共同控制最里面的文字的显示方式。
【例4】 ;html;
;head;
;title;插入图片;/title;
;/head;
;body;
;center;
021yin.com /wp-content/uploads/2012/02/111-300×202.jpg;
;p;网页也可以图文并茂夏普550 错误代码H3-02 !;/p;
;/center;
;/body;
;/html;
这个例子里面夏普550 错误代码H3-02 ,我们在网页里面加入了一张图片,当然这个图片的地址是可以随意变化的,你也可以设置为你电脑中存储的图片,但是相关的文件路径必须写清楚哦!PS:图片的拓展名必须要一起加上
【例5】 ; html;
;head;
;title;注释标记;/title;
;/head;
;body;
这是正文文本…… ;!- 这是注释文本…… –;
;/body;
;/html;
我们可以看到,在“;!-”和“–;”之间的内容是没有在浏览器中显示出来的,这对标记为注视标记,作用是使设计者和使用者了解改文件的内容,也解释我们平时说的“备注”夏普550 错误代码H3-02 。
好了,写到这里,相信大家也对一般的HTML代码有了一定的了解,在我说举得例子中,大家可以复制下来,自己修改看看能得到什么样的效果,下面我们将注重说明专业编辑软件Dreamweaver的使用方法夏普550 错误代码H3-02 。大家在熟悉代码结构的时候,可以夺取网上找一些简单的网页,看一些对方网站的源代码,并自己尝试修改一下。还记得怎么下载源代码吗?杉之呓语 网页基础知识
延伸:Dreamweaver基础教程
Dreamweaver是一个设计制作网页时非常好用的工具,前面我们详细的解释了HTML文档结构,并且教大家在记事本里创建HTML文档,但是碎花说的好,工欲善其事必先利其器,所以,为了更好的学习和编写HTML文档,特做一篇延伸教程分享夏普550 错误代码H3-02 。
“Dreamweaver是个非常实用的软件夏普550 错误代码H3-02 ,关于软件资源的下载,可以随意搜索下载”
1.创建新的空白文档
如果要用Dreamweaverxinjian HTML文档,就可以选择“文件”菜单中的“新建”命令,这是会出现一个“新建文档的对话框”,它提供了一些可供使用的模版,我们这里仅需使用最基本的一中,也是莫默认的一中,就是在“基本页”目录类别中的HTML夏普550 错误代码H3-02 。由于是默认的一中,因此可以直接单击“创建”按钮,打开一个新的文档窗口。
注意:Dreamweaver中会自动生成如下代码:
;!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ””;
;html xmlns=””;
;head;
;meta ″ /;
;title;无标题文档;/title;
;/head;
;body;
;/body;
;/html;
可以看到这些代码与我们前面介绍的网页结构很相似夏普550 错误代码H3-02 ,如;html;、;head;和;body;等标记都可以看到,另外我们还看到一些前面没有提及的代码,例如:
;!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ””;
这是一个“文档类型”说明,放在页面的最开始夏普550 错误代码H3-02 。随着互联网技术的发挥咱,HTML语言的规范也在发展,因此产生了不同的规范分支版本,对“文档类型”进行说明,其作用就是要告诉浏览器按照哪种具体的规范来解释和显示这个页面。
这些语言规范彼此之间并不是完全不同的,事实上它们很多基本结构和元素都是完全相同的,因此如果像前面的不写这两行代码,大多数的浏览器仍旧可以正常显示网页内容的夏普550 错误代码H3-02 。但是如果使用一些比较高级的特性,这里的文档类型说明就是必不可少的了。
好了夏普550 错误代码H3-02 ,这就是Dreamweaver最最简单的简历新文档的教程…
021yin.com