【html】認識常用標籤：一個網站基本上會建立的標籤與順序(網頁設計教學(一)之補充A)
一、前言
要寫網站html是根本，在我們上手bootstrap之前必須搞清楚有那些常用標籤。
這樣一來加上bootstrap我們寫前端就更得心應手了，應該不懂這些也沒辦法寫...
二、基本網站架構
來自wiki得簡單說明(簡單看一下看不懂沒差也正常)：
Flask是一個使用Python編寫的輕量級Web應用框架。基於Werkzeug WSGI工具箱和Jinja2模板引擎。Flask使用BSD授權。 Flask被稱為「微框架」，因為它使用簡單的核心，用擴充增加其他功能。Flask沒有預設使用的資料庫、表單驗證工具。然而，Flask保留了擴增的彈性，可以用Flask-extension[3]加入這些功能：ORM、表單驗證工具、檔案上傳、各種開放式身分驗證技術。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>放網站標籤(網站最上面出現的名字)</title>
(放其他一開始就需要被載入的東西)
</head>
<body>
放網站內容
(各種東西都可以放在這裡)
<script type="text/javascript">
(大家習慣把js要直接在網頁執行的部分放在body尾巴)
</script>
</body>
</html>
三、常用標籤
帶大家看一下常用標籤，這些太常用一定要記下來，另外標籤內的屬性可以參考http://web.thu.edu.tw/hzed/www/tag.htm清楚明瞭!
<!-- 區塊 -->
<div>
放啥都可以文字、元素圖片
</div>
<!-- 標題文字(比較大的字) -->
<h1>h1標題<h1>
<h2>h2標題<h2>
<h3>h3標題<h3>
<h4>h4標題<h4>
<h5>h5標題<h5>
<h6>h6標題<h6>
<!-- 段落文字 -->
<p>段落文字</p>
<!-- 圖片 -->
<img src="hi.jpg" alt="hi" height="100" width="100">
<!-- 超連結 -->
<!-- target="_blank"是新開分頁 -->
<a href="https://pixnashpython.pixnet.net/blog" target="_blank">要連結的部分</a>
<!-- 清單ol有順序 ul無順序 -->
<ol>
<li>第1個</li>
<li>第2個</li>
<li>第3個</li>
</ol>
<ul>
<li>第1個</li>
<li>第2個</li>
<li>第3個</li>
</ul>
<!-- br空行 -->
<br>
<!-- 註解 -->
<!-- 填入你的註解-->
<!-- 行內元素 -->
<!-- 在同段落中可以清楚分割指定style或其他 -->
<p>恩哥好帥，<span style="background-color:#F9D9CA;">我說真的!</span>恩哥超帥</p>
1.區塊
<div>
放啥都可以文字、元素圖片
</div>
2.標題
<h1>h1標題<h1>
<h2>h2標題<h2>
<h3>h3標題<h3>
<h4>h4標題<h4>
<h5>h5標題<h5>
<h6>h6標題<h6>
3.段落
<p>段落文字</p>
4.圖片
<img src="hi.jpg" alt="hi" height="100" width="100">
5.超連結
<!-- target="_blank"是新開分頁 -->
<a href="https://pixnashpython.pixnet.net/blog" target="_blank">要連結的部分</a>
6.清單
<ol>
<li>第1個</li>
<li>第2個</li>
<li>第3個</li>
</ol>
<ul>
<li>第1個</li>
<li>第2個</li>
<li>第3個</li>
</ul>
7.空行
<br>
8.註解
<!-- 填入你的註解-->
9.行內
在同段落中可以清楚分割指定style或其他
<p>恩哥好帥，<span style="background-color:#F9D9CA;">我說真的!</span>恩哥超帥</p>
四、其他常看到標籤
另外在網站中也很常看他們，也務必要記下來!
<nav>導覽列等 <main>主要部分 <section>分割大區塊 <aside>側邊欄 <footer>頁尾<!-- 記得都要</標籤名> 收尾喔 -->
五、後記
第一步踏出來就是這麼簡單，歡迎大家支持恩哥Python，你的鼓勵跟打賞是我撰寫文章的原動力!
留言列表
【Python量化資料】 (3)
