主題
Introduction to Responsive Web Development with HTML and CSS -U2 - HTML structure
---
(這是用Markdown寫的文章,可以全選複製貼到 https://dillinger.io 左側,就能看到正常渲染畫面)
---
06/12/2021 18:45
## U2 - HTML structure
---
### HTML tags and attributes
HTML 用 tag 語法表示 HTML element
例如. <p> This is a paragraph. </p>
使用一個opening tag 和 closing tag包住
<br>裡面沒有包東西,只是 line break
這是錯的(x)==> <br></br>
只需要用<br>即可分行
HTML 可以有任意個 attributes
注意 HTML attributes 的 "=" 和後面的 attribute element 沒有空格,例如
```
<p class="ejemplo" id="principal"> This is an example. </p>
```
===
### text tag
標題 heading 使用 h1,h2,h3,h4,h5 標籤
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
以下字體標籤都可以用CSS來表現即可
<em>斜體</em>
<strong>bold粗體</strong>
<span>包裹行內</span>
span 標籤 (tag) 是用來當作容器 (container) 包裹文字 (text) 或其他行內 (inline) 的 HTML, 方便給 CSS 做樣式排版或給 javascript 做互動操作, span 本身沒特殊意義也不帶有標籤語意
===
### Images and links
插圖使用 <img> 標籤
<img> (image) 標籤沒有 closing tag, 直接把要包含的圖片透過 **src** (source) 這個 attribute 帶入圖片所在的 path,使用相對於目前所在的html檔的資料夾的相對路徑,"../"表示上一層資料夾的意思,使用 **alt** (alternative) attribute 則可以把描述圖片的文字標注,若圖片讀不到或是盲人可以透過這個 alt 標注理解圖片內容
```
<img src="../images/image,jpg" alt="Bill Murry">
```
超連結使用 <a> 標籤
```
<a href="pages/Cage.html">
```
使用 id 這個 attribute , 網頁直接跳到 id 所在的 element 位置, 而不是另一個超連結頁面
```
<a href="#contact">Contact<a>
<h3 id="contact">Robot 44</h3>
```
===
### Block labels
Block 標籤
<div> 沒有語意意義,把內容包成一個 block 區塊
```
<div class="destacado">
<h1>Titular</h1>
<p>Contenido</p>
</div>
```
list 標籤
<ul> (unordered list)
<ol> (ordered list)
<li> (listing item)
```
<ul>
<li><a href="...">Inicio</a></li>
<li><a href="...">Productos</a></li>
<li><a href="...">Blog</a></li>
<li><a href="...">Contacto</a></li>
</ul>
<ol>
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
</ol>
```
===
### Document labels
html 主要架構
```
<!DOCTYPE html>
<html>
<head> <title></title></head
<body> </body>
</html>
```
正確顯示特殊符號,指定編碼使用 meta 標籤
```
<meta charset="utf8">
```
註釋標籤 <!-- -->
<!-- Comment -->
---
- 練習資料丟在"~/Documents/Domestika網路課程_Introduction to Responsive Web Development with HTML and CSS"
