HTML5基础知识
1.HTML5基础知识介绍
1.1什么是HTML5
1.HTML5是超文本标记语言
2.2014年才定制完HTML5的标准，历时8年
3.HTML5的设计目的是为了在移动设备上支持多媒等功能
1.2为什么要用HTML5
1.跨平台
利用HTML5编写的UI界面能运行在所有拥有浏览器的平台
HTML5的运行平台：浏览器
2.HTML5的新增了很多的功能，比如video、audio和canvas...
3.但是HTML5不能完成一些特定的功能，比如：拍照、访问相册....
1.3如何使用HTML5
1.自己编写大量的HTML5代码
2.使用现成的HTML5框架
sencha-touch: 基于JavaScript编写的Ajax框架,该框架是世界上第一个基于HTML5的Mobile App框架
phoneGap: 是一个基于HTML，CSS和JavaScript的Mobile App框架，是创建移动跨平台移动应用程序的快速开发平台。业界很多主流的移动开发框架均源于PhoneGap。较著名的有Worklight、appMobi、WeX5等
jQuery mobile: 是jQuery 框架的一个组件（而非jquery的移动版本）。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台
Bootstrap: 是目前最受欢迎的前端框架（移动先行）。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷
1.4手机APP的开发模式
1> 原生（ 纯 Object C / Java ）
2> 纯HTML5
3> 原生+HTML5
4> React Native
1.5为什么要学习HTML5
1>跨平台：运行的环境是浏览器
2>目前的一种趋势：移动web时代
3> 增加面试、开发竞争力
1.6公司职位的划分
1> 平面设计师 作图、切图、HTML、CSS
2> 前端工程师HTML、CSS、Javascript、模板技术
3> 后台工程师 服务器（Java、.Net、PHP）、数据库 、WEB
4>移动工程师（iOS/android）: 手机UI界面（OC、Java、HTML5）、跟服务器交互
1.7开发工具
1>Android
eclipse 、android studio
2>iOS
Xcode
3>HTML5
1）.后端：eclipse、MyEclipse
2）.美工：Dreamweaver
3）.前端：WebStorm 神器,默认集成各种各样的插件,配置完美
1.8Web开发新时代
1.Web1.0 主流技术:HTML+CSS
2.Web2.0 主流技术:HTML+CSS +Ajax ( JavaScript/DOM/异步数据请求 )
3.Web3.0 主流技术:HTML5+CSS3
-
HTML5亮点: Canvas 、HTML5音视频 、Web存储 、多线程处理...
-
CSS3 亮点: 设计动画、 2D变形、 N多新特性...
2.HTML常用的标签
2.1网页的组成
一个功能完整的网页，一般由3部分组成
-
HTML 做网页的具体内容和结构
-
CSS 做网页的样式（美化网页最重要的一块）
-
JavaScript 做网页的交互效果，比如对用户鼠标事件做出响应HTML\CSS\JavaScript
-
学习资料：http://www.w3school.com.cn/
2.2HTML..
-
什么是HTML
HTML的全称是HyperText Markup Language，超文本标记语言,其实它就是文本。
由浏览器负责将它解析成具体的网页内容。
比如，浏览器会将左边的HTML源代码代码 转换为右边的网页内容
-
HTML的组成跟XML类似，HTML由N个标签（节点、元素、标记）组成
-
HTML语法非常松散，目前的最新版是5.0，也就是HTML 5
-
网页输出HelloWord
<html> <head> <title>Hello World ! 你好title> <meta charset="utf-8"> head> <body> <div>Hello World !div> body> html>
2.3*常见的HTML标签
-
标题：h1、h2、h3、h4、h5、h6
-
段落：p
-
表单：input
-
图片：img
-
链接：a
-
换行：br
-
列表：ul、ol、li
-
容器：div、span（用来容纳其他标签）
-
横线：hr
-
表格：table、tr、td
学习资料：http://www.w3school.com.cn/
-
1.标题：h1、h2、h3、h4、h5、h6
我是H1标签
我是H2标签
我是H3标签
我是H4标签
我是H5标签
我是H6标签
-
2.段落：p
我是段落我是段落我是段落我是段落我是段落我是段落
我是段落我是段落我是段落我是段落我是段落我是段落
我是段落我是段落我是段落我是段落我是段落我是段落
-
3.表单：input
-
4.图片：img
alt="加载失败" width="100px">
-
5.链接：a
<a href="http://www.baidu.com" target="_blank">我是超链接a>
-
6.换行：br
-
7.列表：ul、ol、li
- 我是无序列表
- 我是无序列表
- 我是无序列表
- 我是无序列表
容器：div、span（用来容纳其他标签）
我是容器标签我是容器标签我是容器标签我是容器标签 我是容器标签 我是容器标签
横线：hr
表格：table、tr、td
单标签：不是容器 格式: <>
双标签：是容器 格式：< >
3.HTML5新增的标签.
HTML5新增了27个标签,废弃了16个标签.
主要包括结构性标签、级块性标签、行内语义性标签、交互性标签
3.1*结构性标签
负责Web上下文结构的定义，确保HTML文档，包括：
article 文章主体内容(一篇博客、一篇论坛帖子、一段用户评论、插件)
header 标记头部区域内容, 注意：与 head 不一样
footer标记脚部区域内容
section 区域章节表述
nav菜单导航,链接导航
案例:新闻详情页面练习
<article> <header> header> <div> <section> section> <section> section> div> <footer> footer> article>
3.2块级性标签
完成Web页面区域的划分，确保内容的有效分隔，包括：
aside注记,贴士,侧栏,摘要,插入的引用作为补充主体的内容，例如：
figure对多个标签组合并展示,常与figcaption联合使用, 例如：
code表示一段代码
dialog人与人之间对话,包含dt和dd两个组合元素（dt用于表示说话者、dd用于表示说话者的内容）
3.3行内语义性标签
完成Web页面具体内容的引用和表述，丰富展示内容，包括：
meter特定范围内的数值，如工资、数量、百分比
time时间值
progress进度条，可用max、value进行控制
video视频元素，用于视频播放，支持缓冲预载和多种视频媒体格式
audio音频元素，用于音频播放，支持缓冲预载和多种音频媒体格式
3.4交互性标签
功能性内容的表达，有一定的内容和数据的关联，是各种事件的基础，包括：
details表示一段具体的内容，默认不显示，通过某种方式（单击）与legend交互才会显示 , 例如：
datagrid控制客户端数据与显示，可用于动态脚本及时更新
menu用于交互菜单
command用来处理命令按钮
4.CSS样式简介
4.1什么是CSS
-
CSS的全称是Cascading Style Sheets, 层叠样式表
-
它用来控制HTML标签的样式，在美化网页中起到非常重要的作用
4.2CSS的编写格式
键值对形式，比如:
color: red;
background-color: blue;
font-size: 20px;
border:3px solid red;冒号:左边的是属性名，冒号:右边的属性值
CSS属性值：1）单值 ; 2）复合值。
4.3*CSS的3种书写形式..
-
行内样式：（内联样式）直接在标签的style属性中书写
-
页内样式：在本网页的style标签中书写。style标签一般放在head标签中
-
外部样式：在单独的CSS文件中写，然后在网页中用link标签引用。link标签一般在放在head标签中
-
CSS的属性遵循的规律
1）叠加原则（例如：外部样式和页内样式叠在一起）
2）就近原则（例如：当外部样式和页内样式出现同样的样式时，就使用最近的样式）
5.CSS选择器..
5.1CSS的两大重点
-
选择器 通过选择器
找到对应的标签设置样式
-
属性 通过属性的复杂叠加才能
做出漂亮的网页
5.2*选择器
作用：选择对应的标签，为之添加样式
1.标签选择器
根据标签名找到标签，为之添加样式, 比如：
2.类选择器
根据标签 中的类名找到标签，为之添加样式, 比如：
3.id选择器
根据标签中的id找到标签，为之添加样式, 比如：
4.并列选择器
为多个标签添加同样的样式, 比如：
5.复合选择器
根据指定标签中的[类名]找到标签，为之添加样式, 比如：
6.后代选择器
找到指定标签中所有指定的子标签，为之添加样式, 比如：
7.直接后代选择器
找到指定标签中指定的直接子标签，为之添加样式, 比如：
8.相邻兄弟选择器
根据指定标签中找到相邻的标签，为之添加样式, 比如：
9.属性选择器
根据标签中指定的属性找到标签，为之添加样式, 比如：
图1：
图2：
图3：
10.伪类选择器
为某个标签添加伪类选着器，为之添加样式, 比如：
格式: 选择器:属性{} , 如下：
xxx:focus{
}
11.伪元素选择器
为某个标签添加伪元素选着器，为之添加样式, 比如：
格式: 选择器:属性{} , 如下：
xxx:first-letter{
}
注意：如果效果不出来，就是选择器写错了
6.CSS选择器的优先级别..
-
同一个级别选择器的针对性越强，它的优先级就越高
行内样式 > 页内样式 | 外部样式
页内样式 与 外部样式 的优先级别是：层叠原则和就近原则
-
不同级别选择器的权值越大优先级越高
通配选择符（*）： 0
标签： 1
类： 10
属性： 10
伪类： 10
伪元素： 10
id： 100
important： 1000
复合选着器: 权值=等于各个权值相加
原则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先
-
优先级排序
important（1000） > 行内样式（999）> id > 类 > 标签 | 伪类 | 属性选择 |伪元素 > 通配符 > 继承
代码：
04-CSS选着器优先级别 测试优先级别
7.HTML的标签类型..
7.1标签显示的类型
HTML有N多标签，根据显示的类型，主要可以分为3大类
1块级标签
块级标签独占一行的标签能随时设置宽度和高度（比如div、p、h1、h2、ul、li）
2行内标签（内联标签）
行内标签（内联标签）多个行内标签能同时显示在一行 , 宽度和高度取决于内容的尺寸（比如span、a、label）
3行内-块级标签
行内-块级标签（内联-块级标签）多个行内-块级标签可以显示在同一行 , 能随时设置宽度和高度（比如input、button、img）
7.2修改标签显示的类型
CSS中有个display属性，能修改标签的显示类型：
none：隐藏标签
block：让标签变为块级标签,主要针对行内标签和行内-块级标签
inline：让标签变为行内标签,主要针对块级标签
inline-block：让标签变为行内-块级标签（内联-块级标签） 主要针对块级标签 和行内标签
注意：
行内-块级标签只能改变成块级标签
8.CSS标签中的属性..
CSS有N多属性，根据继承性，主要可以分为2大类：
-
可继承属性: 父标签的属性值会传递给子标签一般是
文字控制属性
可继承属性 我是div标签我是p标签
-
不可继承属性: 父标签的属性值不能传递给子标签一般是
区块控制属性
可继承属性 我是div标签我是p标签
8.1可继承属性
可继承属性:父标签的属性值会传递给子标签一般是文字控制属性
-
所有标签可继承父亲下面属性：
visibility、cursor
-
内联标签可继承父亲下面属性：
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif , Arial;
-
块级标签可继承父亲下面属性：
text-indent、text-align
-
列表标签可继承父亲下面属性：
list-style、list-style-type、list-style-position、list-style-image
8.2不可继承属性
不可继承属性: 父标签的属性值不能传递给子标签一般是区块控制属性
display、margin、border、padding、background、background-size
height、min-height、max-height、width、min-width、max-width
overflow、position、left、right、top、bottom、z-index
float、clear
table-layout、vertical-align
page-break-after、page-bread-before
unicode-bidi
9.盒子模型..
9.1盒子模型
网页上的每一个标签都是一个盒子, 比如:（div , p , h1 , a , img ....）
每个盒子都有四个属性:
-
内容（content）
盒子里装的东西网页中通常是指
文字和图片 -
填充（padding，内边距）
怕盒子里装的（贵重的）东西损坏，而添加的泡沫或者其它抗震的辅料
-
边框（border）：
盒子本身
-
边界（margin，外边距）
盒子摆放的时候的不能全部堆在一起，盒子之间要留一定空隙保持通风，同时也为了方便取出
9.2IE盒子模型
结论：
-
默认
盒子的大小=内容+填充+边框
9.3标准盒子模型
结论：
-
默认
盒子的大小=内容( 默认的box-sizing : content-box ; )
思考：ie盒子与标准盒子的大小计算方式不一样？怎样做适配？
手动指定盒子大小计算的标准：
盒子大小统一使用：盒子大小=内容+填充+边框
标准盒子模型的解决方法：改 盒子box-sizing 的值
1.box-sizing 默认值为content-box ,盒子的大小=内容
2.将box-sizing设计为‘border-box’,盒子的大小=内容+填充+边框
9.4盒子（标签）CSS属性
网页上的每一个标签都是一个盒子, 比如:（div , p , h1 , a , img ....）
1.控制内容（content）
2.控制填充（padding, 内边距）
图1-属性：
图2-例子：
3.控制边框（border）
-
border: 设计边框的width，style，color
-
border-width
-
border-style
-
border-color
简写例子：
p{ border：red 5px solid }
4.控制边界（margin, 外边距 )
图1-属性
图2-例子：
案例：
01-盒子模型 我是一个盒子
10.CSS3新增特性..
-
RGBA透明度
RGB(红色R+绿色G+蓝色B),
RGBA则在其基础上增加了Alpha通道，可用于设置透明值(0 - 1)块 -
阴影
box-shadow text-shadow
-
圆角
border-radius
-
边框图片 border-image
-
动画 transform:
-webkit-transition 过度效果
-webkit-transform-origin 参照坐标
-webkit-transform 动画效果
案例：
02-CSS3新增特性 12345Android 大神班
13.总结：
-
常见的HTML标签：
-
HTML5新增的标签：
-
CSS的3种书写方式：
-
CSS的选着器 , 选着器的优先级别：
-
HTMl的标签类型：
-
HTML常用的CSS属性：
-
盒子模型：
-
CSS3新增的属性：