HTML基础教程【0基础学HTML】最新最全
1、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 DreamweaverMicrosoft Expression WebCoffeeCup HTML Editor不过，我们同时推荐使用文本编辑器来学习 HTML，比如 Notepad (PC) 或 TextEdit (Mac)。我们相信，使用一款简单的文本编辑器是学习 HTML 的好方法。通过记事本，依照以下四步来创建您的第一张网页。步骤一：启动记事本如何启动记事本：开始 所有程序 附件 记事本步骤二：用记事本来编辑 HTML在记事本中键入 HTML 代码：步骤三：保存 HTML在记事本的文件菜单选择“另存为”。当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别，完全根据您的喜好。在一个容易记忆的文件夹中保存这个文件，比如 w3school。步骤四：在浏览器中运行这个 HTML 文件启动您的浏览器，然后选择“文件”菜单的“打开文件”命令，或者直接在文件夹中双击您的 HTML 文件。
3、HTML CSSHTML 编辑器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</p>访问我们的 CSS 教程，学习更多有关样式的知识。标签 描述<style> 定义样式定义。<link> 定义资源引用。<div> 定义文档中的节或区域（块级）。<span> 定义文档中的行内的小块或区域。<font> 规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。<basefont> 定义基准字体。不赞成使用。请使用样式。<center> 对文本进行水平居中。不赞成使用。请使用样式。
4、HTML 链接HTML 样式HTML 图像HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。实例创建超级链接本例演示如何在 HTML 文档中创建链接。将图像作为链接本例演示如何使用图像作为链接。（可以在本页底端找到更多实例）HTML 超链接（链接）超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。我们通过使用 <a> 标签在 HTML 中创建链接。有两种使用 <a> 标签的方式：通过使用 href 属性 - 创建指向另一个文档的链接通过使用 name 属性 - 创建文档内的书签延伸阅读：什么是超文本？HTML 链接语法链接的 HTML 代码很简单。它类似这样：<a href="url">Link text</a>href 属性规定链接的目标。开始标签和结束标签之间的文字被作为超级链接来显示。实例<a href="http://www.w3school.com.cn/">Visit W3School</a>上面这行代码显示为：Visit W3School点击这个超链接会把用户带到 W3School 的首页。提示："链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。HTML 链接 - target 属性使用 Target 属性，你可以定义被链接的文档在何处显示。下面的这行会在新窗口打开文档：<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>亲自试一试HTML 链接 - name 属性name 属性规定锚（anchor）的名称。您可以使用 name 属性创建 HTML 页面中的书签。书签不会以任何特殊方式显示，它对读者是不可见的。当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。命名锚的语法：<a name="label">锚（显示在页面上的文本）</a>提示：锚的名称可以是任何你喜欢的名字。提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。实例首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：<a name="tips">基本的注意事项 - 有用的提示</a>然后，我们在同一个文档中创建指向该锚的链接：<a href="#tips">有用的提示</a>您也可以在其他页面中创建指向该锚的链接：<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。具体效果：有用的提示基本的注意事项 - 有用的提示：注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.w3school.com.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3school.com.cn/html/"。提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。更多实例在新的浏览器窗口打开链接本例演示如何在新窗口打开一个页面，这样的话访问者就无需离开你的站点了。链接到同一个页面的不同位置本例演示如何使用链接跳转至文档的另一个部分跳出框架本例演示如何跳出框架，假如你的页面被固定在框架之内。创建电子邮件链接本例演示如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）创建电子邮件链接 2本例演示更加复杂的邮件链接。HTML 链接标签标签 描述<a> 定义锚。
5、HTML 图像HTML 链接HTML 表格通过使用 HTML，可以在文档中显示图像。实例插入图像本例演示如何在网页中显示图像。从不同的位置插入图片本例演示如何将其他文件夹或服务器的图片显示到网页中。（可以在本页底端找到更多实例。）图像标签（<img>）和源属性（Src）在 HTML 中，图像由 <img> 标签定义。<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。定义图像的语法是：<img src="url" />URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中，那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。替换文本属性（Alt）alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。<img src="boat.gif" alt="Big Boat">在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。基本的注意事项 - 有用的提示：假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。更多实例背景图片本例演示如何向 HTML 页面添加背景图片。排列图片本例演示如何在文字中排列图像。浮动图像本例演示如何使图片浮动至段落的左边或右边。调整图像尺寸本例演示如何将图片调整到不同的尺寸。为图片显示替换文本本例演示如何为图片显示替换文本。在浏览器无法载入图像时，替换文本属性告诉读者们失去的信息。为页面上的图像都加上替换文本属性是个好习惯。制作图像链接本例演示如何将图像作为一个链接使用。创建图像映射本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。把图像转换为图像映射本例显示如何把一幅普通的图像设置为图像映射。图像标签标签 描述<img> 定义图像。<map> 定义图像地图。<area> 定义图像地图中的可点击区域。
6、HTML 表格HTML 图像HTML 列表你可以使用 HTML 创建表格。实例表格这个例子演示如何在 HTML 文档中创建表格。表格边框本例演示各种类型的表格边框。（可以在本页底垮逆解仔端找到更多实例。）表格表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>在浏览器显示如下：row 1, cell 1 row 1, cell 2row 2, cell 1 row 2, cell 2表格和边框属性如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。使用边框属性来显示一个带有边框的表格：<table border="1"><tr><td>Row 1, cell 1</td><td>Row 1, cell 2</td></tr></table>表格的表头表格的表头使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本：<table border="1"><tr><th>Heading</th><th>Another Heading</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>在浏览器显示如下：Heading Another Headingrow 1, cell 1 row 1, cell 2row 2, cell 1 row 2, cell 2表格中的空单元格在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td></td><td>row 2, cell 2</td></tr></table>浏览器可能会这样显示：注意：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td> </td><td>row 2, cell 2</td></tr></table>在浏览器中显示如下：row 1, cell 1 row 1, cell 2 row 2, cell 2更多实例没有边框的表格本例演示一个没有边框的表格。表格中的表头(Heading)本例演示如何显示表格表头。空单元格本例展示如何使用 " " 处理没有内容的单元格。带有标题的表格本例演示一个带标题 (caption) 的表格跨行或跨列的表格单元格本例演示如何定义跨行或跨列的表格单元格。表格内的标签本例演示如何显示在不同的元素内显示元素。单元格边距(Cell padding)本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。单元格间距(Cell spacing)本例演示如何使用 Cell spacing 增加单元格之间的距离。向表格添加背景颜色或背景图像本例演示如何向表格添加背景。向表格单元添加背景颜色或者背景图像本例演示如何向一个或者更多表格单元添加背景。在表格单元中排列内容本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。框架(frame)属性本例演示如何使用 "frame" 属性来控制围绕表格的边框。表格标签表格 描述<table> 定义表格<caption> 定义表格标题。<th> 定义表格的表头。<tr> 定义表格的行。<td> 定义表格单元。<thead> 定义表格的页眉。<tbody> 定义表格的主体。<tfoot> 定义表格的页脚。<col> 定义用于表格列的属性。<colgroup> 定义表格列的组。