新手学html还是html5,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常见标签

：标题标签

标题1

标题2

标题3

标题4

标题5

标题6

效果：

标题标签.png

：段落标签

段落1

段落2

段落3

段落4

段落5

效果：

段落标签.png

：表单标签

效果：

表单标签.png

图像标签

图像标签需要我们给其src属性传入路径

相对路径：资源在当前项目内 ./ .// 形式

绝对路径：资源不在当前项目内 ftp:// file:// https:// http:// 形式

图像标签简单使用


效果：

图像标签基本格式.png


效果：

图片未加载成功显示文字.gif

图像标签的可选属性

如果只给图片设置高或者宽,那么图片会根据高或者宽自动调整等比例尺寸

如果使用百分比设置宽高,指的是相对于父标签的百分比,这边图片的父标签是body




效果：

设置图像标签宽高.gif

超链接标签

href属性：告诉浏览器我们要跳转的地址

如果不想跳转可以设置为'#'表示当前窗口

target属性：告诉浏览器以什么样的形式跳转

_blank：在新窗口中打开

_parent:在父窗口打开

_self：在当前窗口打开(一般移动端最常用这个，默认)

_top：回到当前窗口顶部

超链接标签

超链接简单使用

超链接

```

效果：


```html

在新窗口中打开

在父窗口打开

在当前页面打开

回到当前窗口顶部

```

效果：

超链接target属性.gif

超链接嵌套使用

[站外图片上传中……(6)]

效果：

超链接嵌套.gif

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

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

div容器div容器div容器div容器

div容器div容器div容器

div容器div容器div容器div容器

```

效果：

div.png

- ：属于行内元素：不需另起一行

```html

span容器span容器span容器span容器

span容器span容器span容器

span容器span容器span容器span容器

span容器span容器span容器

```

效果：

span.png

换行和横线

：换行

一行文字一行文字一行文字一行文字

一行文字一行文字一行文字一行文字

一行文字一行文字一行文字一行文字

：横线

一行文字一行文字一行文字一行文字

---

一行文字一行文字一行文字一行文字

---

一行文字一行文字一行文字一行文字

---

效果：

横线和换行效果.png

列表标签：在开发中，列表几乎无处不在，打开任何网页都能见到列表的身影，html中分为有序列表和无序列表2种标签，其中无序列表最为常用

• ：无序列表：无序列表就是列表结构中的列表项没有先后顺序的列表形式。大部分网页应用中的列表均采用无序列表
  • 无序列表
  • 无序列表
  • 无序列表
  • 无序列表
  • 无序列表

效果：

无序列表.png

-

1. ：有序列表：有序列表就是列表结构中的列表项有先后顺序的列表形式，从上到下可以有各种不同的序列编号
   1. 有序列表
   2. 有序列表
   3. 有序列表
   4. 有序列表
   5. 有序列表

效果：

有序列表.png

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：用来处理命令按钮

综合使用实例

上面的标签和概念都是必须熟悉且经常用到的，这里就将使用上面的东西做个实例来帮助大家理解，但并不会使用到全部的标签，因为有的标签涉及到后面的知识，随着学习深入，慢慢为大家展示它们的使用场景和方式

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

iOS指南针 - 博客频道 - CSDN

标题.png

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

iOS指南针

分类:iOS开发 随手笔记

---

前言：

这个小项目使用到了CoreLocation框架里面的设备朝向功能，对CoreLocation感兴趣的可以翻一下之前的文章

有朋友发现一个尴尬的问题(图片的东西2个方向是不对的)，原谅我的大意，赶时间就直接百度了张图片，大家注意下就好了哈！sorry~

指南针实现

先来看看效果

项目主要部分就是接收到设备朝向后计算出旋转的角度，然后旋转一下我们指南针图片就可以了

// 接收到设备朝向

- (void)locationManager:(CLLocationManager *)manager didUpdateHeading:(CLHeading *)newHeading

{

// 判断朝向是否有效

if (newHeading.headingAccuracy < 0) {

return;

}

// 获取设备朝向

CLLocationDirection angle = newHeading.magneticHeading;

// 将角度转成弧度(角度 / 180.0 * M_PI)

CGFloat hudu = angle / 180.0 * M_PI;

// 因为如果没有动画的话旋转的时候回出现卡顿的现象，为了更流畅，我们给它加个动画

[UIView animateWithDuration:0.1 animations:^{

// 旋转图片

self.comPassImage.transform = CGAffineTransformMakeRotation(-hudu);

}];

}

是不是很简单，但是有一点需要注意 —— 调用磁力传感器前我们需要先判断一下设备的磁力计是否可以用，以防止磁力计坏掉而没有运行成功

// 判断当前设备磁力计是否正常

if (![CLLocationManager headingAvailable]) {

return;

}

考虑到网络速度问题，我将完整的项目放到了国内版的github(码云)上了 ——

网络地址

版权声明：本文为博主原创文章，转载请注明出处！

顶1 踩0

[站外图片上传中……(7)]

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

实例效果.gif