Web前端技术培训要点.pptx

中国移动通信集团黑龙江有限公司2015.13 Web 前端技术培训 什么是 Web 前端 Web 系统 服务器 客户端 客户端 客户端 客户端 Web 前端三要素 HTML CSS JavaScript 课程大纲 HTML CSS JavaScript 第一部分 HTML 和 CSS HTML 标签 开发工具 超链接 CSS 选择器 颜色 盒模式 图片 HTML 和 CSS 学习大纲 字体 表单 表格 浮动 定位 iframe 搜索引擎优化 HTML 和 CSS 学习大纲 01 - HTML 标签 使用 HTML 标签组织网页结构 标题标签 heading tag： h1 – h6 段落标签 paragraph： p 无序列表 unordered list： ul 列表项 list item：li 有序列表 ordered list：ol W3C 万维网联盟： The World Wide Web Consortium 创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。 W3C已发布了200多项影响深远的Web技术标准及实施指南如HTML、CSS、WCAG等。 把所有显示在网页中的内容放入body标签 网页中的不可见部分放入head标签中 将所有 HTML 代码放入 html 标签中 DOCTYPE：表示 HTML 的版本信息 使用网页基本结构标签组织整个页面 HTML 和 CSS 学习大纲 02 - 开发工具 UltraEdit、EditPlus：代码颜色、多文件编辑 Dreamweaver、Sublime、WebStorm：神器 常用开发工具介绍 官方下载地址： /webstorm 安装 启动 配置：字体大小和配色方案的设置 使用WebStorm编写HTML WebStorm 的安装、启动、配置和使用 HTML 和 CSS 学习大纲 03 - 超链接 在浏览器中输入URL时发生了什么 /news 服务器 请求 request 响应 response /news 点击超链接，连接中有一个文件请求被发送给服务器 在浏览器中点击超链接时发生了什么 /news 1 浏览器 请求 request 服务器 /resources /news 服务器把文件返回给浏览器，浏览器用新的文件替换旧的文件 在浏览器中点击超链接时发生了什么 /resources 2 浏览器 响应 response 新的页面地址 服务器 /resources /news a标签：网页中可点击的超链接 href 属性：超链接指向的URL地址（hypertext reference） target 属性：当超链接被点击的时候，新页面打开的位置 如何制作超链接 _blank：在浏览器的新标签或新窗口中打开页面 _self：在当前窗口中打开页面，替换原来的页面 如果不添加 target 属性，那么默认值是 _self 绝对路径向一个特定的服务器上的文件发送请求 绝对路径、相对路径和根路径 相对路径不指定服务器，参照发送请求页面的URL 根路径前面总是包含 “/“，在绝对路径的基础上去掉协议和主机名 04 – CSS选择器 HTML考古：当Web开发还是一项新技术时，html的内容和样式没有被分开 将内容和样式分离 内容和样式分离：把表示样式的代码从html中分离出来，并且创建一种规则来定义html标签要显示成什么样子 Cascading Style Sheets 层叠样式表 选择器：可以选择html标签 类型选择器：不带尖括号的标签名 派生选择器：作用在某些标签的子标签上 选择器 添加CSS样式的位置：在head标签中添加style子标签 使用link标签将CSS和所有的html文件关联在一起 把样式表放在什么地方？ W3School / MDN /zh-CN/docs/Web/Tutorials 网络平台：HTML 网络平台：CSS 参考手册 05 – 颜色 black #FF0000 CSS颜色 红色 黑色 黄色 关键字颜色 十六进制颜色 rgb颜色 每个十六进制颜色由三部分组成 十六进制色（Hexadecimal colors） #FFFF00 红色的多少 绿色的多少 蓝色的数量 取值范围：16进制的00-FF，10进制的0-255 使用十六进制数来设置颜色，三个部分，每个颜色有256种可能的取值 网页的颜色 256ⅹ256ⅹ256 =06 – 盒模式 在body中的每个HTML标签实际上都被包围在一个看不见的矩形中，这个矩形就叫做“盒”。 盒 margin border padding 内容区域 – content area 内容区域中包含的是盒子中真正的内容（文本、图片等） 补白 或内边距 – paddi