Web前端技术培训.pptx

中国移动通信集团黑龙江有限公司2015.13;什么是 Web 前端;Web 前端三要素;课程大纲;第一部分 HTML 和 CSS;HTML 标签 开发工具 超链接 CSS 选择器 颜色 盒模式 图片 ;HTML 和 CSS 学习大纲;使用 HTML 标签组织网页结构;W3C;把所有显示在网页中的内容放入body标签 网页中的不可见部分放入head标签中 将所有 HTML 代码放入 html 标签中 DOCTYPE：表示 HTML 的版本信息 ;HTML 和 CSS 学习大纲;UltraEdit、EditPlus：代码颜色、多文件编辑 Dreamweaver、Sublime、WebStorm：神器;官方下载地址： /webstorm 安装 启动 配置：字体大小和配色方案的设置 使用WebStorm编写HTML;HTML 和 CSS 学习大纲;;;;a标签：网页中可点击的超链接 href 属性：超链接指向的URL地址（hypertext reference） target 属性：当超链接被点击的时候，新页面打开的位置 ;绝对路径向一个特定的服务器上的文件发送请求;04 – CSS选择器;HTML考古：当Web开发还是一项新技术时，html的内容和样式没有被分开;选择器：可以选择html标签 类型选择器：不带尖括号的标签名 派生选择器：作用在某些标签的子标签上 ;添加CSS样式的位置：在head标签中添加style子标签 使用link标签将CSS和所有的html文件关联在一起 ;W3School / MDN /zh-CN/docs/Web/Tutorials 网络平台：HTML 网络平台：CSS;05 – 颜色;CSS颜色;每个十六进制颜色由三部分组成;使用十六进制数来设置颜色，三个部分，每个颜色有256种可能的取值;06 – 盒模式;在body中的每个HTML标签实际上都被包围在一个看不见的矩形中，这个矩形就叫做“盒”。;margin;width：宽 height：高 border：边框 padding：内补白 margin：外边距 display：显示;block、inline、inline-block、none;div布局入门;07 – 图片;网页中出现的大部分图片都属于以下这三种类型 内容图片 布局图片 用户交互图片;img标签;使用CSS中的background属性 background-color background-image background-repeat background-position ;图片精灵 sprite：把小图标放在同一个文件中，提高性能 用户交互图片很多都是小图标，适合使用用户交互图片; JPEG、PNG和GIF;08 – 字体;CSS;CSS;通用字体系列;通用字体系列;09 – 表单;;;美食网表单;10 – 表格;要创建一个最简单的表格，至少需要三个标签 table：表格标签 tr：表格行标签，table row td：数据单元格标签，table data;标签 table、tr、td、th thead、tbody、tfoot caption 合并单元格属性 colspan：跨列单元格 rowspan：跨行单元格;11 – 浮动;浏览器在页面上摆放HTML元素所用的方法;浏览器在页面上摆放HTML元素所用的方法;float 属性：left | right 浮动元素的特点 默认宽度是内容的宽度 向指定方向移动，排在前一个浮动元素的旁边，浮动在后面的元素的上面 半脱离文档流 ;clear 属性 添加空元素 定义 clearfix 类;12 – 定位;position 属性： static（默认值） | relative | absolute | fixed 精确控制标签在HTML文档中的位置（对static不起作用） top、right、bottom、left;定位;z-index;z-index: 9; ;13 – iframe;HTML;14 – 有哪些信誉好的足球投注网站引擎优化;HTML;多使用标题标签：h1 – h6 添加img标签的alt属性： 一些标签的title属性：;第二部分 JavaScript;JavaScript 历史;ECMAScript;JavaScript 学习大纲;HTML 和 CSS 学习大纲;第一个程序： script和 alert() JavaScript的工作方式： head中和body中 script标签中 和 内联事件中 JavaScript是一门解释型语言 控制台输出：console.log();;语句 多条语句可以写在同一行，也可以写在不同的行中 同一行中的两条语句之间要用分号分隔 不同行中的语句末尾可以不用分号，建议使用分号 注释：注释是给开发人员看到，Jav