HTML5简介

2016-07-11 本文已影响36人我的梦想之路

HTML5

1>网页的5.0版本
2>2014年制定完成标准，历时8年

HTML5好处

1>跨平台：运行在所有拥有浏览器的平台
2>运行平台：浏览器
3>H5不能完成一些特定功能（拍照、访问相册。。。）

如何使用HTML5

1>自己编写大量的HTML5代码
2>使用现成的HTML5框架：
sencha-touch
phoneGap
jQuery mobile
bootstrap

手机APP的开发模式

1>原生（纯OC）：体验好，效率高，成本高
2>纯HTML5：成本低，跨平台，兼容性多，效率低，体验低
3>原生+HTML5：目前大多数公司尝试模式，各持所需，实现体验，效率，成本等各方面因素

开发工具

1>Android
eclipse、MyEclipse、Android studio
2>iOS
Xcode
3>HTML5
eclipse、MyEclipse
后端喜爱
Dreamwaver
网页三剑客 Dreamwaver（网页）、Flash（动画）、FireWorks（切图）属于 Abode公司

WebStom
前段喜爱，大神编辑器，默认集成各种各样的插件，配色完美

Web开发新时代

1>Web1.0
主流技术：HTML+CSS

2>Web2.0
主流技术：Ajax（JavaScript/DOM/异步数据请求）

3>Web3.0
主流技术：HTML5+CSS3
HTML5亮点：Canvas HTML5音视频 Web存储 Geolocation Workers多线程处理
CSS3亮点：设计动画 2D变形 N多新特性

常见HTML标签

一个有具体功能的完整的网页，一般由3部分组成：
HTML：网页的具体内容和结构
CSS：网页的样式（美化网页最重要的一块）
JavaScript：网页的交互效果，比如对用户鼠标点击事件的响应

HTML 超文本标记语言

HTML组成：由N个标签（节点，元素，标记）组成

#html结构
<!--跟标签-->
<html lang="en">
<!--头部标签-->
<head>    
    <!--编码格式-->  
    <meta charset="UTF-8">  
      <!--浏览器标题-->    
    <title>常用的HTML标签</title>
</head>
<!--身体标签-->
<body>
    <!--标题标签-->
    <h1>1</h1>
    <h2>2</h2>
    <h3>3</h3>
    <h4>4</h4>
    <h5>5</h5>
    <h6>6</h6>

    <!--两者比较-->
    <div>22222222</div> 
    <div>22222222</div>
    <div>22222222</div>


    <!--段落标签-->
    <p><h1>静夜思</h1></p>
    <p><h2>李白</h2></p>
    <p><h3>床前明月光</h3></p>
    <p><h3>疑似地上霜</h3></p>
    <p><h3>举头望明月</h3></p>
    <p><h3>低头思故乡</h3></p>

    <!--换行标签-->
        <br>
    <!--输入框标签-->
    <input><br><br>
    <!--提示语言-->
    <input placeholder="请输入用户名">
    <br><br>
    <!--设置值-->
    <input value="李白"><br><br>
    <!--多选-->
    <input type="checkbox"><br><br>
    <!--日期-->
    <input type="date"><br><br>
    <!--指示条-->
    <input type="range"><br><br>

    <!--超链接标签 target _blank:代表另开一个窗口-->
    <a href="http://baidu.com" target="_blank">跳转到百度首页</a><br>
    <!--图像标签
    相对路径:在当前项目中的资源
    绝对路径:http:// 或 https:// 或 ftp://  file:// 开头的都属于绝对路径-->
    ![](https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png)<br>
    <!--列表标签-->
    <ul>   
       <li>1</li>    
       <li>2</li>   
       <li>3</li>    
       <li>4</li>
    </ul>
    <!--容器标签-->  
    <div>11111111111111</div>

</body>

</html>