django girls 2015 - html
TRANSCRIPT
Django Girls 2015 HTML
Randy Lien
HyperText Markup Language
超⽂文字標注語聽起來好像很厲害
HTML
結構
<div class='sidebar'> <ul class='menu-‐list'> <li class='menu-‐item'>Home</li> <li class='menu-‐item'>Profile</li> <li class='menu-‐item'>Facebook</li>
</ul> </div> <div class='content'> <h1 class='article-‐title'>Title</h1> <h2>Tagname</h2> <p>................</p> </div>
<div class='sidebar'> <ul class='menu-‐list'> <li class='menu-‐item'>Home</li> <li class='menu-‐item'>Profile</li> <li class='menu-‐item'>Facebook</li>
</ul> </div> <div class='content'> <h1 class='article-‐title'>Title</h1> <h2>Tagname</h2> <p>................</p> </div>
Tags
HTML
HTML
CSSJavaScript
JavaScript
CSS
JavaScript
互動⾏行為
HTML
結構
CSS
視覺呈現
<!DOCTYPE html> <html> <head> <title>我的旅⾏行⽇日誌</title> <style> body { background-‐color: lightyellow; } em { color: LightSeaGreen; } </style> </head> <body> <h1>Hello World!</h1> <em>歡迎來到我的旅⾏行⽇日誌</em> </body> </html>
<h1>Header 1</h1><h2>Header 2</h2><h3>Header 3</h3><h4>Header 4</h4><h5>Header 5</h5><h6>Header 6</h6><p>Paragraph.</p>
⽂文字類型的標籤
<h1>旅⾏行與我</h1> <h2>什麼是旅⾏行呢?</h2> <p>I <em>love</em> traveling!</p> <p>旅⾏行就像是⼀一段⼈人⽣生的⼩小旅程的縮影，妳不知道 妳會碰⾒見誰，你不知道會往那裡⾛走。</p>
<h2>喜歡那個國家呢?</h2> <p><strong>⻄西班⽛牙!!!</strong>那裡是⼀一個夢 幻的國度，有美⻝⾷食，午覺，跟藝術。</p>
旅⾏行與我
什麼是旅⾏行呢?
I love traveling!
旅⾏行就像是⼀一段⼈人⽣生的⼩小旅程的縮影，妳不知道妳會碰⾒見誰，你不知道會往那裡⾛走。
喜歡那個國家呢?
⻄西班⽛牙!!!那裡是⼀一個夢幻的國度，有美⻝⾷食，午覺，跟藝術。
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>
• Item 1 • Item 2 • Item 3
1. Item 1 2. Item 2 3. Item 3
<a name='like' href='/like/' rel='like'> Like </a>
Like
<h2>⻄西班⽛牙</h2> <p>⻄西班⽛牙⺠民⾵風奔放熱情，當地⼈人喜愛⾾鬥⽜牛， 並且勢衷跳弗拉明⼽戈舞。同時也是吉他之鄉， 近代古典吉他就發源並興盛⾃自⻄西班⽛牙。</p>
<h2>義⼤大利</h2> <p>義⼤大利⺫⽬目前擁有 44 處世界遺產，也是世 界上擁有最多世界遺產的國家。義⼤大利全國估 計有 100,000 個任何形式的紀念物。</p>
<div><h2>⻄西班⽛牙</h2> <p>⻄西班⽛牙⺠民⾵風奔放熱情，當地⼈人喜愛⾾鬥⽜牛， 並且勢衷跳弗拉明⼽戈舞。同時也是吉他之鄉， 近代古典吉他就發源並興盛⾃自⻄西班⽛牙。</p> </div>
<div><h2>義⼤大利</h2> <p>義⼤大利⺫⽬目前擁有 44 處世界遺產，也是世 界上擁有最多世界遺產的國家。義⼤大利全國估 計有 100,000 個任何形式的紀念物。</p> </div>
<h2>⻄西班⽛牙</h2> <p>⻄西班⽛牙⺠民⾵風奔放熱情，當地⼈人喜愛⾾鬥⽜牛， 並且勢衷跳弗拉明⼽戈舞。同時也是吉他之鄉， 近代古典吉他就發源並興盛⾃自⻄西班⽛牙。</p>
<p><span>⻄西班⽛牙</span>⺠民⾵風奔放熱情，當地⼈人喜愛⾾鬥⽜牛，並且熱衷跳 <span>弗拉明⼽戈舞</span>。同時也 是<span>吉他</span>之鄉，近代古 典吉他就發源並興盛⾃自⻄西班⽛牙。</p>
<div class='sidebar'> <ul class='menu-list'> <li class='menu-item'>Home</li> <li class='menu-item'>Profile</li> <li class='menu-item'>Facebook</li> </ul> </div> <div class='content'> <h1 class='article-title'>Title</h1> <h2>Tagname</h2> <p>................</p> </div>
fin