HTML塊
HTML塊元素
塊元素在顯示時，通常會以新行開始
如：<h1>、<p>、<ul>
<!DOCTYPE html> <html> <head> <title>塊</title> <meta charset = "utf-8"> </head> <body> <h1>這里我演示是塊元素</h1> <p>這里我演示是塊元素</p> <ul>這里我演示是塊元素</ul> </body> </html>
HTML內聯元素
內聯元素通常不會以新行開始，一般都會在一行
如：<b>、<a>、<img>
<!DOCTYPE html> <html> <head> <title>塊</title> <meta charset = "utf-8"> </head> <body> <b>這里我演示是塊元素</b> <a>這里我演示是塊元素</a> <img src="pika.png"></img> </body> </html>
HTML <div> 元素
<div>元素也被稱為塊元素，其主要是組合HTML元素的容器，其實<div>這個元素，將一大堆元素框起來，然后用CSS來改變<div>，就可以將那一大堆的元素一起改變，節省了程序員很多時間。如果沒有<div>標簽的話，就要一個一個的去定義style，非常無聊的工作，而且效率還特別低
<!DOCTYPE html> <html> <head> <title>div樣式</title> <meta charset = "utf-8"> <!-- 使用CSS樣式來改變div的屬性 --> <style type="text/css"> div#test_div{ color: red; } </style> </head> <body> <!-- 只要是在div中的屬性，全部都被改了 --> <div id="test_div"> <p>我是小P</p> <ol> <li>我是li，我和我的兄弟們代表列表</li> <li>我是li，我和我的兄弟們代表列表</li> <li>我是li，我和我的兄弟們代表列表</li> </ol> <h3>我是h3，說h1太大了，讓我來充數</h3> </div> </body> </html>
HTML <span> 元素
<span>元素是內聯元素，可作為文本的容器，只有在<span>標簽中的文字，才會被修改CSS樣式
<!DOCTYPE html> <html> <head> <title>div樣式</title> <meta charset = "utf-8"> <!-- 使用CSS樣式來改變span的屬性 --> <style type="text/css"> span{ color: red; } </style> </head> <body> <!-- 只有span中文字，才會被修改屬性 --> <p>我是小p，<span>我在span中，只有我這一段被更改了，</span>看到了嘛？</p> </body> </html>
HTML布局
<div>布局
知道<div>是定義一個塊的了，那么就可以用<div>來頁面布局了。可以分別將<div>定義成頭部，左邊菜單，中間正文，底部標簽這幾欄。只有修改這些定義過ID的<div>那一塊的內容就會跟着被修改，是不是很炫酷？
<!DOCTYPE html> <html> <head> <title>div樣式</title> <meta charset = "utf-8"> <!-- 使用CSS樣式來控制div布局 --> <style type="text/css"> /*定義全局的div布局*/ div#global{ /*設置寬度，設置百分比可以根據瀏覽器自適應寬度*/ width: 100%; /*設置高度，950px是設置是實體高度，不能自適應的*/ height: 800px; /*設置背景顏色，方便區分布局*/ background-color: silver; } /*定義頭部布局，前面的div可以不用寫，#號前面默認有個id，凡事定義了id的標簽，都可以用#號來表示*/ #heading{ width: 100%; height: 100px; background-color: #BB80F7; } #content_menu{ width: 20%; height: 700px; background-color: #C5E9F3; /*定義浮動，不定義的話，界面會亂*/ float: left; } #content_body{ width: 80%; height: 700px; background-color: #F7575d; float: right; } #floor{ /*刪除浮動，不然會被其他的浮動給遮住*/ clear: both; height: 100px; background-color: #8080FF } </style> </head> <body> <!-- 在這里控制全局的頁面，定義div的id是"global" --> <div id="global"> <div id="heading">我是頭部的布局</div> <div id="content_menu">我是正文部分，我想去左邊的菜單呆着</div> <div id="content_body">我是正文部分</div> <div id="floor">我在最下面，搶不到沙發，坐個地板可以吧</div> </div> </body> </html>
HTML框架
框架就是在主頁上，調用其他的html來定義它的位置，使它可以重復使用，就像Java里面的class一樣。可以互相調用。可以先建3個不顏色的html
<!-- frame1.html --> <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body bgcolor="#FF7373"> </body> </html>
<!-- frame2.html --> <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body bgcolor="#7171FF"> </body> </html>
<!-- frame3.html --> <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body bgcolor="#376084"> </body> </html>
框架 frame：
框架對於頁面的設計有着很大的作用
框架集標簽 <frameset>：
框架集標簽定義如何將窗口分割為框架
每一個frameset定義一些列行或列
rows/cols的值規定了每行或者沒咧占據屏幕的面積
cols：列
rows：行
（注：frameset要寫在head中）
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <frameset cols="20%, 30%, 50%"> <frame src="frame1.html"></frame> <frame src="frame2.html"></frame> <frame src="frame3.html"></frame> </frameset> </head> <body> </body> </html>
內聯框架：
iframe
iframe可以設置一個框架嵌套一個框架。
<!-- Frame_index.html --> <!-- 主頁面 --> <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <!-- frameborder是框架的邊框 --> <iframe src="frame1.html" frameborder="0" width="500" height="500"></iframe> </html>
<!-- frame1.html --> <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body bgcolor="#FF7373"> <iframe src="frame2.html" frameborder="0" width="400" height="400"></iframe> </body> </html>
<!-- frame2.html --> <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body bgcolor="#7171FF"> <iframe src="frame3.html" frameborder="0" width="300" height="300"></iframe> </body> </html>
<!-- frame3.html --> <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body bgcolor="#376084"> </body> </html>
