or
or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up
Syntax | Example | Reference | |
---|---|---|---|
# Header | Header | 基本排版 | |
- Unordered List |
|
||
1. Ordered List |
|
||
- [ ] Todo List |
|
||
> Blockquote | Blockquote |
||
**Bold font** | Bold font | ||
*Italics font* | Italics font | ||
~~Strikethrough~~ | |||
19^th^ | 19th | ||
H~2~O | H2O | ||
++Inserted text++ | Inserted text | ||
==Marked text== | Marked text | ||
[link text](https:// "title") | Link | ||
 | Image | ||
`Code` | Code |
在筆記中貼入程式碼 | |
```javascript var i = 0; ``` |
|
||
:smile: | ![]() |
Emoji list | |
{%youtube youtube_id %} | Externals | ||
$L^aT_eX$ | LaTeX | ||
:::info This is a alert area. ::: |
This is a alert area. |
On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?
Please give us some advice and help us improve HackMD.
Syncing
xxxxxxxxxx
HTML & SEO
tags:
Tag(前端基礎)
語意化是甚麼?
使用HTML標籤來標記網頁內容,讓網頁內容文字具備明確的含意,就是語意化的一個過程
區塊
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →內容
圖片
文字
嵌入內容
常見的
<head>
內容title
用於更改網頁頁籤文字

Meta 標籤
敘述網頁的標籤,包含作者、文字編碼、網站說明文字、關鍵字
常用的屬性有:
charset 、 name 、 content 、 http-equiv
nav
nav扮演的角色是輔助使用者探索網頁
常見的
<body>
標籤1. 標題字
2. 段落文字
3. Unordered List 無序清單
4. Ordered List
5. div 規劃區塊
id
、class
是一種屬性,用來標註塊級元素套用特定的 CSS 樣式透過
id
、class
屬性標注區塊,可讓 CSS 在該區塊進行排版6. 表格
效果如下
7. strong 強調
使用強調和斜體的重點並非透過標籤調整樣式
而是用來標示文字賦予它意義讓瀏覽器看懂
8. em 斜體
9.
a
為anchor
建立了通往其他頁面、檔案、Email 地址、或其他 URL 的超連結。<a>
標記可以指向具有id屬性的任何元素,可以通過引用頁面和錨名稱將網站從一個頁面鏈接到另一個頁面。href 屬性
10.
標籤通常用於放置圖片,可支援 JPG 、PNG 、 GIF 、 SVG
alt
11. 換行
12. 語意化元素 semantic elements
<header>
<nav>
<section>
<article>
<aside>
<footer>
<figure>
13. iframe 嵌入網頁
可以設寬度跟高度
(伺服器可以設定防止別人存取網頁)
範例:嵌入google map
14. form 表單
Text inputs
範例
Placeholders
Labels
說明文字Checkboxes
🎄
Checkboxe 常用在可以選擇許多項目的情況
Radio buttons
🎄
Radio Buttons 通常用單選
加上label的使用者體驗會好很多,點字也可以選到要選的東西
Dropdown menus
下拉式的選單下拉式選單
value屬性代表元素的值
15. 如何在網頁顯示標籤??
escape 跳脫
SEO search engine optimization
搜尋引擎優化og: open graph protocol
Open Graph Protocol
以HTML
的META
標籤定義,一般都放置在HTML
中的<HEAD>
標籤之下。META 標籤的格式如下:
網頁的 meta 標籤可以替網頁設定屬性的值。
Open Grap Protocol
定義了許多屬性,其中有幾個是必要的屬性,包含:🎄 如果需要確認網頁
Open Graph
的內容,可以使用 Facebook Debugger ;將網址貼入Debugger
後他便會把抓到的Open Graph Metadata
與縮圖顯示出來JSON-LD
JSON-LD
即是 JSON 格式的結構化資料,簡單來說就是在描述這個網頁的型態及內容🍄 Google 會去讀取網頁中這樣的結構化資料,並能針對不同的網頁型態做對應的搜尋結果呈現
JSON for Linking Data
目的讓你提供好的格式描述網頁,格式化的內容方便機器理解
🎄
robots.txt
給爬蟲看的檔案
🎄
sitemap.xml
網站地圖,讓搜尋引擎知道他可以爬哪些連結