web应用
一、HTML
1.插件
1.Live Server
模拟网站服务器
2.Auto Rename Tag
自动修改标签对
3.设置settings-format-勾选Format On Save
（创建文件：File-Open Folder-新建文件夹-命名文件）
2.html文档结构
html所有标签为树形结构，例如：
<!DOCTYPE html> // 文件类型 <html lang= "zh-CN">// 根标签 <head> //规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。 <meta charset="UTF-8"> <meta name = "description" content="******"> <meta name = "keywords" content="算法，计算机……"> //词条被浏览器收录，搜索用的关键词 <meta name = "viewport" content="width=device-width,initial-scale=1.0"> //那些不能由其它 HTML 元相关元素（base/link/script/style/title）表示的任何元数 //据信息。 <title>Web应用课</title> //网站名字 </head> <body> // 表示文档的内容 <h1>第一讲</h1> </body> </html>
1.<title>
文档标题，与 <h1> 不同, <h1> 是为body添加标题，也叫网页标题，显示在页面，通常只出现一次，标记内容标题（故事名称、新闻摘要等）
2.<head>
内容不会在浏览器中显示，它的作用是保存页面的元数据，会包含很多元数据
3.<meta>
元数据就是描述数据的数据，为meta元素，有很多不同种类的meta元素可以被包含靳页面的head中，但不会去解释所有类型
例如：
<meta charset = "uft-8"> // 指定了文档的字符编码：uft-8
许多meta元素包含了name和content属性：
<name> 指定了meta元素的类型，说明该元素包含什么类型的信息
<content> 指定了实际的元数据
例如：
<meta name="author" content="Chris Mills"> //作者信息 <meta name="description" content="The MDN Web Docs Learning Area aims to provide complete beginners to the Web with all they need to know to get started with developing web sites and applications."> //被使用在搜索引擎显示的结果页中
4.<icon>
为站点添加自定义图标，大多数浏览器支持.ico格式，引用方式：
<link rel="icon" href="favicon.ico" type="image/x-icon">
5.<link>
<link>元素经常位于文档的头部，有两个属性，rel="stylesheet"表明这是文档的样式图，herf包含了样式表文件的路径，例如：
<link rel="stylesheet" href="my-css-file.css">
6.<script>
<script>元素没必要放在文档的<head>中，其中的<src>属性来指向需要加载的JavaScript文件路径，同时最好加上<defer>以告诉浏览器在解析完成html后再加载 JavaScript。这样可以确保在加载脚本之前浏览器已经解析了所有的 HTML 内容（如果脚本尝试访问某个不存在的元素，浏览器会报错）。
<script src="my-js-file.js" defer></script> //需要结束标记
7.lang属性（站点语言）
可以而且有必要为站点设定语言，这个可以通过添加 lang属性到HTML开始的标签中来实现
<html lang="zh-CN">
这在很多方面都很有用。如果你的 HTML 文档的语言设置好了，那么你的 HTML 文档就会被搜索引擎更有效地索引
你还可以将文档的分段设置为不同的语言。例如，我们可以把日语部分设置为日语，如下所示：
<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>
8.多行注释
html中只能用多行注释
<body> <!-- 这里内容均为注释 --> </body>
3.文本标签
文本标签虽然很多，但大部分可看成是预定好样式的<div>和<span>
1.<div>
内容划分元素，将一些元素放入div相当于打包，块状元素（默认带换行）
一个“纯粹的”容器，<div> 元素在语义上不表示任何特定类型的内容。然而，其可以将内容分组，从而可以使用class或是id属性方便的定义内容的格式，也可以在一段文档中划分标记出使用另一种语言书写的内容（使用lang属性）等等。
其他块级标签例如：<h1>, <p>, <pre>, <ul>, <ol>, <table>
2.<span>
是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者 Id 属性），或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。<span> 与<div>元素很相似，但<div>是一个块元素而<span>则是行内元素
其他内联标签例如：<i>, <b>, <del>, <ins>, <td>, <a>
<div>与<span>比较
<body> <h1> hello world!</h1> <div>你好！</div> <div>世界！</div> <span>你好！</span> <span>世界！</span> </body>
3.<h1>-<h6>标签
HTML <h1>–<h6> 标题 (Heading) 元素呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低。
4.<p>
HTML <p>元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，<p> 是块级元素。
通俗讲，在div基础上加了额外限制，每两个p标签的块间会有行间距,会将空格和回车过滤
5.<pre>
HTML <pre> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的**空白符（比如空格和换行符）**都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略)
6.<br>
在文本中生成一个换行（回车）符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要
7. 
表示空格
8. <hr>
HTML <hr>元素表示段落级元素之间的主题转换（例如，一个故事中的场景的改变，或一个章节的主题的改变）。
在 HTML 的早期版本中，它是一个水平线。现在它仍能在可视化浏览器中表现为水平线，但目前被定义为语义上的，而不是表现层面上。所以如果想画一条横线，请使用适当的 css 样式来修饰。
9.<i>
HTML 元素 用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等，它的内容通常以斜体显示
10.<b>
这个元素过去被认为是粗体元素，并且大多数浏览器仍然将文字显示为粗体。尽管如此，你不应将 <b> 元素用于显示粗体文字；替代方案是使用 CSS font-weight 属性来创建粗体文字。
11.<del>
HTML 的<del>标签表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。<ins>标签的作用恰恰于此相反：表示文档中添加的内容。
12.<ins>
HTML <ins> 元素定义已经被插入文档中的文本,添加下划线
13.<mark>
文字背景色变为黄色
4.图片
<img>元素将图片嵌入文档，默认为行内元素，即display: inline
1.<src>属性
该属性是必须的，它包含了你想嵌入的图片的文件路径
2.<alt>属性
该属性包含一条对图像的文本描述，这不是强制性的，但对可访问性而言，它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。如果由于某种原因无法加载图像，普通浏览器也会在页面上显示alt 属性中的备用文本：例如，网络错误、内容被屏蔽或链接过期时。
3.<height>属性
图像的高度，在 HTML5 中的单位是 CSS 像素，在 HTML 4 中既可以是像素，也可以是百分比。可以只指定 width 和 height 中的一个值，浏览器会根据原始图像进行缩放。
4.<width>属性
图像的宽度，在 HTML5 中单位是 CSS 像素， 在 HTML 4 中可以是像素也可以是百分比。
<body> <img height="50" width="50" src="路径" alt="当图片无法显示时这里的文字内容会显示"> // 路径：一般为从根目录开始，绝对路径 </body>
