体验简介

本场景云起实验室将提供一台配置了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的内容。