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/)
- 主流技术 —— HTML5 + CSS3
网页组成
- 网页一般由下面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,特别丰富)
- iOS
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:// 形式
- 图像标签需要我们给其src属性传入路径
图像标签简单使用
<!-- 基本格式 -->

效果:
<!-- 当图片显示不出来的时候,我们一般会显示图片名称,这个时候就需要使用alt属性来实现 -->

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

<!-- 图像标签的高 -->

<!-- 使用百分比来设置图像标签的宽度,百分比相对于父标签,比如这里的父标签是body,这也是屏幕适配的一种方式 -->

效果:
超链接标签
- href属性:告诉浏览器我们要跳转的地址
- 如果不想跳转可以设置为'#'表示当前窗口
- target属性:告诉浏览器以什么样的形式跳转
- _blank:在新窗口中打开
- _parent:在父窗口打开
- _self:在当前窗口打开(一般移动端最常用这个,默认)
- _top:回到当前窗口顶部
- href属性:告诉浏览器我们要跳转的地址
超链接标签
- 超链接简单使用
<!-- 超链接 -->
<!-- 如果不想跳转可以填'#'表示当前窗口 -->
<a href="http://www.baidu.com">超链接</a> ```
效果:  ```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部分来处理
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样式等相关内容,在后面的章节中会慢慢深入
html5快速入门(一)—— html简介的更多相关文章
- html5快速入门(二)—— CSS简介
前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...
- html5快速入门(四)—— JavaScript
前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...
- HTML5快速入门(三)—— 标签综合运用
前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...
- Html与CSS快速入门01-基础概念
Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...
- Html与CSS快速入门02-HTML基础应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 示例 ...
- Html与CSS快速入门03-CSS基础应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 边框 ...
- Html与CSS快速入门04-进阶应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 之前 ...
- 【译】html5游戏入门
[译]html5游戏入门 原文链接 简介 如果你想用canvas做个游戏,那么来对地方了. 但是但是你至少知道javascript怎么拼写(╯‵□′)╯︵┻━┻ 既然没问题,那先来玩一下或者下载 创建 ...
- Spring4 快速入门
Spring4 快速入门 1 Spring简介 1.1 Spring是什么? Spring 是一个 IOC 和 AOP 容器的开源框架,为简化企业级应用而生. IOC(Inversion of Con ...
随机推荐
- 深入理解javascript对象系列第一篇——初识对象
× 目录 [1]定义 [2]创建 [3]组成[4]引用[5]方法 前面的话 javascript中的难点是函数.对象和继承,前面已经介绍过函数系列.从本系列开始介绍对象部分,本文是该系列的第一篇——初 ...
- iOS开发之使用XMPPFramework实现即时通信(三)
你看今天是(三)对吧,前面肯定有(一)和(二),在发表完iOS开发之使用XMPPFramework实现即时通信(一)和iOS开发之使用XMPPFramework实现即时通信(二)后有好多的小伙伴加我Q ...
- ORM开发之解析lambda实现完整查询(附测试例子)
上次讲解了怎么解析匿名对象(ORM开发之解析lambda实现group查询),这次来实现解析二元运算,完成基本条件语法 先看一个表达式 query.Where(b => b.Number == ...
- SharePoint 2013 托管导航 无法被开启的解决办法
在阅读了园子中霖雨的一片博文<SharePoint 2013 托管导航及相关配置>之后,非常想尝试一下SharePoint 2013 中的这个新功能,但是我的网站集包括样式是从2010升级 ...
- C语言 第二章 数据类型、变量和输入函数
一.数据类型简介 在 C 语言中,数据类型指的是用于声明不同类型的变量或函数的一个广泛的系统.变量的类型决定了变量存储占用的空间,以及如何解释存储的位模式. 类型转换: 类型 存储大小 值范围 cha ...
- 奇妙的NULL值,你知道多少
<NULL值的多义性分析> 谈到NULL值,很多人都是很熟悉,但是深入了解后,又感觉到陌生,对其含义和用法,都无法很准确的理解.NULL在数据库和编程语言中,存在的意义和附带的含义不同. ...
- 小div布局之卡片堆叠(card-stacking)
前端的页面布局和各种效果真是让人眼花缭乱,公司的设计师恨不得在一个网站上把前端的布局和样式效果都用一遍. 如何实现下面这种布局效果?我给这种布局效果起了个名字,叫做小div布局之卡片堆叠.然后我百度了 ...
- 常用HiveQL总结
最近在用Hive做多维数据分析,总结一些常用HiveQL命令. 1. 建表 以纯文本数据建表: create table default.calendar_table ( day_cal date , ...
- Winform混合式开发框架访问Web API接口的处理
在我的混合式开发框架里面,集成了WebAPI的访问,这种访问方式不仅可以实现简便的数据交换,而且可以在多种平台上进行接入,如Winform程序.Web网站.移动端APP等多种接入方式,Web API的 ...
- 重新想象 Windows 8.1 Store Apps (81) - 控件增强: WebView 之加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Contract 分享 WebView 中的内容, 为 WebView 截图
[源码下载] 重新想象 Windows 8.1 Store Apps (81) - 控件增强: WebView 之加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Co ...