html入门课

guava · 发表于 2008-5-17 18:35:31

首先看一下著名的禅意花园（http://www.csszengarden.com）
基本结构。大家感觉如何？很漂亮吧。这个站提倡web标准化，All Designs都是用xhtml+css来完成，
大家有发现所有页面的文字都是一样的吗？对了，其实这么多设计，都是同一个html file，
不同的是css和图片。

下我们针对这个html file去学习。
地址在这里：http://www.csszengarden.com/zengarden-sample.html
查看源代码的方法是：右键->查看源代码
打开之后发现一堆代码，头都大了，其实我们只要关注body部分就可以了。

先介绍一下html的基本结构：

HTML复制代码

<html>
<head>
<title>我是这个网页的标题</title>
</head>
<body>
<p>这是我的第一个网页。</p>
</body>
</html>

复制代码

把这段代码复制，放在记事本里，另存为index.html就可以打看查看了。观察一下，就是body就是页面显示的内容。
下面我们针对body部分展开学习。
body里面的标签有div
h1-h3 p ul和li a
html最初是传输纯文本，返璞归真，html应该做它应该做的事。

div标签    在我看来是一个容器标签，这个大家可以在后续css教程里面得到解释。
h1-h3标签 都是标题标签，为网页的文字内容划分级别的。h1是最顶级，字体也是最大的，之后逐渐变小。
            所以不用用h*标签去控制字体的大小，控制字体有css，h标签应该用来管理文章（标题）级别。
p标签       是段标签，包含着一段文字，理论上不用<br>换行。
ul和li标签 列表标签，配合使用可以做出有序和无序列表的效果
a标签       超链接标签

html就这么简单，还有一些我觉得应该放在css里面讲，下面是一个例子。

HTML复制代码

<html>
<head>
<title>第一个html页面</title>
</head>
<body>
<h1>顶级标签</h1>
<p>这里第一段，首行自动缩进，段与段之间空一行</p>
<p>这里第二段，html是解释性语言，用标签把内容夹住，对其内容做解释<br />
如果有必要换行<br />
就这样做</p>
<h2>二级标签</h2>
<ul>
<li>无序列表</li>
<li>第2点不错</li>
<li>第3点 html就是这么简单</li>
</ul>
<p>最后做一个连接去到ci的<a href="http://www.codeigniter.org.cn">首页</a>吧</p>
</body>
</html>

复制代码

archer · 发表于 2008-5-19 19:11:23

我觉得要学这些去W3C shool http://www.w3schools.com 这里是行业标准也有全面教程这些教程比一般的英文文章容易理解用金山词霸就能看懂最好哪个英文好的大侠转载并翻译一下我也好从中受益啊

guava · 发表于 2008-5-19 23:34:13

嗯
不错
找到中文的
http://www.w3school.com.cn

raptor · 发表于 2009-2-11 17:25:45

w3c感觉没啥正紧的东西
自定义一个参数，都视为错误

Hex · 发表于 2009-2-11 19:05:42

w3c 不管好不好，那是国际标准，没有标准的世界对谁都没好处。

		自动登录	找回密码
密码			入住 CI 中国社区

html入门课

评分