KT客棧

Web程式交流 & 聊幹畫 / 心情手札

【HTML】2初探HTML-2.1 認識html標籤元素

by on in
*2 初探HTML
➤2.1 認識html標籤元素
HI各位棧友們好，在學習HTML靜態網頁前，首先要先了解它的基本結構，以下棧長會使用一個DOM文件物件模型的圖文來解析HTML的各別的標籤、屬性。

 下圖為DOM樹狀模型


 多數教材都是在介紹javascript才會透過DOM解析父元素和子元素階層關係以及如何透過方法、事件來操作document物件。不過我覺得先了解DOM的概念會有助於往後的學習。

 一般在瀏覽器，當我們從client端(即用戶端)載入某某網站的網頁時，就是會依據DOM模型由上而下一一載入，而javascript的功能則是針對各別元素、屬性來做新增、修改或是執行事件的互動，甚至是操作CSS的選擇器。準此，你的javascript或jQuery寫在哪個位子是會影響到載入的速度。一般建議是固定式的(如boostrap、jQuery)放在上方<head></head>間，另外自訂的事件或是特效則建議放在</body>前面。
網頁的組成都是有起手式的(就和說幹話是一樣der)~
關於HTML網頁的製作棧長是使用Atom編輯器，基本上以您習慣的編輯器為主，但我個人偏愛用Atom，它的快捷鍵讓我們在開發會省下不少時間。
<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>1.認識html標籤元素</title>
  </head>
  <body>
    <!--撰寫網頁的內容-->
  </body>
</html>
從上列程式碼可知，網頁的開始為<html>結束為</html>，頭部的開始為<head>結束為</head>....身體的開始為<body>結束為</body>。下面就來一一對各別的標籤來做說明:
 HTML-基本結構 * <!DOCTYPE html> : 即宣告整個檔案文件為HTML5
* <html lang="zh-TW"> : 指定語系為繁體中文(简体的则改为"zh-CN"，亲们)
* <head></head> : 文件標頭的開始和結束(內部放<meta>、<title>標籤)
* <meta charset="utf-8"> : 文件編碼為utf8
* <meta name="viewport" content="width=device-width, initial-scale=1" > : 
  讓裝置畫面寬度指定為初始縮放比100%(供手機、平板觀看)
* <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> : 
  讓IE瀏覽器模擬成chrome瀏覽器
* <title></title> : 瀏覽器上方的標題
* <body></body> : 網頁內容的開始和結束




大致了解整個網頁的基本結構後，那麼我們就來開始介紹，在<body>標籤內放置的內容，例如連結<a href="">、標題<h1>、段落<p>、內行<span>、<ul><li>巢狀清單、<fieldset>表單群組等。
 HTML-各標籤說明 * <h1~h6> : 標題
* <p></p> : 換行段落  |  <span></span> : 內行  | <br> : 換行  |  <hr> : 換行分隔線
* <ul></ul> : 編號巢狀清單(dic:黑圓心，circle:空圓心，square:黑方形)
* <ol></ol> : 編號巢狀清單(1:數字，I:羅馬數字，A:英文字)
* <fieldset></fieldset> : 表單群組
* <legend></legend> : fieldset底下的標題
* <a href="./" target="_parent"></a> : 超連結
  在連結標籤內href的雙引號內是放置路徑，而target則是轉頁的方式，
  target的雙引號內可以使用 _parent (本頁轉頁)或是 _blank (分頁轉頁)。
* <img href="images/01.jpg" width="50%" height="50%"  alt="圖片一"> : 插入圖片
  alt為滑鼠指標滑入該圖片時會出現的說明，width是寬、height是高
* <cite> : 文字變成斜體
* <pre> : 放置內容不受影響(可寫入程式碼)
<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>1.認識html標籤元素</title>
  </head>
  <body>
    <!-- <h1~h5>:標題 -->
    <h1>這是h1</h1>
    <h2>這是h2</h2>
    <h3>這是h3</h3>
    <h4>這是h4</h4>
    <h5>這是h5</h5>

    <!-- <p>:換行段落，<span>:內行 -->
    <p>
      <span>大家好</span>
    </p>
    <!-- <br>:換行 -->
    <br>
    <!-- <hr>:換行分隔線 -->
    <hr>

    <!-- <ul>:編號巢狀清單(dic:黑圓心，circle:空圓心，square:黑方形) -->
    <ul type="disc">
      <li>哈哈</li>
    </ul>
    <ul type="circle">
      <li>哈哈</li>
    </ul>
    <ul type="square">
      <li>哈哈</li>
    </ul>
    <!-- <ol>:編號巢狀清單(1:數字，I:羅馬數字，A:英文字) -->
    <ol type="1">
      <li>嘿嘿</li>
      <li>嘿嘿</li>
    </ol>
    <ol type="I">
      <li>嘿嘿</li>
      <li>嘿嘿</li>
    </ol>
    <ol type="A">
      <li>嘿嘿</li>
      <li>嘿嘿</li>
    </ol>
    <!-- <fieldset>:表單群組，<legend>:fieldset底下的標題 -->
    <fieldset>
      <legend>個人資料</legend>
        <p>本站：KT客棧</p>
        <p>網址：<a href="https://ktamd.blogspot.com/" target="_parent">ktamd.blogspot.com</p>
    </fieldset>
  </body>
</html>



關於table標籤，是每個網頁製作中必不可少的，雖說現在切版主要趨勢是以div切版型，但在寫php中我仍會常常將撈取的資料倒進table內，像是公告欄、文章列表、會員列表等。
補充:這裡若是用VS code或是在Atom有安裝Emmet外掛的棧友們，可以直接用更快的方式打出表格，假設要做出個2行1列的表格，可以直接在編輯器輸入
table>tr*2>td*1 (再按下tab鍵，表格就自己生出來了)
 table標籤說明* <table></table> : 表格的標籤
* <tr></tr> : 行的標籤
* <th></th> : 列的開端  (主要放在標題上)
* <td></td> : 列(欄)

 標頭和內容作區隔
* <thead></thead> : tr為行，th為列(標題)
* <tbody></tbody> :  tr為行，td為列
範例如下:
<table>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

 表格標籤的相關屬性(範例如下)
* <caption></caption> : 表格上方的標題
* <table></table>標籤內的的屬性 :
   border = " " 邊框厚度   |   width = " " 表格寬度(px或%)   |   height = " " 表格高度(px或%)
   cellpadding = " " 儲存格與邊界的距離   |  cellspacing = " " 邊界的寬度  
* <tr></tr>標籤內的的屬性 :
   align = "left, center, right " (水平)內容位置   |   valign = "top, middle, bottom " (垂直)內容位置  
   bgcolor = " " 整行的顏色 
* <td></td>標籤內的的屬性 :
   colspan = " " (水平)合併儲存格  |   rowspan = " " (垂直)合併儲存格
 *表格切版範例如下(附上程式碼)，使用8行(tr)5列(td)的方式來做切割變化，各位可以動手自己嘗試改一改。
下方表格
第1行，水平合併5格
第2行，第1列往下垂直合併4行的第1列，第2-5列水平合併4格
第3行，第1列已經被佔用了(不用填)，第2-3列水平合併2格，第4、5列不動
第4行，第1列已經被佔用了(不用填)，第2列不動，第3-5列水平合併3格
第5行，第1列已經被佔用了(不用填)，第2、3、4列不動，第5列往下垂直合併3行的第5列
第6行，第1-3列水平合併3格，第4列不動，第5列已經被佔用了(不用填)
第7行，第1列不動，第2-3列水平合併2格，第4列不動，第5列已經被佔用了(不用填)
第8行，水平合併5格
KT客棧-table切好切滿
colspan="5"
rowspan="4" colspan="4"
colspan="2" 表格列 表格列
表格列 colspan="3"
表格列 表格列 表格列 rowspan="3"
colspan="3" 表格列
表格列 colspan="2" 表格列
colspan="5" 

<table border="1" cellpadding="10" cellspacing="0.5" align="center">
<caption>KT客棧-table切好切滿</caption>
  <tr bgcolor="lightgreen">
    <td colspan="5">colspan="5"</td>
  </tr>
  <tr valign="bottom">
    <td rowspan="4" style="background-color:burlywood;">rowspan="4"</td>
    <td colspan="4" style="background-color:darkorange;">colspan="4"</td>
  </tr>
  <tr>
    <td colspan="2" style="background-color:deepskyblue;">colspan="2"</td>
    <td >表格列</td>
    <td>表格列</td>
  </tr>
  <tr valign="middle">
     <td>表格列</td>
     <td colspan="3" style="background-color:lightcoral;">colspan="3"</td>
  </tr>
  <tr valign="top">
     <td>表格列</td>
     <td>表格列</td>
     <td>表格列</td>
     <td rowspan="3" style="background-color:navajowhite">rowspan="3"</td>
  </tr>
  <tr>
     <td colspan="3" style="background-color:lightcoral;">colspan="3"</td>
     <td>表格列</td>
  </tr>
  <tr>
     <td>表格列</td>
     <td colspan="2" style="background-color:peru">colspan="2"</td>
     <td>表格列</td>
  </tr>
  <tr bgcolor="lightgreen">
     <td colspan="5">colspan="5"</td>
  </tr>
</table>





By -
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)

@templatesyard