默识| 玩博客的基础：HTML 语言

抽屉 2007-05-26

展开全文

玩博客的基础：HTML 语言

Published on 08/27,2006

博客南开更换服务器着实忙活了一阵子，现在终于可以喘口气写点东西了，然而写作的冲动好像总是在比较忙的时候出现，空闲时反到没多少感觉，很是矛盾。

言归正传，最近常有网友询问如何修改博客模板的问题，从提问方式上看明显是习惯了傻瓜型博客服务的操作方式，拖拽，选颜色，选样式等等，以至于完全忽略了 HTML 语言的存在，即使模板代码完全可编辑，他们都不知该从何入手。有些人或许认为博客本来就该弄得越简单越好，用户所要做的只是每天写写文章，贴贴图片。如果真的变成那样子，博客就成不了一种文化了：饭煮熟了就可以吃，但还是有人研究烹饪；水烧开了就能喝，但还有人会学习茶道…… 玩博客也是一样的，您可以仅仅把它当作个人日记，也可以玩出各种花样，前提是必须用心学习一些基础的东西，比如 HTML 语言。

那么 HTML 究竟是什么鬼东西呢？按照老规矩，我不会去解释它的英文含义的(因为早就忘记了)，只要将其理解为网页描述语言就好。网页描述语言是玩博客的最基础知识，其作用是通过既定的语法告诉浏览器如何显示您的博客页面。浏览器能够识别的语言一定很怪异吧？虽然样子上的确有点怪，但实际使用起来并不困难。为了帮您快速进入思考状态，请先看下面的示例：

<html> <head><title>这里的内容会显示在浏览器的标题栏(title bar)上</title></head> <body> <h1>大家好，我是一坨 HTML 网页</h1> <h2>这是 2 号标题(header)</h2> <h3>这是 3 号标题</h3> <p>这是一个段落(paragraph)，同一个段落里面可以用<br>换行(break line)</p> <p>又一个段落的第一行<br>第二行了<br>第三行了<br>其实 HTML 很容易理解的。</p> <ol> <li>这是有序列表(ordered list)中的第 1 项</li> <li>有序列表的左侧会有数字序号</li> <li>这些数字序号是自动递增的，不用我们操心</li> </ol> <p>下面我要画一条横线(horizontal rule)</p> <hr> <ul> <li>这是无序列表(unordered list)中的第 1 项</li> <li>无序列表的左侧没有数字序号，可能会有一个小圆点</li> <li>除了把 ol 换成了 ul，两者没啥区别</li> </ul> </body> </html>
查看实际显示效果

看过了上面的 HTML 网页代码和实际显示效果后您是不是发现了很多规律呢？是的，HTML 中很多东西都是用一前一后两个标签包裹起来的，后面的标签通过一个反斜杠表示它是个结束标签，某些标签里面还可以再套标签。浏览器从上到下读取 HTML 代码，并把它们解释成实际的显示格式呈现给读者，一张网页就这样完成了使命。从英文单词的开头字母您也能猜到这些标签是如何命名的，因此将它们记住也就不难了。

HTML 的标签并不止这些，您还可以在文章中插入图片，超链接和其它一些更有意思的东西，下面又是一例：

<html> <head><title>网页里还可以插入更有意思的东西</title></head> <body> <p>我希望插入一幅图片(image)：<img src="http://www./imgs/header_img.gif"/></p> <p>我还要一个超链接(anchor)：<a href="http://www./">超链接文字</a></p> <p>还有音乐！！<embed src="http://www./test.mp3" autostart=true/></p> </body> </html>
查看实际显示效果

看了这些简单的代码之后您是不是已经打算自己试试看了呢？非常乐意满足您的愿望，这里有一个同步预览的 HTML 编辑器，您可以在上面随意练习一下。为了让您将精力在主要的标签上，这个编辑器不需要您去书写 <html> <head> <title> <body> 那样的标签，直接拿 <h1> <p> <br> <hr> <ul> <ol> <li> <img> <a> 这类标签进行练习就是了。

您也许会问，这些网页怎么会这么丑呢，一点也不像我正在使用的博客首页啊？网页里面一定有一些有魔力的东西在起作用吧？当您不了解网页背后的基础知识时，那些绚丽多彩的网页永远像魔术师从帽子里掏出的东西一样，不过看过本文之后，您已经有机会到幕后去看个究竟了，千万不要错过哦。