Day1前端语言串讲 ｜ 青训营

Cmon
92 阅读2分钟

  1. 前端语言的基本能力

三剑客：HTML、CSS、Javascript

 HTML(Hypertext Markup Language):构建框架结构，即控制内容布局，为web设计师提供框架结构，是所有web页面的基石。

 CSS(Cascading Style Sheet):为网站添加样式，即为网页元素添加样式，针对不同的屏幕尺寸让网站具备响应特征，是网站“外表与体验”的重要工具。

 Javascript:增加交互，即增加网页交互体验，处理复杂函数及特性，保证更高的效率以及可用性。

三剑客的使用

 HTML：最基本的语言，最小单位即左右尖括号(<>)包裹起来的一串字符。从形式上看可以称作标签，在浏览器中往往称之为元素，本质就是一系列标签构成的文本文件。
 CSS：语法非常简单，即Selector后连接多个"{Declaration}"，Declaration由"Property:Value"组成，不同的Declaration中间用";"分隔。但想要运用得当非常复杂：首先需要在HTML上设计合适的框架并设计配套的选择器方案(CSS有多个选择器，见图1)。
 Javascript：发展历程(见图2)，基本语法(见图3)

b2b35c6487f2d96fd899215402c8dd6.jpg

图1

9e2b7061f9dce59a841b784a2602684.jpg

图2

f0081381f5daad1b14bc0d495ddfa00.jpg

图3

在浏览器中的运行

渲染引擎

c81fb847b5edb4a4dab19e029edcc86.jpg

图4

Javascript引擎

edcee56635236a53ca7875b7fae10e0.jpg

图5

  1. 前端语言的协作配合

生态发展趋势

c81dd966debefa96fd9506f4e1bfc77.jpg

图6

相互协作

CSS in HTML

Lnline CSS

<p style="color: blue;>This is a paragraph.</p>

Internal CSS

    <style type = text/css>
      body {background-color:blue;}
      p { color : yellow;}
    </style>
   </head>

External CSS

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

Javascript in HTML

638b75b3e32777310f434cb097c65cb.jpg

图7

HTML in Javascript

c31d4a249f1a21308dc86d268327c0a.jpg

图8

CSS in Javascript

db1ab1bd46d90e2c3f9e0c42a1ef223.jpgf5a2a7f2764b4829b6264293786dfe8.jpg

图9/10

  1. 你不知道的HTML(5)

    仅为一门标记语言，对其存储、IndexedDB、Web Worker、Audio、二进制、PWA & AMP、Video、Shadow DOM、API、Web Socket、Web Component、SVG & Canvas、webGL & WebGPU、webAssembly等方面进行了详细叙述。

mindmap
     标签
      闭合型
      换行型
      H5新元素
      文档型
      标签
          基本语法
            文本
            注释
            DTD
            处理信息

  1. 拓展分享

Web风靡的原因

1、对用户友好 2、对开发者友好 3、领域成熟度较高 4、未来前景光明

UI<->Data

  1. 个人思考

    通过此课程视频，我了解到了前端三剑客的特性，发展历程以及相互作用。想要熟练掌握前端知识，三剑客需多运用，不能局限于目前的应用，它们一直在更新，我们也需一直学习，为用户提供一个方便具体的应用网页。所谓“基础不牢，地动山摇”，能否玩转三剑客是能否进行网页制作的重要因素。
avatar
文章
阅读
粉丝