首页 > 其他分享> > 场景学习：HTML入门

场景学习：HTML入门

2022-05-27 14:00:59 作者：互联网

体验简介

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

代码说明：

：这是我们的文档声明头。它告诉了浏览器，本文档处理的是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标签的大小写不敏感，例如和表示的意思是一样的，都代表“主体”，推荐使用小写。

\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标签。

标签

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

在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标签。

标签通常作为文本的容器，它没有特定的含义和样式，只有与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. 使用无序列表与有序列表。

无序列表是一个项目的列表，列表项目使用实心圆、空心圆、方块进行标记，无序列表使用

标签。

在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。

表格

表格由

标签来定义。每个表格均有若干行，每行是由标签来定义。每行被分割为若干单元格，每个单元是由

定义表格的标题。

在**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. 给表格添加标题。表格的标题使用
标签进行定义，标题通常用于表示列名字。在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 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. 文本域。当您想要填入多行文本时，就可以使用文本域。文本域使用标记。</p> <p>在<strong>test1.html</strong>文件中，输入以下代码，按下<strong>Ctrl+S</strong>键。</p> <pre><code><!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> </code></pre> <p>在右侧<strong>Preview</strong>框中，你可以看到test1.html的内容。</p> <p><img src="https://www.icode9.com/i/ll/?i=img_convert/bb6fb900e366bd8b38052a361aa6befa.png" alt="img" loading="lazy"></p> <h3 id="使用html图像与框架">使用HTML图像与框架</h3> <p>\1. 图像标签。</p> <p>在HTML中，图像由<img>标签定义。语法如下。</p> <pre><code><img src="url" alt="" /> </code></pre> <p><img>是空标签，它只包含属性，没有闭合标签。如果要在页面上显示图像，您需要使用源属性（src）。src的值是图像文件的URL，也就是引用该图像的文件的的绝对路径或相对路径。alt规定图像的替代文本，即当图片未成功显示的时候显示的文本信息。title设置鼠标悬停时显示的内容（一般不用设置）。此外还可以通过设置width和height的值来设置图片的宽和高。</p> <p>在<strong>test1.html</strong>文件中，输入以下代码，按下<strong>Ctrl+S</strong>键。</p> <pre><code><!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> </code></pre> <p>在右侧<strong>Preview</strong>框中，你可以看到test1.html的内容。</p> <p><img src="https://www.icode9.com/i/ll/?i=img_convert/d7c0c6b49b7ac7e78c9fe3291aa7fac3.png" alt="img" loading="lazy"></p> <p>\2. 框架的使用。</p> <p>使用框架就能实现在同一个浏览器窗口中显示不止一个页面，框架由<iframe>标签定义。框架的语法如下。</p> <pre><code><iframe src="URL"> <!-- URL指向不同的页面 --> </iframe> </code></pre> <p>a. iframe设置高度与宽度。</p> <p><strong>说明：</strong> 属性默认以像素为单位，但是您也可以指定其按比例显示(如："60%")。</p> <p>在<strong>test1.html</strong>文件中，输入以下代码，按下<strong>Ctrl+S</strong>键。</p> <pre><code><iframe src="https://www.aliyun.com/" width="400" height="400"></iframe> </code></pre> <p>在右侧<strong>Preview</strong>框中，你可以看到test1.html的内容。</p> <p><img src="https://www.icode9.com/i/ll/?i=img_convert/c495a5d1815f1854bdcd0f5a76d2e7e2.png" alt="img" loading="lazy"></p> <p>b. iframe移除边框。</p> <p>frameborder属性用于定义iframe表示是否显示边框。当设置属性值为"0"时，表示移除iframe的边框。</p> <p>在<strong>test1.html</strong>文件中，输入以下代码，按下<strong>Ctrl+S</strong>键。</p> <pre><code><!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> </code></pre> <p>在右侧<strong>Preview</strong>框中，你可以看到test1.html的内容。</p> <p><img src="https://www.icode9.com/i/ll/?i=img_convert/2f481ca8eec84a93b6d131650a5a6682.png" alt="img" loading="lazy"></p> <p>\3. 使用iframe来显示目标链接页面。</p> <p>先定义一个目标链接（target），然后将iframe设置name属性设置为target，那么iframe可以显示目标链接的页面。</p> <p>在<strong>test1.html</strong>文件中，输入以下代码，按下<strong>Ctrl+S</strong>键。</p> <pre><code><!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> </code></pre> <p>在右侧<strong>Preview</strong>框中，你可以看到test1.html的内容。</p> <p><img src="https://www.icode9.com/i/ll/?i=img_convert/ac30f4d08190a39187414fecd8863137.png" alt="img" loading="lazy"></p>
标签来定义。字母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. 给表格添加标题。使用