前端入门1-基础概念

声明

本系列文章内容全部梳理自以下四个来源：

• 《html5权威指南》
• 《javascript权威指南》
• mdn web docs
• github:smyhvae/web

作为一个前端小白，入门跟着这四个来源学习，感谢作者的分享，在其基础上，通过自己的理解，梳理出的知识点，或许有遗漏，或许有些理解是错误的，如有发现，欢迎指点下。

正文

相关概念-html css js

• html: 内容层---表示某个标签在页面中是什么角色
• css: 样式层---表示某个标签在页面中该呈现什么样式
• javascript: 行为层---页面与用户的交互行为

通俗的讲：html 只负责文档的语义和结构，它描述了网页的内容和结构。

内容的呈现则由应用于元素上的 css 样式控制，它描述了网页的表现与展示效果。

javascript 则是负责网页的功能与行为，如与用户的交互。

基础-html

html 是一种标记语言，不是编程语言，需要明确这点。

编程语言，通俗的理解就是向计算机发送指令，通过程序让计算机达到我们想要的功能。

而标记语言，可以通俗的理解成对文本增加一些标志信息，类似于批注信息来说明文本内容

更通俗点理解，一大段文本内容，毫无重点，毫无结构，让人不好理解。所以，html 就通过大伙约定俗成的规范，利用一些标签，来指明，这一段文本是标题，这一段文本是个表格，这一段文本是个列表，这一段文本是导航菜单，这里需要分段，这里需要分行，这几个词是关键词，需要重点标记一下，等等等等。

html 可以这么通俗的理解。那么这个大伙约定俗成的规范，其实也就是由 w3c 来作为官方发布的标准规范。

定了规范，自然是想要让人遵守才有意义。所以，在这里，w3c 所定义的标准规范，遵守方其实也就是各大浏览器。不同的浏览器厂商，根据 w3c 发布的标准规范来解析每一份 html 文档，那么相同的 html 文档在不同的浏览器上才会有相同的作用。

而一旦某些浏览器厂商没有遵守这些规范，那么前端开发人员就要为此做一些兼容适配工作，这就跟 android 系统由 google 开发并开源一样的道理，手机厂商都可以使用这开源的系统，但不同厂商都喜欢做一些自己的修改，这就导致了 android 开发人员经常需要面对的适配工作问题。

基本概念

<a class="ddd" href="index.html">点击跳转</a>

标签：<> 带有这种符号的称为标签，跟 android 中的标签一样，分开始标签，结束标签

内容：文本内容，上图中的点击跳转四字

属性：跟 android 中的 xml 里的标签一样，每个标签有自己的一些属性，另外，html 有一些全局属性，比如上述的 class，这个属性所有标签都可以用。

元素：标签 + 内容

基础-css

css 负责文本样式的呈现，既然将 html 和 css 分离开，各自只负责各自的职责，那么肯定需要某种方式将两者连接在一起。

更准确的说，是在 html 文档中该如何使用 css，因为 html 文档是互联网的基础，一个个网页就是一份份html 文档，既然 html 文档是基础，那么就是要明确在 html 文档中该如何使用 css。

总共有三种方式：全局属性 style，style 标签，link 标签

css 最终作用的对象其实就是 html 文档中的每个元素

全局属性 style

第一种方式：全局属性 style 是直接作用于指定的标签上了，用法就直接将需要的样式声明即可，如：

<a href="index.html" style="background: gray; color: #6a90d9">点击跳转</a>

style 是所有标签都具有的属性，称之为全局属性。

剩余两种方式，都是集中将所有的 css 样式管理存放，因此如果需要作用到具体元素上，要借助选择器来实现，选择器后面再说，先看这两种方式的使用：

style 标签内嵌方式

<style type="text/css">
    a {
        background: gray;
        color: #6a90d9;
    }
</style>

link 标签引用外部文件方式

<link type="text/css" rel="stylesheet" href="css/nms.css">

style 标签和 link 标签都是 html 文档中的一种标签，两者都可以用来连接 css 代码，区别一种是将 css 代码内嵌在 html 文档中，一种是直接引用外部 css 文件。

但这两种相比较于第一种使用全局属性的方式，它们并没有直接在相关联的元素上书写，因此需要有一种机制，来将这些 css 代码关联到需要作用的元素对象上，这个机制就叫：选择器。

选择器

选择器是专门用来将 css 代码关联到指定的 html 文档中的元素对象上的，毕竟 css 已经被抽离出 html，各自负责各自的职责，但总归需要一种桥梁将两者关联在一起。

选择器很多，规则也很多，足够覆盖各种各样的场景，这里只列举几种常见的选择器：

元素选择器

<a class="myclass" href="index.html">点击跳转</a>
<span class="myclass">另一文本</span>

<style type="text/css">
    a {
        background: gray;
        color: #6a90d9;
    }
</style>

效果：作用于 html 文档中的所有 a 标签的元素上

id选择器

<a id="myid" href="index.html">点击跳转</a>
<style type="text/css">
    #myid {
        background: gray;
        color: #6a90d9;
    }
</style>

id 在 html 文档中需唯一存在，所有 id 选择器只作用于单个元素

class 选择器

<a class="myclass" href="index.html">点击跳转</a>
<span class="myclass">另一文本</span>

<style type="text/css">
    .myclass {
        background: gray;
        color: #6a90d9;
    }
</style>

html 文档中可对多个元素应用相同 class，所以 class 可同时作用于多个元素

属性选择器

<a class="myclass" href="index.html">点击跳转</a>
<span class="myclass">另一文本</span>

<style type="text/css">
    [href] {
        background: gray;
        color: #6a90d9;
    }
</style>

作用于所有具有 href 属性的元素，不管有没有使用

组合选择器

<a class="myclass" href="index.html">点击跳转</a>
<span class="myclass">另一文本</span>

<style type="text/css">
    a.myclass {
        background: gray;
        color: #6a90d9;
    }
</style>

元素选择器和 class 选择器组合使用，作用于 a 元素中有声明 myclass 类型的元素

通用选择器

<style type="text/css">
    * {
        background: gray;
      }
</style>

作用到所有元素上

基础-javascript

js 是脚本语言，可用于增加网页的交互功能，及各种行为功能。

既然是一门语言，那么学习这么脚本语言自然需要先掌握其语法，以及运行方式。

浏览器解析 html 文档是按顺序解析的，也就是说，当遇到脚本语言时，也会按顺序一条条的解释执行，直至将脚本语言执行结束再继续解析文档。这就解释了，为什么一份 html 文档里，<script> 标签经常是在各种各样的位置出现的。

而 html 文档使用 js 的方式是通过 <script> 标签来实现，如：

内嵌

<script>
    console.log("hello world")
</script>

引用外部 js 文件

<script src="js/hello.js"></script>

---

大家好，我是 dasu，欢迎关注我的公众号（dasuandroidtv），如果你觉得本篇内容有帮助到你，可以转载但记得要关注，要标明原文哦，谢谢支持~