前端入门1-基础概念声明正文

声明

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

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

正文

相关概念-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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏PPV课数据科学社区

【高手捷径】Excel数据操作与处理

作者:聂春霞,2001年毕业于南京邮电大学,在中国移动通信集团江西有限公司工作近4年,2005年加入腾讯公司,现就职于腾讯公司MIG运营商业务部,专注数据分析岗...

39090
来自专栏Web项目聚集地

3分钟理解响应式布局

总听别人说响应式布局,觉得是一个很高大上的东西,近日做的一个项目需要适配不同的屏幕尺寸,于是就简单研究了一下 Web响应式布局,其实原理很简单,下面就简单整理了...

13220
来自专栏Thinks

10步大幅提升网站可访问性

10步大幅提升网站可访问性。每一步都可以在20分钟内完成。这篇文章也可以在20分钟内看完。 第一步,检查<title></title>,不允许空,不允许过长,简...

8410
来自专栏蔡述雄的专栏

包学会之浅入浅出Vue.js:升学篇

上一篇《包学会之浅入浅出Vue.js:开学篇》中,我们初步了解单页面组件这个概念,现在通过一个项目,来进一步解析组件的应用吧。

35K400
来自专栏知晓程序

开发 | 小程序也能像朋友圈一样「折叠全文」?有了这个技巧就能做!

之前做小程序开发时,需要实现对多行文本进行的折叠的效果(类型微信朋友圈)。主要交互有三点:

19750
来自专栏前端说吧

PS-前端切图教程(切jpg图和切png图)

1.1K50
来自专栏韩东吉的Unity杂货铺

零基础入门 16: UGUI RawImage

今天的内容会很简单,也会很短,分享一下UGUI的RawImage,那什么是RawImage呢?

11120
来自专栏软件开发

CSS3与页面布局学习总结(四)——页面布局大全

一、负边距与浮动布局 1.1、负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%。当一个元素与另一个元素m...

1.3K60
来自专栏Jacklin攻城狮

翻译_iOS视图编程指南(View Programming Guide for iOS)之介绍

在iOS中,你可以使用窗口和视图将你应用的内容呈现在屏幕上。窗口本身是不具备呈现可视化内容的功能的,但它可以用作装有应用视图的容器。视图可以规定在窗口的某一部分...

12830
来自专栏软件开发

CSS3与页面布局学习总结(五)——Web Font与Sprite

一、web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体。先了解操作系统中的字体: a)、安装好操作系...

35760

扫码关注云+社区

领取腾讯云代金券