html入门教程3
1、HTML 文本格式化
HTML 段落
HTML 编辑器
HTML 可定义很多供格式化输出的元素,比如粗体和斜体字。
下面有很多例子,您可以亲自试试:
HTML 文本格式化实例
文本格式化
此例演示如何在一个 HTML 文件中对文本进行格式化
预格式文本
此例演示如何使用 pre 标签对空行和空格进行控制。
“计算机输出”标签
此例演示不同的“计算机输出”标签的显示效果。
地址
此例演示如何在 HTML 文件中写地址。
缩写和首字母缩写
此例演示如何实现缩写或首字母缩写。
文字方向
此例演示如何改变文字的方向。
块引用
此例演示如何实现长短不一的引用语。
删除字效果和插入字效果
此例演示如何标记删除文本和插入文本。
如何查看 HTML 源码
您是否有过这样的经历,当你看到一个很棒的站点,你会很想知道开发人员是如何将它实现的?
你有没有看过一些网页,并且想知道它是如何做出来的呢?
要揭示一个网站的技术秘密,其实很简单。单击浏览器的“查看”菜单,选择“查看源文件”即可。随后你会看到一个弹出的窗口,窗口内就是实际的 HTML 代码。
文本格式化标签
标签
描述
<b>定义粗体文本。
<big>定义大号字。
<em>定义着重文字。
<i>定义斜体字。
<small>定义小号字。
<strong>定义加重语气。
<sub>定义下标字。
<sup>定义上标字。
<ins>定义插入字。
<del>定义删除字。
<s>不赞成使用。使用 <del> 代替。
<strike>不赞成使用。使用 <del> 代替。
<u>不赞成使用。使用样式(style)代替。
“计算机输出”标签
标签
描述
<code>定义计算机代码。
<kbd>定义键盘码。
<samp>定义计算机代码样本。
<tt>定义打字机代码。
<var>定义变量。
<pre>定义预格式文本。
<listing>不赞成使用。使用 <pre> 代替。
<plaintext>不赞成使用。使用 <pre> 代替。
<xmp>不赞成使用。使用 <pre> 代替。
引用、引用和术语定义
标签
描述
<abbr>定义缩写。
<acronym>定义首字母缩写。
<address>定义地址。
<bdo>定义文字方向。
<blockquote>定义长的引用。
<q>定义短的引用语。
<cite>定义引用、引证。
<dfn>定义一个定义项目。
延伸阅读:
改变文本的外观和含义
2、HTML 编辑器
HTML 格式化
HTML 样式
使用 Notepad 或 TextEdit 来编写 HTML
可以使用专业的 HTML 编辑器来编辑 HTML:
Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor
不过,我们同时推荐使用文本编辑器来学习 HTML,比如 Notepad (PC) 或 TextEdit (Mac)。我们相信,使用一款简单的文本编辑器是学习 HTML 的好方法。
通过记事本,依照以下四步来创建您的第一张网页。
步骤一:启动记事本
如何启动记事本:
开始 所有程序 附件 记事本
步骤二:用记事本来编辑 HTML
在记事本中键入 HTML 代码:
步骤三:保存 HTML
在记事本的文件菜单选择“另存为”。
当您保存 HTML 文件时,既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别,完全根据您的喜好。
在一个容易记忆的文件夹中保存这个文件,比如 w3school。
步骤四:在浏览器中运行这个 HTML 文件
启动您的浏览器,然后选择“文件”菜单的“打开文件”命令,或者直接在文件夹中双击您的 HTML 文件。
结果应该类似这样:
3、HTML CSS
HTML 编辑器
HTML 链接
通过使用 HTML4.0,所有的格式化代码均可移出 HTML 文档,然后移入一个独立的样式表。
实例
HTML中的样式
本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。
没有下划线的链接
本例演示如何使用样式属性做一个没有下划线的链接。
链接到一个外部样式表
本例演示如何 <link> 标签链接到一个外部样式表。
如何使用样式
当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表:
外部样式表
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。
<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>
内部样式表
当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
<head><style type="text/css">body {background-color: red}p {margin-left: 20px}</style></head>
内联样式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color: red; margin-left: 20px">This is a paragraph
访问我们的 CSS 教程,学习更多有关样式的知识。
标签
描述
<style>定义样式定义。
<link>定义资源引用。
<div>定义文档中的节或区域(块级)。
<span>定义文档中的行内的小块或区域。
<font>规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。
<basefont>定义基准字体。不赞成使用。请使用样式。
<center>对文本进行水平居中。不赞成使用。请使用样式。