ITPub博客
首页
博客
专栏
学院
社区
IT新媒体评选
发博
首页
>
应用开发
>
Html/css
>
场景学习：HTML入门
场景学习：HTML入门
原创
Html/css
作者：
bainana
时间：2022-05-27 13:46:38
1
删除
编辑
## 体验简介 [本场景云起实验室将提供一台配置了Windows Server 2019版本的ECS实例（云服务器）。](https://developer.aliyun.com/adc/scenario/bd1410dc7f5a42119cd3d0f9bad19c25) 通过本教程的操作，您可以基于已有的环境快速安装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">