week2.md - jenny126/wp109b GitHub Wiki
<a href="https://www.w3schools.com">Visit W3Schools</a><img src="img_girl.jpg">
<img src="https://www.w3schools.com/images/img_girl.jpg"width="500" height="600">
<img src="https://www.w3schools.com/images/img_girl.jpg"style="width:500px;height:600px;>
第二種寫法使用超連結，並調整大小 第三種寫法第二種寫法好 *個人覺得第三種的大小寫法和css較相似
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>https://www.w3schools.com/html/html_images_imagemap.asp
色碼(#000000)為兩個兩個一組(由左至右分別為R、G、B)，是以16進位的方式寫的
<p style="color:red;">This is a red paragraph.</p>*最好的方法是用css寫(之後會說)
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html><h2 title="I'm a header">The title Attribute</h2>
<p title="I'm a tooltip">Mouse over this paragraph, to display the title attribute as a tooltip.</p>游標放在內文或標題處會有附加框框 eg:https://www.w3schools.com/html/tryit.asp?filename=tryhtml_attributes_title
<h1 style="font-size:60px;">Heading 1</h1>
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p> 或中文全行的空白
<hr/><br><pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre><h1 style="text-align:center;">Centered Heading</h1>
<h1 style="text-align:left;">left</h1>
<h1 style="text-align:right;">right</h1><p><b>HTML</b>
<strong>contains</strong>
<i>several </i>
<em>elements</em>
<mark> for</mark>
<small>text </small>
<del>with </del>
<ins>aaaaaa</ins>
<sub>special</sub>
<sup> meaning.</sup></p>https://www.w3schools.com/html/html_formatting.asp
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p><p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p><address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address><p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p><bdo dir="rtl">This text will be written from right to left</bdo><!-- This is a comment -->
<p>This is a paragraph.</p><h1 style="border:2px Tomato solid;">Hello World</h1>
<h1 style="border:15px Violet solid;">Hello World</h1>
<h1 style="border: 12px skyblue dashed;">Hello World</h1>https://www.w3schools.com/html/html_css.asp
https://www.w3schools.com/css/css_boxmodel.asp
<a href="https://www.w3schools.com/" target="_self">Visit W3Schools!</a> <a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a> <a href="https://www.w3schools.com/" target="_parent">Visit W3Schools!</a> <a href="https://www.w3schools.com/" target="_top">Visit W3Schools!</a> <p><a href="/css/default.asp">CSS Tutorial</a></p><p><a href="/css/cd../default.asp">CSS Tutorial</a></p>- cd..可以返回上一步
- 上下兩種兩者相同(主要是了解cd..的用法)
- 補充:https://www.itread01.com/p/632662.html
- 主要是架網頁上為了便捷，因此相對路徑相當重要
http://www.pcnet.idv.tw/pcnet/html/11.htm
<tr> </tr><td> </td>https://www.w3schools.com/css/css_border_width.asp
table {
font-family: arial, sans-serif; <!-- 字體 -->
border-collapse: collapse; <!-- 讓框線變成一條，而不是兩條 -->
width: 100%; <!-- 寬度 -->
}
td, th {
border: 1px solid #dddddd; <!-- 線框 線的實虛(可見文字邊框處) 邊框顏色 -->
text-align: left; <!-- 文字置左(預設置中) -->
padding: 8px; <!-- 表格格寬 -->
}
tr:nth-child(even) { <!-- 偶數列 -->
background-color: #dddddd; <!-- 表格背景色 -->
}<li><ul> </ul><ol> </ol>*更詳細:http://www.pcnet.idv.tw/pcnet/html/06.htm
<div> </div><span> </span><input type=text><textarea>
</teatarea><select>
<option>A
<option>B
</select><select id="abc" name="ABC" multiple>
<option>A
<option>B
<option>C
<option>D
</select><input type=checkbox name=A> z
<input type=checkbox name=A> x
<input type=checkbox name=A> c<input type=radio name=B> a
<input type=radio name=B> s
<input type=radio name=B> d<input type=submit><input type=reset><input type=button><textarea name="message" rows="10" cols="30">
</textarea>可選擇也可編輯的選項
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>https://www.w3schools.com/html/html_form_input_types.asp
* <input type="button"> 按鈕
* <input type="checkbox"> 選擇框
* <input type="color"> 顏色
* <input type="date"> 日期
* <input type="datetime-local"> 日期時間
* <input type="email"> 電子郵件
* <input type="file"> 選檔案
* <input type="hidden"> 不顯示
* <input type="image"> 圖片
* <input type="month"> 月份
* <input type="number"> 數字
* <input type="password"> 密碼(*******)
* <input type="radio"> 多選一
* <input type="range"> 選範圍
* <input type="reset"> 重設
* <input type="search"> 搜尋
* <input type="submit"> 送出
* <input type="tel"> 電話
* <input type="text"> 文字
* <input type="time"> 時間
* <input type="url"> 網址
* <input type="week"> 星期- 提醒窗
onclick="alert('Hello World!')"eg:https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_button