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>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！