前端语言串讲笔记 | 青训营

用户3695701755258
68 阅读2分钟

前端语言串讲

01_前端语言的基本能力

一、HTML(Hypertext Markup Language)

相当于人的骨骼，1、内容更丰富；2、需要用到各种标记符号。

二、CSS(Cascading Style Sheet)

相当于人的皮囊

h1 {color: red; font-sizeL 12px;}

pseudo-classes： 伪类是添加到选择器的关键字，可以用来指定所选元素的特殊状态。

pseudo-elements： 伪元素是一个附加至选择器末的关键词，可以对被选择元素的特定部分修改样式。

三、Javascript

相当于人的肌肉

原LiveScript，1995年Brendan Eich用时10天完成设计。

六种基本类型

  1. String
  2. Number
  3. Boolean
  4. Null
  5. Undefined
  6. Symbol

对象类型

  1. Array;
  2. Function.

Function

// Function declaration / Function statement
function studentBirthday(param1, param2, param3) {
    var a = param1 + "年" + param2 + "月" + param3 + "日";
    return a;
}
studentBirthday(2000,3,11)

02_前端语言的协作配合

一、CSS in HTML

Inline CSS

<p style = "color: yellow;"> paragraph. </p>

Internal CSS

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

External CSS

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

二、Javascript in HTML

在HTML中使用JavaScript，主要方法有两种：1、嵌套在HTML内；2、引入外部文件。

<html>
    <head>
        <title>Javascript in HTML</title>
            <script>
                function name(params) {
                    name("Jin")
                }
            </script>
    </head>
    <body>
        <input type = "text">
    </body>
</html>

三、CSS in Javascript

div.style.width = "120px";
div.style.cssText = "width: 120px; height: 120px; background: red;";
div.setAttribute("class", "div2")
link.setAttribute("href","css3.css");

03_你不知道的HTML(5)

HTML并非图灵完备，只是一门标记语言。

基本语法

  1. 标签（元素）Element;
  2. 文本Text;
  3. 注释Comment;
  4. DTD Document Type Defination;
  5. 处理信息ProcessingInstruction。

标签分类

  1. 文档型；
  2. 闭合型；
  3. 换行型；
  4. H5新元素。

HTML head标签

  1. title;
  2. base;
  3. meta;
  4. link;
  5. script.

HTML ARIA

ARIA不仅能够供盲人阅读，还可以指导UI系统的设计。

HTML5 新特性

  1. 新的语义元素，如<footer>, <header>, <article>, <section>；
  2. 表单增强，如数字、日期、时间、颜色；
  3. 强大的图像支持（借由<canvas>和<svg>强大的多媒体支持（借由<video>和<audio>）；
  4. 存储方式升级，比如用本地存储取代cookie。

HTML5 Web Worker

Web Worker是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能。

HTML5 Web Socket

Web Socket简化了客户端和服务器之间的数据交换过程，允许服务端主动向客户端推送数据。

HTML5 SVG & Canvas

SVG是向量化图片，可以用于交互，可扩展；Canvas属于HTML元素，可以绘制各种图形，容易失真。

  • 本堂课让我对HTML5有了更深刻的认识，目前，HTML5尚处于不断完善的阶段，但其已经在HTML的基础上进步了许多。HTML5不再是单纯的标记语言，它能够在移动设备上支持多媒体，新增了强大的绘图功能、音频和视频的支持等等。
avatar
文章
阅读
粉丝