📚 HTML Cheat Sheet

📚 HTML Cheat Sheet
Photo by Jackson Sophat / Unsplash

Document Structure

  • ! 然後 tab 快速鍵,快速產出骨架:

    <!DOCTYPE html>

Paragraph element p

<p>lorem ...</p>

Heading element h1, h2,..., h6

  • 只能有一個 H1
<h1>Taka's Blog</h1>


<!-- something -->

Void Element br 與 hr

<br />
<!-- 換行 -->
<hr />
<!-- 分隔線 -->

Lists ul 與 ol

Unordered List

  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>

Ordered List

    item 1
    item 2
    item 3

Emphasis em

  • 不要再使用 <i>lorem</i>

Bold strong


Superscript, Subscript sup sub

<sup></sup> <sub></sub>

Image image

  • alt 很重要
<img src="io.png" alt="something in the folder" />

The Anchor element - HTML: HyperText Markup Language | MDN

  • link to other elements,可以用 # link 到某一段落的 id
<a href="...">go to reddit</a>
<a href="contact.html">Contact</a>
<a href="#pets">My Pets</a>
<!-- link to section -->

<h2 id="pets">Pets</h2>

image anchor

<a href="https://example.com">
  <img src="[https://picsum.photos/400](https://picsum.photos/400)" alt="pig" />


<a href="contact.html" target="_blank">Contact</a>

Inline vs block elements

  • inline 不會換行
  • block elements 會佔滿整行,例如 heading elements


<form action="/register" method="get">
  <input type="text" name="any" placeholder="any" />
  <!-- text inputs -->

  <label for="your_name">Enter your name</label>
  <input type="text" name="name_input" id="your_name" />
  <!-- text inputs -->

  <button type="submit">Submit</button>
  <!-- button -->

  <input type="password" />
  <input type="email" />
  <input type="number" />
  <input type="color" />
  <input type="checkbox" name="subscribe" />
  <!-- 🔥 -->
  <input type="radio" />

range input

<input type="range" min="0" max="10" step="2" name="volumnvalue" />

text area

  • multiple line text input
<textarea rows="10" cols="10"></textarea>


<label for="pet_options">Select your pet</label>
<select name="pets" id="pet_options">
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>

radio button

  • 需要給 value 區分是哪個被選中
  • 若使用同樣的 name ,就可以 group radio button
<label for="phone">Call me</label>
<input type="radio" id="phone" ***name="contact" *** **value="phone" ** />

<label for="email">Email</label>
<input type="radio" id="email" ***name="contact" *** **value="email" ** />


  • <thead>
  • <tbody>
  • <tfoot>


Span and Divs