超文本标记语言HTML初学者指南 - CSDN文库

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

"html入门教程适合初学者" HTML（Hypertext Markup Language）是用于创建网页的标准标记语言。它是互联网上应用最广泛的语言，允许开发者通过结构化的标记来组织页面内容，以便浏览器能正确地解析和展示。对于初学者来说，理解HTML的基本概念和元素是学习Web开发的第一步。 HTML文件由一系列的元素组成，每个元素由标签（Tag）定义。标签通常以尖括号 `<` 开始，以 `>` 结束，如 `<html>` 和 `</html>`。HTML元素分为开启标签（Opening Tag）和关闭标签（Closing Tag），例如 `<p>` 和 `</p>`，它们一起定义了一个段落元素。有些标签是自闭合的，例如 `<img>`，不需要关闭标签。在上述示例中，我们看到了一个简单的HTML文件结构： 1. `<html>` 标签：整个文档的根元素，包裹着整个HTML文件。 2. `<head>` 和 `</head>`：这部分包含了元信息，如文档标题、字符编码、样式表链接等，不会在浏览器窗口直接显示。 3. `<title>` 和 `</title>`：定义了浏览器顶部的标题栏内容。 4. `<body>` 和 `</body>`：这部分是网页的主体内容，用户在浏览器中能看到的所有内容都在这里。 5. `<b>` 和 `</b>`：这是一个用于设置加粗文本的元素，`<b>` 代表 bold，加粗的文本会在浏览器中以粗体显示。 HTML元素可以嵌套，意味着一个元素可以包含其他元素。例如，一个段落 `<p>` 可以包含多个加粗文本 `<b>`。这种结构化的方式让开发者能够精细控制页面的布局和样式。学习HTML，你需要掌握不同类型的标签，包括文本格式化标签（如 `<b>`、`<i>`、`<em>`）、链接标签（`<a>`）、图像标签（`<img>`）、列表标签（`<ul>`、`<ol>`、`<li>`）、表格标签（`<table>`、`<tr>`、`<td>`）等。同时，了解HTML的语义化也是很重要的，这有助于提高网页的可读性和无障碍性。此外，HTML与CSS（Cascading Style Sheets）和JavaScript一起工作，提供更丰富的样式和交互功能。CSS用于定义元素的外观，而JavaScript则负责动态行为。虽然这不是HTML的基本概念，但对于构建现代网页来说，理解和使用CSS和JavaScript同样至关重要。 HTML是Web开发的基础，学习HTML能让你创建静态网页，并为进阶的Web技术学习打下坚实的基础。通过实践和不断学习，你可以创建出美观、功能丰富的网站。

</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页未读，继续阅读

BLACK_CATyi

粉丝: 1
资源: 19

最新资源