前端学习第一天---02

01

今天主要学习了计算机的一些基础知识、URL地址、网站的组成、html的一些基本语法。要好好特别注意学习基本语法哦。

web（*）

网站：多个网页组合起来形成了一个网站。

万维网：无数个网络站点和网页的集合。world wide web，也简称为3w或www或web。

什么是前端（*）

前端和后端好比电视和电视塔的关系。电视塔发送信号、电视接收信号并且将信号放大，显示信号中的东西。

后端会发送一些数据过来，发送过来的数据前端需要展示出来。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

前端的重要性（*）

结合现代的时代背景前端主要有如下的作用：

• 实现结合现代人的审美来进行网站页面的设计（90年代、00年代、10年代的页面）。

  • 89年的网站界面（最初的Web界面）

    

  • 2000年的网站界面：

    

  • 2010年的网站界面

    

• 结合大数据环境下的网站前端。

  

  网站越来越大，用户越来越多。就需要在大访问量、大数据量下保证之前的访问速度。

域名和URL地址（***）

我们的网络靠什么来相互访问（IP地址），但是IP地址不便于记忆所以有了域名和DNS

192.168.13.61 A

10.201.203.11 B

• 域名

  • 域名（英语：Domain Name），简称域名、网域，是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。

    www.baidu.com

    完整的域名有三个部分组成：

    • 顶级域名：(一级域名)

      • com，商业机构
      • cn，中国
      • net，网络组织
      • org，非营利性组织
      • edu，教育
      • gov，国家机构
      • mil，军事机构
      • tech，学习

      https://wanwang.aliyun.com/domain/mobi/?spm=5176.76129.1001.14.2f0e554aTnXhJi

    • 二级域名

      是我们自己购买的。

    • 主机名

      www.baidu.com，有一个商业的机构叫baidu。访问的是baidu这个商业机构网站中的www的这台主机。

  • 网域名称系统（DNS，Domain Name System，将域名和IP地址相互映射的一个分布式数据库）是因特网的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网，而不用去记住能够被机器直接读取的IP地址数串。

    www.baidu.com是一个域名，和14.215.177.38 这个IP地址想对应，DNS就像是电话本。它让我们可以直接输入www.baidu.com这个名字来代替14.215.177.38这个IP地址。我们直接输入网站的域名之后，DNS就会将这个名字转换为机器能够识别的IP地址。

• URL

  www.baidu.com叫URL地址（统一资源定位符），它用来表示要请求的资源的具体的地址。

  http://www.ceshi.com:80/test/test.html?par1=var1&par2=var2#p

  • http：协议名，告诉服务器应该用什么约定和客户端进行通信。http是可选的当你输入一个地址之后http会自动加上。

    http://localhost/

  • www.ceshi.com，服务器地址。具体要请求哪个地址的东西。

  • :80，端口。代表数据要从哪个窗口进去。可选的。

  • /test/test.html，文件路径，你通过文件路径去访问服务器上的指定目录下的指定的资源，可以有多层的文件路径。

    C:\xampp\htdocs我们成为叫网站根目录。

  • par1=var1&par2=var2，查询字符串。用来传值，给服务器端脚本语言传值。

  • #p，片段标识符。

  https://www.baidu.com/

  https://www.baidu.com/s?
  ie=utf8&
  f=8&rsv_bp=1&
  rsv_idx=1&
  tn=baidu&
  wd=oaliyun&
  fenlei=256&
  oq=%25E9%2598%25BF%25E9%2587%258C%25E4%25BA%2591&
  rsv_pq=b8b7b03d00093b6a&
  rsv_t=7a80mEN03j6OQBWI75zBB6g%2FZwScCBnONj%2BDPdcJsw1ZaAfLpUwwc3cCLvA&
  rqlang=cn&rsv_enter=1&
  rsv_dl=tb&
  rsv_btype=t&
  inputT=2367&
  rsv_sug3=16&
  rsv_sug1=14&
  rsv_sug7=101&
  rsv_sug2=0&
  rsv_sug4=2367

  ​

网络软件的组成(**)

web也属于网络软件。

• 什么是客户端，什么是服务器端。

  • 客户端：发起请求，接收服务器端口发来的消息的一方。在web中指的就是我们的浏览器。
  • 服务器端：接收客户端发来的请求并且给出响应。

• 网站的组成

  • 客户端-浏览器：浏览器是www服务器的客户端，向www服务器发送各种请求，并且对服务器返回来的响应进行解释，并且让用户和这些内容进行交互。

  • HTML（超文本标记语言）

    网页的本质就是HTML，它将网页的各个部分标记出来让浏览器进行解释。

  • CSS（层叠样式表）

    html用来标记，但是标记出来的各个部分的内容比较混乱，美观度比较差。所以我们用CSS进行美化。

  • 客户端脚本语言（JavaScript）

    • 脚本：一种程序，它不能独立运行必须有一个载体。
    • 客户端：浏览器。
    • 客户端脚本语言：在浏览器上面运行的一种程序。

    控制行为，用来和用户进行交互。

    HTML、CSS、JavaScript：HTML用来标记、CSS用来美化、JavaScript用来进行交互，他们的分工很明确。HTML像是毛坯房、CSS装修、JavaScript就像安装了一些开关。

  • Web服务器

    也称为www服务器，通常我们所说的服务器端就是指的web服务器，用来给请求的客户端反馈。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6PLXC9v4-1614844662803)(_v_images/20210215173541201_23072.png)]

  • 服务器端脚本语言

    在服务器端工作，用来协助web服务器完成业务逻辑的语言。

    Java PHP Python

  • 数据库

    存放数据的仓库。

当今web的工作方式(**)

较为完整的web可以分为浏览器、HTML、CSS、JavaScript、web服务器、服务器端脚本语言、数据库，而现代的Web多数采用的是前后端分离的架构。

我们前端最主要学的就是HTML、CSS、JavaScript。至于后面讲的Vue、React这些框架都是在JavaScript之上封装的框架。

浏览器(*)

浏览器是网页运行的平台，常见的浏览器有 IE 、火狐（Firefox）,谷歌（Chrome）,Safari和Opera等，我们平时称为五大浏览器，第六个是Edge浏览器，是微软改进IE新出的内置浏览器

因为内核的不同才导致有了所谓的5大浏览器。

所谓的内核就是指的渲染引擎，负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、CSS、JavaScript）并渲染（显示）网页。 所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。

不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。 但它们都需要遵循W3C的标准（HTML5、CSS3、ES标准等等），所以浏览器和浏览器之间会有一些差别，但是差别不大。

• IE IE是Trident内核。Window发布后，windows10发布以后IE将其内置浏览器命名为Edge,Edge最显著的特点就是新内核。

• Firefox(火狐) Gecko内核，Gecko的特点是代码完全公开，因此开发程度很高，全世界的程序员都可以为其编写代码，增加功能，可惜这几年没落了，比如打开速度慢，升级频繁，猪一样的队友flash，神一样的对手chrome。

• Safari 采用的是大名鼎鼎的WebKit。 现在很多人错误的把webkit叫做chrome（即使chrome内核已经是blink，之前采用的是webkit内核）。

• chrome(谷歌) Blink内核,在Chromium项目中研发Blink内核渲染引擎（即浏览器核心），内置于Chrome浏览器之中，Blink其实是Webkit的分支，大部分国产浏览器最新版用Blink内核

• Opera Presto内核(已经废弃)是挪威产浏览器opera的“前任”内核，为何说是“前任”，因为最新的opera浏览器早已抛弃投入到谷歌的怀抱了，采用Blink。

• 其他国产浏览器都是在国外浏览器的内核的基础上加上了自己的UI壳子，就成了自己的浏览器了。

现在开发过程中大部分都使用chrome。做开发的90%以上都会用chrome。

什么是HTML（超文本标记语言）(*)

文本标记语言：用标识将文本标记出来的语言。

超：裤衩穿外头。超文本标记语言在文本标记语言的基础上多了一些东西，能够标记出来图片、视频。

超文本标记语言（Hyper Text Mark up Language），它通过标记符号来标记显示网页中的各个部分，HTML是一种标准，是一种规范。

HTML的发展史(*)

1. 是在91年一个叫tim-Lee的写了一份名为HTML的文档，在文档里面他用20多个标记将文字进行标记。这就是传说中的1.0。
2. 最早的HTML的官方规范是由IETF（因特网工程任务组）发布的HTML2.0，实际上不存在HTML1.0
3. 继IETF之后，W3C（万维网联盟），成为了HTMl后续的标准制定者。90年代中期以后，W3C对HTMl进行了几次升级，直到1999年发布的HTMl4.01
4. HTMl4.01后的修订版为xhtml1.0（x的意思为可扩展的），实际上XHTML1.0规范内容与HTML4.01完全相同，没有添加任何新元素或新属性，这两个规范的唯一的差别是HTML语法作出了不同的规定，HTMl为开发人员提供了很大的自由度，可以按照自己的意愿去编写元素和属性，但XHTML要求开发人员遵从XML规则，XHTML1.0规则要求比较严格，要求所有标签和属性都必须为小写。
5. 之后为了更加规范，W3C发布了xhtml1.1，但是很多浏览器厂商不配合不检查xhtml的规范
6. W3C开始着手开发XHTML2，但是XHTML2与所有的网页内容都不兼容，甚至于以前版本的HTML也不兼容。
7. 这时有一些人开始反对XHML2.0尤其是来自opera、apple、moailla的代表，它们希望支持以前的版本并开发一些新功能，但是被驳回。
8. 之后他们创建了WHATWG组织，开始开发一些规范，就是HTML5的前身，之后因为XHTML2.0的推进速度不快，人们又不愿意使用。所以W3C开始和WHATWG组织协商接受HTMl5。
9. 2014年10月28日，HTML 5.0，W3C正式发布HTML 5.0推荐标准

开发的时候默认用的就是HTML5的东西，只有在特殊的要求情况下才考虑其他的老旧的浏览器。

先从HTML4，CSS2, -》 HTML5、CSS3

HTML语法(****)

1. 建立文本文件，将后缀名该为xxx.html

2. 打开html文件写上一段话

3. 在编辑器中右键-》在浏览器中打开（这种方式是经过服务器来进行访问）

   http://localhost:52330/1.html

4. 加上了<marquee>是我要标记出来的内容</marquee>，这里面的<marquee>叫做标签。它是HTM最基本的单位也是最主要的组成部分。

5. <标签名></标签名>这种格式的叫双标签。前面的<标签名>代表的是开始，</标签名>代表的是结束。这两个开始和结束他们中间的英文字母是一样的。他俩是成对出现的。

6. <标签名 />，这种叫单标签（自结束标签），不是成对出现的，最后结果的这个/可以加也可以不加。

   <br />换行标签。

7. html的标签是不区分大小写的。但是推荐使用小写。

8. loop="3"这种叫属性，用来修饰、控制标签的，即使你不写某个属性，这个属性也会有默认值。

   属性的格式：属性名="属性的值"

   • 属性要写在标签里面。
   • 属性的值可以使用单引号、双引号包起来、也可以不用引号包起来。推荐使用双引号。

9. 一个标签中可以使用多个属性。并且多个属性不区分先后顺序。

10. 颜色该怎么表示：

    1. 直接使用英文单词。

    2. 6位的十六进制的值来表示。

       0~9

       0~9a~f

       将6位分成三组，分表代表红、绿、蓝比例。

       <MARQUEE width="50" loop="3" bgcolor="#FFCD43">李沛华</MARQUEE>

11. HTML对于空格和回车的处理：

    1. HTML中一个或多个空格都会当做一个空格来处理。
    2. HTML中一个回车或多个回车也会当做一个空格来处理。

12. 实体

    在HTML当中有一些字符是系统预留的或打印不出来的，所以你让这些字符能够正常使用需要用到实体。

    实体：用一些特殊的数字、字符来表示这些特殊的字符的字符串。

    格式：&字母;

    空格： 

    <：<

    >：>

    &:&

    "："

    '：'

13. 标签嵌套

    双标签里面可以嵌套单标签，也可以嵌套双标签。以后我们写的代码都是标签嵌套。

14. 总结：

    <标签名 属性1="值1" 属性2="值2">要标记的内容</标签名>

    <标签名 属性1="值1" 属性2="值2" />

15. 注释符

    <!-- 要注释的内容 -->

    有些东西不想要了，但是还不想删。这个时候可以先注释掉。

    1. 说明代码的意思。
    2. 调试代码的时候。

    shift + alt + a

    ctrl + /

    ​

    ​

    ​

• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<head>标签中的内容(****)

<body>标签中的内容()