<style>
.imp{
color:red;
}

</style>

# image iframe pre-code table form 之重點整理20200821
###### tags: `html`,`css`

## image
- alt 屬性代替文字，圖片連結失效時、出現的文字。
- title屬性為圖片標題，滑鼠移到圖片時顯示的文字 。
- img可使用相對與絕對路徑，但在做專題時盡量使用相對路徑(資料夾下)。
- 假圖打picsum即可叫出 (假文則是lorem，中文假文ctlorem)
- 跑馬燈，丙級一定考!   <marquee behavior="" direction="right"  ></marquee>

## 頁框iframe <font class="imp">重要!!</font>

<a href="info.html" target="showFrame">點連結會在name為showFrame的iframe視窗開啟href指定的info.html</a>  
<iframe src="main.html" frameborder="2" width="1200" height="500" name="showFrame"></iframe>

*會先顯現main.html的內頁，按下文字連結後，轉跳到info.html*

如何嵌入地圖或youtube，先到google map上找地標(youtube直接到要放置的影片上即可)，點擊分享>嵌入地圖>複製html>貼上>設定寬高。
## pre-code
顯示程式碼的結構 ，記得code外還要包pre!! 且若是html的結構則要注意特殊符號<>要用代碼替代

<pre> 
        <code> 
            var btn = document.querySelector('#btn') 
           btn.onclick = function(){ 
               setInterval(()=>{ 
                document.querySelector('#showtime').innerText = new Date().toLocaleString() 
                },50) 
           } 
        </code> 
</pre>

## table
- cellspacing 處存格之間的距離(格線間的距離)
- cellpadding 處存格自己的內距 (上下距離)
- tr是行 ，td是列
- table跟tr可以用align="center"使置中
- colspan 是合併欄位，左吃右，右消失， colspan="自己+加上吃掉的欄位數量"
- rowspan 是列合併，上至下，下消失，rowspan="自己+加上吃掉的欄位數量"
<iframe src="https://codepen.io/yc-wang/pen/JjXNErx?editors=1010"
width="900"
height="600"
frameborder="0"
style="border: 0;"
allowfullscreen=""
aria-hidden="false"
tabindex="0">
</iframe>

## form表單
<iframe src="https://codepen.io/yc-wang/pen/vYGmgaO"
width="800"
height="900"
frameborder="0"
style="border: 0;"
allowfullscreen=""
aria-hidden="false"
tabindex="0">
</iframe>

- [id與name的區別](https://avrilnote.pixnet.net/blog/post/1675769)

- [input各類型](https://www.w3schools.com/tags/att_input_type.asp)