场景学习:HTML入门

体验简介

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

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

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

登录Window Server桌面

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

场景学习:HTML入门_第1张图片

登录Window Server桌面

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

a. 按win+r键。

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

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

配置说明:

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

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

场景学习:HTML入门_第4张图片

登录成功界面如下。 场景学习:HTML入门_第5张图片

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

安装Visual Studio Code及配置

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

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

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

场景学习:HTML入门_第6张图片

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

场景学习:HTML入门_第7张图片

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

场景学习:HTML入门_第8张图片

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

场景学习:HTML入门_第9张图片

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

场景学习:HTML入门_第10张图片

\8. 在Visual Studio Code左侧导航栏中,单击img,输入Preview on Web Server,选择Preview on Web Server1.3.0版本后单击Install

场景学习:HTML入门_第11张图片

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

\10. 在Visual Studio Code左侧导航栏中,单击img ,然后单击Open Folder

场景学习:HTML入门_第12张图片

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

场景学习:HTML入门_第13张图片

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

场景学习:HTML入门_第14张图片

创建HTML文件

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

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

场景学习:HTML入门_第15张图片

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



  
    
    
  
  
    Hello Aliyun
  

代码说明:

  • :这是我们的文档声明头。它告诉了浏览器,本文档处理的是HTML文档。
  • :该标签即根元素,此处表示文档的开始。
  • :该标签是网页的头部,设置网页的相关信息。
  • :该标签设置网页标题。</li> <li><body>:该标签定义文档的主体,也就是我们的主要内容。</li> </ul> <p><span class="img-wrap"><a href="http://img.e-com-net.com/image/info9/e525ec3d37e844f0a22a78900b288943.jpg" target="_blank"><img class="lazy" alt="场景学习:HTML入门_第16张图片" title="img" src="http://img.e-com-net.com/image/info9/e525ec3d37e844f0a22a78900b288943.jpg" width="650" height="265" style="border:1px solid black;"></a></span></p> <p>\3. 按下<strong>Ctrl+S</strong>键,然后在<strong>Save As</strong>页面中,将文件名设置为<strong>test1.html</strong>,单击<strong>保存</strong>。</p> <p><span class="img-wrap"><a href="http://img.e-com-net.com/image/info9/b3997e563b88436e9367f58437992dcc.jpg" target="_blank"><img class="lazy" alt="场景学习:HTML入门_第17张图片" title="img" src="http://img.e-com-net.com/image/info9/b3997e563b88436e9367f58437992dcc.jpg" width="650" height="367" style="border:1px solid black;"></a></span></p> <p>\4. 在左侧<strong>test</strong>文件夹中,将光标放置在<strong>test1.html</strong>上,打开右键菜单,单击<strong>vscode-preview-server:Preview on side panel</strong>。</p> <p><span class="img-wrap"><a href="http://img.e-com-net.com/image/info9/49f012ebe66b49298b85178d68548770.jpg" target="_blank"><img class="lazy" alt="场景学习:HTML入门_第18张图片" title="img" src="http://img.e-com-net.com/image/info9/49f012ebe66b49298b85178d68548770.jpg" width="636" height="732" style="border:1px solid black;"></a></span></p> <p>在右侧<strong>Preview</strong>框中,你可以看到test1.html的内容。</p> <p><span class="img-wrap"><a href="http://img.e-com-net.com/image/info9/10e32380e1de40d1bf54b2b6931a2f79.jpg" target="_blank"><img class="lazy" alt="场景学习:HTML入门_第19张图片" title="img" src="http://img.e-com-net.com/image/info9/10e32380e1de40d1bf54b2b6931a2f79.jpg" width="650" height="155" style="border:1px solid black;"></a></span></p> <h3>使用HTML常用标签</h3> <p>HTML标记标签通常被称为HTML标签。HTML标签是HTML语言中最基本的单位。HTML标签是HTML(标准通用标记语言下的一个应用)最重要的组成部分。HTML标签的大小写不敏感,例如<body>和<BODY>表示的意思是一样的,都代表“主体”,推荐使用小写。</p> <p>\1. 使用双标签。</p> <p>双标记也称体标记,是指由开始和结束两个标记符组成的标记。其基本语法格式如下。</p> <pre><code><标记名></标记名></code></pre> <p>常见的双标签有:</p> <pre><code><html></html> <head></head> <title>

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

      
      
        
          
          
        
        
          Hello Aliyun
        
      

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

      场景学习:HTML入门_第20张图片

      \2. 使用单标签。

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

      <标记名/>

      常见的单标签有:



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

      
      
        
          
          
        
        
          Hello Aliyun
          
      welcome Aliyun

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

      场景学习:HTML入门_第21张图片

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

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

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

      
      
        
          HTML 简介
          
        
        
          

      我是一级标题

      我是二级标题

      我是三级标题

      我是四级标题

      我是五级标题
      我是六级标题

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

      场景学习:HTML入门_第22张图片

      \4. 使用p标签。

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

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

      
      
        
          HTML 简介
          
        
        
          

      我是第一段文字,阿里云,体验实验室

      我是第二段文字,阿里云,体验实验室

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

      场景学习:HTML入门_第23张图片

      \5. 使用div标签。

      标签

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

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

      
      
        
          HTML 简介
          
        
        
          

      阿里云

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

      场景学习:HTML入门_第24张图片

      \6. 使用span标签。

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

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

      
      
        
          HTML 简介
          
        
        
          

      这是div标签,自动换行

      这是span标签,不自动换行

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

      场景学习:HTML入门_第25张图片

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

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

        标签。同样,有序列表也是一列项目,列表项目使用数字进行标记。有序列表始于
          标签。每个列表项始于
        1. 标签。

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

          
          
            
              HTML 简介
              
            
            
              

          无序列表

          • 列表项1
          • 列表项2

          有序列表

          1. 列表项1
          2. 列表项2

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

          场景学习:HTML入门_第26张图片

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

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

          a. 背景颜色的改变。

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

          
          
            
              HTML 简介
              
            
            
              

          Aliyun

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

          场景学习:HTML入门_第27张图片

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

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

          
          
            
              HTML 简介
              
            
            
              

          阿里云

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

          场景学习:HTML入门_第28张图片

          c. 文本对齐。

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

          
          
            
              HTML 简介
              
            
            
              

          阿里云

          >

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

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

          场景学习:HTML入门_第29张图片

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

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

          
          
            
              
              
            
            
              

          阿里云体验实验室

          体验更多有趣实验就上体验实验室


          在体验实验室你可以体验到的云产品有:

          • ECS服务器
          • RDS数据库
          • 文件存储NAS
          • ...

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

          场景学习:HTML入门_第30张图片

          HTML表格与div的应用

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

          • 表格

          表格由

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

          \1. 创建表格。

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

          
          
            
              
              
            
            
              
          第一行第一列 第一行第二列
          第二行第一列 第二行第二列

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

          场景学习:HTML入门_第31张图片

          \2. 给表格添加标题。使用

          定义表格的标题 。

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

          
          
            
              
              
            
            
              
          表格标题
          第一行第一列 第一行第二列
          第二行第一列 第二行第二列

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

          场景学习:HTML入门_第32张图片

          \3. 给表格添加标题。表格的标题使用

          标签进行定义,标题通常用于表示列名字。

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

          
          
            
              
              
            
            
              
          表格标题
          第一个表头 第二个表头
          第一行第一列 第一行第二列
          第二行第一列 第二行第二列

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

          场景学习:HTML入门_第33张图片

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

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

          
          
            
              
              
            
            
              

          单元跨两列

          姓名 电话
          张三 344 22 112 211 32 123
          李四 433 31 212 234 21 654

          单元跨两行

          姓名 张三
          电话 344 22 112
          234 21 654

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

          场景学习:HTML入门_第34张图片

          • div和表格的区别。

          \1. div布局。

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

          
          
            
              
              
            
            
              
          阿里云体验实验室
          阿里云体验实验室

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

          场景学习:HTML入门_第35张图片

          \2. 表格布局。

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

          
          
            
              
              
            
            
              
          阿里云体验实验室
          阿里云体验实验室

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

          场景学习:HTML入门_第36张图片

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

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

          使用HTML表单

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

          来设置,常见的表单格式如下。

          参数说明:

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

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

          \1. 文字字段。

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

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

          
          
            
              
              
            
            
              
          姓名:
          年龄:

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

          场景学习:HTML入门_第37张图片

          \2. 密码输入框。

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

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

          
          
            
              
              
            
            
              
          密码:

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

          场景学习:HTML入门_第38张图片

          \3. 单选按钮。

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

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

          
          
            
              
              
            
            
              

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

          场景学习:HTML入门_第39张图片

          \4. 复选框。

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

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

          
          
            
              
              
            
            
              
          语文
          数学
          英语

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

          场景学习:HTML入门_第40张图片

          \5. 下拉菜单。

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

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

          
          
            
              
              
            
            
              

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

          场景学习:HTML入门_第41张图片

          \6. 列表项。

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

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

          
          
            
              
              
            
            
              

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

          场景学习:HTML入门_第42张图片

          \7. 文本域。

          当您想要填入多行文本时,就可以使用文本域。文本域使用

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

          场景学习:HTML入门_第43张图片

          使用HTML图像与框架

          \1. 图像标签。

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

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

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

          
          
            
              
              
            
            
              阿里云
            
          

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

          场景学习:HTML入门_第44张图片

          \2. 框架的使用。

          使用框架就能实现在同一个浏览器窗口中显示不止一个页面,框架由

          a. iframe设置高度与宽度。

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

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

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

          场景学习:HTML入门_第45张图片

          b. iframe移除边框。

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

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

          
          
            
              
              
            
            
              
            
          

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

          场景学习:HTML入门_第46张图片

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

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

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

          
          
            
              
              
            
            
              

          阿里云

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

          场景学习:HTML入门_第47张图片

          你可能感兴趣的:(html)