屌丝小课堂(一、 XHTML CSS的基础知识)

前端开发 6057 Views 2 Comments

本屌还是菜鸟,不是老师,屌丝小课堂不是教学,是为自己复习制作的知识。巩固下基础。写的不好或者错了请您指正。请勿拍砖,可以灌水。

我说下自己学习网页制作的过程,首先我不是在学校学的,是大学毕业后一直对网络感兴趣自学的。当然刚开始我学习的也是表格(table)布局,当时特别感兴趣,每天学到半夜,做梦还在做网站呢。我学习表格布局的时候人家DIV+CSS都很成熟了,所以我表格布局基本没怎么学好就去啃DIV+CSS的书去了,其实应该叫WEB标准,大家都叫DIV+CSS,我也就这么说。学习表格布局花了很多时间,因为一窍不通,后来学DIV+CSS就快的多一个星期吧,就入门了。

废话太多,进入正题,首先一定要有表格布局的基础,也就是要懂HTML 和CSS是什么。要不接下来的课程会很吃力。

1、先说HTML吧

我们每次用Dreamweaver新建一个HTML格式文档时,查看代码,会发现如下这段代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
</body>
</html>

首先,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这句话是声明文档的类型,目前一般采用过渡性,因为目前各浏览器对XHTML的解析比较宽松,允许使用HTML4.01的标签,但要符合XHTML的语法。另外还有框架和严格类型。这里不多解释。了解就好。

然后就是这句

<html xmlns="http://www.w3.org/1999/xhtml">

,这是要符合的标准语法,会提交给这个标准审核。比如书写有没闭合的标签啊,少写字母啊等,他都能检查出来。

三个就是

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

,它是表示文章的语言编码。这个很常用,很重要,要不制作出来的网站很可能乱码。其实这就像我们汉语和英语一样。这里的UTF-8是告诉浏览器,本文采用国际通用编码UTF-8。一般我们的中文网站都采用GB2312的。但是不管我们采用什么编码,有一点就是包含的CSS文件和其他文件要和HTML的编码一致,要不就乱码了。

接下来就是HTML的标签了。
HTML中标签必须结束,成对的标签用/标签结束,也有单一的标签本身结尾有/来结束,这就是XHTML的编写规范。下面举例:
成对的标签

<head></head>
< body></body>
< div></div>
< span></span>
< p></p> ......

下面是单一的。

<img src="" />
< br />

需要说明的是XHTML的标准规定标签必须小写。

 

2、下面是CSS。

css的教程,无论是哪位大师写的都必须要这个盒子模型。下图:

屌丝小课堂div+css

这个盒子是重点。我当时学习DIV+CSS时把这个图片保存在手机相册里,布局的时候拿出来看看。前面的几点,如果会表格布局很好理解。这个盒模型就很表格不一样了。学习DIV+CSS首先要搞懂这个模型。这就是DIV布局的核心所在。表格布局排版通常是大小不一样的表格嵌套来定位排版网页内容,现在用DIV就要用CSS来控制DIV的排版。这种排版方法使网页代码简洁,样式和内容分开,更容易维护,更好的兼容浏览器,手机和平板电脑也能正常浏览。盒子模型这里不多说,说了也说不明白,后面实例会用到。

3、本章最好说下如何去学习WEB标准,就是DIV+CSS。

在有HTML和CSS基础的前提下,转变下表格布局的观念。然后多做,就这两点,说再多,看再多都u 如自己去写几行代码,在浏览器看下有什么变化。网页制作是技术活儿,所以要多动手。

谢谢。屌丝码字很苦逼。

屌丝小课堂(一、 XHTML CSS的基础知识)

屌丝小课堂(二、DIV+CSS一列布局)

转载请注明:一只羊博客 » 屌丝小课堂(一、 XHTML CSS的基础知识)

分享到:
(0)

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (2)

  1. 第一次了解这些知识, :wink:

    jason2012-12-08 23:02 回复
  2. :smile:

    jason2012-12-08 22:47 回复