1. 什么是HTML5

 　　网页的5.0版本。2014年才定制完HTML5的标准，历时8年

2. 为什么要用HTML5

　　1> 跨平台：利用HTML5编写的UI界面能运行在所有拥有浏览器的平台

　　2> HTML5的运行平台：浏览器

　　3> 但是HTML5不能完成一些特定的功能，比如：拍照(ImagePickerController)、访问相册....

3. 如何使用HTML5

　　1> 自己编写大量的HTML5代码

　　2> 使用现成的HTML5框架

　　　　sencha-touch

　　　　phoneGap

　　　　jQuery mobile

　　　　bootstrap

4. 手机APP的开发模式

　　1> 原生（纯OC）

　　2> 纯HTML5

　　3> 原生+HTML5

5. 为什么要学习HTML5

　　1> 未来的一种趋势

　　2> 增加面试、开发竞争力

　　　　Android程序员  Java、服务器、HTML5

6. 公司职位的划分

　　1> 平面设计师  作图、切图、HTML、CSS

　　2> 前端工程师  HTML、CSS、Javascript、模板技术

　　3> 后台工程师  服务器（Java、.Net、PHP）、数据库

　　4> 移动工程师（iOS/android）手机UI界面（OC、HTML5）、跟服务器交互

7. Web开发新时代

　　Web1.0

　　　　主流技术：HTML+CSS

　　Web2.0

　　　　主流技术：Ajax(JavaScript/DOM/异步数据请求)

　　Web3.0

　　　　主流技术：HTML5+CSS3

　　HTML5亮点：Canvas、HTML5音视频、Web存储、Geolocation、Workers多线程处理

　　CSS3亮点：设计动画、2D变形、N多新特性

8. 网页的组成

　　一个有具体功能的完整的网页，一般由3部分组成

　　1》HTML：网页的具体内容和结构

　　2》CSS：网页的样式（美化网页最重要的一块）

　　3》JavaScript(掌握)：网页的交互效果，比如对用户鼠标事件做出响应

　　　　HTML \ CSS \ JavaScript 学习资料：http://www.w3school.com.cn/

9. HTML

　　什么是HTML：HTML的全称是HyperText Markup Language，超文本标记语言

　　其实它就是文本，由浏览器负责将它解析成具体的网页内容。

10. HTML的组成

　　跟XML类似，HTML由N个标签（节点、元素、标记）组成

　　HTML语法非常松散，目前的最新版是5.0，也就是HTML 5

11. 常见的HTML标签

• 标题：h1、h2、h3、h4、h5....
• 段落：p
• 换行：br
• 容器：div、span（用来容纳其他标签）
• 表格：table、tr、td
• 列表：ul、ol、li
• 图片：img
• 表单：input
• 链接：a

12. 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     视频元素，用于视频播放，支持缓冲预载和多种视频媒体格式

　　　　　　<!--视频播放-->

　　　　　　//  告诉浏览器，我要使用你的播放器 controls

　　　　　　<video src="source/BigBuck.m4v" controls="controls"></video>

　　　　audio     音频元素，用于音频播放，支持缓冲预载和多种音频媒体格式

　　　　　　<!--音频播放-->

 　　　　　　//  告诉浏览器，我要使用你的播放器 controls

　　　　　　<audio src="source/music.m4a" controls="controls"></audio>

　　4》交互性标签

　　　　功能性内容的表达，有一定的内容和数据的关联，是各种事件的基础，包括：

　　　　details   表示一段具体的内容，默认不显示，通过某种方式（单击）与legend交互才会显示

　　　　datagrid  控制客户端数据与显示，可用于动态脚本及时更新

　　　　menu      用于交互菜单

　　　　command   用来处理命令按钮

13. HTML标签类型

• HTML有N多标签，根据显示的类型，主要可以分为3大类

　　1》块级标签

　　　　独占一行的标签

　　　　能随时设置宽度和高度（比如：div、p、h1、h2、ul、li）

　　2》行内标签（内联标签）

　　　　多个行内标签能同时显示在一行

　　　　宽度和高度取决于内容的尺寸（比如：span、a、label）

　　3》行内-块级标签（内联-块级标签）

　　　　多个行内-块级标签可以显示在同一行

　　　　能随时设置宽度和高度（比如：input、button）

 

　　div与span标签的区别：

　　　　div标签是块级标签，独占一行，可以设置宽度和高度。

　　　　span标签是行内标签：多个行内标签可以同时显示在一行，宽度和高度取决于内容的大小。

14. 修改标签的显示类型

　　CSS中有个display属性，能修改标签的显示类型

　　1》none：隐藏标签

　　　　div {

    　　　　　color: red;

    　　　　　<!--隐藏标签（包括标签的结构和内容）-->

    　　　　　display: none;

　　　　}

　　2》block：让标签变为块级标签

　　　　span {

    　　　　　background-color: yellow;

    　　　　　/* 把当前标签变为块级标签（就可以独占一行和设置标签的宽高）*/

    　　　　　display: block;

　　　　}

　　3》inline：让标签变为行内标签

　　　　div {

    　　　　　background-color: red;

    　　　　　/* 把当前标签变为行内标签 */

    　　　　　display: inline;

　　　　}

　　4》inline-block：让标签变为行内-块级标签（内联-块级标签）

　　　　div {

    　　　　　background-color: red;

    　　　　　/*把当前标签变为行内块级标签*/

    　　　　　display: inline-block;

　　　　}

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有