前端开发路线总结分享
2022-10-13 09:47:49 0 举报AI智能生成
前端开发路线总结分享
作者其他创作
大纲/内容
目前不考虑兼容性，请使用谷歌浏览器
注意
推荐使用小写元素名
关闭所有 HTML 元素
关闭空的 HTML 元素
使用小写属性名
HTML5 属性值可以不用引号，推荐使用引号
图片通常使用 alt 属性。 在图片不能显示时，它能替代图片显示。
HTML 注释
命名不要随意，见名知意。
为id或class命名时，多单词以“-”连接，如：demo-one
空格与缩进
代码编写规范
DOCTYPE
文档类型
理解HTML文档流
chartset
......
meta
head标签里面各种标签含义作用
如：meta里的chartset等（chartset为元数据类型）
文档元数据
文字形式
语义标签——用正确的标签做正确的事情，html语义化让页面的内容结构化，结构更清晰。准确使用语义标签，不要滥用
行内元素与块级元素的区别
空元素
Linking（外部引用式）——link 与 @import的区别
Embedding（嵌入式）
Inline（内联式）
引入CSS的三种常用方式以及优先级
嵌入图片等
嵌入内容
交互元素
表格
表单元素
表单属性
表单
Input类型
字符实体
拖放（JS阶段）
画布 与 SVG（JS阶段）
事件（JS阶段）
存储（JS阶段）
应用缓存（PHP阶段，JS阶段可以了解）
地理位置（JS阶段）
文档主体（重点内容）
目标
学习
实践
考核
14天
何时
菜鸟教程：http://www.runoob.com/
W3school ：http://www.w3school.com.cn/index.html
学习网站
推荐网站：MDN Web文档 https://developer.mozilla.org/zh-CN/
考核例子：具有CSS3动画效果的静态网站(至少6个页面)
注：HTML5与CSS3 为同一阶段
如何
HTML5
语法规则
字体
Border
outline
display 与 visibility
id和class选择器
元素选择器
例：:first-line
伪对象选择器（伪元素选择器）
伪类选择器
例：a[rel = amp;quot;externalamp;quot;]
属性选择器
后代选择器
子代选择器（子元素选择器）
相邻兄弟选择器
关系选择器
选择器
绝对长度：px
长度
颜色名
十六进制
RGB
RGBA
HSL（了解）
HSLA（了解）
颜色的几种表示方法
颜色
取值单位
用户界面
背景
显示样式
标准盒子模型(W3C盒子模型)
IE盒子模型
盒子模型
static
fix
relative
absolute
附：css position基础https://segmentfault.com/a/1190000003702416
定位（position）
产生浮动的原因
清除浮动的方法
浮动
位置
属性
何时用
如何用
z-index
变换
动画
过渡
状态
打印（了解）
flex布局（flexbox弹性盒子）—— 一维布局
Grid 布局(网格布局)——二维布局
单列布局
float+margin
position+margin
圣杯布局（float+position+负margin+padding）
双飞翼布局（float+负margin）
三栏布局
多列布局
水平居中
垂直居中
常用居中
常用布局
响应式布局
多列
列表
网状布局
布局
媒体查询
CSS3
数据类型
函数
JS作用域
正则表达式
基础知识
对象
鼠标事件
表单事件
事件处理/监听函数
窗口事件
Event对象
事件流
按键事件
事件
web存储
json与xml
web SQL数据库 （了解）
cookie
客户端存储
DOM节点操作
样式操作
脚本化文档
DOM操作
BOM
JavaScript特效
JS闭包
插件的使用（自己写个插件，最好自己封装一下）
Ajax（JQuery阶段，原生ajax也要学习）
推荐书籍：《JavaScript高级程序设计》/《JavaScript权威指南》（这两本书用来提高，也可作为新手入门）
学习网站：菜鸟教程或W3school
考核例子：具有JS动画效果的高质量静态网站
JavaScript
JQuery语法
Ajax与原生Ajax
BootStrap的使用
3天
JQuery：菜鸟教程或W3school
BootStrap：https://v4.bootcss.com/
JQuery与BootStrap
前端开发路线总结分享
0 条评论
下一页
