【H5教程-2.3.3小节】
2.3.3HTML5列表、块和布局
1.块元素
块元素在显示的时候，常日会以新行开始
如：<h1> <p> <ul>
<!-- 块—>注释
<p>hello</p>
<h1>world</h1>
出来的结果是:
hello
空一行
world
hello 和world 之间有新的一行
2.HTML内联元素
内联元素常日不会以新行开始 如<b> <a> <img>
<b>这是一个加重标签</b>
<a>哈哈</a>
结果是 这是一个加重标签 哈哈
没有 中兴一行
3. HTML <div>元素
<div>元素也被称为块元素，其紧张是组合HTML元素的容器
4.HTML<span>元素
<span>元素是内联元素，可作为文本的容器.
例子：
代码：
<!DOCTYPE html>
<html>
<head>
<!-- 块-->
<title>块元素</title>
<style type = text/css>
span{
color: aqua;
}
</style>
</head>
<body>
<p>大家好!</p>
<h1>的第三款了你的扣篮考虑到那看的扣篮了卡单身快乐你上岸看两三款单你卡上</h1>
<b>这是一个加重标签</b>
<a>哈哈</a>
<div>
<p>
极客学院
</p>
</div>
<div>
<p>
<span>
这是一个测试结果
</span>
span 是一个什么样子
</p>
</div>
</body>
</html>
5.DIV元素布局 和 table元素布局
DIV布局：
<!DOCTYPE html>
<html>
<head>
<meta charset=\"大众UTF-8\"大众>
<title>div布局</title>
<style type = \"大众text/css\"大众>
body{
margin: 0px;
}
#container{
width: 100%;
height: 950px;
background-color: lightgray;
}
#heading{
width: 100%;
height: 10%;
background-color: aqua ;
}
#content_menu{
width: 30%;
height: 80%;
background-color: aquamarine;
float: left;
}
#content_body{
width: 70%;
height: 80%;
background-color: blueviolet;
float: left;
}
#footing{
width: 100%;
height: 10%;
background-color: black;
clear: both;
}
</style>
</head>
<body>
<div id = \"大众container\"大众 >
<div id=\"大众heading\"大众>头部</div>
<div id=\公众 content_menu\"大众>内容菜单</div>
<div id=\"大众content_body\公众>内容主题</div>
<div id=\公众footing\"大众>底部</div>
</div>
</body>
</html>
个中：
在html中常用于布局、定位、区分。DIV是层叠样式表中的定位技能，全称DIVision，即为划分。有时可以称其为图层。
个人觉得像OC里面的View。
在上面 container 为最外层的View 相称于OC一个ViewController的View，id = \"大众container\公众 个人CO理解的是 这块View 的name 叫 container，
<div id=\"大众heading\公众>头部</div> 理解的是 一块叫heading的view 里面 加了一个label ， label的内容显示的是 头部，#footing{
width: 100%;
height: 10%;
background-color: black;
clear: both;
}
这块代码的OC理解便是拿到footing的地址，对这块View做布局和颜色等等的操作。
# 就相称于 OC 里面的
footing 就相称于下面的 view（地址名字）UIView view = [UIView new];
CGRect frame = controller.view.bounds;
frame.size.width = controller.view.frame.size.widthframe.size.height = controller.view.frame.size.height 0.1
view.backGroundColor = [UIColor blackColor];
得在body 利用DIV标签（标签里面声明 view），在head 里面设置 DIV标签的一些属性.
浏览器的结果是： 去掉 玄色上面 那一栏 就把2个图片综合一下
table布局：
<!DOCTYPE html>
<html>
<head>
<meta charset=\公众UTF-8\"大众>
<title>table布局</title>
</head>
<body marginheight=\"大众0px\公众 marginwidth=\公众0px\公众>
<table width=\"大众100%\公众 height = \"大众950px\"大众 style=\"大众background-color: lightgray\"大众>
<tr>
<td colspan=\"大众3\"大众 width=\"大众100%\"大众 height=\"大众10%\"大众 style=\"大众background-color: aqua\"大众>这是头部</td>
</tr>
<tr>
<td width=\公众30%\"大众 height=\"大众80%\"大众style=\"大众background-color: blue\"大众>
<ul>
<li>iOS</li>
<li>HTML5</li>
<li>swift</li>
</ul>
</td>
<td width=\"大众60%\"大众 height=\"大众80%\"大众 style=\"大众background-color: blueviolet\"大众>主题内容</td>
<td width=\"大众20%\"大众 height=\"大众80%\公众 style=\"大众background-color: deeppink\"大众>右菜单</td>
</tr>
<tr>
<td width=\"大众100%\"大众 height=\"大众10%\公众 colspan=\"大众3\"大众 style=\"大众background-color: darkcyan\"大众>这是底部</td>
</tr>
</table>
</body>
</html>
<body>里面 给一个table
<table width=\"大众100%\公众 height = \"大众950px\"大众 style=\"大众background-color: lightgray\"大众> 设置tale 的 宽和高 PX就像素100%便是全屏的宽度 1
<tr>是表格的一行,放在table或者body标签里面的
<td> 标签定义 HTML 表格中的标准单元格。td 元素中的文本一样平常显示为正常字体且左对齐。
HTML 表格有两类单元格：
表头单元 - 包含头部信息（由 th 元素创建）
标准单元 - 包含数据（由 td 元素创建）
