[Week6] 給自己看的 HTML 基礎


關於這篇文章

雖然目前進度有點落後,不過因為是第一次那麼有系統性的學習 HTML 和 CSS。因此這篇筆記的目的是,讓未來的自己想不起來「咦這個功能叫什麼名字」的時候可以回頭查看。因為目前只看完 EF101 ,也當作再複習一次,比較安心。

更新紀錄:
2020/08/09 一小時挑戰 => 延續至 08/10

什麼是 HTML ?

HTML 全名是 Hyper Text Markup Language 超文本標記語言,它並不是一個程式語言。主要用於規劃網頁架構,通過標籤定義網頁的原始內容,例如:這行字是標題,這幾行是一塊,這行字是按鈕。

基本架構


<!DOCYTPE HTML>:通常會加在檔案最前面,表示我要用最新標準格式,可加可不加。
<html>:將整個網頁包起來。
<head>:放基本資訊。
<body>:網頁主要內容。
因此一個基本的 HTML 架構會長這樣:

<html>
  <head>

  </head>
  <body>

  </body>
</html>

HTML 的標籤都是由一組包起來的,例如 <html> (開)和 </html> (合)就是一組,其中就是該標籤作用處。有些標籤也可將開合寫在一起,例如 header 中指定編碼方式的 <meta charset="utf8" /> 就是一個例子。
<title> 是另一個常見於放在 head 的標籤,可設定該網頁的標題。在瀏覽器看起來就會如下:

另外,若要 加註解 的話,可用 <!--註解註解--> ,如此內容便不會顯示於網頁上。

語意化標籤

語意化標籤的目的是為了讓標籤(Tag)更具意義,以加強文件的結構化,讓搜尋引擎更清楚了解。例如早期分段都只用 <div> ,現在卻多了 <header><main><footer> 之類的,雖然效果顯示上一樣,不過更方便回頭 debug 或溝通。

文字

HTML 最早就是為了顯示文字,最常見的兩種為:
<h1> ~ <h6> : 有點類似 Markdown中文字前面加上 # ~ ###### ,數字越大字就越大。
<p> :一個文字段落。

另外因為內容會忽略前後的空格,因此若要保留完整輸入格式,可用 <pre> 包起來。另外加入 <br/> 可強制換行。

排版

排版的詳細好處會在 CSS 感受到。
<div>:包住一組文字,並且自動換行。
<span>:包住一組文字,但不會自動換行,通常是在段落內的文字。

圖片

<img src="url"/>

屬性:
alt="替代文字" :當圖片連結失效,原本位置會顯示替代文字。
title="文字":滑鼠移上去會顯示的文字。

清單

<li>:個別包住清單中的每一條。
<ul>:包住沒有排序的。
<ol>:則是有排序的。
例如在 body 輸入:

      <ul>
          <li>ul是</li>
          <li>沒有排序的清單</li>
      </ul>
      <ol>
          <li>ol包住</li>
          <li>有排序的清單</li>
      </ol>

就會變成這樣:

表格

<table>:框住整個表格。
<tr>:框出橫的 row 。
<td>:框出直的 colmn 。
<th>:和 <td> 很像,可用於標題。
例如:

<table>
  <tr>
    <th>編號</th>
    <th>姓名</th>
    <th>成績</th>
  </tr>
  <tr>
    <td>001</td>
    <td>小明</td>
    <td>30</td>
  </tr>
  <tr>
    <td>002</td>
    <td>小美</td>
    <td>92</td>
  </tr>
</table>

會出現:

編號 姓名 成績
001 小明 30
002 小美 92

錨點

a 是 anchor 的意思,通常搭配 href (hypertext referance) 指向目的地。

<!-- 超連結 -->
<a href="https://www.coderbridge.com/@v61265">我的主頁</a>
<!-- 像維基百科那樣連到自己頁面的其他地方 -->
<a id='123'>目標內容</a>
<a href='#123'>連結文字:到目標內容去</a>

會出現:
我的主頁
連結文字:到目標內容去
另外 a 有個屬性 target
target:_self:直接連結到網頁,沒設定的話就預設這種。
target:_blank:在新分頁開啟網頁。

嵌入網頁

<iframe src="url" width=100px height=20% />

表單

<form>
  <!--輸入框-->
  <input type="text" /> 
  <!--送出按鈕-->
  <input type="submit" value="上面的字" />
  <!--密碼框(會自動碼掉輸入)-->
  <input type="password"/>
  <!--輸入信箱(自動偵測有沒有@)-->
  <input type="email"/>
  <!--輸入日期-->
  <input type="date"/>
  <!--單選-->
  <input type="radio" name="群組名稱" id="選項名"/><label for="選項名">選項描述(點這個字也可以選到)</label>
  <!--多選-->
  <input type="checkbox"/>
</form>

參考資料

HTML & SEO
何謂HTML?
快速了解HTML語意化標籤
html forms

180天成為工程師






Related Posts

資訊安全-密碼

資訊安全-密碼

滑動到看不見某個元件,另一個就會元件出現的效果

滑動到看不見某個元件,另一個就會元件出現的效果

MTR04_0621

MTR04_0621



Comments