"HTML入门教程：适合初学者学习使用，HTML基本概念和文件创建示例解释" - CSDN文库

需积分: 0 110 浏览量更新于2024-03-13 收藏 497KB DOC 举报

HTML 是一种用于创建网页的标记语言，其全称为Hypertext Marked Language，中文叫做“超文本标记语言”。与普通的文本文件不同，HTML 文件不仅包含文本内容，还包含一些标记，用来告诉浏览器如何显示网页的内容。HTML 文件的后缀名通常是.htm或者.html，通过简单的文本编辑器就能够编写和编辑。对于初学者来说，学习HTML是建立自己网页设计基础的第一步。在HTML入门教程中，最基本的概念是要了解HTML标签的作用和用法。每个HTML标签都有特定的作用，比如<head>标签用于定义文档的头部，<title>标签用于定义网页标题，<body>标签用于定义网页的主体内容等等。下面是一个简单的示例文件first.html，通过这个文件可以初步了解HTML文件的结构和基本标签的使用： ```html <html> <head> <title>Title of page</title> </head> <body>This is my first homepage. <b>This text is bold</b></body> </html> ``` 要浏览这个first.html文件，可以双击它打开浏览器，或者在浏览器中选择File菜单中的Open，然后选择这个文件即可查看。在HTML入门教程中，还需要了解一些常用的HTML标签，比如段萨标签<p>、标题标签<h1>~<h6>、文本格式标签<b>、<i>、<u>等等。此外，还需要掌握如何添加图片<img>、超链接<a>等元素，以及如何创建列表<ul>、<ol>、<li>和表格<table>等复杂的结构。在学习HTML的过程中，可以使用各种在线的学习资源和文档，比如MDN Web Docs、W3School等，这些网站提供了丰富的教程和示例代码，可以帮助初学者更快地掌握HTML的知识和技能。总的来说，HTML入门教程适合初学者学习使用，通过学习掌握HTML的基本概念和标签用法，可以为进一步学习网页设计和开发奠定良好的基础。希望这份HTML入门教程可以帮助大家快速上手HTML编程，实现自己的网页设计梦想。

使用 name 属性，要设置一对。一是设定 name 的名称，二是设定一个 href 指向这个

name：

<a href="#C1">参见第一章</a>

<a name="C1">第一章</a>

实例：

<html>

<body>

<p>

<a href="#C9">参见第六章</a>

</p><p>

<a name="C1"><h2>第 1 章</h2></a>

<p>这是站长网站长学院 admin5.com/html- 网页教程与代码的中文站点。</p>

<a name="C2"><h2>第 2 章</h2></a>

<p>这是站长网站长学院 admin5.com/html- 网页教程与代码的中文站点。</p>

<a name="C3"><h2>第 3 章</h2></a>

<p>这是站长网站长学院 admin5.com/html- 网页教程与代码的中文站点。</p>

<a name="C4"><h2>第 4 章</h2></a>

<p>这是站长网站长学院 admin5.com/html- 网页教程与代码的中文站点。</p>

<a name="C5"><h2>第 5 章</h2></a>

<p>这是站长网站长学院 admin5.com/html- 网页教程与代码的中文站点。</p>

<a name="C6"><h2>第 6 章</h2></a>

<p>这是站长网站长学院 admin5.com/html- 网页教程与代码的中文站点。</p>

<a name="C7"><h2>第 7 章</h2></a>

<p>这是站长网站长学院 admin5.com/html- 网页教程与代码的中文站点。</p>

<a name="C8"><h2>第 8 章</h2></a>

<p>这是站长网站长学院 admin5.com/html- 网页教程与代码的中文站点。</p>

<a name="C9"><h2>第 9 章</h2></a>

<p>这是站长网站长学院 admin5.com/html- 网页教程与代码的中文站点。</p>

</body>

</html>

name 属性通常用于创建一个大文件的章节目录(table of contents)。每个章节都建立一

个链接，放在文件的开始处，每个章节的开头都设置 Name 属性。当用户点击某个章节的

链接时，这个章节的内容就显示在最上面。

如果浏览器不能找到 Name 指定的部分，则显示文章开头，不报错

链接到 email 地址

在网站中，你经常会看到“联系我们”的链接，一点击这个链接，就会触发你的邮件客户端，

比如 Outlook Express，然后显示一个新建 mail 的窗口。用<a>可以实现这样的功能。

<a href = "mailto:info@sina.com">联系新浪</a>

实例：

<html>

<body>

<p>

这是一个最简单的邮箱地址的链接：

<a href="mailto:info@sina.com">给新浪网站发信</a>

</p>

<p>

这个邮箱地址的链接写了 subject 内容：

<a href="mailto:info@sina.com?subject=Hello">给新浪网站发信</a>

</p>

<p>

这个邮箱地址链接写了 to, cc, bcc, subject, body 的内容：

<a href="mailto:info@sina.com?

cc=webmaster@vip.sina.com&bcc=media@sina.com&subject=I%20like%20your

%20site&body=真是个好站点！">写信给新浪</a>

</p>

<p>

<b>注:</b>空格请用%20 表示。

</p>

</body>

</html>

六、HTML 相对路径(Relative Path)和绝对路径(Absolute Path)

HTML 初学者会经常遇到这样一个问题，如何正确引用一个文件。比如，怎样在一个

HTML 网页中引用另外一个 HTML 网页作为超链接(hyperlink)？怎样在一个网页中插入

一张图片？如果你在引用文件时(如加入超链接，或者插入图片等)，使用了错误的文件路

径，就会导致引用失效(无法浏览链接文件，或无法显示插入的图片等)。

为了避免这些错误，正确地引用文件，我们需要学习一下 HTML 路径。

HTML 有 2 种路径的写法：相对路径和绝对路径。

HTML 相对路径(Relative Path)

同一个目录的文件引用

如果源文件和引用文件在同一个目录里，直接写引用文件名即可。

我们现在建一个源文件 info.html，在 info.html 里要引用 index.html 文件作为超链接。

假设 info.html 路径是：c:\Inetpub\wwwroot\sites\blabla\info.html

假设 index.html 路径是：c:\Inetpub\wwwroot\sites\blabla\index.html

在 info.html 加入 index.html 超链接的代码应该这样写：

<a href = "index.html">index.html</a>

如何表示上级目录

../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。

假设 info.html 路径是：c:\Inetpub\wwwroot\sites\blabla\info.html

假设 index.html 路径是：c:\Inetpub\wwwroot\sites\index.html

在 info.html 加入 index.html 超链接的代码应该这样写：

<a href = "../index.html">index.html</a>

假设 info.html 路径是：c:\Inetpub\wwwroot\sites\blabla\info.html

假设 index.html 路径是：c:\Inetpub\wwwroot\index.html

在 info.html 加入 index.html 超链接的代码应该这样写：

<a href = "../../index.html">index.html</a>

假设 info.html 路径是：c:\Inetpub\wwwroot\sites\blabla\info.html

假设 index.html 路径是：c:\Inetpub\wwwroot\sites\wowstory\index.html

在 info.html 加入 index.html 超链接的代码应该这样写：

<a href = "../wowstory/index.html">index.html</a>

#

如何表示下级目录

引用下级目录的文件，直接写下级目录文件的路径即可。

假设 info.html 路径是：c:\Inetpub\wwwroot\sites\blabla\info.html

假设 index.html 路径是：c:\Inetpub\wwwroot\sites\blabla\html\index.html

在 info.html 加入 index.html 超链接的代码应该这样写：

<a href = "html/index.html">index.html</a>

假设 info.html 路径是：c:\Inetpub\wwwroot\sites\blabla\info.html

假设 index.html 路径是：c:\Inetpub\wwwroot\sites\blabla\html\tutorials\

index.html

在 info.html 加入 index.html 超链接的代码应该这样写：

<a href = "html/tutorials/index.html">index.html</a>

HTML 绝对路径(Absolute Path)

HTML 绝对路径(absolute path)指带域名的文件的完整路径。

假设你注册了域名 www.admin5.com/html，并申请了虚拟主机，你的虚拟主机提供商

会给你一个目录，比如 www，这个 www 就是你网站的根目录。

假设你在 www 根目录下放了一个文件 index.html，这个文件的绝对路径就是：

http://www.admin5.com/html。

假设你在 www 根目录下建了一个目录叫 html_tutorials，然后在该目录下放了一个文件

index.html，这个文件的绝对路径就是 http://www.admin5.com/html/

html_tutorials/index.html。

七、如何在 HTML 中创建表格

HTML 表格用<table>表示。一个表格可以分成很多行(row)，用<tr>表示；每行又可以

分成很多单元格(cell)，用<td>表示。

这三个 Tag 是创建表格最常用的 Tag。

示例

<html>

<body>

<p>

表格所用到的 Tag：整个表格开始要用 table；每一行开始要用 tr；每一单元格开始要用 td。

</p>

<h4>只有一行(Row)一列(Column)的表格</h4>

剩余51页未读，继续阅读

飞扬小初

粉丝: 1
资源: 17

最新资源