Embedded Files
<head>
<title>meta 標籤說明</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="這個網頁的相關說明">
<meta name="keywords" content="大數據, Big data, 人工智慧, Artificial Intelligence">
<meta name="author" content="莊稼漢">
<meta http-equiv="refresh" content="10;URL=http://www.ntub.edu.tw">
</head>
meta 標籤運用
網頁關鍵字、網頁描述、網頁編碼。
網頁可否被搜尋引擎列入索引。
網頁上的連結是否可以被搜尋引擎當做引線進入另外一個網站。
設定作者、設定瀏覽器瀏覽區域。
搜尋引擎在搜尋時，會先檢查網站根目錄下是否有robots.txt：
若有robots.txt檔則依照檔案內相關限制。
robots.txt 必須是 UTF-8 編碼的文字檔案 (包括 ASCII)，不得使用其他字元集。robots.txt 檔案包含一或多個群組。每個群組由多個規則或指令 (指示) 組成，每個指令獨立一行。
使用的指令必須是User-agent [必要]、 每項規則須指定至少一個 Disallow 或 Allow 項目；Sitemap 自訂項 [非必要]。
如果沒有robots.txt檔案，則會讀取網頁裡的< meta name=“robots” content=“noindex,follow”>標籤設定。
註：搜尋引擎會先對該網站做 Crawl（檢索）與 Index（索引），然後將網站資訊收集與儲存，再根據自己的搜尋引擎演算法計算後做出排序，提供搜尋結果給使用者查詢，但是並非所有搜尋引擎都有支援 Robots.txt 指令。
meta 與搜尋引擎
robots.txt之基本應用：
允許所有搜尋引擎檢索所有內容
User-agent: *
Allow: /
拒絕所有搜尋引擎檢索所有內容
User-agent: *
Disallow: /
拒絕所有搜尋引擎檢索/mypng/底下所有內容。
User-agent: *
Disallow: /mypng/
<meta name="robots" content="noindex,nofollow">標籤的content可設定的參數有index、noindex、follow、nofollow、archive 、noarchive、all與none等8種。
表單基本設計：
<form action="execute.php" name="cfc" method="get">
瀏覽器接收到表單填寫以後，再傳送至伺服器端。
伺服器端接收資料檔案：php、asp.net、jsp 。
<form action="#" name="cfc" method="post">
<fieldset>
單行文字框：<input type="text" name="user" maxlength="10" size="10"><br>
單行密碼框：<input type="password" name="pwd" maxlength="10" size="10"><br>
單行文字框有內容：<input type="text" name="user2" maxlength="10" size="10" value="Chuanfu" ><br>
單行密碼框有內容：<input type="password" name="pwd2" maxlength="10" size="10" value="123456"><br>
性別：<input type="radio" name="sex" value="boy" checked>男
<input type="radio" name="sex" value="girl">女<br>
血型：<input type="radio" name="blood" value="O">O
<input type="radio" name="blood" value="A">A
<input type="radio" name="blood" value="B">B
<input type="radio" name="blood" value="AB">AB<br>
用過哪些作業系統：<br>
<input type="checkbox" value="windows 8" name="win8">win10
<input type="checkbox" value="windows 7" name="win7">win7
<input type="checkbox" value="xp" name="xp" checked>windows xp
<input type="checkbox" value="win2k" name="win2k">windows 2000<br>
請選擇旅遊行程：
<select name="travel" size="2" Multiple>
<option value="1">林家花園</option>
<option value="2">信義商圈</option>
<option value="3">台北園區</option>
<option value="3">桃園園區</option>
多行文字框：<textarea name="multibox" rows="3" cols="26"></textarea>
<div style="text-align: center;"><input type="submit"> <input type="reset"></div>
</fieldset>
</form>
表單基本設計：按鈕與圖片
<form action="123.php" name="cfc" method="post">
<fieldset>
<p>學號：<input name="schoolNo" type="text"></p>
<p>姓名：<input name="username" type="text"></p>
<input type="button" value="A" onclick="cfc.action='456.php';cfc.submit();">
<input type="button" value="B" onclick="cfc.action='789.php';method='get';cfc.submit();">
<input type ="button" value ="你是誰?" onclick = "window.alert('Who are you?');">
<input type="submit"><input type="reset"><br>
<img src="submit.jpg" onclick="cfc.submit()" width="60" height="60" style="cursor:pointer;"/>
<img src="reset.jpg" onclick="cfc.reset()" width="60" height="60" style="cursor:pointer;"/>
</fieldset>
</form>
表單基本設計：檔案上傳欄位
<form enctype="multipart/form-data" method="post">
<input type="file" name="file">
<input type="Submit" name="Submit" value="上傳">
</form>
提供檔案上傳的表單需做以下設定：
表單必須以「post」方式傳送資料。
<form>標籤內要加入「enctype="multipart/form-data"」屬性才可送出資料。
負責傳送資料的<input>標籤必須設定「type="file"」，網頁上將會出現「瀏覽」鈕，就可選擇要上傳的資料。
<form enctype="multipart/form-data" method="post">
<input type="file" name="file" style="display:none;" onchange="this.form.upfile.value=this.value;">
<input type="text" name="upfile" size="20" readonly>
<input type="button" value="開啟檔案" onclick="this.form.file.click();">
<input type="Submit" name="Submit" value="上傳">
</form>
提供檔案上傳的表單需做以下設定：
表單必須以「post」方式傳送資料。
<form>標籤內要加入「enctype="multipart/form-data"」屬性才可送出資料。
負責傳送資料的<input>標籤必須設定「type="file"」，網頁上將會出現「瀏覽」鈕，就可選擇要上傳的資料。
<input type="file">元件於各瀏覽器上會有不同的呈現畫面，網頁要進行美化。
修改上一個網頁，加上樣式表規劃以及script語法互動，使網頁呈現能夠一致。
表單基本設計：圖形按鈕與隱藏欄位
<form action="#" name="cfc" method="get">
<fieldset>
資料是?<br>
<input type="hidden" name="money" value="50"><br>
<input type="image" src="submit.jpg" width="60" height="60" align="left"><br>
<input type="image" src="test.jpg" alt="圖片不見了" title="圖片？" align="right" /><br>
<hr>
<img src="submit.jpg" onclick="cfc.submit()" width="60" height="60" style="cursor:pointer;"/>
<img src="reset.jpg" onclick="cfc.reset()" width="60" height="60" style="cursor:pointer;"/>
</fieldset>
</form>
表單基本設計：新的表單工具-email與url、搜尋
<form action="http://www.google.com/search" method="get">
<h1><b style="color: red;">製作搜尋的輸入欄位</b>(Method 使用 GET 方式)<br/>應用Google 搜尋功能</h1>
<p><input type="search" name="q" autofocus placeholder="請輸入關鍵字"></p>
<!-- <p><input type="submit" value="搜尋"></p> -->
<!-- 製作圖片按鈕 image 屬性 -->
<p><input src="logo.gif" type="image" alt="Search"></p>
</form>
<form action="http://www.google.com/search" method="get">
<fieldset>
<p>電子郵件信箱：<br />
<input type="email" name="user_email"/></p>
<p>網址：<br />
<input type="url" name="user_url" /></p>
<p>搜尋：<br />
<input type="search" name="q" autofocus /></p>
<input type="submit" /></form>
</fieldset>
</form>
表單基本設計：新的表單工具-數值資料
<script>
function printValue(sliderID, textbox) {
var x = document.getElementById(textbox);
var y = document.getElementById(sliderID);
x.value = y.value;
}
window.onload = function() { printValue('range1', 'rangeValue1');}
</script>
<form action="#" method="get">
<fieldset>
<p>數字：<br />
<input type="number" name="user_number" min="-10" max="10" step="2" value="4"/></p>
<p>數值範圍：<br />
<input type="range" name="user_range" id="range1" min="-10" max="10" step="2" value="4" onchange="printValue('range1','rangeValue1')" />
<input id="rangeValue1" type="text" size="2" readonly />
</p>
<input type="submit" />
</fieldset>
</form>
表單基本設計：製作特定範圍 range 屬性
<form action="form_7.php" method="post">
<h1>製作 特定範圍 range 屬性</h1>
<p>姓名: <input type="text" name="user" autofocus></p>
<p>滿意度調查分數: <input type="range" name="score" min="0" max="100" step="1" value="60"></p>
<p><input type="reset" value="取消"> <input type="submit" value="確認"></p>
</form>
<?php //form_7.php
$user = $_POST['user'];
$score = $_POST['score'];
?>
<div style="font-weight:bold; color:red;">應用 <span style="color:blue;">$_POST[' ']</span> 取值的範例</div><div> </div>
<div>
<?php
echo $user." "."<br/>滿意度調查分數: ".$score." 分";
?>
</div>
<h1>To display the range values</h1>
<form oninput="output.value = parseInt(display.value)">
<input type="range" id="display" /> <output name="output">50</output>
</form>
<h1>To display the number values</h1>
<form oninput="myoutput.value = parseInt(display1.value) + parseInt(display2.value)">
<input type="number" id="display1" value="5" /> + <input type="number" id="display2" value="6" /> = <output name="myoutput">11</output>
</form>
上機操作：請使用表單網頁架構範例之程式碼練習 eWeb 4 之工具箱的介面操作應用。
Report abuse