likes
comments
collection
share

场景学习:HTML入门

作者站长头像
站长
· 阅读数 29

体验简介

本场景云起实验室将提供一台配置了Windows Server 2019版本的ECS实例(云服务器)。

通过本教程的操作,您可以基于已有的环境快速安装Visual Studio Code,并学习到HTML的基本知识,帮助您了解各种常用标签的意义以及基本用法。体验此场景后,可以掌握的知识有:

Visual Studio Code操作。HTML基本知识。

登录Window Server桌面

资源创建成功后界面显示loading(这是正常的)

场景学习:HTML入门

登录Window Server桌面

\1. Windows远程登录(在自己的电脑上):

a. 按win+r键。

b. 在运行对话框中,输入mstsc,单击确定。 场景学习:HTML入门

c. 在远程桌面连接对话框中,单击隐藏选项,输入计算机和用户名,单击连接。

配置说明:

  • 计算机:输入已创建的ECS实例的公网IP地址。您可以在云产品资源查询ECS公网地址。
  • 用户名:administrator。

d. 在Windows安全中心对话框中,输入ECS实例的登录密码(在云产品资源获取ECS实例登陆密码),单击确定场景学习:HTML入门

场景学习:HTML入门

登录成功界面如下。 场景学习:HTML入门

\2. MAC远程登录:下载安装Microsoft Remote Desktop 10远程工具进行远程连接,具体操作,请参见帮助文档。

安装Visual Studio Code及配置

\1. 打开浏览器并访问Visual Studio Code官方下载链接,下载Windows版安装包。

\2. 将Visual Studio Code安装包粘贴到Windows远程机器的桌面下,并双击安装包。

\3. 在安装对话框中,单击确定

场景学习:HTML入门

\4. 在许可协议对话框中,选择我同意此协议,单击下一步

场景学习:HTML入门

\5. 在选择附加任务对话框中,选中创建桌面快捷方式添加到PATH,单击下一步

场景学习:HTML入门

\6. 在准备安装对话框中,单击安装

场景学习:HTML入门

\7. 等待安装完成后,勾选运行Visual Studio Code,单击完成

场景学习:HTML入门

\8. 在Visual Studio Code左侧导航栏中,单击场景学习:HTML入门,输入Preview on Web Server,选择Preview on Web Server1.3.0版本后单击Install

场景学习:HTML入门

\9. 在远程服务器桌面新建一个名为test的文件夹。

\10. 在Visual Studio Code左侧导航栏中,单击场景学习:HTML入门 ,然后单击Open Folder

场景学习:HTML入门

\11. 在Open Folder页面中,双击桌面

场景学习:HTML入门

\12. 在Open Folder页面中,选中test文件夹,单击选择文件夹

场景学习:HTML入门

创建HTML文件

HTML(超文本标记语言)是一种用于创建网页的标准标记语言。HTML不需要编译,可以直接由浏览器执行,它的解析依赖于浏览器的内核。它不是一种编程语言,而是一种标记语言。

\1. 在上方菜单栏中,选择File > New File

场景学习:HTML入门

\2. 在新建文件Untitled-1中,输入如下代码。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    Hello Aliyun
  </body>
</html>

代码说明:

  • <!DOCTYPE html>:这是我们的文档声明头。它告诉了浏览器,本文档处理的是HTML文档。
  • <html>:该标签即根元素,此处表示文档的开始。
  • <head>:该标签是网页的头部,设置网页的相关信息。
  • <title>:该标签设置网页标题。
  • <body>:该标签定义文档的主体,也就是我们的主要内容。

场景学习:HTML入门

\3. 按下Ctrl+S键,然后在Save As页面中,将文件名设置为test1.html,单击保存

场景学习:HTML入门

\4. 在左侧test文件夹中,将光标放置在test1.html上,打开右键菜单,单击vscode-preview-server:Preview on side panel

场景学习:HTML入门

在右侧Preview框中,你可以看到test1.html的内容。

场景学习:HTML入门

使用HTML常用标签

HTML标记标签通常被称为HTML标签。HTML标签是HTML语言中最基本的单位。HTML标签是HTML(标准通用标记语言下的一个应用)最重要的组成部分。HTML标签的大小写不敏感,例如<body>和<BODY>表示的意思是一样的,都代表“主体”,推荐使用小写。

\1. 使用双标签。

双标记也称体标记,是指由开始和结束两个标记符组成的标记。其基本语法格式如下。

<标记名></标记名>

常见的双标签有:

<html></html>
<head></head>
<title></title>
<body></body>
<h1></h1>
<p></p>
<div></div>
<span></span>
<a></a>
<ul></ul>

test1.html文件中,输入以下代码,按下Ctrl+S键。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <a href="https://www.aliyun.com/">Hello Aliyun</a>
  </body>
</html>

在右侧Preview框中,你可以看到test1.html的内容。

场景学习:HTML入门

\2. 使用单标签。

单标记也称空标记,是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下。

<标记名/>

常见的单标签有:

<br />
<!--换行-->
<hr />
<!--水平分隔线-->
<meta />
<img />

test1.html文件中,输入以下代码,按下Ctrl+S键。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <a href="https://www.aliyun.com/">Hello Aliyun</a>
    <hr />welcome Aliyun
  </body>
</html>

在右侧Preview框中,你可以看到test1.html的内容。

场景学习:HTML入门

\3. h系类标签的使用。

h系标签有六种,具体包括h1、h2、h3、h4、h5、h6。它们表示标题。

在test1.html文件中,输入以下代码,按下Ctrl+S键。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 简介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>我是一级标题</h1>
    <h2>我是二级标题</h2>
    <h3>我是三级标题</h3>
    <h4>我是四级标题</h4>
    <h5>我是五级标题</h5>
    <h6>我是六级标题</h6>
  </body>
</html>

在右侧Preview框中,你可以看到test1.html的内容。

场景学习:HTML入门

\4. 使用p标签。

p标签是我们的文本标签。

在test1.html文件中,输入以下代码,按下Ctrl+S键。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 简介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>我是第一段文字,阿里云,体验实验室</p>
    <p>我是第二段文字,阿里云,体验实验室</p>
  </body>
</html>

在右侧Preview框中,你可以看到test1.html的内容。

场景学习:HTML入门

\5. 使用div标签。

标签<div>可将网页页面分割成不同的独立部分,通常用于定义文档中的区域或节。该标签是一个块级元素,浏览器会在<div>和<div>所标记的区域前后自动放置一个换行符。

在test1.html文件中,输入以下代码,按下Ctrl+S键。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 简介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <div style="width:200px;height:200px;background:pink">
    <p>阿里云</p>
    </div>
  </body>
</html>

在右侧Preview框中,你可以看到test1.html的内容。

场景学习:HTML入门

\6. 使用span标签。

标签<span>通常作为文本的容器,它没有特定的含义和样式,只有与CSS同时使用才可以为指定文本设置样式属性。该标签是一个内联元素,它与块级元素相反,内联元素不会自动在前后自动放置换行符,因此内联元素会默认显示在同一行。

在test1.html文件中,输入以下代码,按下Ctrl+S键。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 简介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <div style="width:200px;height:200px;background:pink">
    <p>这是div标签,自动换行</p>
    </div>
    <input type="text" /><span>这是span标签,不自动换行</span>
  </body>
</html>

在右侧Preview框中,你可以看到test1.html的内容。

场景学习:HTML入门

\7. 使用无序列表与有序列表。

无序列表是一个项目的列表,列表项目使用实心圆、空心圆、方块进行标记,无序列表使用<ul>标签。同样,有序列表也是一列项目,列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表项始于<li>标签。

test1.html文件中,输入以下代码,按下Ctrl+S键。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 简介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>无序列表</p>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
    </ul>
    <p>有序列表</p>
    <ol>
        <li>列表项1</li>
        <li>列表项2</li>
    </ol>
  </body>
</html>

在右侧Preview框中,你可以看到test1.html的内容。

场景学习:HTML入门

\8. 使用HTML标签定义style属性。

我们可以通过style属性来改变HTML标签的样式。

a. 背景颜色的改变。

test1.html文件中,输入以下代码。通过设置background-color属性,为p标记对添加背景颜色。按下Ctrl+S键。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 简介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p style="background-color:orange">Aliyun</p>
  </body>
</html>

在右侧Preview框中,你可以看到test1.html的内容。

场景学习:HTML入门

b. 字体、颜色和尺寸的改变。

在test1.html文件中,输入以下代码。通过设置font-family属性来设置字体,通过设置color属性值来设置颜色,通过设置font-size属性值来设置字体大小。按下Ctrl+S键。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 简介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p style="font-family:arial;color:orangered;font-size:50px;">阿里云</p>
  </body>
</html>

在右侧Preview框中,你可以看到test1.html的内容。

场景学习:HTML入门

c. 文本对齐。

test1.html文件中,输入以下代码,按下Ctrl+S键。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 简介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1 style="text-align: center;font-family:arial;color:orangered;font-size:50px;">阿里云</h1>>
  </body>
</html>

说明: 我们可以通过对text-align属性的设置来设置文本的对齐方式。

在右侧Preview框中,你可以看到test1.html的内容。

场景学习:HTML入门

\9. 综合使用HTML常用标签。

test1.html文件中,输入以下代码,按下Ctrl+S键。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <div style="width:500px;height:300px;background-color:orange">
      <h1 style="text-align:center">阿里云体验实验室</h1>
      <p style="text-align:center">
        体验更多有趣实验就上<a href="https://developer.aliyun.com/adc/labs/">体验实验室</a>
      </p>
      <hr />
      <p>在体验实验室你可以体验到的云产品有:</p>
      <ul>
        <li>ECS服务器</li>
        <li>RDS数据库</li>
        <li>文件存储NAS</li>
        <li>...</li>
      </ul>
    </div>
  </body>
</html>

在右侧Preview框中,你可以看到test1.html的内容。

场景学习:HTML入门

HTML表格与div的应用

本步骤我们将重点讲解HTML表格的相关内容,并比较表格与div。

  • 表格

表格由<table>标签来定义。每个表格均有若干行,每行是由<tr>标签来定义。每行被分割为若干单元格,每个单元是由<td>标签来定义。字母td指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。

\1. 创建表格。

test1.html文件中,输入以下代码,按下Ctrl+S键。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
      </tr>
      <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
      </tr>
    </table>
  </body>
</html>

在右侧Preview框中,你可以看到test1.html的内容。

场景学习:HTML入门

\2. 给表格添加标题。使用<caption>定义表格的标题 。

test1.html文件中,输入以下代码,按下Ctrl+S键。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <table border="1">
      <caption>
        表格标题
      </caption>
      <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
      </tr>
      <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
      </tr>
    </table>
  </body>
</html>

在右侧Preview框中,你可以看到test1.html的内容。

场景学习:HTML入门

\3. 给表格添加标题。表格的标题使用<th>标签进行定义,标题通常用于表示列名字。

test1.html文件中,输入以下代码,按下Ctrl+S键。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <table border="1">
      <caption>
        表格标题
      </caption>
      <tr>
        <th>第一个表头</th>
        <th>第二个表头</th>
      </tr>
      <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
      </tr>
      <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
      </tr>
    </table>
  </body>
</html>

在右侧Preview框中,你可以看到test1.html的内容。

场景学习:HTML入门

\4. 设置单元格跨行合并和跨列合并,我们可以使用colspan(合并行)和rowspan(合并列)属性来实现跨行和跨列。

test1.html文件中,输入以下代码,按下Ctrl+S键。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <table border="1" width="300px" height="150px">
      <h3>单元跨两列</h3>
      <tr>
        <th>姓名</th>
        <th colspan="2">电话</th>
      </tr>
      <tr>
        <td>张三</td>
        <td>344 22 112</td>
        <td>211 32 123</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>433 31 212</td>
        <td>234 21 654</td>
      </tr>
    </table>
    
    <table border="1" cellspacing="0">
      <h3>单元跨两行</h3>
      <tr>
        <th>姓名</th>
        <td>张三</td>
      </tr>
      <tr>
        <th rowspan="2">电话</th>
        <td>344 22 112</td>
      </tr>
      <tr>
        <td>234 21 654</td>
      </tr>
    </table>
  </body>
</html>

在右侧Preview框中,你可以看到test1.html的内容。

场景学习:HTML入门

  • div和表格的区别。

\1. div布局。

test1.html文件中,输入以下代码,按下Ctrl+S键。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <div style="width:100%;border:2px solid #d4d4d4"></div>
      <div style="background-color:orange">阿里云体验实验室</div>
      <div style="background-color:orangered">阿里云体验实验室</div>
    </div>
  </body>
</html>

在右侧Preview框中,你可以看到test1.html的内容。

场景学习:HTML入门

\2. 表格布局。

test1.html文件中,输入以下代码,按下Ctrl+S键。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <table style="width:100%;border:2px solid #d4d4d4">
      <tr>
        <td style="background-color:orange">
          阿里云体验实验室
        </td>
      </tr>
      <tr>
        <td style="background-color:orangered">
          阿里云体验实验室
        </td>
      </tr>
    </table>
  </body>
</html>

在右侧Preview框中,你可以看到test1.html的内容。

场景学习:HTML入门

\3. 通过前面两步的比较,我们得出以下结论。

  • 表格布局优缺点: 表格中的内容容易理解。 在不同的浏览器里面看到的效果一般相同。 布局的时候灵活度不高。 代码冗余度高。
  • div布局优缺点: 内容和样式的分离,使页面和样式的调整变得更加方便。 节省代宽,代码冗余度低。 表现和结构分离,在团队开发中更容易分工合作而减少相互关联性。

使用HTML表单

HTML表单用于收集不同类型的用户输入。表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入的内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等。表单使用表单标签<form>来设置,常见的表单格式如下。

<form name="" method="" action=""></form>

参数说明:

  • name:定义表单的名字。
  • method:定义表单结果从浏览器传送到服务器的方式,默认参数为get。post安全性更高,因此常用作传输密码等,而get安全性较低,一般用于查询数据。
  • action:发送数据要去的地址。它的值必须是一个有效的 URL,可以是相对URL也可以是绝对 URL。如果没有提供此属性或者action="#",则数据将被发送到包含表单的页面的URL。

网页中的表单由许多不同的表单元素组成,这些表单元素包括文字字段、单选按钮、复选框、按钮等,具体使用方法如下所示。

\1. 文字字段。

在网页中最常见的表单元素就是文字字段,用户可以在文字字段内输入字符或者单行文本。 语法如下。

<input
  type="text"
  name="控件名称"
  value="文字字段的默认取值"
  size="控件的长度"
  maxlength="最长字符数"
/>

test1.html文件中,输入以下代码,按下Ctrl+S键。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <form name="formBox" method="post" action="">
      姓名:<input type="text" name="name" size="20" /><br />
      年龄:<input type="text" name="age" size="40" value="10" maxlength="3" />
    </form>
  </body>
</html>

在右侧Preview框中,你可以看到test1.html的内容。

场景学习:HTML入门

\2. 密码输入框。

密码输入框是一种特殊的文字字段,它的各个属性和文字字段是相同的,但是输入进密码输入框的字符使用星号(*)脱敏显示,保证周围人看不见输入的文本。

test1.html文件中,输入以下代码,按下Ctrl+S键。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <form name="formBox" method="post" action=""></form>
      密码:<input type="password" name="pwd" />
    </form>
  </body>
</html>

在右侧Preview框中,你可以看到test1.html的内容。

场景学习:HTML入门

\3. 单选按钮。

单选按钮可以使用户从选择列表中选择一个选项。我们可以把几个单选按钮name值设置为相同的,那么这几个单选按钮就可以连接在一起,并且同一个组中只允许选择一个按钮。如果没有选中任何一个,那么整个单选按钮组就被认为处于未知状态,且不会随表单提交。

test1.html文件中,输入以下代码,按下Ctrl+S键。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <form name="formBox" method="post" action="">
      <input type="radio" name="sex" value="male" checked />男<br />
      <input type="radio" name="sex" value="female" />女
    </form>
  </body>
</html>

在右侧Preview框中,你可以看到test1.html的内容。

场景学习:HTML入门

\4. 复选框。

复选框可以让用户从一个选项列表中选择超出一个的选项。

test1.html文件中,输入以下代码,按下Ctrl+S键。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <form name="formBox" method="post" action="">
      <input type="checkbox" name="music" checked />语文<br />
      <input type="checkbox" name="art" />数学<br />
      <input type="checkbox" name="math" />英语<br />
    </form>
  </body>
</html>

在右侧Preview框中,你可以看到test1.html的内容。

场景学习:HTML入门

\5. 下拉菜单。

下拉菜单能够节省页面空间,正常状态下显示一个选项,单击展开所有选项。

test1.html文件中,输入以下代码,按下Ctrl+S键。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <form name="formBox" method="post" action="">
      <select name="select">
        <option value="成都">杭州</option>
        <option value="广州">广州 </option>
        <option value="四川">西安</option>
        <option value="上海">上海</option>
      </select>
    </form>
  </body>
</html>

在右侧Preview框中,你可以看到test1.html的内容。

场景学习:HTML入门

\6. 列表项。

在页面中列表项可以显示出几条信息,一旦超出这个信息量,在列表项右侧会出现滚动条,拖动滚动条可以看到所有选项。

test1.html文件中,输入以下代码,按下Ctrl+S键。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <form name="formBox" method="post" action="">
      <select name="select" size="3" multiple="multiple">
        <option value="成都">成都</option>
        <option value="广州">广州 </option>
        <option value="四川">西安</option>
        <option value="上海">上海</option>
      </select>
    </form>
  </body>
</html>

在右侧Preview框中,你可以看到test1.html的内容。

场景学习:HTML入门

\7. 文本域。

当您想要填入多行文本时,就可以使用文本域。文本域使用<textarea>标记。

test1.html文件中,输入以下代码,按下Ctrl+S键。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <form name="formBox" method="post" action="">
      留下您的联系方式:
      <textarea name="textarea" cols="35" rows="5"></textarea>
    </form>
  </body>
</html>

在右侧Preview框中,你可以看到test1.html的内容。

场景学习:HTML入门

使用HTML图像与框架

\1. 图像标签。

在HTML中,图像由<img>标签定义。语法如下。

<img src="url" alt="" />

<img>是空标签,它只包含属性,没有闭合标签。如果要在页面上显示图像,您需要使用源属性(src)。src的值是图像文件的URL,也就是引用该图像的文件的的绝对路径或相对路径。alt规定图像的替代文本,即当图片未成功显示的时候显示的文本信息。title设置鼠标悬停时显示的内容(一般不用设置)。此外还可以通过设置width和height的值来设置图片的宽和高。

test1.html文件中,输入以下代码,按下Ctrl+S键。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <img
  src="https://tiyanshiyanshi.oss-cn-hangzhou.aliyuncs.com/HTML%E5%85%A5%E9%97%A8/aliyun.jpg?Expires=1623899841&OSSAccessKeyId=TMP.3KecrZt9J6eBYkugp6D3Q3UukgwNZGig3CVRWPHzdKB3HTbbzPVaC6CGmHSKmMX6JMEBPZ7AJ89hbw84Y5Zz4835Cz76Wd&Signature=7dEfZ8rYHsLk%2BAjyfH8TmYHfNH4%3D"
  alt="阿里云"
  title="欢迎来到阿里云"
  width="144px"
  height="100px"
/>
  </body>
</html>

在右侧Preview框中,你可以看到test1.html的内容。

场景学习:HTML入门

\2. 框架的使用。

使用框架就能实现在同一个浏览器窗口中显示不止一个页面,框架由<iframe>标签定义。框架的语法如下。

<iframe src="URL">
  <!-- URL指向不同的页面 -->
</iframe>

a. iframe设置高度与宽度。

说明: 属性默认以像素为单位,但是您也可以指定其按比例显示(如:"60%")。

test1.html文件中,输入以下代码,按下Ctrl+S键。

<iframe src="https://www.aliyun.com/" width="400" height="400"></iframe>

在右侧Preview框中,你可以看到test1.html的内容。

场景学习:HTML入门

b. iframe移除边框。

frameborder属性用于定义iframe表示是否显示边框。当设置属性值为"0"时,表示移除iframe的边框。

test1.html文件中,输入以下代码,按下Ctrl+S键。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <iframe src="https://www.aliyun.com/" width="400" height="400" frameborder="0"></iframe>
  </body>
</html>

在右侧Preview框中,你可以看到test1.html的内容。

场景学习:HTML入门

\3. 使用iframe来显示目标链接页面。

先定义一个目标链接(target),然后将iframe设置name属性设置为target,那么iframe可以显示目标链接的页面。

test1.html文件中,输入以下代码,按下Ctrl+S键。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <p><a href="https://www.aliyun.com/" target="aliyun">阿里云</a></p>
      <iframe width="400" height="400" name="aliyun"></iframe>
  </body>
</html>

在右侧Preview框中,你可以看到test1.html的内容。

场景学习:HTML入门