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.`&nbsp`

表示空格

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>

5.音频与视频

1.`<audio>`

HTML <audio> 元素用于在文档中嵌入音频内容。 <audio> 元素可以包含一个或多个音频资源，这些音频资源可以使用 src 属性或者<source> 元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。

src属性
<audio
    controls
    src="/audios/bgm.mp3">
        Your browser does not support the  //音频无法播放时显示
        <code>audio</code> element.
</audio>

<audio>与多个<source>元素

这个例子包含了多个元素。如果能够播放的话，浏览器就会试图去加载第一个 source 元素；如果不行，那就退而求其次去加载第二个。

<audio controls>
    <source src="/audios/sound1" type="audio/mpeg"/>
    <source src="/audios/sound2" type="audio/mpeg"/>
</audio>

2.<video>

HTML <video> 元素用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 <video> 标签用于音频内容，但是 <audio> 元素可能在用户体验上更合适。

<video controls width="800">
<!--<video width = "300" autoplay> --> //autoplay表示自动播放

    <source src="/videos/video1.mp4"
            type="video/mp4">

    <source src="/videos/video2.mp4"
            type="video/mp4">
	//type 指音频、视频格式
    Sorry, your browser doesn't support embedded videos.
</video>

6.超链接

a + tab键(不用加<) herf中写链接，可以是某网站，也可以跳到站内

补充：vscode功能：！+tab键直接补全html基础结构

<a herf="https://www.acwing.com" target="_blank">Acwing</a> //其他网站链接
<a herf="/about.html">about</a> //站内页面文件

HTML<a>元素（或称锚元素）可以通过它的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。<a> 中的内容应该指明链接的意图。如果存在 href 属性，当<a>元素聚焦时按下回车键就会激活它。

点击链接打开新标签页面时加入属性：target="_blank"（当前网站直接变为新网站不用加，需要新打开一个标签页加 target）

在这里插入图片描述

7.表单

1.form标签

HTML <form> 元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息

<form action="/about.html"> //提交以后会自动跳转至该网址
    ****
</form>

2.input标签

HTML <input>用来填写内容，常见类型有：

：创建基础的单行文本框。

type一般会绑定一个label：

<form>
    <label for="username">用户名</label> //for中填text对应的id
    <input type="text" name="urlname" id="username"> //name中填的为最后网站url？以后的内容
</form>

在这里插入图片描述

：用于让用户输入一个数字。其包括内置验证以拒绝非数字输入。浏览器可能会选择提供步进箭头，让用户可以使用鼠标增加和减少输入的值，或者只需用指尖敲击即可。

：带有 “email” (电子邮箱) 类型标记的输入框元素 () 能够让用户输入或编辑一个电子邮箱地址，此外，如果指定了multiple属性，用户还可以输入多个电子邮箱地址。在表单提交前，输入框会自动验证输入值是否是一个或多个合法的电子邮箱地址 (非空值且符合电子邮箱地址格式). CSS 伪标签 :valid 和 :invalid 能够在校验后自动应用。

：元素里有一种叫做 “password” 的值，给我们一个方法让用户更加安全的输入密码。这个元素是作为一行纯文本编辑器控件呈现的，其中文本被遮蔽以致于无法读取，通常通过用诸如星号（“*”）或点（“•”）等符号替换每个字符来实现。这个符号会根据用户的浏览器和操作系统来具体显示哪个。

：的 radio 类型元素默认渲染为小型圆圈图表，填充即为激活，类似于之前描述额复选框（checkbox）类型。单选按钮允许你选择单一的值来提交表单。
<label for="cpp">cpp</label>
<input type="radio" name="lang" value="cpp" id="cpp">

<label for="python">python</label>
<input type="radio" name="lang" value="python" id="python">

//name相同的，属于一组，关系为互斥，在这些中只能选择一个

常用属性有：

name: 名称
id: 唯一ID
maxlength：最大长度

minlength：最小长度

<input type="radio"  maxlength="10" minlength="3" name="lang" value="cpp" id="cpp"> //表单中最多能输入十个,最少3个

required：是否必填
placeholder：当表单控件为空时，控件中显示的内容

<label for="password"></label> //这里不写文本
<input type="password" placeholder="密码" required value="cpp" id="password"> //文本会显示在框里面，当输入其他文本后会消失

3.`<textarea>`标签

HTML <textarea> 元素表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。

rows：行数

cols：列数

4.`<select>`与`<option>`标签

选择下拉框及下拉框内容设定

<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
    
    //option中的value为下拉框选项
    <option value="">请选择</option> //表示空
    <option selectd value="dog">Dog</option>//加上selected后为默认，没有加默认选第一个
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
    
</select>

5.`<button>`标签

HTML <button> 元素表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。默认情况下，HTML 按钮的显示样式接近于 user agent 所在的宿主系统平台（用户操作系统）的按钮，但你可以使用 CSS 来改变按钮的样貌。

<form>
    <button type="submit">提交</button> //提交按钮
</form>

8.列表

1.`<ul>`与`<li>`标签

HTML <ul> 元素（或称 HTML 无序列表元素）表示一个内可含多个元素的无序列表或项目符号列表。

<h2>List</h2>
<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

在这里插入图片描述

2.`<ol>`与`<li>`标签

HTML <ol> 元素表示有序列表，通常渲染为一个带编号的列表。

<ol>
            <li>Fee</li>
            <li>Fi</li>
            <li>Fo</li>
            <li>Fum</li>
          </ol>

在这里插入图片描述

有序、无序列表均可以继续在里面嵌套

3.`<dl>`/`<dt>`/`<dd>`标签

HTML <dl> 元素（或 HTML 描述列表元素）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键 - 值对列表)。

<dl>
    <dt>Name</dt>
    <dd>Godzilla</dd>
    <dt>Born</dt>
    <dd>1952</dd>
</dl>
//dt不会缩进，dd会缩进

在这里插入图片描述

9.表格

1.`<table>`标签

HTML的 table 元素表示表格数据 — 即通过二维数据表表示的信息。

2.`<thead>`标签

HTML的<thead>元素定义了一组定义表格的列头的行。

3.`<tbody>`标签

HTML的<tbody>元素定义一组数据行。

4.`<tr>`标签

HTML <tr> 元素定义表格中的行。同一行可同时出现<td> 和<th> 元素。

5.`<th>`标签

HTML <th>元素定义表格内的表头单元格。

6.`<td>`标签

HTML <td> 元素定义了一个包含数据的表格单元格。

7.`<caption>`标签

HTML <caption> 元素 (or HTML 表格标题元素) 展示一个表格的标题，它常常作为 <table> 的第一个子元素出现，同时显示在表格内容的最前面，但是，它同样可以被 CSS 样式化，所以，它同样可以出现在相对于表格的任意位置。

<table>
        <caption>成绩单</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>数学</th>
                <th>语文</th>
                <th>英语</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>yxc</td>
                <td>100</td>
                <td>100</td>
                <td>100</td>
            </tr>
            <tr>
                <td>Alice</td>
                <td>90</td>
                <td>90</td>
                <td>90</td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>80</td>
                <td>80</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>

效果：

在这里插入图片描述

10.语义标签

在这里插入图片描述

1.`<header>`

HTML <header> 元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。

2.`<nav>`

HTML <nav>元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。

3.`<section>`

HTML <section>元素表示一个包含在 HTML 文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。

4.`<figure>`

HTML <figure> 元素代表一段独立的内容，经常与说明（caption）<figcaption> 配合使用，并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。

5.`<figcaption>`

HTML <figcaption> 元素是与其相关联的图片的说明/标题，用于描述其父节点 <figure> 元素里的其他数据。这意味着 <figcaption> 在<figure> 块里是第一个或最后一个。同时 HTML Figcaption 元素是可选的；如果没有该元素，这个父节点的图片只是会没有说明/标题。

6.`<article>`

HTML <article>元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

7.`<aside>`

HTML <aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框（call-out boxes）。

8.`<footer>`

HTML <footer> 元素表示最近一个章节内容或者根节点（sectioning root ）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

11.特殊符号

HTML源代码	显示结果	描述
`&lt`	<	小于号或显示标记
`&gt`	>	大于号或显示标记
`&amp`	&	可用于显示其它特殊字符
`&quot`	"	引号
`&reg`	®	已注册
`&copy`	©	版权
`&trade`	™	商标
`&nbsp`		不断行的空白（空格）