（一）概念：
（1）html是用来描述网页的一种语言（Hyper Text Markup Language）。是一种超文本标记语言，不是一种编程语言。html5是2014年才定制完的，重点是跨平台，如果用html5写了一套UI界面，那么什么平台都可以用，因为html5的运行平台就是浏览器。只要有浏览器，就能运行起来代码。
（2）所谓的跨平台，只是UI跨平台。比如：拍照，访问相册，和硬件相关的，需要调出iOS自带控制器，或者OC界面的东西，html是无法实现的。这些就只能用OC/IOS来解决。这时候就需要html5和OC互相调用，才可以。
（3）html5有个概念称为移动先行，所以东西都会考虑移动端（手机端）。也就是从这一刻开始，网页才会在手机上大肆兴起。OC中会用到UIWebView。
（4）标记语言语法很松散，感觉就是一个文本，瞎写都没事。由浏览器来解析。
（二）如何使用html5：
（1）自己编写大量的html5。
（2）自己使用html5框架。——> Sencha-touch,jQuery-Mobile等框架。
（三）手机app开发模式：
（1）原生：速度最快
（2）纯html
（3）混合开发：单击事件，明显html会慢
（四）网页
（1）所以说html就是做网页，网页分为html（网页内容，图片，文字），css（美化的样式，一般是平面设计），javaScript三个部分（js就是鼠标的监听事件，还有图片轮播器，用的就是js定时器）。一个网站不仅需要无数个网站，更需要服务器，需要数据库。
（三）使用：
（1）一个html肯定有一个html标签，内容放中间。最外面的标签是根标签，就是html标签。按照规范，还有head和body两大标签。注释是<!— —> ，head是配置，配置标题啊title啊，body是内容。
（2）其他标签：标签很多很多。div和span是容器标签，可以嵌套很多子标签，网页开发中见到最多的一般就是容器。因为div拓展性好一点。下面是常见标签：
*有的标签需要结束，如果标签里面有内容一般需要结束，但是有的不需要，例如input，只是一个输入框
文字大小：h1,h2,h3,h4,h5
链接：a <a here = “http://www.baidu.com”></a>
换行：br也不需要结束标签
图片：img，也不需要结束标签，内容就在标签里
容器：div，字体和h4类似，但是比较纯洁，没有间隙。h标签会增加上下间距的，会受到一些属性阻碍。div可以塞东西。
容器：span。
段落：p
html任何标签都可以点。
代码：
（四）css
（1）概念：层叠样式表，用来控制html标签样式，美化网页，css编写用的是键值对的形式。css属性超级多，好几百个。css最重要的两个点是属性和选择器。
（2）属性：
01-直接在标签中写，这样只会修改单个标签，如果很多标签很难修改。所以说这么写的很少，不规范。
02-业内样式，有时候需要统一配置，这时候需要在head里面配置，因为body只是内容。
03-只要我写好一份样式，那么几百个网页都可以用，这时候用到外部样式，用单独的css文件。然后在需要设置的网页中的head中用link标签来链接css。
多次设置css，后面会覆盖前面的。
（3）选择器：就是通过选择器筛选符合条件的标签来进行相应的设置。
01-标签选择器，其实style标签里面的div和p就是选择器。
02-类选择器可以跨标签控制。名字是自己控制的，并且可以添加多个标签。
注意：同等级的，后来的设置会覆盖之前的设置。但是不同级别的选择器，优先级不一样。
类选择器 > 标签选择器 。所以main，tom就是大于div。
id标签正对性更强。优先级更高。
还有组合出现，同时满足才可以设置。这时候就涉及到css的权值。权值越大，优先级越高。
！ important 表示 ！后面可以添加一些属性，然后无条件重要，优先级最高。
（五）html标签类型，三大块
01-块级标签：div，p，h系列这种独自占一行的（像span就不是，它是一块）。块级标签可以随时设置宽度高度。缺点：会造成浪费。
02-行内标签：宽高取决于内容，不允许随意改变宽高，a，span等就是，不是占用一行的，是占用一块儿。缺点：尺寸无法随意修改。
03-行内-块级标签：可以排在一行也可以修改尺寸。input，button等。
CSS中有个display属性，能修改标签的显示类型。属性有inline，block，inline-block。这样是设计摆设的。很重要。
（六）百度案例
CSS设置
#top {
text-align: right;
margin-bottom: 150px;
margin-top: 20px;
}
#top a {
color: black;
font-size: 13px;
margin-right: 10px;
}
#top a.more-product {
color: white;
background-color: #38f;
display: inline-block;
width: 80px;
height: 25px;
text-decoration: none;
text-align: center;
line-height: 25px;
}
#main {
text-align: center;
margin-bottom: 50px;
}
#main img {
width: 500px;
height: 129px;
}
#main input {
width: 500px;
height: 35px;
font-size: 20px;
}
#main div a {
color: white;
background-color: #38f;
display: inline-block;
height: 35px;
line-height: 35px;
text-decoration: none;
}
#bottom {
text-align: center;
}
#bottom div a {
font-size: 14px;
margin-right: 10px;
margin-left: 10px;
HTML设置：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<!--标题 -->
<title>亚联一下，你就知道</title>
<!--统一设置css样式 -->
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--头部 -->
<div id="top">
<a href="#">糯米</a>
<a href="#">新闻</a>
<a href="#">hao123</a>
<a href="#">地图</a>
<a href="#">视频</a>
<a href="#">贴吧</a>
<a href="#">登陆</a>
<a href="#">设置</a>
<a href="#" class="more-product">更多产品</a>
</div>
<!--中部 -->
<div id="main">
<img src="images/mag.png">
<!--因为换行所以另起一行 -->
<div>
<input placeholder="你要找什么呢?">
<a href="#">亚联一下</a>
</div>
</div>
<!--尾部 -->
<div id="bottom">
<div>
<!--因为换行所以另起一行 -->
<a href="#">把亚联设为主页</a>
<a href="http://www.afcat.com.cn/">关于亚联</a>
<a href="#">About Others</a>
</div>
<div>
©2015 Baidu <a href="#">使用百度前必读</a> <a href="#">意见反馈</a> 京ICP证030173号
<img src="images/icons.png">
</div>
</div>
</body>
</html>
效果：