- 什么是HTML5
1> 2014年才定制完HTML5的标准，历时8年
2> 移动先行
- 为什么要用HTML5
1> 跨平台
利用HTML5编写的UI界面能运行在所有拥有浏览器的平台
2> HTML5的运行平台：浏览器
3> 但是HTML5不能完成一些特定的功能，比如：拍照(ImagePickerController)、访问相册....
- 如何使用HTML5
1> 自己编写大量的HTML5代码
2> 使用现成的HTML5框架
- sencha-touch
- phoneGap
- jQuery mobile
- 手机APP的开发模式
1> 原生（纯OC）
2> 纯HTML5
3> 原生+HTML5
- 为什么要学习HTML5
1> 未来的一种趋势
2> 增加面试、开发竞争力
- Android程序员 Java、服务器、HTML5
- 公司职位的划分
1> 平面设计师 作图、切图、HTML、CSS
2> 前端工程师 HTML、CSS、Javascript、模板技术
3> 后台工程师 服务器（Java、.Net、PHP）、数据库
4> 移动工程师（iOS/android）手机UI界面（OC、HTML5）、跟服务器交互
- 开发工具
1> Android
eclipse、MyEclipse、android studio
2> iOS
Xcode
3> HTML5
eclipse、MyEclipse
后端喜爱
Dreamwaver
⺴⻚三剑客 Dreamwaver、Flash、Fireworks -> Adobe
WebStrom
前端喜爱,⼤神编辑器,默认集成各种各样的插件,配⾊完美
- Web开发新时代
- Web1.0
- 主流技术:HTML+CSS
- Web2.0
- 主流技术:Ajax(JavaScript/DOM/异步数据请求)
- Web3.0
- 主流技术:HTML5+CSS3
HTML5亮点: Canvas HTML5音视频 Web存储 Geolocation Workers多线程处理
CSS3亮点: 设计动画 2D变形 N多新特性
网页的组成
- 一个有具体功能的完整的网页，一般由3部分组成
- HTML
- 网页的具体内容和结构
- CSS
- 网页的样式（美化网页最重要的一块）
- JavaScript(掌握)
- 网页的交互效果，比如对用户鼠标事件做出响应
- HTML\CSS\JavaScript学习资料：http://www.w3school.com.cn/
HTML
常见的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 菜单导航,链接导航
2.块级性标签
完成Web页面区域的划分，确保内容的有效分隔，包括：
- aside 注记,贴士,侧栏,摘要,插入的引用作为补充主体的内容
- figure 对多个元素组合并展示的元素,常与figcaption联合使用
- code 表示一段代码块
- dialog 人与人之间对话,包含dt和dd两个组合元素（dt用于表示说话者、dd用于表示说话者的内容）
3.行内语义性标签
完成Web页面具体内容的引用和表述，丰富展示内容，包括：
- meter 特定范围内的数值，如工资、数量、百分比
- time 时间值
- progress 进度条，可用max、min、step进行控制，完成对进度的表示和监听
- video 视频元素，用于视频播放，支持缓冲预载和多种视频媒体格式
- audio 音频元素，用于音频播放，支持缓冲预载和多种音频媒体格式
4.交互性标签
功能性内容的表达，有一定的内容和数据的关联，是各种事件的基础，包括：
- details 表示一段具体的内容，默认不显示，通过某种方式（单击）与legend交互才会显示
- datagrid 控制客户端数据与显示，可用于动态脚本及时更新
- menu 用于交互菜单
- command 用来处理命令按钮
CSS
- 什么是CSS
- CSS的全称是Cascading Style Sheets，层叠样式表
- 它用来控制HTML标签的样式，在美化网页中起到非常重要的作用
- CSS的编写格式是键值对形式的，比如
color: red;
background-color: blue;
font-size: 20px;
- 冒号:左边的是属性名，冒号:右边的属性值
CSS的3种书写形式
- CSS有3种书写形式
- 行内样式：（内联样式）直接在标签的style属性中书写
<body style="color: red;">
- 页内样式：在本网页的style标签中书写
<style>
body {
color:red;
}
</style>
- 外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用
<link rel="stylesheet"href="index.css">
CSS的两大重点
- 属性
通过属性的复杂叠加才能做出漂亮的网页
- 选择器
通过选择器找到对应的标签设置样式
CSS选择器– 选择器优先级
- 选择器的针对性越强，它的优先级就越高
- 选择器的权值
- 通配选择符（*）：0
- 标签： 1
- 类： 10
- 属性： 10
- 伪类： 10
- 伪元素： 1
- id： 100
- important： 1000
- 原则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先
CSS选择器– 选择器优先级
- 优先级排序
- important > 内联 > id > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 通配符 > 继承
HTML标签类型
- HTML有N多标签，根据显示的类型，主要可以分为3大类
- 块级标签
- 独占一行的标签
- 能随时设置宽度和高度（比如div、p、h1、h2、ul、li）
- 行内标签（内联标签）
- 多个行内标签能同时显示在一行
- 宽度和高度取决于内容的尺寸（比如span、a、label）
- 行内-块级标签（内联-块级标签）
- 多个行内-块级标签可以显示在同一行
- 能随时设置宽度和高度（比如input、button）
修改标签的显示类型
- CSS中有个display属性，能修改标签的显示类型
- none：隐藏标签
- block：让标签变为块级标签
- inline：让标签变为行内标签
- inline-block：让标签变为行内-块级标签（内联-块级标签）
CSS属性
- CSS有N多属性，根据继承性，主要可以分为2大类
- 可继承属性
- 父标签的属性值会传递给子标签
- 一般是文字控制属性
- 不可继承属性
- 父标签的属性值不能传递给子标签
- 一般是区块控制属性
CSS属性– 可继承属性（红色表示常用）
- 所有标签可继承
- 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
- 块级标签可继承
- text-indent、text-align
- 列表标签可继承
- list-style、list-style-type、list-style-position、list-style-image
CSS属性– 不可继承属性（红色表示常用）
- display、margin、border、padding、background
- 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
CSS3新增特性
- RGBA透明度
RGB(红色R+绿色G+蓝色B),RGBA则在其基础上增加了Alpha通道，可用于设置透明值
- 块阴影与圆角阴影
box-shadow text-shadow
- 圆角
border-radius
- 边框图片
border-image
- 形变
transform: none |<transform-function>[<transform-fuction>]
CSS布局
- 默认情况下，所有的网页标签都在标准流布局中
- 从上到下，从左到右
- 脱离标准流的方法有
- float属性
- position属性 和 left、right、top、bottom属性
CSS布局– float属性
- float属性的常用取值有
- left：脱离标准流，浮动在父标签的最左边
- right：脱离标准流，浮动在父标签的最右边
absolute:默认情况下是对浏览器进行定位
JavaScript
- 什么是JavaScript
- JavaScript是一门广泛用于浏览器客户端的脚本语言
- 由Netspace公司设计，当时跟Sun公司合作，所以名字起得像Java
- 业内一般简称JS
- JS的常见用途
- HTML DOM操作（节点操作，比如添加、修改、删除节点）
- 给HTML网页增加动态功能，比如动画
- 事件处理：比如监听鼠标点击、鼠标滑动、键盘输入
Node.js
- 什么是Node.js
- Node是一个JavaScript运行环境(runtime)，是对Google V8引擎进行了封装
- V8引擎执行JavaScript的速度非常快，性能非常好
- Node.js的优势
- 可以作为后台语言
- 单线程
不新增额外线程的情况下，依然可以对任务进行并行处理（采用事件轮询）
- 非阻塞I/O、V8虚拟机、事件驱动
JavaScript的书写方式
- JS常见的书写方式有2种
- 页内JS：在当前网页的script标签中编写
<script type="text/javascript">
</script>
- 外部JS
<script src="index.js"></script>
Canvas
- HTML
<canvasid="canvas"></canvas>
- JS
var canvas =document.getElementById('canvas');
var context =canvas.getContext('2d');
context是一个绘图的上下文环境
2d是二维图形
Canvas绘制直线
- 起点
context.moveTo(100,100);
- 终点
context.lineTo(400, 400);
- 绘制
context.stroke();
- 设置线条颜色和宽度
context.strokeStyle = 'red';
context.lineWidth = 5;
- 设置填充色
context.fillStyle = 'blue';
Canvas绘制弧线
context.arc(
centerX,centerY, radius,
startingAngle, endingAngle,
anticlockwise=false
)
centerX, centerY: 圆心的坐标
radius: 半径
startingAngle, endingAngle: 开始角度,结束角度
anticlockwise: false顺时针 true逆时针
***********************笔记**********************
*************************************************
<article> 标记定义一篇文章
<header> 标记定义一个页面或一个区域的头部
<nav> 标记定义导航链接
<section> 标记定义一个区域
<aside> 标记定义页面内容部分的侧边栏
<hgroup> 标记定义文件中一个区块的相关信息
<figure> 标记定义一组媒体内容以及它们的标题
<figcaption> 标签定义 figure 元素的标题。
<footer> 标记定义一个页面或一个区域的底部
<dialog> 标记定义一个对话框(会话框)类似微信
多媒体交互标签
<video> 标记定义一个视频
<audio> 标记定义音频内容
<source> 标记定义媒体资源
<canvas> 标记定义图片
<embed> 标记定义外部的可交互的内容或插件比如flash
Web应用标签
<menu>命令列表
<menuitem>menu命令列表标签 FF（嵌入系统）
<command> menu标记定义一个命令按钮
<meter>状态标签(实时状态显示:气压、气温)C、O
<progress>状态标签 (任务过程:安装、加载) C、F、O
<datalist> 为input标记定义一个下拉列表,配合option F、O
<details> 标记定义一个元素的详细内容，配合dt、dd C
注释标签
<ruby> 标记定义注释或音标
<rp> 告诉那些不支持 Ruby元素的浏览器如何去显示
<rt> 标记定义对ruby的注释内容文本
其他标签
<keygen> 标记定义表单里一个生成的键值(加密信息传送)O、F
<mark> 标记定义有标记的文本 (黄色选中状态)
<output> 标记定义一些输出类型,计算表单结果配合oninput事
删除的HTML标签
纯表现的元素：
basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：
frame，frameset，noframes；
产生混淆的元素：
acronym ，applet，isindex，dir
重新定义的HTML标签
<b> 代表内联文本，通常是粗体，没有传递表示重要的意思
<i> 代表内联文本，通常是斜体，没有传递表示重要的意思
<dd> 可以同details与figure一同使用，定义包含文本，dialog也可用
<dt> 可以同details与figure一同使用，汇总细节，dialog也可用
<hr> 表示主题结束，而不是水平线，虽然显示相同
<menu> 重新定义用户界面的菜单，配合commond或者menuitem使用
<small> 表示小字体，例如打印注释或者法律条款
<strong> 表示重要性而不是强调符号
扫一扫
262
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
