前端语言串讲

01 前端语言的基本能力 02前端语言的协作配合 03HTML

01 前端语言的基本能力

HTML create the structure （构建骨骼） 构建框架结构 包含控制内容布局 为外部设计提供层次结构 CSS stylize the website （构建皮囊） 添加样式 识别屏幕尺寸 Javascript increase interactivity （构建肌肉） 增加交互体验 处理函数 保证效率和可用

HTML 形式上标签 浏览器称为元素 文本->页面内容

CSS 语法简单 selector declaration declaration h1 {color；blue；font-size；12px} property value property value pseudo-classes pseudo-elements e.g. #selects all visited links a：visited #insert content before every element p::before # element with a target attribute 【target】 JAVASCRIPT （1）借鉴c语言的基本语法 （2）借鉴Java语言的数据类型和内存管理 （3）借鉴scheme语言，将函数提到首位（早期没有类继承） （4）借鉴self语言，基于原型（prototype）的继承机制

browser （1）渲染引擎 （2）js引擎 js本质--》文本（通过解释器运行）

02前端语言的协作配合 jsx

css在html中使用 （1）inline css
直接在html标签中通过style或class使用添加样式 （2）internal css 内部css 在HTML头部通过标签

（3） external css 外部样式 HTML头部通过link标签引入 js（单线程）在html中使用 引入script标签（默认定义全局）

微任务/宏任务。

html in js 动态修改html内容，基于线程的渲染框架

css in js

03HTML

基本语法
标签（元素）element 文本 text 注释 comment DTD document type defination 处理信息 processinginstruction

标签分类 文档型 闭合型 换行型 H5新元素 语义化标签 媒体标签 表单标签 功能标枪

head

title
标签，全局唯一 base
向页面所有相对url提供前缀 ，全局唯一，不建议使用 meta 通常是约定好的键值对 例外：charset /http-equiv link rel决定类型，hrel决定引入地址 script type指定mime类型 可内嵌代码，可外链文件

html5 不再是单纯的文本语言，定义了规范和特性

header 放置网页头部 nav导航条 aside侧边栏 section分割主体部分

语义化标签：帮助开发者更好维护网页结构，也便于整理网站

HTML5存储 cookies local storage session storage

PWA&AMP

socket 全双工————本质TCP连接请求

web的风靡 对用户友好 对开发者友好 领域成熟的 未来方向

前端语言串讲

基础

HTML css js 浏览器引擎

协作 css/html injs css/js in html

html

标签 head body

html5 语义化 存储/音视频 浏览器api 可视化相关

拓展交流 回顾分析 ui《----》data