VS中新建html文件

虽然用记事本就可以写出.html文件，但我们是专业人士。工欲善其事必先利其器，所以接下来我们就需要使用宇宙最强IDE：Visual Studio了。

安装完成之后需要创建一个ASP.NET core的Web项目。

然后，在其中的wwwroot下添加html文件即可。（注意：不要更改wwwroot之外的其他任何内容）

暂时我们也不需要理解其中的solution/project等的含义（有好奇心的同学，见：Visual Studio：项目和解决方案）

注意：文件的命名

演示：

新建html文件上右键 - View in Browers
修改默认浏览器

理解开发环境

通过Visual Studio中的ASP.NET项目浏览一个html页面，和在浏览器中打开一个html页面不一样。

事实上，VS在运行时启动了一个IIS express，在本地模拟了真实的服务器环境（environment），浏览器是连接着这个IIS在运行的！——Visual Studio被称之为IDE，就是因为它自带了这些组件，能够完成这些工作_（如果使用VS code需要自己搭建这些环境）_。

_复习：计算机网络，_理解：

IIS

全称：Internet Information Service，是服务器上安装的一个“软件”，这个软件可以响应http请求。

类似的应用于Linux的，还有：Apache

IIS Express：是Visual Studio内置的IIS演示版，是精简的/用于开发的/迷你的 IIS。

因为VS中所有的ASP.NET项目都运行在localhost（本地主机）上，所以VS用随机生成的端口号（port）来区别各个项目。

PS：服务器/端口，就类似于：房子/门窗

复习：识别URL

https://localhost:44397/About?id=7&name=zx
协议、（顶级/一级/二级）域名、__端口、__绝对/相对路径、url参数（query string）

服务器（server）

对外提供“服务”的“机器”（电脑/计算机）。

什么是服务？简单的说，就是“功能”，它能干的活，比如：输出网页、发送Email等等。

服务器和我们用的电脑有什么区别呢？本质上没有区别。服务器为什么被称为服务器？就像警察被称之为警察一样：

警察也是人，因为从事警察工作，我们就称其为警察
服务器也是计算机，因为它用于提供服务，所以我们就称其为服务器

客户端（client）

以下称呼通常都是通用的：

本地（local）计算机：相对应的就是“远程”计算机
客户端（client）：相对应的就是“服务器”。为什么叫“客户端”，因为服务器提供服务嘛，为谁提供服务？不就是为“客户”提供服务么？
浏览器（browser）：相对应的就是“IIS”或者以后要学习的ASP.NET运行时。我们会说：这段（JavaScript）代码在浏览器上运行，那段（C#）代码在ASP.NET中运行……

学习HTML，其实就是学习一系列的标记（markup），而标记的核心就是

HTML文档结构

VS中生成的html页面为我们提供了一个（HTML5）标准的html文档框架：

一起帮·源栈欢迎您！

以这种格式组织的html文件被称之为HTML文档。严格的说，一个HTML文档才是一个网页。

这被称之为：文档声明。显示这是一个html文档类型（Document Type），这是HTML 5的写法。

然后，三个标签：

html：
head：头，里面的内容一般不予显示
body：正文，由浏览器显示的内容

元素（element）

HTML标记语言的核心就是元素。

元素由标签、属性和文本内容组成，比如：

一起帮·源栈欢迎您！

其中：

元素（element）：整个这一行就是一个
标签（tag）：h1，又分为 _开始_ 标签（
）和 _结束_ （
）标签
文本（text）：一起帮·源栈欢迎您！，放置在开始标签和结束标签之间
属性（attribute）：，放置在开始标签中，又分为

属性名：等号（=）左边，style
属性值：等号（=）右边，color:red，用双引号（）括起来。
注意，这个双引号必须是半角的，而且以后我们学习的所有语言，所有的标点符号，都是半角的！

_演示：依次取消标签和属性之后，页面呈现的变化_。

元素嵌套

html文档结构就表现出元素嵌套的特性，即：一个元素中（html）还可以包含另外一个或若干个元素（head和body）。

这是HTML非常重要的一个特性！元素嵌套不仅仅可以为HTML提供丰富呈现，还是（以后我们将要学习的）DOM树的基础。

但是，注意：元素不能任意嵌套。比如，不能在head中再放入一个body，^_^

至于应该如何嵌套，除了查文档：

一是按语义理解，比如body是正文，title是页面标题，所以页面正文中就不应该有页面标题。
二是看VS提示，如果违反了HTML语法标准，VS会有波浪线提示：

层级结构

有了嵌套，元素和元素之间就会形成层级关系：

祖先：包含父元素的元素，以及一直往上的所有父元素
父：直接包含自己的元素
自己：
兄弟：父元素下除自己以外的其他元素
子：自己的直接包含的元素
后代：子元素包含的元素，以及一直往下的所有子元素

head元素

head中的内容通常用于

浏览器

首页·一起帮

SEO

我们先学些head中一些常用标签：

首页·一起帮

（演示：略）

作业

安装Visual Studio，建议英语语言包
在Visual Studio上新建一个项目和一个网页，能够显示：Hello，源栈！
熟记每日单词
为课程准备面试题目https://github.com/hdfgfgh546...

48小时学会HTML：VS中第一个Html页面

VS中新建html文件

理解开发环境

IIS

服务器（server）

客户端（client）

HTML文档结构

一起帮·源栈欢迎您！

元素（element）

一起帮·源栈欢迎您！

）和 _结束_ （

元素嵌套

层级结构

head元素

浏览器

SEO

作业

你可能感兴趣的:(html)