# HTML標籤與屬性 黃安聖 請透過此網址進入講義： https://enn.design/html ###### tags: `HTML RWD Bootstrap 基礎課程`, `CSS` ---- ### 取得練習檔案 https://github.com/andy19910102/html-basic-examples ---- ## 圖片 圖片用img標籤 ```html <img src="網址" alt="替代文字"> ``` ---- ## 超連結 將網頁串連在一起，用超連結 ```html <a href="https://網址">連結名稱</a> ``` ---- ### div Document Division，用來表達一個==區塊==。 例如：導覽列、邊欄、文章...。 ---- [](https://www.airbnb.com/) ---- ### span span是一種行內元素，常用於一段文字內的局部內容強調 如：特別的強調、小圖示 <iframe height='300' scrolling='no' title='Span簡單範例' src='//codepen.io/andy19910102/embed/OwQKVg/?height=300&theme-id=27093&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/andy19910102/pen/OwQKVg/'>Span簡單範例</a> by An-Sheng Huang (<a href='https://codepen.io/andy19910102'>@andy19910102</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> ---- span應用範例，於標價與強調字上 <iframe height='300' scrolling='no' title='Span Example' src='//codepen.io/andy19910102/embed/mWrZgr/?height=300&theme-id=27093&default-tab=css,result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/andy19910102/pen/mWrZgr/'>Span Example</a> by An-Sheng Huang (<a href='http://codepen.io/andy19910102'>@andy19910102</a>) on <a href='http://codepen.io'>CodePen</a>. </iframe> ---- ## 表單 <img src="http://i.imgur.com/2bKrwQG.jpg" alt="form" height="250px"> ---- ### form ```htmlmixed= <form action="form_action.asp" method="post"> <label for="myEmail">帳號</label> <input type="email" id="myEmail"> <label for="myPassword">密碼</label> <input type="password" id="myPassword"> <input type="submit" value="Submit"> </form> ``` form用來創建使用者輸入的表單，裡頭可包含多個input標籤。 ---- ### 文字輸入 ---- ` <input type="text"> ` 這是一個文字輸入框 ---- ` <input type="text" required> ` 加上required代表必填 ---- ```htmlmixed= <input type="text" placeholder="Your first name"> ``` 當沒有內容填寫時，輸入框將顯示placeholder的值 ---- 表單應用 <iframe height='300' scrolling='no' title='form範例' src='//codepen.io/andy19910102/embed/EZYYPB/?height=300&theme-id=27093&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/andy19910102/pen/EZYYPB/'>form範例</a> by An-Sheng Huang (<a href='http://codepen.io/andy19910102'>@andy19910102</a>) on <a href='http://codepen.io'>CodePen</a>. </iframe> ---- # HTML5 基礎認識 ---- |標籤名稱|用途| |---|---| |header|網頁主圖、大標題或主要資訊 |nav|網頁的選單 |article|作為一個獨立完整的文章 |section|作為章節或一個區塊 |footer|置底，通常放置聯絡資訊與著作權聲明 ---- <img src="https://i.imgur.com/UAiGV8y.jpg" height="600" alt="nav"> ---- <img src="https://i.imgur.com/SxMnSKD.jpg" height="600" alt="header"> ---- <img src="https://i.imgur.com/UASMasX.jpg" height="600" alt="section1"> ---- <img src="https://i.imgur.com/U6iVpyh.jpg" height="600" alt="section2"> ---- <img src="https://i.imgur.com/G8rPcvn.jpg" height="600" alt="footer"> ---- <img src="https://i.imgur.com/ZdnVAJj.jpg" height="600" alt="article"> ---- ### video ```htmlmixed= <video width="320" height="240"> <source src="movie.mp4" type="video/mp4"> </video> ``` W3school video[範例](http://www.w3schools.com/TAGs/tryit.asp?filename=tryhtml5_video) ---- ## 前往 CSS 語法與屬性 https://enn.design/css