xml 可扩展标记语言
http 超文本链接
html5(http+xml+v5) 超文本的一个标记语言第五个版本,14年才定制完。
为什么用H5
1> 跨平台
利用HTML5编写的UI界面能运行在所有拥有浏览器的平台
2> HTML5的运行平台:浏览器
3> 但是HTML5不能完成一些特定的功能,比如:拍照(ImagePickerController)、访问相册....
如何使用HTML5
1> 自己编写大量的HTML5代码
2> 使用现成的HTML5框架
sencha-touch
phoneGap
jQuery mobile
Bootstrap
手机APP的开发模式
1> 原生(纯OC)
2> 纯HTML5
3> 原生+HTML5
4> React Native
开发工具
1> Android
eclipse、MyEclipse、android studio
2> iOS
Xcode
3> HTML5
eclipse、MyEclipse
后端喜爱
Dreamwaver
网⻚三剑客 Dreamwaver、Flash、Fireworks -> Adobe
WebStrom
前端喜爱,⼤神编辑器,默认集成各种各样的插件,配⾊完美
一个有具体功能的完整的网页,一般由3部分组成
HTML
网页的具体内容和结构
CSS
网页的样式(美化网页最重要的一块)
JavaScript(掌握)
网页的交互效果,比如对用户鼠标事件做出响应
HTML\CSS\JavaScript学习资料:http://www.w3school.com.cn/
常见的HTML标签
标题:h1、h2、h3、h4、h5、h6
段落:p
换行:br、 hr(分割线)
容器:div(独占一行)、span(根据内容调整宽度)(用来容纳其他标签)
表格:table、tr、td
列表:ul、ol、li
图片:img
表单:input
链接:a
<header>里面包含css和js代码
<meta charset="utf-8"> header中设置编码,防止title乱码 这个只设置一次! utf-8支持所有国家的语言
<body>包含html代码
<input placeholder="我是占位文字"> 没有闭合标签的都是单标签
<!--图像标签-->
<!--
src 资源路径 alt:占位文字
相对路径: XX/ XXX/ X/X/
绝对路径: http:// file:///
-->
<!--关于图片尺寸的设置,如果设置一个宽度,高度不设置默认帮你设置成为 auto 自动缩放-->
<img src="img/img_01.jpg" alt="这是一张图片" width="150" >
<!-- 百分比是相对于父标签!!! -->
<img src="img/img_02.jpg" width="50%">
<!--超链接标签 target : 打开网页的方式-->
<!--
_blank : 空白窗口
_self: 当前窗口跳转(压栈的操作)
_top : 点击我就回到顶部
_parent: 父标签,父窗口
-->
<a target="_top" href="#">我是超链接</a>
<!-- 相当于push 压栈的操作!! 默认target属性是:self -->
<a href="//jd.com">haah</a>
<!--# 就是当前页面-->
<a href="#">我也是超链接</a>
?理解一下target
_blank : 空白窗口
_self: 当前窗口跳转(压栈的操作)默认
_top : 点击我就回到顶部(href="#"时起作用,否则跟_self一样的效果)
_parent: 父标签,父窗口 (自己测跟_self一样的效果)
src 引入资源,对标签是必须的,没有标签都不显示
href 引用,不必须
<div>相当于我们的view