html5快速入门（一）—— html简介

前言：

1.HTML5的发展非常迅速，可以说已经是前端开发人员的标配，在电商类型的APP中更是运用广泛，这个系列的文章是本人自己整理，尽量将开发中不常用到的剔除，将经常使用的拿出来，使需要的朋友能够真正快速入门，如果有哪些不清楚的地方或者错误，欢迎联系我
2.更新时间没有规律，一般会在3天左右更新一篇（全系列预计会有12篇）因为需要工作，所以只能在闲暇之余整理，如果有喜欢的朋友可以关注我，将会第一时间获得更新信息
3.如果有需要Reactive Native + H5跨平台开发的朋友，可以联系我，在本系列结束之前会根据需求的程度决定是否继续
4.全系列文章最后尽可能地附上综合实例，帮助朋友更好地理解
5.此系列会涉及到HTML、CSS、JavaScript等

Web大概发展史

• Web1.0
  • 主流技术 —— HTML + CSS
• Web2.0
  • 主流技术 —— Ajax(JavaScript/DOM/异步数据请求)
• Web3.0
  • 主流技术 —— HTML5 + CSS3
    • HTML5亮点：Canvas、Web存储、Geolocation、Workers多线程处理、HTML5音视频
    • CSS3亮点：2D变形、设计动画等等新特性 （具体可以参考 http://html5test.com/）

---

网页组成

• 网页一般由下面3部分组成
  • HTML —— 网页具体内容和结构
  • CSS —— 网页的样式（网页美化的主要模块）
  • JavaScript —— 网页的交互效果，比如对用户鼠标事件做出响应

---

HTML5简介

• 用了8年时间，HTML5在2014年才正式制定完毕并发布，更偏向于拓展移动市场，当然在别的平台也表现不凡
• HTML5的优势
  • 最主要的还是跨平台，利用HTML5编写的应用可以说只要有浏览器的平台都可以运行并使用
  • 开发速度快，API强大，某些功能可以轻易完成
  • 流畅程度相对于原生可以达到一致
• HTML5的劣势
  • HTML5也有不能完成的功能，比如常用的拍照、访问相册等需要桥接才能实现的功能（桥接越多，性能越差）
  • 毕竟不是原生，所以肯定存在性能比原生差的问题
• HTML5开发主要有2种形式
  • 自己编写大量代码（慢）
  • 使用线程的HTML5框架（快）
    • sencha-touch
    • phoneGap
    • jQuery mobile
    • Bootstrap （个人比较喜欢）
• 一般在移动端主要有4种形式开发
  • 原生：与系统无缝兼容
  • 纯HTML5：成本低，覆盖广，效率高
  • 原生+ HTML5：最佳方案

---

HTML5开发前准备

• 开发工具
  • iOS
    • XCode
  • Android
    • eclipse、MyEclipse、android studio
  • HTML5
    • eclipse、MyEclipse（后端的伙伴最爱）
    • Dreamwaver（网页三剑客之一，平面设计师和前段最爱）
    • WebStrom（个人最喜欢，默认集成各式各样插件，而且配色各种666，特别丰富）

---

HTML简介

• HTML（Hypertext Markup Language）超文本标记语言，本质其实就是文本，由浏览器负责将它解析成具体的网页内容。
• HTML语法松散，目前最新版本5.0，也称HTML5
• HTML和XML相似，也是由各种标签（元素、标记、节点）组成
• HTML5新增了27个标签元素，废弃16个标签元素（涵盖了结构性标签、行内语义性标签、交互性标签、级块性标签）

---

HTML常见标签

• <h1…h6>：标题标签

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

效果：

• ：段落标签

<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>

效果：

• ：表单标签

<input>
<input type="color">
<input type="file">
<input type="radio">
<input type="password">
<input placeholder="占位文字">
<input value="默认内容">
<input type="checkbox">

效果：

• 图像标签

  • 图像标签需要我们给其src属性传入路径
    • 相对路径：资源在当前项目内 ./ .// 形式
    • 绝对路径：资源不在当前项目内 ftp:// file:// https:// http:// 形式

• 图像标签简单使用

<!-- 基本格式 -->
![](//upload-images.jianshu.io/upload_images/1923109-0b3f122765fcbb9b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

效果：

<!-- 当图片显示不出来的时候,我们一般会显示图片名称，这个时候就需要使用alt属性来实现 -->
    ![blog头像](//upload-images.jianshu.io/upload_images/1923109-0b3f122765fcbb9b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

效果：

• 图像标签的可选属性
  • 如果只给图片设置高或者宽,那么图片会根据高或者宽自动调整等比例尺寸
  • 如果使用百分比设置宽高,指的是相对于父标签的百分比,这边图片的父标签是body

<!-- 图像标签的可选属性 -->
    <!-- 图像标签的宽 -->
    ![](//upload-images.jianshu.io/upload_images/1923109-0b3f122765fcbb9b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    <!-- 图像标签的高 -->
    ![](//upload-images.jianshu.io/upload_images/1923109-0b3f122765fcbb9b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    <!-- 使用百分比来设置图像标签的宽度，百分比相对于父标签，比如这里的父标签是body，这也是屏幕适配的一种方式 -->
    ![](//upload-images.jianshu.io/upload_images/1923109-0b3f122765fcbb9b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

效果：

• 超链接标签

  • href属性：告诉浏览器我们要跳转的地址
    • 如果不想跳转可以设置为'#'表示当前窗口
  • target属性：告诉浏览器以什么样的形式跳转
    • _blank：在新窗口中打开
    • _parent:在父窗口打开
    • _self：在当前窗口打开（一般移动端最常用这个，默认）
    • _top：回到当前窗口顶部

• 超链接标签

  • 超链接简单使用
    
    
    

  
  <!-- 超链接 -->
  	<!-- 如果不想跳转可以填'#'表示当前窗口 -->
  	<a href="http://www.baidu.com">超链接</a>
  
      ```
      效果：
   
      ![超链接基本使用.gif](//upload-images.jianshu.io/upload_images/1923109-1123263d583a1ae4.gif?imageMogr2/auto-orient/strip)
  
      ```html
  
  	<!-- 如果想在新窗口打开,可以使用target属性
  	(_blank:在新窗口中打开 _parent:在父窗口打开 _self:在当前页面打	开 _top:回到当前窗口顶部)
  	-->
  	<a href="http://blog.csdn.net/yeshaojian" target="_blank">在新窗口中打开</a>
  	<a href="http://blog.csdn.net/yeshaojian" target="_parent">在父窗口打开</a>
  	<a href="http://blog.csdn.net/yeshaojian" target="_self">在当前页面打开</a>
  	<a href="http://blog.csdn.net/yeshaojian" target="_top">回到当前窗口顶部</a>
  
     ```
  

效果：

• 超链接嵌套使用
  
  
  

  
  <!-- 给图片一个超链接属性,让用户点击能够在新窗口中打开新页面 -->
      <a target="_blank" href="http://www.baidu.com">
      [站外图片上传中……(6)]
      </a>
  
  

效果：

• 容器标签：用来容纳其它标签，相当于移动开发中最纯洁的UIView，里面写什么，就会显示什么，不会有渲染等效果 —— 所写即所得，正因为这个特性，开发中经常用它来自定义

  • ：属于块元素：是以另起一行开始渲染的元素
    
    

       <div>div容器div容器div容器div容器</div>
       <div>div容器div容器div容器</div> 
       <div>div容器div容器div容器div容器</div>
      ```
      效果：
  
  

- <span>：属于行内元素：不需另起一行
    <br><br>

```html
    <span>span容器span容器span容器span容器</span>
    <span>span容器span容器span容器</span>
    <span>span容器span容器span容器span容器</span>
    <span>span容器span容器span容器</span>

    ```
    效果：

• 换行和横线

  • 
    ：换行
    
    
    

  <div>一行文字一行文字一行文字一行文字</div><br>
  <div>一行文字一行文字一行文字一行文字</div><br>
  <div>一行文字一行文字一行文字一行文字</div><br>
  
  

  • ---

    ：横线

  
  
  

  <div>一行文字一行文字一行文字一行文字</div>
  <hr>
  <div>一行文字一行文字一行文字一行文字</div>
  <hr>
  <div>一行文字一行文字一行文字一行文字</div>
  <hr>
  
  

效果：

• 列表标签：在开发中，列表几乎无处不在，打开任何网页都能见到列表的身影，html中分为有序列表和无序列表2种标签，其中无序列表最为常用
  • ：无序列表：无序列表就是列表结构中的列表项没有先后顺序的列表形式。大部分网页应用中的列表均采用无序列表

  	
  	<!-- 无序列表 -->
      <ul>
          <li>无序列表</li>
          <li>无序列表</li>
          <li>无序列表</li>
          <li>无序列表</li>
          <li>无序列表</li>
      </ul>
  
  

  效果：

  

  - <ol>：有序列表：有序列表就是列表结构中的列表项有先后顺序的列表形式，从上到下可以有各种不同的序列编号
  

  	
  <!-- 有序列表    type表示序号类型    reversed表示降序-->
  <ol type="A" reversed="reversed">   
  <li>有序列表</li>    
  <li>有序列表</li>  
  <li>有序列表</li>  
  <li>有序列表</li>  
  <li>有序列表</li>
  </ol>
  	
  

  效果：

  

  ---

  HTML5新增常用标签(以后详细讲解)

  • HTML5新增了27个标签元素,废弃了16个标签元素,主要包括：结构性标签、级块性标签、行内语义性标签、交互性标签
  • 结构性标签：负责web上下文件结构的定义
    • article：文章主体内容（比如一篇博客、一段用户评论、插件等）
    • hearder：头部区域内容
    • footer：尾部区域内容
    • section：章节区域内容
    • nav：菜单导航，链接导航
  • 块级性标签：完成web页面区域的划分，确保内容有效分隔
    • aside：标记、侧栏、摘要、插入引用作为补充主体内容
    • figure：将多个元素组合并展示元素，常和figcaption一起使用
    • code：表示一段代码块（目前并不兼容主流浏览器）
    • dialog：聊天的对话，包括dt和dd两个组合元素（dt表示说话者，dd表示说话者说的内容）
  • 行内语义性标签：完成web页面具体内容的引用和表述，丰富展示的内容
    • meter：特定范围内的数值，如工资、硬盘容量、数量、百分比的图像化展示
    • time：时间值（目前不兼容主流浏览器）
    • progress：进度条，用max、min、step属性进行控制，常与javascript结合使用完成对进度的表示和监听
    • video：视频元素，用来播放视频，支持缓存和预加载而且支持多种视频媒体格式
    • audio：音频元素，用来播放音频，支持缓存和预加载而且支持多种视频媒体格式
  • 交互性标签：功能性内容的表达，有一定的内容和数据管理，是各种事件的基础
    • details：表示一段具体的内容，默认不显示，通过某种方式与legend交互才会显示
    • datagrid：控制客户端数据与显示，用来动态脚步及时更新
    • menu：用于交互菜单
    • command：用来处理命令按钮

  综合使用实例

  • 上面的标签和概念都是必须熟悉且经常用到的，这里就将使用上面的东西做个实例来帮助大家理解，但并不会使用到全部的标签，因为有的标签涉及到后面的知识，随着学习深入，慢慢为大家展示它们的使用场景和方式
  • 这边我随便挑选自己的一篇博文作为本章的示例 —— iOS指南针根据博文样式，我将博文分成头部、章节、尾部3部分来处理

    • 头部
      ![头部.png]
      ](//upload-images.jianshu.io/upload_images/1923109-bd700eda173dbc4f.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)

    • 章节
      

    • 尾部
      

  1.首先我们设置网页标题和编码格式

  
  <head>
      <!-- 编码格式 -->
      <meta charset="UTF-8">
      <!-- 网页标题 -->
      <title>iOS指南针 - 博客频道 - CSDN</title>
  </head>
  
  

  

  2.接下来就是网页内容了

  
  <body>
      <!-- 结构性标签 -->
      <!-- 文章主体内容 -->
      <article>
          <!-- hearder头部内容-->
          <header>
              <!-- 标题 -->
              <h3>iOS指南针</h3>
              <p>分类:iOS开发 随手笔记</p>
              <hr>
          </header>
          <!-- 将内容添加到一个div内,以便统一管理(涉及到后面的CSS样式,这边先知道这样写就好,后面章节会详细讲解) -->
          <div>
              <!-- 章节 -->
              <section>
                  <!-- 段落 -->
                  <p>前言：</p>
                  <p>这个小项目使用到了CoreLocation框架里面的设备朝向功能，对CoreLocation感兴趣的可以翻一下之前的文章</p>
                  <p>有朋友发现一个尴尬的问题（图片的东西2个方向是不对的），原谅我的大意，赶时间就直接百度了张图片，大家注意下就好了哈！sorry~
                  </p>
                  <h2>指南针实现</h2>
                  <p>先来看看效果</p>
                  <!-- 插入图片 -->
                  <img src="//upload-images.jianshu.io/upload_images/1923109-9cf1d42c0f0808b7.gif?imageMogr2/auto-orient/strip" alt="指南针效果图.gif">
                  <p>项目主要部分就是接收到设备朝向后计算出旋转的角度，然后旋转一下我们指南针图片就可以了</p>
                  // 接收到设备朝向<br>
                  - (void)locationManager:(CLLocationManager *)manager didUpdateHeading:(CLHeading *)newHeading<br>
                  {<br>
                  // 判断朝向是否有效<br>
                  if (newHeading.headingAccuracy < 0) {<br>
                  return;<br>
                  }<br><br>
                  // 获取设备朝向<br>
                  CLLocationDirection angle = newHeading.magneticHeading;<br><br>
                  // 将角度转成弧度（角度 / 180.0 * M_PI）<br>
                  CGFloat hudu = angle / 180.0 * M_PI;<br><br>
                  // 因为如果没有动画的话旋转的时候回出现卡顿的现象，为了更流畅，我们给它加个动画<br>
                  [UIView animateWithDuration:0.1 animations:^{<br>
                  // 旋转图片<br>
                  self.comPassImage.transform = CGAffineTransformMakeRotation(-hudu);<br>
                  }];<br><br>
                  }<br>
                  <p>是不是很简单，但是有一点需要注意 —— 调用磁力传感器前我们需要先判断一下设备的磁力计是否可以用，以防止磁力计坏掉而没有运行成功</p>
                  // 判断当前设备磁力计是否正常<br>
                  if (![CLLocationManager headingAvailable]) {<br>
                  return;<br>
                  }<br>
                  <p>考虑到网络速度问题，我将完整的项目放到了国内版的github（码云）上了 ——
                      <!-- 超链接 -->
                      <a target="_blank" href="http://git.oschina.net/miaomiaoshen/Compass">网络地址</a>
                  </p>
                  <p>版权声明：本文为博主原创文章，转载请注明出处！</p>
                  <p>顶1 踩0</p>
              </section>
          </div>
          <!-- 尾部内容 -->
          <footer>
              <!-- 这边直接用截图代替尾部的分享模块 -->
              [站外图片上传中……(7)]
          </footer>
      </article>
  </body>
  
  

  3.完成，是不是很简单，当然，这边的效果和原版会有区别，因为涉及到后面的CSS样式等相关内容，在后面的章节中会慢慢深入