[ week 6 ] 前端基礎 HTML


Posted by vick12052002 on 2020-07-22

這篇文章主要記錄一些,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)

範例:JSON - Id
圖片出自:FE101] 前端基礎:HTML 與 CSS


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 +字數
& &amp
< &lt
> &gt

#html







Related Posts

Day06:從經典案例看 bytecode

Day06:從經典案例看 bytecode

MTR04_0805

MTR04_0805

用C++做資料分析 | CERN ROOT 教學[02] - 資料匯入與簡單分析

用C++做資料分析 | CERN ROOT 教學[02] - 資料匯入與簡單分析


Comments