Web前端技术培训PPT课件
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• 每个十六进制颜色由三部分组成
#FFFF00
红色的多少 绿色的多少 蓝色的数量
取值范围：16进制的00-FF，10进制的0-255
网页的颜色
• 使用十六进制数来设置颜色，三个部分，每个颜色有256 种可能的取值
256ⅹ256ⅹ256 = 16777216
06 – 盒模式
盒
• 在body中的每个HTML标签实际上都被包围在一个看不见 的矩形中，这个矩形就叫做“盒”。
• MDN
– https://developer.mozilla.org/zhCN/docs/Web/Tutorials
• 网络平台：HTML • 网络平台：CSS
05 – 颜色
black #FF0000
CSS颜色
关键字颜色
红色 十六进制颜色
rgb颜色
黑色
黄色
十六进制色（Hexadecimal colors）
什么 1 点击超链接，连接中有一个文件请求被发送给服务器
浏览器
服务器
www.javascript.com
https://www.javascript.com/news
/news
/resources
在浏览器中点击超链接时发生了
什么 2 服务器把文件返回给浏览器，浏览器用新的文件替换旧的文件
浏览器
新的页面地址
• 安装 • 启动 • 配置：字体大小和配色方案的设置 • 使用WebStorm编写HTML
HTML 和 CSS 学习大纲
03 - 超链接
在浏览器中输入URL时发生了什 么
https://www.javascript.com/news
服务器
www.javascript.com
/news
在浏览器中点击超链接时发生了
display属性
• block、inline、inline-block、none
பைடு நூலகம்
display
block
HTML
盒模式
1. 内容区域 – content area
内容区域中包含的是盒子中真正的内容（文本、图片等）
2. 补白 或内边距 – padding
padding包围在内容区域的边缘，上右下左 3. 边框 – border border包围在padding的边缘，上右下左
margin border padding
服务器
www.javascript.com
https://www.javascript.com/resources
/news
响应 response
/resources
如何制作超链接
• <a>标签：网页中可点击的超链接 • href 属性：超链接指向的URL地址（hypertext reference） • target 属性：当超链接被点击的时候，新页面打开的位置
_blank：在浏览器的新标签 或新窗口中打开页面
_self：在当前窗口中打开页 面，替换原来的页面
如果不添加 target 属性，那么默认值是 _self
绝对路径、相对路径和根路径
• 绝对路径向一个特定的服务器上的文件发送请求
HTML
相对路径不指定服务器，参照发送请求页面的URL HTML
根路径前面总是包含 “/“，在绝对路径的基础上去掉协议和主机名
W3C
• 创建于1994年，是Web技术领域最具权威和影响力 的国际中立性技术标准机构。
• W3C已发布了200多项影响深远的Web技术标准及 实施指南如HTML、CSS、WCAG等。
使用网页基本结构标签组织整个 页面 • 把所有显示在网页中的内容放入body标签
• 网页中的不可见部分放入head标签中 • 将所有 HTML 代码放入 <html> 标签中 • DOCTYPE：表示 HTML 的版本信息
选择器
• 选择器：可以选择html标签 • 类型选择器：不带尖括号的标签名 • 派生选择器：作用在某些标签的子标签上
把样式表放在什么地方？
• 添加CSS样式的位置：在head标签中添加style子标签 • 使用<link>标签将CSS和所有的html文件关联在一起
参考手册
• W3School
– http://www.w3school.com.cn/
HTML
04 – CSS选择器
将内容和样式分离
• HTML考古：当Web开发还是一项新技术时，html的内容 和样式没有被分开
HTML
内容和样式分离：把表示样式的代码从html中分离出来， 并且创建一种规则来定义html标签要显示成什么样子
Cascading Style Sheets 层叠样式表
Web 前端技术培训
中国移动通信集团黑龙江有限公司2015.13
什么是 Web 前端
Web 系统
客户端 客户端
baidu.com 服务器
客户端 客户端
Web 前端三要素
HTML
CSS
JavaScript
课程大纲
• HTML • CSS • JavaScript
第一部分 HTML 和 CSS
HTML 和 CSS 学习大纲
HTML 和 CSS 学习大纲
02 - 开发工具
常用开发工具介绍
• UltraEdit、EditPlus：代码颜色、多文件编辑
• Dreamweaver、Sublime、WebStorm：神器
WebStorm 的安装、启动、配置 和使用 • 官方下载地址： http://www.jetbrains.com/webstorm
• HTML 标签 • 开发工具 • 超链接 • CSS 选择器 • 颜色 • 盒模式 • 图片
字体 表单 表格 浮动 定位 iframe
HTML 和 CSS 学习大纲
01 - HTML 标签
使用 HTML 标签组织网页结构
• 标题标签 heading tag： <h1> – <h6> • 段落标签 paragraph： <p> • 无序列表 unordered list： <ul> • 列表项 list item：<li> • 有序列表 ordered list：<ol>
4. 边距 – margin
margin包围在border的上右下左四个边缘
盒模式相关属性
• width：宽 • height：高 • border：边框 • padding：内补白 • margin：外边距 • display：显示
计算盒子的尺寸 属性设置的更多形式
margin border padding
#FFFF00
红色的多少 绿色的多少 蓝色的数量
取值范围：16进制的00-FF，10进制的0-255
网页的颜色
• 使用十六进制数来设置颜色，三个部分，每个颜色有256 种可能的取值
256ⅹ256ⅹ256 = 16777216
06 – 盒模式
盒
• 在body中的每个HTML标签实际上都被包围在一个看不见 的矩形中，这个矩形就叫做“盒”。
• MDN
– https://developer.mozilla.org/zhCN/docs/Web/Tutorials
• 网络平台：HTML • 网络平台：CSS
05 – 颜色
black #FF0000
CSS颜色
关键字颜色
红色 十六进制颜色
rgb颜色
黑色
黄色
十六进制色（Hexadecimal colors）
什么 1 点击超链接，连接中有一个文件请求被发送给服务器
浏览器
服务器
www.javascript.com
https://www.javascript.com/news
/news
/resources
在浏览器中点击超链接时发生了
什么 2 服务器把文件返回给浏览器，浏览器用新的文件替换旧的文件
浏览器
新的页面地址
• 安装 • 启动 • 配置：字体大小和配色方案的设置 • 使用WebStorm编写HTML
HTML 和 CSS 学习大纲
03 - 超链接
在浏览器中输入URL时发生了什 么
https://www.javascript.com/news
服务器
www.javascript.com
/news
在浏览器中点击超链接时发生了
display属性
• block、inline、inline-block、none
பைடு நூலகம்
display
block
HTML
盒模式
1. 内容区域 – content area
内容区域中包含的是盒子中真正的内容（文本、图片等）
2. 补白 或内边距 – padding
padding包围在内容区域的边缘，上右下左 3. 边框 – border border包围在padding的边缘，上右下左
margin border padding
服务器
www.javascript.com
https://www.javascript.com/resources
/news
响应 response
/resources
如何制作超链接
• <a>标签：网页中可点击的超链接 • href 属性：超链接指向的URL地址（hypertext reference） • target 属性：当超链接被点击的时候，新页面打开的位置
_blank：在浏览器的新标签 或新窗口中打开页面
_self：在当前窗口中打开页 面，替换原来的页面
如果不添加 target 属性，那么默认值是 _self
绝对路径、相对路径和根路径
• 绝对路径向一个特定的服务器上的文件发送请求
HTML
相对路径不指定服务器，参照发送请求页面的URL HTML
根路径前面总是包含 “/“，在绝对路径的基础上去掉协议和主机名
W3C
• 创建于1994年，是Web技术领域最具权威和影响力 的国际中立性技术标准机构。
• W3C已发布了200多项影响深远的Web技术标准及 实施指南如HTML、CSS、WCAG等。
使用网页基本结构标签组织整个 页面 • 把所有显示在网页中的内容放入body标签
• 网页中的不可见部分放入head标签中 • 将所有 HTML 代码放入 <html> 标签中 • DOCTYPE：表示 HTML 的版本信息
选择器
• 选择器：可以选择html标签 • 类型选择器：不带尖括号的标签名 • 派生选择器：作用在某些标签的子标签上
把样式表放在什么地方？
• 添加CSS样式的位置：在head标签中添加style子标签 • 使用<link>标签将CSS和所有的html文件关联在一起
参考手册
• W3School
– http://www.w3school.com.cn/
HTML
04 – CSS选择器
将内容和样式分离
• HTML考古：当Web开发还是一项新技术时，html的内容 和样式没有被分开
HTML
内容和样式分离：把表示样式的代码从html中分离出来， 并且创建一种规则来定义html标签要显示成什么样子
Cascading Style Sheets 层叠样式表
Web 前端技术培训
中国移动通信集团黑龙江有限公司2015.13
什么是 Web 前端
Web 系统
客户端 客户端
baidu.com 服务器
客户端 客户端
Web 前端三要素
HTML
CSS
JavaScript
课程大纲
• HTML • CSS • JavaScript
第一部分 HTML 和 CSS
HTML 和 CSS 学习大纲
HTML 和 CSS 学习大纲
02 - 开发工具
常用开发工具介绍
• UltraEdit、EditPlus：代码颜色、多文件编辑
• Dreamweaver、Sublime、WebStorm：神器
WebStorm 的安装、启动、配置 和使用 • 官方下载地址： http://www.jetbrains.com/webstorm
• HTML 标签 • 开发工具 • 超链接 • CSS 选择器 • 颜色 • 盒模式 • 图片
字体 表单 表格 浮动 定位 iframe
HTML 和 CSS 学习大纲
01 - HTML 标签
使用 HTML 标签组织网页结构
• 标题标签 heading tag： <h1> – <h6> • 段落标签 paragraph： <p> • 无序列表 unordered list： <ul> • 列表项 list item：<li> • 有序列表 ordered list：<ol>
4. 边距 – margin
margin包围在border的上右下左四个边缘
盒模式相关属性
• width：宽 • height：高 • border：边框 • padding：内补白 • margin：外边距 • display：显示
计算盒子的尺寸 属性设置的更多形式
margin border padding