00-基础入门 1. 行业介绍美工(切图仔) → 网页制作 → web前端你开发 → 全栈开发 → 大前端。 大前端应用: 网站 管理系统 APP 小程序 数据可视化 智能电视 桌面应用 网页游戏 工具和后端 2. 网页web2.1 w3c标准蒂姆·伯纳斯·李 → W3C 标准。 网页通过浏览器才能访问阅读 网页是网站中的一页 文件扩展名 .html HTML: 超文本标记语言,HyperText M 2017-04-28 04_大前端 > 01_HTML #HTML #基础 #标签
02-HTML5特性 HTML5 草案在 2008年发布,2013年正式发布 HTML5 版本是 HTML5.1。 HTML5 语法 HTML5 新增语义化标签 案例:语义化标签 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636 2017-04-28 04_大前端 > 01_HTML #HTML #基础 #HTML5
03-基本标签 1. 结构:html、head、title、meta、body根:<html> </html>头:<head> </head>标题:<title> </title>(在头标签中)元信息:<meta charset="utf8">(在头标签中)主体:<body> </body& 2017-04-28 04_大前端 > 01_HTML #HTML #标签
04-form,frameset,meta 1. form 表单表单元素: type 不同的输入方式 name 用于拼接到链接地址提交到服务器,格式:name1=value1&name2=value2 value 默认值 checked 单选选中 selected 多选选中 1234567891011121314151617181920212223242526272829303132333435<!DO 2017-04-28 04_大前端 > 01_HTML #框架 #HTML
06-HTTPS协议 HTTPS协议工作流程 443 端口 Client发起一个HTTPS(https:/demo.linianhui.dev)的请求,根据 RFC2818 的规定,Client知道需要连接Server的443(默认)端口。 Server把事先配置好的公钥证书(public key certificate)返回给客户端。 Client验证公钥证书:比如是否在有效期内,证书的用途是不是匹 2017-04-28 04_大前端 > 01_HTML #HTTPS #协议
01-CSS定位布局 1. position 定位position 定位,需要结合偏移位置(top/left/right/bottom)使用。有 6 个取值。 6 postion: inherit; 从其父元素继承此属性。 12345position 偏移位置属性:top:100px;left:100px;right:100px;bottom:100px; 1.1 绝对与相对定位 2017-04-28 04_大前端 > 02_CSS #CSS #定位 #布局
00-CSS基础入门 1. 什么是CSSCSS,Cascading Style Sheets 层叠样式表。 即:如何修饰网页信息的显示样式。 目前推荐遵循的是 W3C 发布的 CSS3.0(1998年5月21日W3C推出了CSS2.0),用来表现XHTML或者XML等样式文件的计算机语言。 2. CSS语法 每个CSS样式由两部分组成,即选择符和声明,声明又分为属性和属性值 属性必须放在花括号{} 2017-04-28 04_大前端 > 02_CSS #CSS #选择器
02-CSS3选择器 参考资料: 一套企业级UI设计语言和React组件库:https://gitee.com/ant-design/ant-design 同上:https://ant-design.gitee.io/ 1. CSS3基础CSS3完全向下兼容,网络浏览器也还将继续支持CSS2。 CSS3主要的影响是将可以使用新的可用的选择器和属性,这些会允许实现新的设计效果,比如动态和渐变,而且可以很简单的设计处 2017-04-28 04_大前端 > 02_CSS #CSS #选择器 #CSS3
03-CSS3特殊样式&字体图标 1. 阴影1.1 文本阴影text-shadow 设置文本的阴影。 第一个参数,水平方向阴影位移 第二个参数,垂直方向阴影位移 第三个参数,阴影模糊程度 第四个参数,阴影颜色 12345678910111213141516171819<!DOCTYPE html><html lang="en"><head> <meta ch 2017-04-28 04_大前端 > 02_CSS #CSS #CSS3 #阴影 #字体
04-CSS3怪异盒&弹性盒布局 1. 怪异盒模型box-sizing 属性,可以设置标准盒模型或怪异盒模型。子元素样式 content-box,属性值,标准盒模型 border-box, 属性值,怪异盒模型,为元素设定的宽度和高度决定了元素的边框盒。 就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制,通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 示例: 1234567891 2017-04-28 04_大前端 > 02_CSS #CSS #CSS3 #怪异盒模型 #弹性盒布局