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 lang="en">
<head>
<meta charset="UTF-8">
<!-- 塊-->
<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 lang="en">
<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.width
frame.size.height = controller.view.frame.size.height * 0.1
view.backGroundColor = [UIColor blackColor];
得在body 使用DIV標簽（標簽里面聲明 view），在head 里面設置 DIV標簽的一些屬性.
瀏覽器的結果是： 去掉 黑色上面 那一欄 就把2個圖片綜合一下
table布局：
<!DOCTYPE html>
<html lang="en">
<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 元素創建）