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