Document Structure

  • ! 然後 tab 快速鍵，快速產出骨架：

    <!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>

  <body>
    ....
  </body>
</html>

Paragraph element p

<p>lorem ...</p>

Heading element h1, h2,…, h6

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

Comments

<!-- something -->

Void Element br 與 hr

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

Lists ul 與 ol

Unordered List

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

Ordered List

<ol>
  <ol>
    item 1
  </ol>
  <ol>
    item 2
  </ol>
  <ol>
    item 3
  </ol>
  <ol></ol>
</ol>

Emphasis em

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

Bold strong

<strong>lorem</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>

target

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

Inline vs block elements

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

Forms

<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" />
</form>

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>

selects

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

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" ** />

Tables

  • <thead>
  • <tbody>
  • <tfoot>
<table>
  <thead>
    <tr>
      <th>col_1</th>
      <th>col_2</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>lorem</td>
      <td>lorem</td>
    </tr>
    <tr>
      <td>lorem</td>
      <td>lorem</td>
    </tr>
  </tbody>
</table>

Span and Divs