HTML學習筆記，附有自己的註釋
<!doctype html>
<html>
<head>
<title>Lin's First Webpage</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div> <!-- 分隔標記，分割爲獨立，不同的部分 -->
<a name="top"/> <!-- 設定一個標籤，當最下面的超鏈接引用這個標籤時可以返回頂部 -->
<h1>This is huge header</h1>
<h2>This one's a littler smaller</h2>
<h3>And smaller still...</h3>
<h4>And so on</h4>
<h5>And on</h5>
<h6>Do you really want to go smaller than this</h6> <!--h只能1-6-->
<p>My first line goes here.<br /> line break !! </p> <!--段落格式<p>...</p>. <br /> 換行內容 ！！換行，br=break-->
<hr /> <!-- hr=horizontal 水平，添加一條水平線 -->
<p>A second line here</p> <!-- p=Paragraph段落 -->
<p>This is <strong>a bold</strong> text. This word will be in <em>italics</em>. <!-- <strong>...</strong> 變粗體，<em>...</em>變斜體 -->
I want this <u>word</u> to be underline. <strike>This is line is wrong</strike></p> <!-- <u>...</u> 加下劃線，<strike>...</strike> 文字劃橫線 -->
<h2>My favourite foods</h2>
<ul> <!-- ul=unordered list 無序列表-->
<li>Pizza</li> <!-- li=list 內容-->
<li>Chocolate</li>
<li>Curry</li>
</ul>
<h2>My favourite times of day</h2>
<ol> <!-- ol=ordered list 有序列表-->
<li>Morning</li>
<li>Bed time</li>
<li>Dinner time</li>
</ol>
<img src="image/a.jpg" width="50" height="50" /> <!-- 添加本地圖片 --> <!-- img=image 圖片，src=source 來源 -->
<!-- 添加網絡圖片 -->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523267076478&di=c5a41c85118394376b453dcdb0ad1f86&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ftransform%2F20150518%2FA-19-cpkqeaz4644050.jpg"
width="50" height="50" /> <!-- 設定寬度和高度 width="x" height="x" -->
<form> <!-- <form>...</form> 添加表單 -->
<input type="email" placeholder="Please input your email address..."/> <!--添加輸入框, type="..." 輸入的類型，placeholder 佔位符-->
<br><br>
<textarea></textarea> <!-- <textarea></textarea> 文本編輯框 -->
<br></br>
<select> <!-- <select>...</select> 添加選項框 -->
<option>請選擇...</option> <!-- <option>...</option> 選項內容 -->
<option>第一項</option>
<option>第二項</option>
<option>第三項</option>
</select>
<br></br>
<input type="radio" name="color" /> 紅色 <!-- type="radio" 單選類型 當name相同時只能選取一個-->
<input type="radio" name="color" /> 藍色
<input type="radio" name="color" /> 黃色
<br><br>
<input type="checkbox" name="dog" /> 狗 <!-- type="checkbox" 多選類型 name不能相同-->
<input type="checkbox" name="cat" /> 貓
<input type="checkbox" name="fish" /> 魚
<br><br>
<input type="submit" value="提交"/> <!-- type="submit" 提交按鈕 value="..." 可以修改按鈕裏面的內容-->
</form>
<p><a href="http://www.baidu.com" >Baidu</a></p> <!-- href=Hyperlink reference超級鏈接參照 <a href="網址">顯示的超鏈接名字</a> 外網超鏈接 -->
<p><a href="helloworld.html" >Hello World</a></p> <!-- 本地超鏈接 -->
<p><a href="#top" >Back to top</a></p> <!-- 在最上面設定top標籤代碼，使用超鏈接可以返回頂部，<a name="top"/>，href="#top" #top表示引用這個top標籤 -->
<table> <!-- <table>...</table> 添加表格 -->
<tr><th>Names</th><th>Age</th><th>Gender</th></tr> <!-- tr=TableRow 表格行 th=TableHead 表格頭-->
<tr><td>Lin</td><td>28</td><td>Male</td></tr> <!-- td=TableDetail 表格內容 -->
<tr><td>Linda</td><td>25</td><td>Female</td></tr>
</table>
<iframe src="helloworld.html"></iframe> <!-- frame 有相框，邊框的意思 --> <!-- 本地鏈接 -->
<iframe height=498 width=510 src='http://player.youku.com/embed/XMzUyMzk3OTk4NA==' frameborder=0 'allowfullscreen'></iframe> <!-- 網絡鏈接 -->
</div>
</body>
</html>
