一 HTML5前言
为什么要用HTML5
- 1> 跨平台
- 利用HTML5编写的UI界面能运行在所有拥有浏览器的平台
- 2> HTML5的运行平台：浏览器
- 3> 但是HTML5不能完成一些特定的功能，比如：拍照(ImagePickerController)、访问相册….
- 1> 跨平台
如何使用HTML5
- 1> 自己编写大量的HTML5代码
- 2> 使用现成的HTML5框架
- sencha-touch
- phoneGap
- jQuery mobile
- bootStrap
手机APP的开发模式
- 1> 原生（纯OC）
- 2> 纯HTML5
- 3> 原生+HTML5
二 HTML
【网页的组成】一个有具体功能的完整的网页，一般由3部分组成
- HTML
- 网页的具体内容和结构
- CSS
- 网页的样式（美化网页最重要的一块）
- JavaScript(掌握)
- 网页的交互效果，比如对用户鼠标事件做出响应
- HTML
什么是HTML
- HTML的全称是HyperText Markup Language，超文本标记语言
- 其实它就是文本，由浏览器负责将它解析成具体的网页内容
HTML的组成
- 跟XML类似，HTML由N个标签（节点、元素、标记）组成
常见的HTML标签
- 标题：h1、h2、h3、h4、h5….
- 段落：p
- 换行：br
- 容器：div、span（用来容纳其他标签）
- 表格：table、tr、td
- 列表：ul、ol、li
- 图片：img
- 表单：input
- 链接：a
HTML5新增标签
- HTML5新增了27个标签元素,废弃了16个标签元素,主要包括结构性标签、级块性标签、行内语义性标签、交互性标签
1.结构性标签
- 负责Web上下文结构的定义，确保HTML文档，包括：
- article 文章主体内容(一篇博客、一篇论坛帖子、一段用户评论、插件)
- header 标记头部区域内容
- footer 标记脚部区域内容
- section 区域章节表述
- nav 菜单导航,链接导航
- 负责Web上下文结构的定义，确保HTML文档，包括：
2.块级性标签
- 完成Web页面区域的划分，确保内容的有效分隔，包括：
- aside 注记,贴士,侧栏,摘要,插入的引用作为补充主体的内容
- figure 对多个元素组合并展示的元素,常与figcaption联合使用
- code 表示一段代码块
- dialog 人与人之间对话,包含dt和dd两个组合元素（dt用于表示说话者、dd用于表示说话者的内容）
- 完成Web页面区域的划分，确保内容的有效分隔，包括：
3.行内语义性标签
- 完成Web页面具体内容的引用和表述，丰富展示内容，包括：
- meter 特定范围内的数值，如工资、数量、百分比
- time 时间值
- progress 进度条，可用max、min、step进行控制，完成对进度的表示和监听
- video 视频元素，用于视频播放，支持缓冲预载和多种视频媒体格式
- audio 音频元素，用于音频播放，支持缓冲预载和多种音频媒体格式
- 完成Web页面具体内容的引用和表述，丰富展示内容，包括：
4.交互性标签
- 功能性内容的表达，有一定的内容和数据的关联，是各种事件的基础，包括：
- details 表示一段具体的内容，默认不显示，通过某种方式（单击）与legend交互才会显示
- datagrid 控制客户端数据与显示，可用于动态脚本及时更新
- menu 用于交互菜单
- command 用来处理命令按钮
- 功能性内容的表达，有一定的内容和数据的关联，是各种事件的基础，包括：
三 CSS
- 什么是CSS
- CSS的全称是Cascading Style Sheets，层叠样式表
- 它用来控制HTML标签的样式，在美化网页中起到非常重要的作用
- CSS的编写格式是键值对形式的，比如
color: red;
background-color: blue;
font-size: 20px;
// 冒号:左边的是属性名，冒号:右边的属性值- CSS有3种书写形式
// 行内样式：（内联样式）直接在标签的style属性中书写
<body style="color: red;">
// 页内样式：在本网页的style标签中书写
<style>
body {
color: red;
}
</style>
// 外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用
<link rel="stylesheet" href="index.css">
- css 遵循的规律：
- 1>就近原则
- 2>叠加原则
四 CSS选择器
- CSS的两大重点
- 属性
- 通过属性的复杂叠加才能做出漂亮的网页
- 选择器
- 通过选择器找到对应的标签设置样式
- 属性
CSS选择器 – 标签选择器
- 选择器的作用
- 选择对应的标签，为之添加样式
标签选择器
- 根据标签名找到标签
CSS选择器 – 类选择器
类选择器的格式
- .类名
CSS选择器 – id选择器
id选择器的格式
- #id
CSS选择器 – 并列选择器
见图
CSS选择器 – 复合选择器
见图
CSS选择器 – 后代选择器
- 见图
CSS选择器 – 直接后代选择器
- 见图
CSS选择器 – 相邻兄弟选择器
- 找到 div，与 div 相邻
CSS选择器 – 属性选择器
见图
其他写法
- div[name][age]
- div[name=”jack”]
CSS选择器 – 伪类
伪类可以给对应标签后面添加如下属性
CSS选择器 – 伪元素
：first-letter用的比较多
CSS选择器 – 选择器优先级
- 选择器的针对性越强，它的优先级就越高
- 选择器的权值
- 通配选择符（*）：0
- 标签： 1
- 类： 10
- 属性： 10
- 伪类： 10
- 伪元素： 1
- id： 100
- important： 1000
- 原则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先
优先级排序：important > 内联 > id > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 通配符 > 继承
五 HTML标签类型
HTML有N多标签，根据显示的类型，主要可以分为3大类
块级标签
- 独占一行的标签
- 能随时设置宽度和高度（比如div、p、h1、h2、ul、li）
行内标签（内联标签）
- 多个行内标签能同时显示在一行
- 宽度和高度取决于内容的尺寸（比如span、a、label）
行内-块级标签（内联-块级标签）
- 多个行内-块级标签可以显示在同一行
- 能随时设置宽度和高度（比如input、button）
CSS中有个display属性，能修改标签的显示类型
- none：隐藏标签（类似于 remove）
- block：让标签变为块级标签
- inline：让标签变为行内标签
- inline-block：让标签变为行内-块级标签（内联-块级标签）
六 CSS属性
CSS有N多属性，根据继承性，主要可以分为2大类
- 可继承属性
- 父标签的属性值会传递给子标签
- 一般是文字控制属性
- 不可继承属性
- 父标签的属性值不能传递给子标签
- 一般是区块控制属性
- 可继承属性
CSS属性 – 可继承属性（红色表示常用）
CSS属性 – 不可继承属性（红色表示常用）
七 盒子模型
- 网页上的每一个标签都是一个盒子
每个盒子都有四个属性
- 内容（content）
- 盒子里装的东西
- 网页中通常是指文字和图片
- 填充（padding，内边距）
- 怕盒子里装的（贵重的）东西损坏，而添加的泡沫或者其它抗震的辅料
- 边框（border）：盒子本身
- 边界（margin，外边距）
- 盒子摆放的时候的不能全部堆在一起，盒子之间要留一定空隙保持通风，同时也为了方便取出
- 内容（content）
标准盒子模型
IE盒子模型
内容（content） – 属性
填充（padding，内边距） – 属性
上右下左边距设置
边框（border） – 属性
- border 简写属性在一个声明设置所有的边框属性
可以按顺序设置如下属性：
- border-width
- border-style
- border-color
设置边框圆角
- border-radius
// 设置4个边框的样式：
p {
border：5px solid red；
} 边界（margin，外边距） – 属性
- CSS3新增特性
- RGBA透明度
- RGB(红色R+绿色G+蓝色B),RGBA则在其基础上增加了Alpha通道，可用于设置透明值
- 块阴影与圆角阴影
- box-shadow text-shadow
- 圆角
- border-radius
- 边框图片
- border-image
- 形变
transform: none | <transform-function>[<transform-fuction>]
- RGBA透明度
八 标签水平居中和垂直居中
标签的水平居中:
- 块级标签: margin: 0 auto;
- 行内标签/行内-块级标签: text-align: center;
垂直居中:
- 块级标签 :布局 position结合 top left 平移`1
- 行内标签/行内-块级标签 line-height 高度 == height
注意：
vertical-align: middle;用于图片
九 CSS 布局
默认情况下，所有的网页标签都在标准流布局中
- 从上到下，从左到右
脱离标准流的方法有
- float属性
- position属性 和 left、right、top、bottom属性
float属性的常用取值有
- left：脱离标准流，浮动在父标签的最左边
- right：脱离标准流，浮动在父标签的最右边
CSS布局 – position属性
