黑马程序员--我来总结HTML （2）

来源：互联网发布：图像大小调整软件编辑：程序博客网时间：2024/06/08 05:08

-------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ --------------------

在这篇文章中我将继续分享给大家关于HTML的精彩文章来跟大家一块学习HTML。别看这些这些东西都是看着比较简单的东西，但是如果你学扎实一定会让你彻底的成为HTML高手。HTML文档有两个部分：头部（head）和主体（body）。你在头部（head）提供关于网页的信息，你在主体（body）部分提供网页的具体内容。

比如，如果你要指定HTML文档的网页标题（title）（它将显示在浏览器窗口顶部），你就要在头部（head）提供有关信息。用title元素来指定网页标题：即在首标签<title>与尾标签</title>之间写上网页标题：

<title>我的第一个网站</title>

注意，网页标题（title）不是显示在网页里，而是显示在浏览器窗口的标题栏上的。网页里显示的所有内容都必须放在body元素里。

比如，我们要在网页里显示“哇！这是我的第一个网站。”这行文字，它属于主体（body）部分，所以我们在body元素里输入：

哇！这是我的第一个网站。

标签里的p是“段落（paragraph）”的意思，也就是一个文本段落。那么，我们就知道HTML文档应该是这样：

</html><head><title>我的第一个网站</title></head><body>哇！这是我的第一个网站。</body></html>

搞定！我们已经完成了我们第一个真正的网站（尽管它只包含一个网页）！接着，咱们需要将它保存到你的硬盘上，然后在浏览器中打开它：

在记事本的“文件”菜单下选择“另存为...”。
这时会弹出一个对话框，在“保存类型”右边的下拉菜单里选择“所有文件”。这一点很重要——否则，它将被保存为文本文档，而不是HTML文档。
现在将这个文档保存为“page1.htm”（后缀名“htm”表明它是一个HTML文档。后缀名用“html”也可以，但我比较习惯使用“htm”，你可以根据自己的喜好选用二者中的任一个）。将HTML文档保存在硬盘上的哪个文件夹无关紧要——只要你记得保存位置，并能再次找到它就行。

现在打开浏览器：

在“文件”菜单下选择“打开”。
在弹出的对话框中点击“浏览”按钮。
现在，请找到你的HTML文档，然后点击“打开”。

这时，浏览器中应显示“哇！这是我的第一个网站。”。恭喜！有没我们还没有独立的完成一个网页，先请看下面的例子：
</html>。

<body>
<h1>标题</h1>
一些文字。。。
<h2>子标题</h2>
一些文字。。。。
</body>

</html>
看完了，然后呢？
现在学习七个新元素。

前面学过，你可以通过用和把文本括起来，把文本设为粗体；类似地，你可以通过用和把文本括起来，把文本设为斜体。没错，这里的“i”是“斜体（italic）”的意思。

例1：
这句话应显示为斜体
该例在浏览器中将显示如下：

这句话应显示为斜体
同样，你可以用small标签把文本设为小字体：

例2：
这句话应显示为小字体
该例在浏览器中将显示如下：这句话应显示为小字体
我可以同时应用多个标签吗？
你可以同时应用多个标签，只要你能避免标签交错起来。最好通过一个例子来说明：

例3：如果你希望一段文本即是粗体又是斜体，你可以这样做：

既是粗体又是斜体

注意不能这样：

既是粗体又是斜体
二者区别在于：在前一个例子中，首先打开的标签最后关闭。这样可以避免混淆。学习更多元素！
正如前面提到的，有些元素是没有尾标签（end tag）的。这种元素被称作空元素（empty element），它们不与特定文本段落相关。一个例子是 ，它的作用是插入一个换行符。

例4：
写一些文字 重起一行再写一些文字、
该例在浏览器中将显示如下：

写一些文字
重起一行再写一些文字
注意上面的空元素 ：它没有尾标签，并且在首标签名称的后面加了空格和斜杠。　另一个空元素是<hr />，它的作用是画一条水平线。这里的“hr”是“水平线（horizontal rule）”的意思。

例5：
<hr />

该例在浏览器中将显示如下：

--------------------------------------------------------------------------------

HTML中的空元素还包括ul、ol和li，这三个元素用于制作列表。

ul代表“无序列表（unordered list）”，它的作用是为每个列表项显示一个粗点。ol代表“有序列表（ordered list）”，它的作用是显示每个列表项的序号。用<li>元素把多个列表项组织为一个列表，其中的li代表“列表项（list item）。感觉有些迷糊？那么，请看下面的例子：

例7：
<ul>
<li>一个列表项</li>
<li>另一个列表项</li>
</ul>

该例在浏览器中将显示如下：

一个列表项
另一个列表项
例8：
<ol>
<li>第一个列表项</li>
<li>第二个列表项</li>
</ol>

该例在浏览器中将显示如下：

第一个列表项
第二个列表项
哟！就这些啊？
嗯，我们应该反复练习所学的元素，并在制作自己的网页时使用它们。
斜体
小字体
 换行
<hr /> 水平线
<ul>无序列表<ul>
<ol>有序列表<ol>
<li>列表项</li>

正像是苏坤老师说的，学编程没有什么难的不要太聪明，你只要把看见的代码练会熟练的去练习去记住那么你一定可以成为一个顶级的编程高手，希望我们将来都能成为黑马的骄傲，大家一起努力。

-------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ --------------------