html入门教程3

2025-11-16 00:17:14

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>对文本进行水平居中。不赞成使用。请使用样式。

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢