2021-05-16 - Githubissues

FE101 前端網頁基礎 HTML 與 CSS

網頁的模板

利用編輯器打開 html 檔案可看見網頁背後的程式語言，利用許多標籤再使用瀏覽器渲染成看見的畫面。

有結構的文字檔。

右鍵檢查可以跳出 devtool，透過該工具看內容位在何處，在本地端更改，不會影響遠端的資料庫。

HyperText Markup Language 超文本標記語言

最基本組成：

第一行：<!DOCTYPE HTML> //我要使用最新的 html 格式來渲染，沒有的話格式就會自己高興看狀況判斷要用什麼格式。

其他標籤成對出現，基本結構如下：

<html>
  <head>
    <meta charset='utf-8' /> // 這樣也叫做一組，沒有內容所以可把 </meta> 縮成 / 放在最後面。
    <title>網頁標題</title>
  </head>
  <body>
  <!--放註解--> //不會顯示在網頁上
  </body>
</html>

meta 後面接屬性，該屬性名稱叫 charset ，指定編碼為 utf-8。

html 很久很久以前

單純顯示文章。

  <body>
    <h1> 主標題 </h1> // h 即 heading
    <h2> 副標題 </h2> ... 可以到 <h6>，僅字體不同大小。
    <p> 副標題內容 </p> // p 為 paragraph
    <h2> 副標題 </h2>
    <p> 副標題內容 </p>
  </body>

Lorem ipsum 排版設計的拉丁文章，目的在於測試版面長得如何。

很常見的標籤 div & span

  <body>
    <h1> 主標題 </h1> // h 即 heading
    <div> // 將東西包成一區塊，基本上不會有視覺上的變動，但會將包起來的東西視為同一塊。
      <h2> 副標題 </h2> ... 可以到 <h6>，僅字體不同大小。
      <p> 副標題內容 </p> // p 為 paragraph
    </div>
    <h2> 副標題 </h2>
    <p> <span>副標題</span>內容 </p> // 主要用在內容裡面，想要特別標出某些字的時候使用。
  </body>

如果在內容之間使用 div ，會讓文字分行，自己就是一行， span 不會換行，可以跟其他東西並排。

如果想要看見圖片 img

  <img src="網址"/> //不會有內容所以跟 meta 一樣最後反斜線即成一組。 
  <img title="圖片的標題"/> //圖片不會有變化，但滑鼠移到圖片上會看見該文字。
  <img alc="內容"/> //圖片顯示不出來時的替代文字。

src、title、alc 皆為 img 的屬性。

顯示清單 ul、ol、li

unordered list //沒有排序（會以符號表示（圓點之類的）
ordered list //有排序（顯示出來時會有序號，並非自動排序。）
list item //包在上面兩個標籤（任選一）裡面 ```

內容

內容

``` 內容前面會顯示一個圓點。將 ul 改成 ol 會變成數字排序。

保留完整格式 pre

 preformatted  text

 line break
```
  // 包起來的內容會保留完整格式，原封不動的顯示。

 
 // 拿來換行

文字
// 此處換行的意思文字文字文字

如果使用 <p></p> 再多空白都只會呈現一個空白，不會保留格式。

### 表格必備標籤 table、th、tr、td
><tr> table row
><td> table cell
><th> table header

// 第一列 // 第一列此處可改成文字會變成粗體。 // 第二列

Lichen5221 / Report-Daily

2021-05-16 #27