day31前端总结

重点：能够读懂别人的页面，知道后端开发者如何跟前端开发者配合

HTML - Hyper-Text Markup Language
HTTP - Hyper-Text Transfer Protocol

HTML = Tag + CSS + JavaScript
Tag --- content
文本标签：h1~h6 / p / sup / sub / em / strong
链接标签：a（页面链接、锚点链接、功能链接）- href / target
列表标签：ul / ol / dl
图像标签：img / figure / figcaption - src
表格标签：table / tr / td / thead / tbody / tfoot
表单：form (action / method / enctype) / input (type) / select / option / textarea
音视频：audio / video
语义化标签：header / footer / nav / article / aside
其他：div / span

CSS --- display
选择器：ID选择器 / 类选择器 / 属性选择器 / 标签选择器 / 通配符选择器 / 父子选择器 / 后代选择器 / 兄弟选择器 / 相邻兄弟选择器
样式属性：文本 / 颜色 / 边框 / 轮廓 / 边距 / 背景 / 列表 / 定位

重要性原则 / 具体性原则 / 就近原则

外部样式表 / 内部样式表 / 内嵌样式表（不推荐）

JS --- behavoir
ECMAScript + BOM（window） + DOM（document）
获取元素：getElementById / getElementsByClassName / getElementsByTagName / querySelector / querySelectorAll /
children / firstChild / firstElementChild / lastChild / lastElementChild / parentNode / previousSibling / previousElementSibling / nextSibling / nextElementSibling
创建元素：createElement / appendChild / insertBefore
删除元素：removeChild
修改元素：textContent / innerHTML

事件：addEventListener / removeEventListener

Ajax - Asynchronous Javascript and XML
XMLHttpRequest / 异步加载 / 局部刷新

jQuery - .getJSON / $.ajax

前端MVC框架 - AngularJS / Vue.js

前端组件 - Bulma / Bootstrap / Element

报表 - ECharts

前后端分离的开发模式 --- 前端渲染 --- 后端只提供JSON格式的数据，在浏览器中进行渲染

内容跟显示分离 --- MVC架构模式