CSS教程系列——简单的Html语法

大虾请略过,本人菜鸟。欢迎批评指正。

看到有人留言及在抓虾推荐上一篇文章,深受鼓励,我想自己一定可以把它写完的。欢迎订阅本Blog,以关注最新教程:http://feeds.feedburner.com/eool(推荐)以及http://feed.feedsky.com/ifly

在此系列教程中,我主要是根据自己的学习经历和经验,以最通俗的语言及例子说明一些抽象的概念,相信即使你从来没有接触过Html或CSS都可以学会。另外本教程所介绍的也是最基本的概念及最常用到的知识。

我接触Html也是从Blogger开始的,以前的Blogger模板是纯Html格式的。相信好多朋友连最基本的Html标记都不清楚,在学CSS之前,我将介绍我们最常用到的一些Html标记。算是CSS的基础。

1.Html简介

HTML的英文全称是Hyper Text MarkUp Language,中文叫做“超文本标记语言”。

HTML文件看上去和一般文本类似,但是它比一般文本多了Tag(标记),比如<html>,<b>等,通过这些Tag,可以告诉浏览器如何显示这个文件。我们用记事本就可以编辑Html。

我们平常浏览网页是通过IE,Firefox此类的浏览器,为什么需要浏览器呢?浏览器是一种翻译工具,它会解释看起来复杂、凌乱的Html,让人们得到最直观的表现方式。先介绍一下Html的几个基本概念:(1)标记(Tag),有的地方也称作标签。标记在Html中是用于描述功能的符号。标记是用来实现某种功能的,标记必须用<>括起来.举个例子吧.

<B>一些文字</B>

在上面的一行代码中,<B>和</B>就是标记,那么它们可以实现什么功能呢?这两个标记只有一个差别,就是后面的标记多了一个'/',这个标记的功能就是让两个标记中间的文字加粗显示.我们会注意到在浏览器中标记是不会显示的,显示出来的是它们之间的内容.所以我们可以看出,标记在这儿就起了某种功能的作用,标记指出了处于它们之间的内容在浏览器中的表现方式.

标记一般都有一个“始标记”和一个“尾标记”,像上面例子中<B>就是始标记,带上一个斜线就变成了尾标记。那么为什么需要两个标记呢?只用一个不行吗?其中始标记告诉浏览器从此处开始标记所表示的功能,而尾标记则告诉浏览器到这里该功能结束。相信这是很容易理解的。当然也有一些单标记,比如最常用的单标记<BR>,它用来表示换行。

新版的Blogger用的是XML,它对标记的检查非常严格,一般标记必须含有结束标记,有时候我们修改了代码却无法保存,或许就是漏了结束标记。

(2)属性。HTML元素可以拥有属性。属性可以扩展HTML元素的能力。

比如你可以使用一个bgcolor属性,使得页面的背景色成为红色,就像这样:

<body bgcolor="red">

(3)注释语句。注释语句的格式为:<!--注释文-->


2.Html的基本结构



<html>

  <head>
    <title>Title of page</title>
  </head>
  <body>
    This is my first homepage. <b>This   text    is bold</b>
  </body>
</html> 

浏览器在解释Html的时候会由上而下执行,像流水一样,这就是以后我们会接触Html的一个“流”的概念,尽管简单,却是基础。


上面的Html基本结构的第一个Tag是<html>,这个Tag告诉你的浏览器这是HTML文件的头。文件的最后一个Tag是</html>,表示HTML文件到此结束。


在<head>和</head>之间的内容,是Head信息。Head信息是不显示出来的,你在浏览器里看不到。但是这并不表示这些信息没有用处。Head信息是预加载的一些信息,比如CSS以及JS就可以放在Head里。

在<title>和</title>之间的内容,是这个文件的标题。你可以在浏览器最顶端的标题栏看到这个标题。

在<body>和</body>之间的信息,是正文。

在<b>和</b>之间的文字,用粗体表示。<b>顾名思义,就是bold的意思。

3.本节最重要的内容,介绍常用的标记。大多数将会在使用的时候简单介绍。Html标记是CSS的样式附着的地方,是“钩子”。


h1,h2等

ul li等

div span p等

3 条评论:

麦小田 说...

一起学习 天天向上
加油~~

Unknown 说...

支持~
xhtml之类的也顺便介绍下吧:)
Blogger模板检查很严格,JavaScript里面如果直接含有比较符号"<",">"等待也不行。这是不是跟编码有关?

GG 说...

不错,总算知道具体html是什么意思了……:-P

这类基础文章真的很不错~~