前端语言的基本能力

HTML

css

Javascript

(1)借鉴C语言的基本语法；

(2)借鉴]ava语言的数据类型和内存管理；

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

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

前端语言的协作配合

Css in HTML

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

Javascript in HTML

<button onclick="showContent()">Show hidden content</button>
<template>
<h2>Flower</h2>
<img src="img_white_flower.jpg"width="214"height="204">
</template>

<script>
function showContent(){
    var temp document.getElementsByTagName("template")[0]
    var clon temp.content.cloneNode(true);
    document.body.appendChild(clon);
}
</script>

HTML in JavaScript

//file:render.js
function renderHello()
    var template document.getElementById('template').innerHTML;
    var rendered Mustache.render(template,name:'Luke'});
    document.getElementById('target')innerHTML rendered;
}

<html>
<body onload="'renderHello()"'>
<div id="target">Loading...</div>
08
<script id="template"type="x-tmpl-mustache">
Hello {name }}
</script>
<script src="https://unpkg.com/mustache@latest"></script>
<script src="render.js"></script>
</body>
</html>

CSS in JavaScript

div.style.width="100px";
div.style.cssText="width:100px;height:100px;background:palevioletred;";
div.setAttribute("class","div2")
link.setAttribute("href","css2.css");

import React from "react";
import "./App.css";
function App(){
return
<div className="App">
<header className="App-header">
<h2 style={{color:"blue",backgroundColor:"white"}}
Hello From React
 
</h2>
</header>
</div>
 }
 }
export default App;

你不知道的HTNL5

HTML DTD

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

head标签

title base meta link script

HTML body功能性标签

HTML ARIA

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

HTML5语义化标签

建议：用对比不用好，不用比用错好

表单增强

总结

HTML，CSS和JavaScript是构建网页的三种基础语言。HTML负责网页的结构和内容，CSS负责网页的样式和布局，而JavaScript负责网页的交互和动态效果。这三种语言混杂使用，可以创建出丰富多彩、具有良好用户体验的网页。

在学习这三种语言时，应该先掌握HTML的基础知识，了解如何使用标签来构建网页结构。接着学习CSS，掌握如何使用选择器和属性来定义网页的样式。最后学习JavaScript，了解如何使用脚本来实现网页的交互和动态效果。

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