关于html:场景学习HTML入门

30次阅读

共计 12739 个字符，预计需要花费 32 分钟才能阅读完成。

体验简介

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

通过本教程的操作，您能够基于已有的环境疾速装置 Visual Studio Code，并学习到 HTML 的基本知识，帮忙您理解各种罕用标签的意义以及根本用法。
体验此场景后，能够把握的常识有：

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

登录 Window Server 桌面

资源创立胜利后界面显示 loading(这是失常的)

登录 Window Server 桌面

\1. Windows 近程登录(在本人的电脑上)：

a. 按 win+ r 键。

b. 在运行对话框中，输出 mstsc，单击确定。

c. 在远程桌面连贯对话框中，单击暗藏选项，输出计算机和用户名，单击连贯。

配置阐明：

  • 计算机：输出已创立的 ECS 实例的公网 IP 地址。您能够在云产品资源查问 ECS 公网地址。
  • 用户名：administrator。

d. 在 Windows 平安核心 对话框中，输出 ECS 实例的登录明码（在云产品资源获取 ECS 实例登陆密码），单击 确定。

登录胜利界面如下。

\2. MAC 近程登录：下载安装 Microsoft Remote Desktop 10 近程工具进行近程连贯，具体操作，请参见帮忙文档。

装置 Visual Studio Code 及配置

\1. 关上浏览器并拜访 Visual Studio Code 官网下载链接，下载 Windows 版安装包。

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

\3. 在 装置 对话框中，单击 确定。

\4. 在 许可协定 对话框中，抉择 我批准此协定 ，单击 下一步。

\5. 在 抉择附加工作 对话框中，选中 创立桌面快捷方式 和增加到 PATH，单击 下一步。

\6. 在 筹备装置 对话框中，单击 装置。

\7. 期待装置实现后，勾选 运行 Visual Studio Code，单击 实现。

\8. 在 Visual Studio Code 左侧导航栏中，单击 ，输出 Preview on Web Server，抉择Preview on Web Server1.3.0 版本 后单击Install。

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

\10. 在 Visual Studio Code 左侧导航栏中，单击，而后单击Open Folder。

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

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

创立 HTML 文件

HTML（超文本标记语言）是一种用于创立网页的规范标记语言。HTML 不须要编译，能够间接由浏览器执行，它的解析依赖于浏览器的内核。它不是一种编程语言，而是一种标记语言。

\1. 在上方菜单栏中，抉择File > New File。

\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>：该标签定义文档的主体，也就是咱们的次要内容。

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

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

在右侧 Preview 框中，你能够看到 test1.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 的内容。

\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 的内容。

\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 的内容。

\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 的内容。

\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 的内容。

\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 的内容。

\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 的内容。

\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 的内容。

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 的内容。

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 的内容。

\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 表格与 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 的内容。

\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 的内容。

\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 的内容。

\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 的内容。

  • 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 的内容。

\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 的内容。

\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 的内容。

\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 的内容。

\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 的内容。

\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 的内容。

\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 的内容。

\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 的内容。

\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 图像与框架

\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 的内容。

\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 的内容。

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 的内容。

\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
发表至： html
2022-05-27
 0
关于html:第-22-题如何理解选择排序
关于html:SpringBoot都有什么改动
关于html:如何在一段URL中插入参数
关于html:HTML传统网页布局