lesson 7

使用HTML命令在VSCODE中制作表格与注册页面

• 基础内容
  概述：HTML（Hyper Text Markup Language，超文本标记语言）是一种标记语言，用于设计和编辑网页。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的 Internet 资源连接为一个逻辑整体。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字、图形、动画、声音、表格、链接等。

HTML 文件是一种纯文本文件，可以使用各种文本编辑器打开或创建。每个网页都是一个 HTML 文档，使用浏览器访问一个链接（URL），实际上就是下载、解析和显示 HTML 文档的过程。将众多HTML文档放在一个文件夹中，然后提供对外访问权限，就构成了一个网站。

HTML 不是编程语言，没有逻辑处理能力，没有计算能力，不能动态地生成内容，而只能静态地展示网页信息。HTML 通过不同的标签来标记不同的内容、格式、布局等，例如：<img> 标签表示一张图片；<a> 标签表示一个链接；<table> 标签表示一个表格；<input> 标签表示一个输入框；<p> 标签表示一段文本；<strong> 标签表示文本加粗效果；<div> 标签表示块级布局。

< body /body >
就是一对完整的标签，一对标签需要一个起始标签和一个结束标签，结束标签开头是一个 / 来表示这对标签的结束，例如：< /body >

键值对：

• 标签种类：
  ①标题标签
  < h1 align=“center” >即为< h1>标签 （h1为文本内容）
  < h2 >二级标题< /h2 >
  < h3 >三级标题< /h3 >
  < h4 >四级标题< /h4 >
  < h5 >五级标题< /h5 >
  < h6 >六级标题< /h6 >
  并以此类推

  ②段落标签
  < p >文本内容< /p >即为一个段落标签
  示例如图：
  

  ③换行标签
  即 < p > 文本内容< br >
  文本内容 < /p >
  示例如图： ④水平线标签
  即 在文本内容中间部分加入< hr >可创建水平线分隔符，示例如图：
  
  ⑤字体样式标签
  如使用< strong >文本内容< /strong > 加粗
  以及< em >文本内容< /em >斜体
  便可改变字体的样式
  示例如图：
  ⑦注释标签 < !-- – >
  注释是所有语言中必不可少的东西

• 特殊符号
  空格： &nbsp
  大于号（>）：& gt；
  小于号（<）：& lt;
  引号（"）：& quot;
  版权符号（©）：& copy;

• 链接
  添加外链接时一定设置（rel=“noopener noreferrer”）

• 锚链接：
  *< p id=“hello”>Hello< /p >
  < a href=“#hello”>To Hello< /a >
  < a href=“b.html#hello”>To Hello< /a >
  示例如图：

• 功能性链接
  < a href=“tel: 13500000000”>联系我们< /a >
  < a href=“mailto: xx@hotmail.com”>E-Mail< /a >
  示例如图：

• 行内元素及块元素
  块级元素：
  独占一行。div 块级元素（block）在页面中以块的形式展现。相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。比如<p> ，<hr>，<li> ，<div>等
  行内元素：
  行内显示，span 行内元素不会导致换行。通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。比如<b>，<a>，<i>，<span> 等
  注意： 一个块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中

• 多媒体元素
  即< audio src="音频路径>< /audio>

• 音频：< source src=“vedio/song.ogg”/ >
  audio元素允许多个source元素
  source可链接不同的音频文件

• 视频：< video src="视频路径“ > < /video >
  

作业 ：

音乐排行榜：

制作注册页面：