HTML标签语义化,值得收藏! àì夳堔傛蜴生んèń 2022-10-18 01:44 167阅读 0赞 ## 思维导图 ## ![0873c9f8fdaa7d6744e25cf844431925.png][] ### 学习路线 ### > ##### 第一阶段:网页制作 ##### **HTML**:常用标签,锚点,列表标签,表单标签,表格标签,标签分类,标签语义化,注释,字符实体 **CSS**:CSS介绍,全局样式,行内样式,内联样式,选择器,字体样式值,文本样式值,颜色样式值,盒模型,控制台使用,清除默认样式,盒模型居中,外部距塌陷,标准文档流,块元素,行内元素,行内块元素,多种伪类元素,浮动,定位 > ##### 第二阶段:JavaScript动态交互 ##### **JavaScript初阶**:变量与运算符,逻辑控制,Math类,函数,Object类,定时器,Array类,String类,Date类 **JavaScript进阶**:JavaScript DOM基础,this,事件,事件流,JavaScriptBOM基础,call&apply&bind,自定义属性,面向对象编程 **ES6/7/8/9**:ECMAScript6简介,let和const,ES6+的作用域,对象的扩展,函数的扩展,字符串的扩展,Symbol,Set&Map,Promise对象,async&awiat,箭头函数,模板字符串,rest参数,Class,Module模块 **JavaScript高阶**:闭包,立即执行函数,惰性函数,插件开发,多人协作,深复制与浅复制,数组扁平化,递归,正则表达式全解,函数防抖,函数节流 > ##### 第三阶段:移动端开发技术实战 ##### **HTML5**:HTML5简介,HTML5新语法,HTML5新语义化标签,HTML5新表单元素属性,HTML5新手机端新事件处理,HTML5新增多媒体实战,本地存储,Canvas,HTML5地理组件GeoLocation **CSS3**:CSS3新增属性,圆角制作企业级方案,CSS3背景属性,过渡动画 transition,变化属性 transform,特效轮播图实战,企业级flex布局实战,grid布局实战 **Bootstrap**:响应式,媒体查询,栅格系统,栅格参数,组合模式,列偏移/列排序/自动列,列对齐/列嵌套,文本与颜色,按钮,导航,图文混排,模态框,轮播图 **移动端开发**:移动端简介,移动端视口约束,移动端flex移动端实践,rem,vw,flexible企业级实战 > ##### 第四阶段:前后端分离技术及常用库类 ##### > > **Ajax**:AJAX简介,AJAX作用,封装AJAX,创建XMLhttpRquest对象,同步和异步,AJAX分页 **jQuery**:jQuery介绍,jQuery链式语法,jQuery选择器,jQuery核心,jQuery工具,jQuery事件,jQuery事件对象,jQuery特效,jQuery回调函数,jQuery文档处理,jQuery筛选,jQuery属性,jQueryCSS **Echarts**:Echarts概述,Echarts使用,坐标系,雷达图/饼状图/折线图 > ##### 第五阶段:企业级高级WEB架构开发 ##### **Webpack**:Webpack的安装和使用,项目模块打包,静态打包模块器,Webpack入口,Webpack输出,Webpack插件,webpack模块 **Vue**:Vue使用,Vue响应式,Vue双向数据绑定,Vue相关指令,vue-resource,axios,template选项,Vue生命周期,Vue组件,自定义指令,过滤器,computed属性,Vue-cli 2.x和3.x 脚手架配置,Vue-router,Vuex,Element UI **微信小程序**:uni-app,mpvue,微信小程序注册,APPID申请,生命周期,小程序调试,微信小程序框架组件,微信小程序布局框架,微信小程序条件渲染和列表渲染,媒体组件audio,视图容器,网络api,相机api,地图api ![04cbcc50547ab3d7eeeb7dab8f6440bc.png][] -------------------- ### 【95页】初级前端模块笔记 ### > 主要内容包括**html,css,html5,css3,JavaScript,正则表达式,函数,BOM,DOM,jQuery,AJAX,vue 等等**。需要可以看文末领取**完整版【95页】初级前端模块笔记和前端学习路线图**。 #### html/css #### * **html基本结构** * **标签属性** * **事件属性** * **文本标签** * **多媒体标签** * **列表 / 表格 / 表单标签** * **其他语义化标签** * **网页结构** * **模块划分** * **CSS代码语法** * **CSS 放置位置** * **CSS的继承** * **选择器的种类/优先级** * **背景样式** * **字体样式** * **文本属性** * **基本样式** * **样式重置** * **盒模型样式** * **浮动float** * **定位position** * **浏览器默认样式** ![3f69c409fe8b2bc6800dd4b90ead1e19.png][] #### html5/css3 #### * **HTML5 的优势** * **HTML5 废弃元素** * **HTML5 新增元素** * **HTML5 表单相关元素和属性** * **CSS3 新增选择器** * **CSS3 新增属性** * **新增变形动画属性** * **3D变形属性** * **CSS3 的过渡属性** * **CSS3 的动画属性** * **CSS3 新增多列属性** * **CSS3新增单位** * **弹性盒模型** ![1431e512c2c67c2ccc6b4eb4b15d4104.png][] #### JavaScript #### * **JavaScript基础** * **JavaScript数据类型** * **算术运算** * **强制转换** * **赋值运算** * **关系运算** * **逻辑运算** * **三元运算** * **分支循环** * **switch** * **while** * **do-while** * **for** * **break和continue** * **数组** * **数组方法** * **二维数组** * **字符串** ![9e0173fc555c04423373e93da624afce.png][] #### 正则表达式 #### * **创建正则表达式** * **元字符** * **模式修饰符** * **正则方法** * **支持正则的 String方法** ![691488e65f8ea6f5b86145fc9e4a9bd5.png][] #### js对象 #### * **定义对象** * **对象的数据访问** * **JSON** * **内置对象** * **Math 方法** * **Date 方法** ![87a4041e44b5425d2bf871bd27fa5e43.png][] #### 面向对象是一种编程思想 #### * **定义对象** * **原型和原型链** * **原型链** * **原型** #### 常用的JavaScript设计模式 #### * **单体模式** * **工厂模式** * **例模式** ![851552f4b240b6ad2e879fb890411803.png][] #### 函数 #### * **函数的定义** * **局部变量和全局变量** * **返回值** * **匿名函数** * **自运行函数** * **闭包** ![61e46d441cbd4d5e05947ec893331ae4.png][] #### BOM #### * **BOM概述** * **window方法** * **frames \[ \] 框架集** * **history 历史记录** * **location 定位** * **navigator 导航** * **screen 屏幕** * **document 文档** ![6ffcfdfc7bad0428c2ad6174f5038f07.png][] #### DOM #### * **DOM对象方法** * **操作DOM间的关系** * **DOM节点属性** #### 事件 #### * **事件分类** * **事件对象** * **事件流** * **事件目标** * **事件委派(delegate)** * **事件监听** ![8427754dff2e5de013f1868fd34eb7aa.png][] #### jQuery #### * **jQuery 选择器** * **属性选择器** * **位置选择器** * **后代选择器** * **子代选择器** * **选择器对象** * **子元素** * **DOM操作** * **JQuery 事件** * **容器适应** * **标签样式操作** * **滑动** * **自定义动画** ![93e947612d7681737ac09b867d6a6194.png][] #### AJAX #### * **工作原理** * **XMLHttpRequest对象** * **XML和HTML的区别** * **get() 和post()** #### HTTP #### * **HTTP消息结构** * **url请求过程** ![069d91e2e2ba3b347e2a979e725f3547.png][] #### 性能优化 #### * **JavaScript代码优化** * **提升文件加载速度** #### webpack #### * **webpack的特点** * **webpack的缺点** * **安装** * **webpack基本应用** * **配置文件入门** ![253c048b02dbd21aaadad56aae68d8cc.png][] #### vue #### * **MVC模式** * **MVVM模式** * **基础语法** * **实例属性/方法** * **生命周期** * **计算属性** * **数组的更新检查** * **事件对象** * **Vue组件** * **路由使用** * **路由导航** * **嵌套路由** * **命名视图** ![040f51533b9375c20a948c58bc307026.png][] #### #### ### 最后: ### 总结来说,面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气,但是我们可以在别的地方花更多时间,每个环节都提前做好准备。 面试一方面是为了找到工作,升职加薪,另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚,更重要的是在平时学习和工作中不断积累和坚持,把每个知识点、每一次项目开发、每次遇到的难点知识,做好积累,实践和总结。 **[点击这里领取Web前端开发经典面试题][Web]** #### #### ### 最后: ### 总结来说,面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气,但是我们可以在别的地方花更多时间,每个环节都提前做好准备。 面试一方面是为了找到工作,升职加薪,另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚,更重要的是在平时学习和工作中不断积累和坚持,把每个知识点、每一次项目开发、每次遇到的难点知识,做好积累,实践和总结。 **[点击这里领取Web前端开发经典面试题][Web]** ![acc4d7642d3d36f5b6c4758eb87b0271.png][] [0873c9f8fdaa7d6744e25cf844431925.png]: /images/20221014/a9d17cdcbdc54bcda5e63df6c9f9e245.png [04cbcc50547ab3d7eeeb7dab8f6440bc.png]: /images/20221014/ea681bf6665a4e5a976e69ca5b2012c5.png [3f69c409fe8b2bc6800dd4b90ead1e19.png]: /images/20221014/d781aadc1cb74e988b7a1d1ff10da7da.png [1431e512c2c67c2ccc6b4eb4b15d4104.png]: /images/20221014/bac48cef4bae40cfacfd9ec05add0507.png [9e0173fc555c04423373e93da624afce.png]: /images/20221014/8cb3361ac21348958ea57b5dae806a5d.png [691488e65f8ea6f5b86145fc9e4a9bd5.png]: /images/20221014/8950285fd55241e1bfa62002a570c5eb.png [87a4041e44b5425d2bf871bd27fa5e43.png]: /images/20221014/513e15d0d9344a82bb4607271409d79b.png [851552f4b240b6ad2e879fb890411803.png]: /images/20221014/ec3664bda5b648ae82e1cc4e782d75e2.png [61e46d441cbd4d5e05947ec893331ae4.png]: /images/20221014/8d1ecfcbd47b4bf28ac2687913e9fa1b.png [6ffcfdfc7bad0428c2ad6174f5038f07.png]: /images/20221014/826086adcb24401a986021f39b867e21.png [8427754dff2e5de013f1868fd34eb7aa.png]: /images/20221014/8af583dfb2874d0582266061ff1cfd17.png [93e947612d7681737ac09b867d6a6194.png]: /images/20221014/db4d55f7c0834025b70f55cd0a3a8af6.png [069d91e2e2ba3b347e2a979e725f3547.png]: /images/20221014/7c36a4783ce24f33b65664d5b7d63bd7.png [253c048b02dbd21aaadad56aae68d8cc.png]: /images/20221014/597491064d444a48a88b80aadd4e153d.png [040f51533b9375c20a948c58bc307026.png]: /images/20221014/7ef679029720420386c8eadeb73d8813.png [Web]: https://docs.qq.com/doc/DSmRnRGxvUkxTREhO [acc4d7642d3d36f5b6c4758eb87b0271.png]: /images/20221014/5e688332baa2415d8b429dcf863a3c84.png
还没有评论,来说两句吧...