首页 / 知识

了解HTML快速入门方法

2023-04-11 13:50:00

　　案例1：HTML 文档片段案例2：为HTML页面添加图像和链接案例3：为 HTML文档添加表格案例4：为 HTML 页面添加导航目录案例5：创建表单案例6：使用 CSS 样式

　　【参见COOKBOOK】

　　实现此案例需要按照如下步骤进行。

　　步骤一：HTML标题

　　HTML 标题是通过<h1> - <h6> 标签来定义的

　　实例演示如图-1所示：

　　图-1

　　步骤二：HTML段落

　　HTML 段落是通过标签 <p> 来定义的

　　<p>这是一个段落。</p>

　　实例演示如图-2所示：

　　图-2

　　步骤三：HTML链接

　　HTML 链接是通过标签 <a> 来定义的。

　　<a href="">这是一个链接使用了 href 属性</a>

　　实例演示如图-3所示：

　　图-3

　　创建 html 文档使用图像和链接元素为页面添加内容

　　实现此案例需要按照如下步骤进行。

　　步骤一：HTML实例

　　1）图像链接实例

　　<!DOCTYPE html><html><head><meta charset="utf-8"><title>hello world</title></head><body>?<p>创建图片链接：<a href=""><img border="10" src="smiley.webp" alt="HTML 百度" width="32" height="32"></a></p>?<p>无边框的图片链接：<a href=""><img border="0" src="smiley.webp" alt="HTML 百度" width="32" height="32"></a></p>?</body></html>

　　2）锚点实例：

　　<p><a href="#C4">查看章节 4</a></p>?<h2>章节 1</h2><p>这边显示该章节的内容……</p>?<h2>章节 2</h2><p>这边显示该章节的内容……</p>?<h2>章节 3</h2><p>这边显示该章节的内容……</p>?<h2><a name="C4">章节 4</a></h2><p>这边显示该章节的内容……</p>?<h2>章节 5</h2><p>这边显示该章节的内容……</p>

　　步骤二：实例演示

　　1）图像链接如图-6所示：

　　图-4

　　此时，点击图片超链接会把用户带到百度的首页。

　　2）锚点实例如图-7所示：

　　题-5

　　此时点击查看章节4，会把用户带到章节4位置

　　步骤三：HTML实例解析

　　1）HTML链接语法：

　　使用<a>元素创建超级链接

　　href 属性描述了链接的目标。

　　使用 target 属性，可以定义被链接的文档在何处显示。