html的簡單例子和其分析
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>826創新實驗室</title>
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css">
<meta charset="utf-8">
</head>
<body>
<div id="home-page" data-role="page">
<div data-role="header">
<h1>826創新實驗室</h1>
<a href="index.php" class="ui-btn ui-btn-left ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主頁</a>
</div>
<?
session_start();
if(isset($_SESSION['studentid']))
{
?>
<?php
include "conn/conn.php";
//$date=date('Y-m-d H:i:s');
//echo $date;
$q = "SELECT actnotice.ActId,actnotice.ActName,actnotice.StartTime,actnotice.Endtime,actnotice.Address,actnotice.TeacherName,student.LogTime FROM actnotice,student WHERE student.StudentId='{$_SESSION['studentid']}' AND actnotice.StartTime>student.LogTime order by actnotice.StartTime desc";//WHERE StartTime<$date order by StartTime desc"; SQL查詢語句
$rs = mysql_query($q);
//$q2 = "SELECT LogTime FROM Student WHERE StudentId='{$Studentid}'";//WHERE StartTime<$date order by StartTime desc"; SQL查詢語句
//$rs2 = mysql_query($q2);
$rs1 = mysql_query($q);
?>
<div data-role="main" class="ui-content">
<ul data-role="listview">
<li><a href=actlist.php>近期活動預約名單</a></li>
<?
while($row = mysql_fetch_row($rs))
{
?>
<li><?php echo '活動：'.$row[1].' 時間：'.$row[2].' 地點：'.$row[4].' 主講人：'.$row[5];?></li>
<?
}?>
</ul>
</div>
<div data-role="main" class="ui-content">
<form form id="form" name="form" method="post" action="act2.php">
<fieldset data-role="fieldcontain">
<label for="act">請點選下拉列表選擇你要預約的活動</label><br><br><br>
<select name="actnotice" id="act" >
<? //<option >點選開啟活動列表</option>data-native-menu="true"
while($row1 = mysql_fetch_row($rs1))
{
?>
<option ><?php echo $row1[1];?></option>
<?
}?>
</select>
<fieldset data-role="controlgroup" data-type="horizontal" data-iconpos="right" data-mini="true">
<legend>請選擇你的需求:</legend><br><br><br>
<input type="radio" data-theme="e" name="radio-choice-h-3" id="radio-choice-h-2a" value="1" checked="checked">
<label for="radio-choice-h-2a">預約</label>
<input type="radio" data-theme="e" name="radio-choice-h-3" id="radio-choice-h-2b" value="2">
<label for="radio-choice-h-2b">請假</label>
</fieldset>
</fieldset>
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="reset" data-theme="c">取消</button></div>
<div class="ui-block-b"><button type="submit" data-theme="b">提交</button></div>
</fieldset>
</form>
</div>
<?
}
else
{
echo "<script>alert('您還未登入，不能預約活動');window.location='login.php';</script>";
}
?>
</body>
</html>
這是一個簡單的主頁例子 接下來就對其進行簡單分析
<meta name="viewport" content="width=device-width, initial-scale=1">
一、先明白幾個概念
phys.width:
device-width:
一般我們所指的寬度width即為phys.width，而device-width又稱為css-width。
其中我們可以獲取phys.width即width通過document.documentElement.clientWidth;而獲取css-width通過 window.screen.width獲取。如iphone6的phys.width為750px，而css-width為375px。
二、
明白一個瀏覽器預設行為。
試想，瀏覽器如果把電腦端的980px的網頁展現在寬度為750px的iphone6手機屏上，勢必會放不下，手機端橫向會出現滾動條，怎麼阻止這種情況呢，很簡單，瀏覽器預設一個虛擬視窗，不同瀏覽器有不同的虛擬視窗寬度的預設值如：safari iphone：980px;
opera:850px; Andriod webkit:800px;IE:974px;然後會把這個980px虛擬視窗裝進寬度為750px的iphone6中，當然這樣的話必須縮放，這就是為什麼在手機中展現電腦端頁面沒有出現橫向滾動條，而且字跡明顯變小的原因。
三、講解meta name= viewport content= width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1
meta標籤中，width有兩個含義，第一、width為phys.width，第二，width也為虛擬視窗的width。這樣就會有兩個結果：
第一、此時的iPhone6的phys.width也變成了css-width即375px，我們可以通過document.documentElement.clientWidth獲取得到此時phys.width確實為375px。
第二、如你設計的是375px的手機端頁面，此時的虛擬視窗的寬度也為375px，再裝進phys.width為375px的手機，當然如設計稿一樣的效果，不會縮放，也不會出現橫向滾動條。
四、對響應式佈局，媒體查詢的影響
@media only screen and (min-width: 350px) and (max-width: 480px){.....................}
如沒有meta標籤，此時的width當然即為phys.width，iPhone6就不會執行上邊的括號裡邊的程式碼，但是有了meta標籤以後呢，width變成了css-width，即為375px,，所以是會執行程式碼的。
五、論meta標籤的影響
從上邊可以看出，有了meta標籤以後，原本的iPhone6，即畫素比為2的手機，可以按照css-width相同的畫素比為1的手機一樣正常顯示，畫素比更高的手機也能正常顯示。當然現在andriod的2K屏在meta標籤的幫助下也能正常顯示。即對於開發者來說，已經可以不管手機的畫素比，只需按照css畫素編寫程式碼即可。
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css">
CSS是Cascading Style Sheet 的縮寫。譯作層疊樣式表單，是用於（增強）控制網頁樣式並允許將樣式資訊與網頁內容分離的一種標記性語言。
css檔案連結html的三種方式：1.內聯定義。2.鏈入內部css.3.鏈入外部css。
SQL語句查詢語句完整語法
完整語法是：
Select [select選項] 欄位列表[欄位別名]/* from 資料來源 [where 字句] [group by子句 ][having 子句][order by 子句][limit 子句];
①[select選項]：
Select 選項包含：ALL（所有，預設）、distinct（去重）。其中distinct針對的是查詢結果的整條記錄而言的。
②[where 字句]：where是唯一一個從磁碟開始拿資料的時候就開始進行判斷的條件，從磁碟取出一條記錄，開始進行where判斷，判斷結果如果成立，那麼取出結果儲存到記憶體，否則放棄.
③[group by 子句 ]：分組子句，group by子句主要的作用是分組，從而進行統計操作，而不是為了展示（展示的時候，只會展示分組記錄的第一條記錄），分組時，一般會結合使用count（）、max（）、min（）、avg（）、sum（）函式。
④[having 子句]：having的作用類同where，而且having能做幾乎所有where能做的事情，而where卻不能做having能做的很多事情，主要是因為
where只能在磁碟提取資料的時候對資料進行操作；而在記憶體中對資料進行group by分組之後的結果進行處理，只能通過having。
⑤[order by 子句]：對資料進行排序操作，根據某個欄位進行升序或者降序排序。（進行多欄位排序的時候，先根據某一欄位進行潘旭，然後在排序好的內部再按照某欄位進行排序）
⑥[limit 子句]：限制結果的數量。Limit 偏移量 記錄條數;