HTML&CSS 基本教學
0.Oct-1X-2018 :初版HTML教學
什麼是HTML
- 一種標示語言(顯示資料的語言)
- 1993年由網際網路工程任務組(IETF)提出首個規範提案，同年末亦有其他人提出其競爭方案：HTML+
- 1994年草案到期後，IETF建立了工作群組並完成HTML2.0的制定
- 自1996年後由全球資訊網協會(W3C)維護，於2000年納入國際標準
- 2008年，網頁超文字應用技術工作小組(WHATWG)與W3C共同交付HTML5版的標準，並於2014年標準化
- 直至投影片最後修改時間為止最新版本為5.2
基本框架
<!DOCTYPE html><!-- 這行定義HTML版本，請務必擺在最前面，方便瀏覽器辨識；詳情請見https://www.w3schools.com/tags/tag_doctype.asp -->
<html><!-- HTML開頭 -->
<head><!-- 回應標頭內容(通常是放給瀏覽器辨識用的內容) -->
<meta http-equiv="content-type" value="text/html;charset=UTF-8"/><!-- 定義網頁檔的內容類型以及字元編碼 -->
<title>網頁標題</title>
</head>
<body><!-- 網頁內容(通常是放給人操作/看的資訊) -->
網頁內容
</body>
</html>基本語法-標籤(Tag)
單一標籤
<br />複合標籤
<div> </div>基本語法-標籤屬性(Attributes)
<div attribute1="value1" attribute2="value2" ...... attribute-n="value-n"></div>基本標籤-文字處理
粗體
斜體
底線
刪除線
<b>粗體</b>
<i>斜體</i>
<u>底線</u>
<s>刪除線</s>基本標籤-標題
1
2
3
4
5
6
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>基本標籤-段落、換行、水平線
<p>這是<br />段落</p>
<hr />
<p>這是水平線下的陰謀</p>這是
段落
這是水平線下的陰謀
基本標籤-表格(語法)
<table><!-- 建立表格 -->
<thead><!-- 表格標題列 -->
<tr><!-- 表格行 -->
<th></th><!-- 標題格 -->
<th colspan="2">表格開頭</th><!-- colspan用來跨行 -->
</tr>
</thead>
<tbody><!-- 表格內容 -->
<tr>
<td rowspan="2">內容</td><!-- 內文格；rowspan用來跨列 -->
<td>內容</td>
<td>內容</td>
</tr>
<tr>
<td>內容</td>
<td>內容</td>
</tr>
</tbody>
<tfoot><!-- 表格結尾 -->
<tr>
<td colspan=3>表格結尾</td>
</tr>
</tfoot>
</table>table {
border-collapse: collapse;
}
table th,td{
width: 100px;
height: 50px;
border: 1px solid #000;
text-align: center;
}<thead>、<tbody>、<tfoot>可以不需要用，但如果要使用的話建議一起使用
上面的CSS是用來顯示框線和調整寬、高度用的
基本標籤-表格(結果)
由於出了點技術問題...請容許我只提供圖片範例......
基本標籤-超連結
<a href="網址">連結文字</a>