這篇文章主要記錄一些，Lidemy 所提供的課程[FE101] 前端基礎：HTML 與 CSS，心得筆記，若有筆記有錯誤或內容侵權，麻煩來信告知，感恩：）
範例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
一、html 超文本標記語言
全名 HyperText Markup Language，包含 head、body 兩個主要標籤
< DOCTYPE html > － 告訴瀏覽器，要使用最新的HTML格式渲染view，注意大小寫無差異
二、head
正常標籤成雙成對，但因為<><>之間沒有內容，所以可以簡化變成 < meta charset="UTF-8">/
< meta charset="UTF-8">
＝ < 字符集 ＝ UTF-8 > 告訴瀏覽器，這個 html 檔案是用 UTF-8 編碼的
< title> 我是網頁開頭 < /title>
SEO 與相關標籤 - meta
可以在 head 中設定 < meta name="keyword" content="關鍵字“>
可以在 head 中設定 < meta name="description" content="文章描述“>
Open Graph Protocol ，簡寫 og ，是幫助搜尋引擎、SEO、爬蟲幫你幫助你的網頁更了解你的tag，通常出現 og 就是 facebook 系列的
< meta property ="og:title" content="文章描述“>
< meta property ="og:title" content="文章描述“>
JSON - Id (JSON for Linling Data)
robots.txt 給爬蟲看的檔案，通常放在網頁根目錄下，會放希望/限制爬蟲可以爬某些資料
範例：https://www.google.com.tw/robots.txt
sitemap : 告訴爬蟲我們網站內有哪些 url ，網站地圖的功用，
三、body
< span> 行內元素
< div> 塊元素 （會換行）
< img alt ="圖片沒順利顯示出來，會產生替代文字敘述" title ="圖片名稱" scr= "網址" >
< ul> 無排序，...
< ol> 有排序，123
< li> 被 ul / ol 包起來
< ol>
< pre> 可放入程式碼，換行空白等等，都會被保留 （顯示有被格式的文字）
< br> 換行
< table > tr 一列火車 th 火車頭 td 火車廂
< a href ="網址" target=" _ self 預設 ／ ＿blank 開分頁 " >
< iframe src="網址"> 嵌入其他網頁 ，可能會擋
語意化
< main> 把網頁主要內如包起來
< nav> 導覽列
< footer> 底部
< section> 章節
< aside> 側欄
小幫手
| 提醒 | 使用方法 |
|---|---|
| 註解 | < !--註解內容 --> |
| 假文 | lorem ＋字數 |
| & | & |
| < | < |
| > | > |
![[BE101] PHP 與 MySQL (前言)](https://s103071049.coderbridge.io/2021/06/08/be101php-與-mysql-/?utm_source=coderbridge-io&utm_medium=blog_related_post_img&utm_campaign=阿里蓉的技術村_[BE101] PHP 與 MySQL (前言)_@s103071049_https://static.coderbridge.com/images/covers/default-post-cover-1.jpg)
