前端语言（简易版） ｜ 青训营笔记

嬛嬛ya
214 阅读8分钟

一、前端语言的基本能力

前端三件套：HTML（结构）、CSS（美化）、JS（行动）

image.png

01-HTML

例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
</head>
<body>
    <div>
        <p>这是一个文档</p>
        <b> 加粗 </b>
        <u> 下划线 </u>
        <i> 倾斜 </i>
        <s> 删除线 </s>
        <br> 
    </div>
</body>
</html>

HTML是一种超文本标记语言，主要用来实现静态页面，我们在页面看到的文本，图片，视频，声音，表格，链接等都是通过HTML语言描述的，而超文本中的超就是超越‘文本’，可以设置样式，显示图片，播放视频。HTML的是由标签组成，给不同的标签不同的属性，可以实现网页的多彩效果。

02-CSS

例：

        .default {
            text-align: center;
            top: 10px;
            position: absolute;
        }

        img {
            width: 90px;
            height: 90px;
        }

        .active {
            text-align: center;
            top: 10px;
            position: absolute;
        }
    </style>

CSS定义在style中

image.png

  • 元素选择器：根据元素名称来选择HTML元素
<!-- 例：把页面上的所有的 <p> 元素 居中对齐，颜色为红色 --!>
p {
    text-align: center;
    color: red;
}
  • id选择器：
    • id选择器使用HTML元素的id属性来选择特定元素
    • id必须是唯一的
    • 选择具有特定的id元素，前面需要写一个#（井号），后面跟该元素的id
    • 注意：id不能以数字开头
<!-- 例：<p> 元素上绑定了id="text" --!>
#text {
    text-align: center;
    color: red;
}

  • 类选择器：类选择器选择有特定属性的HTML元素

    • 1、选择具有特定的class元素，前面写一个.（句点）字符，后面跟类名
    • 2、注意：只有特定的HTML元素会受类的影响（元素名称：className）
    • 3、通用选择器：通用选择器（*）选择页面上所有的HTML元素
<!-- 1、例：所有class="box"的HTML元素上都为红色且居中 --!>
.box {
    text-align: center;
    color: red;
}

<!-- 2、特定的HTML元素会受类的影响 --!>
p.box {
    text-align: center;
    color: red;
}

<!-- 3、通用选择器（*） --!>
* {
    margin: 0;
    padding: 0;
}

03-JS

例：

        // 获取所有的小图片
        var columnImg = document.querySelectorAll('.column img')
        // 获取移动的大图
        var pic = document.querySelector('.pic')
        var textArr = ['黑暗之女', '哥特萝莉 安妮', '小红帽 安妮', '安妮梦游仙境', '舞会公主 安妮', '冰霜烈焰 安妮']
        var text = document.querySelector('.text')
        var lastIndex = 0
        for (var i = 0; i < columnImg.length; i++) {

            // 立即执行函数
            (function (actIndex) {
                columnImg[actIndex].onclick = function () {
                    // 返回当前点击的元素标签
                    console.log(this);
                    // 清除
                    columnImg[lastIndex].className = ''
                    // 边框
                    this.className = 'act'
                    // var actIndex = this.getAttribute('index')
                    lastIndex = actIndex
                    // 移动大图
                    pic.style.left = -1240 * actIndex + 'px'
                    // 移动文字
                    text.innerHTML = textArr[actIndex]
                }
            })(i)
        }
    </script>

JS的演变

JavaScript是属于HTML和Web的编程语言，主要是去控制页面动态变化的！

image.png

(1）借鉴C语言的基本语法;

(2）借鉴Java语言的数据类型和内存管理;

(3)借鉴Scheme语言，将函数提升到"第一等公民"(first class)的地位;

(4)借鉴Self语言,使用基于原型(prototype)的继承机制。

04-Browser（浏览器）

  • 渲染引擎

    主要负责加载页面，根据html生成DOM树的结构，接着获取CSS资源构建CSSOM树，结合DOM的结构特性和CSSOM样式的特性，渲染引擎会计算最终页面的开发，并推断哪些部分可以成为一个整体并为一个图层，这样渲染的效率会更高，最后把页面绘制出来。

  • JavaScript引擎

    JavaScript的本质也是一段文本，它需要通过解释器才能运行，一个优质的解释器除了能处理复杂的语法外，还需要有高度优化的性能。首先引擎会把JavaScript源码进行词法、语法解析转化成为AST树，接着通过Ignition转化为字节码，字节码可以在虚拟机中运行，如果虚拟机发现有热点代码可以反过来让Turbofan直接生成优化后的机器码，性能会更高。一般Turbofan运行时发现数据类型不对，就会反过来让Ignition重新优化兼容类型的代码。

image.png

二、前端语言的协调配合

01-CSS in HTML

  • Inline CSS

    直接在HTML标签中通过style或class添加样式

  • Internal CSS

    在HTML头部通过style标签添加样式

  • External CSS

    在HTML头部通过link标签引入

02-JavaScript in HTML

默认的script都是定义全局的

image.png

使用script元素将JavaScript插入HTML页面。 该元素可用于将JavaScript嵌入HTML页面，使其与标记的其余部分保持内联，或包括存在于外部文件中的JavaScript。

script元素最强大和最具争议的部分之一是它能够包含来自外部域的JavaScript文件。与元素非常相似，script元素的src属性可以设置为存在HTML页面所在域之外的完整URL。

03-HTML in JavaScript

HTML同样可以运用在JavaScript中，主要是动态修改HTML内容。

最原始最通用的渲染引擎，以JavaScript实现为例，它可以通过script定义一个模板，使用两个大括号（{{ }}）来表示变量，每次渲染的时候可以指定{ }里面的名字，这样就可以动态的渲染HTML模板，对于开发者开发相对方便一些。

image.png

04-CSS in JavaScript

image.png

三、HTML5

HTML DTD

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

image.png

HTML全部标签分类

image.png

HTML head标签

image.png

HTML body功能性标签

image.png

HTML ARIA

了解ARIA并非只是为了供盲人阅读， 它可以为我们设计UI系统提供指导意义。

image.png

image.png

HTML5

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。

HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。

HTML5技术结合了HTML4.01的相关标准并革新，符合现代网络发展要求，在2008年正式发布。HTML5由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。与传统的技术相比，HTML5的语法特征更加明显，并且结合了SVG的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容，而且HTML5中还结合了其他元素，对原有的功能进行调整和修改，进行标准化工作。HTML5在2012年已形成了稳定的版本。2014年10月28日，W3C发布了HTML5的最终版。

HTML5的优缺点

  • 优点

    新—代网络标准能够让程序通过Web浏览器，消费者从而能够从包括个人电脑、笔记本电脑、智能手机或平板电脑在内的任意终端访问相同的程序和基于云端的信息。HTML5允许程序通过Web浏览器运行，并且将视频等目前需要插件和其它平台才能使用的多媒体内容也纳入其中，这将使浏览器成为一种通用的平台，用户通过浏览器就能完成任务。此外，消费者还可以访问以远程方式存储在"云"中的各种内容，不受位置和设备的限制。 由于HTML5技术中存在较为先进的本地存储技术，所以其能做到降低应用程序的响应时间为用户带来更便捷的体验。

  • 缺点

    (1）开放性带来的困扰 在从前网络平台上存在大量的专利产品，想要实现HTML5技术的大量应用首先就需要将这些专利性的产品变为开放式的产品，由于各种原因，当前面对这一问题还存在许多争议。以视频格式为例，两大阵营对于视频格式的设置存在争议，一大阵营以苹果为代表，另一大阵营则以opera、火狐、谷歌为代表。WPEG阵营是苹果所属阵营，由于其自身全部使用的是这一种格式，所以坚持认为应当将此格式作为标准，而WebM阵营则认为由于WPEG格式的专利依然没有解除，对于HTML5技术要求的开放性没有达标，所以不同意将其作为标准格式。

    (2）发展的速度有待提升 在HTML5中提出了一些从前HTML技术中不具有的新技术，但是有许多主流浏览器在长时间的发展过程中已经完成了此种技术的开发，在自身浏览器中实现了此种功能，就这一情况来说HTML5的发展速度方面存在一定的问题。同时由于HTML5的不成熟，当前关于HTML5的相关技术标准还没有完全确定，所以在短时间想要将其投入大规模应用还比较困难。

    (3）技术手段的不完善

四、拓展交流

image.png

  • 对用户友好

    • 无需安装
    • 无需强大硬件
    • 升级非常方便
    • 容错率强
    • 传播方便

  • 对开发者友好

    • 心智模型成熟
    • 丰富的API能力
    • 框架、工具标准化
    • 开发、测试简单
    • 具备跨平台能力

  • 领域成熟度

    • whatwg/w3c/ecma
    • 浏览器厂商整合
    • 各类Web应用风靡
    • 商用平面设计标准化
    • 全面组件化

  • 未来的方向

    • 效率工具(Rust)
    • JS 2 Anything
    • 低(无)代码站点
    • 低(无)代码站点
    • 大前端的统一
    • 三维可视化

image.png

avatar
文章
阅读
粉丝