HTML入门教程：从基本概念到实践 - CSDN文库

需积分: 0 195 浏览量更新于2024-07-20 收藏 639KB DOC 举报

HTML入门教程适合初学者 HTML（HyperText Markup Language，超文本标记语言）是一种标记语言，用于创建网页。它是一种标准通用标记语言，通过使用标记符号来标记文本，从而告诉浏览器如何显示网页的内容。一、HTML基本概念 HTML文件是一个文本文件，它除了包含文本内容外，还包含一些标记符号（Tag）。HTML文件的后缀名通常是.htm或者.html。可以使用文本编辑器来编写HTML文件。二、HTML文件的基本结构一个基本的HTML文件结构如下所示： ```html <html> <head> <title>Title of page</title> </head> <body> This is my first home page. <b>This text is bold</b> </body> </html> ``` 其中，`<html>`是HTML文件的开始标记，`</html>`是HTML文件的结束标记。`<head>`和`</head>`之间的内容是Head信息，Head信息是不显示出来的，但它提供了有用的信息，例如关键词等。`<title>`和`</title>`之间的内容是文件的标题，它将显示在浏览器的标题栏中。`<body>`和`</body>`之间的信息是正文。三、HTML元素（HTMLElements） HTML元素（HTMLElement）是用来标记文本的，表示文本的内容。例如，`body`, `p`, `title`都是HTML元素。HTML元素用Tag表示，Tag以`<`开始，以`>`结束。Tag通常是成对出现的，例如`<body></body>`。起始的叫做Opening Tag，结尾的叫做Closing Tag。目前，HTML的Tag不区分大小写的。四、HTML标记的基本用法 HTML标记可以告诉浏览器如何显示网页的内容。例如，`<b>`标记可以将文本显示为粗体。五、总结 HTML是一种简单易学的标记语言，它可以帮助我们创建网页。通过学习HTML，我们可以创建自己的网页，分享自己的想法和知识。六、实践现在，你可以尝试编写自己的HTML文件了！打开你的Notepad，新建一个文件，然后拷贝以下代码到这个新文件，然后将这个文件存成first.html。 ```html <html> <head> <title>My First Home Page</title> </head> <body> This is my first home page. <b>This text is bold</b> </body> </html> ``` 双击这个文件，就可以在浏览器中查看它。

</p>

</body>

</html>

name 属性

使用 name 属性，可以跳转到一个文件的指定部位。

使用 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 地址

如何表示上级目录

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

假设 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>

剩余51页未读，继续阅读

baidu_34613100

粉丝: 0
资源: 1

最新资源