<!DOCTYPE html>
<html lang="en-US"><!-- try lang="jp" -->
<head>
<title>test</title><!-- 試著將此頁加入書籤，可看到名稱即為title內文字 -->
<meta charset="UTF-8"><!-- try charset="ISO-8859-1" for Latin alphabet -->
<meta name="author" content="Shawn Huang">
<meta name="keywords" content="HTML,Tutorial"><!-- 搜尋引擎搜尋關鍵字使用 -->
<meta name="description" content="HTML Tutorial"><!-- 搜尋引擎搜尋內容使用 -->
<link rel="shortcut icon" href="h.png" type="image/x-icon"><!-- title圖片 -->
<link type="text/css" rel="stylesheet" href = "tempcss.css">
</head>
<body></body>
</html>
HTML Introduction
- HTML是用於設計網頁內容的語言，由tag組成
htmll_1.html
<!--這個是註解--> <html> <head> <title>HTML1</title> </head> <body> </body> </html>
- html,head,body在新版的瀏覽器中號稱可以省略。
head section
標題
- 用來寫標題的tag，定義標籤元素為h1~h6，寫在body內
<h1>這是heading 1</h1> <h2>這是heading 2</h2> <h3>這是heading 3</h3> <h4>這是heading 4</h4> <h5>這是heading 5</h5> <h6>這是heading 6</h6>
段落與分隔
- 分隔文字所使用
<hr> <p>這是段落一<br>的內容</p> <p>這是段落二<br>的內容</p> <pre> pre保存固定寬度與字型 字距與行寬 </pre> <p>q用在較短的引用:<q>時間就是金錢</q></p> blockquote用來寫整段或較長引用的，例如Solving the Feeder Vehicle Routing Problem using ant colony optimization的摘要如下: <blockquote> This paper studies the Feeder Vehicle Routing Problem (FVRP), a new variant of the vehicle routing problem (VRP), in which each customer is served by either a large (truck) or a small vehicle (motorcycle). In this particular type of delivery, the trucks and the motorcycles must depart from the depot, visit the customers, and eventually return to the depot. During the delivery process, the motorcycles travel to the truck locations for reloading. The ant colony optimization (ACO) algorithm is employed for solving the problem with the objective of determining the number of dispatching sub-fleets and optimal routes to minimize the total cost (fixed route and travel costs). Three benchmark datasets are generated to examine the performance of the FVPR. For comparison purposes, all instances are executed by dispatching only trucks as in the traditional VRP and a four-stage hierarchical heuristic. Additionally, ACO is compared to optimal solutions for small instances. The results indicate that the proposed ACO algorithm yields promising solutions particularly for large instances within a reasonable time frame in an efficient manner. </blockquote>
- p:paragraph, pre: preserve。
- br:break, hr:horizon。
- q:短引用, blockquote:長引用。
格式化文字
- 改變文字格式
Normal text<br> <b>Bold text</b><br> <strong>Important text</strong><br> <i>Italic text</i><br> <em>Emphasized text</em><br> <mark>Marked text</mark><br> <small>Small text</small><br> <del>Deleted text</del><br> <s>Deleted text</s><br> <ins>Inserted text</ins><br> Subscript <sub>text</sub><br> Superscript <sup>text</sup><br> <abbr title="National Kaohsiung University of Science and Technology">NKUST</abbr><br> <bdo dir='rtl'>from right to left</bdo><br> <ruby> 網<rt>ㄨㄤˇ</rt>路<rt><rp><rt></rp>ㄌㄨˋ<rp></rt></rp></rt> </ruby><br> <ruby> 贆<rt>ㄅㄧㄠ</rt>驫<rt>ㄅㄧㄠ</rt>猋<rt>ㄅㄧㄠ</rt>飙<rt>ㄅㄧㄠ</rt>颷<rt>ㄅㄧㄠ</rt>飈<rt>ㄅㄧㄠ</rt>飍<rt>�'ㄧㄡ</rt> </ruby>
- b, strong, i, em, mark, small, del, s, ins, sub, sup >> 亦可使用CSS中之text-decoration、font-size等方式達成。
- abbr解釋某名詞的縮寫。
- bdo可修改文字方向，可為ltr或rtl。
- ruby用在需要解釋的文字，例如注音或是日文。rt顯示解釋的內容，rp用在不支援ruby的瀏覽器中的顯示。可在word內之常用找到標註注音之功能。
連結
- 網頁連結
<a href="http://www.nkust.edu.tw">NKUST</a><br> <a href="../index.html" target="_blank">回首頁</a>
- 可以連結到網際網路或是區域檔案，按右鍵可以決定是否在新視窗開啟。
- href稱為a元素屬性，可以加上target="_blank"屬性在新視窗開啟。
編號與未編號項目
- 用來列舉項目
<ol> <li>Toyota</li> <li>Nissan</li> <li>Mitsubishi</li> </ol> <ul> <li>Benz</li> <li>BMW</li> <li>Ferrari</li> </ul> <dl> <dt>Toyota</dt> <dd>Camry</dd> <dd>Vios</dd> <dt>Mitsubishi</dt> <dd>Lancer</dd> <dd>Altis</dd> </dl>
- ol:ordered list, ul:unordered list, 都是用li來表示項目
- dl,dt,dd可形成結構式列表
區塊
- 在頁面的區塊，可用來分隔頁面
<dialog open>這是一個open dialog box</dialog> <div style="border:1px solid;"> <p>p在div內，<span style="color:red;">span</span>是指單行區塊</p> <textarea rows=3 cols=50> 這裡面的文字會顯示原貌，例如: <b>是否為粗體</b> rows, cols為textarea的屬性 </textarea> </div> <center> <iframe src = "http://www2.nkfust.edu.tw/~translab" height='200' width='80%'><iframe> </center>
- dialog, div, textarea, iframe。
- dialog定義一個box，會出現在標籤位置，
- p可在div內，但勿將div置於p內，因為div是區塊，p只是文字段落
- div內可以有其他div，可形成巢狀結構
- span是單行的區塊，style在CSS中再詳加介紹
- textrea內的文字不受影響，rows, cols為屬性
- iframe定義一個視窗來顯示其他網頁
HTML Introduction 2
Header & Footer
- 設計標頭跟標尾
html2_1.html
<!--Header--> <center> <header style="border:1px solid blue"> <h1>Super Heros</h1><br> <i>all you can image -- strengh, speed, magic</i> </header> </center> <br>這裡是本文內容 <!--Footer--> <footer style="border:1px solid green"> ©2019 by ooxx<br> <address> contact us:ooxx@nkust.edu.tw<br> address:第一校區 82445高雄市燕巢區大學路1號 </address> </footer>
- 通常將Header&Footer置於body內，兩者之間放置內容。
- 使用address來定義聯繫資訊，會顯示斜體，也可置於其他區塊，例如article。
更多區塊
- 介紹Section&Artical與nav
<section> <nav> <center> <a href="#superman">Superman</a> <a href="#batman">Batman</a> <a href="#aquaman">Aquaman</a></center> </nav> <br> <article style="border:1px solid orange" id="superman"> <header> <center><h3>Superman</h3> <small>Clark Kent</small></center> </header> <br> <p> Superman was born on the planet Krypton and named Kal-El... </article> <br> <article style="border:1px solid orange" id="batman"> <header> <center><h3>Batman</h3> <small>Bruce Wayne</small></center> </header> <br> <p> Batman is a fictional superhero appearing in American comic books published by DC Comics... </article> <br> <article style="border:1px solid orange" id="aquaman"> <header> <center><h3>Aquaman</h3> <small>Arthur Curry</small></center> </header> <br> <p> Aquaman is a fictional character appearing in American comic books published by DC Comics... </article> </section>
- nav原則上是用於列舉瀏覽目錄(navigation links)。
- 在a的href內加上#targetid，然後讓target的id等於targetid，如此可做為同頁連結。
- section跟div作用類似，都是一個區塊，不過section通常有個主題，或有標題，可使用div達到相同效果。
- article表示一個文章的區塊，在內包含p可以分段。
Details & Summary
- 使用details&summary來增加詳細資訊，可收縮伸展
<details> <summary> About aquaman film(2018): </summary> <article> <p> Aquaman is a 2018 American superhero film based on the DC Comics character of the same name, and distributed by Warner Bros... </p><p> Development of an Aquaman film began in 2004, with several plans falling through over the years... </p> </article> </details>
- 將此架構加入到aquaman的article內。
- summary搭配details使用。
Table
- 建立表格的相關tag
<table> <caption>Other heros</caption> <tr> <th>Hero</th> <th>Name</th> <th>Species</th> </tr> <tr> <td>Spiderman</td> <td>Peter Parker</td> <td>Human mutate</td> </tr> <tr> <td>Ironman</td> <td>Tony Stark</td> <td>Human</td> </tr> </table>
- 使用table, tr, td建立表格，可以選擇加上caption與th。
- 跨列table
<table style="border:1px solid blue"> <caption>跨列的table</caption> <tr> <th style="border:1px solid red">Hero</th> <th style="border:1px solid red">Name</th> <th style="border:1px solid red">Species</th> <th colspan=2 style="border:1px solid red">Abilities</th> </tr> <tr> <td style="border:1px solid purple">Spiderman</td> <td style="border:1px solid purple">Peter Parker</td> <td style="border:1px solid purple">Human mutate</td> <td style="border:1px solid purple">Genius-level intellect</td> <td style="border:1px solid purple">Proficient scientist and inventor</td> </tr> <tr> <td style="border:1px solid purple">Ironman</td> <td style="border:1px solid purple">Tony Stark</td> <td style="border:1px solid purple">Human</td> <td style="border:1px solid purple">Genius-level intellect</td> <td style="border:1px solid purple">Proficient scientist and engineer</td> </tr> </table>
- 使用colspan=2來跨兩個column，此處將所有邊界繪出以方便看出布置。
- 跨行table
<table style="border:1px solid blue"> <caption>跨行的table</caption> <tr> <th style="border:1px solid red">Hero</th> <th style="border:1px solid red">Name</th> <th style="border:1px solid red">Species</th> <th colspan=2 style="border:1px solid red">Abilities</th> </tr> <tr> <th style="border:1px solid purple">Spiderman</th> <td style="border:1px solid purple">Peter Parker</td> <td style="border:1px solid purple">Human mutate</td> <td style="border:1px solid purple">Genius-level intellect</td> <td style="border:1px solid purple">Proficient scientist and inventor</td> </tr> <tr> <th style="border:1px solid purple">Ironman</th> <td style="border:1px solid purple">Tony Stark</td> <td style="border:1px solid purple">Human</td> <td style="border:1px solid purple">Genius-level intellect</td> <td style="border:1px solid purple">Proficient scientist and engineer</td> </tr> <tr> <th style="border:1px solid purple" rowspan=2>Hulk</th> <td style="border:1px solid purple">Bruce Banner</td> <td style="border:1px solid purple">Human</td> <td style="border:1px solid purple">Superhuman Strength</td> <td style="border:1px solid purple">Superhuman Speed</td> </tr> <tr> <td style="border:1px solid purple">布魯斯</td> <td style="border:1px solid purple">人類</td> <td style="border:1px solid purple">超人力量</td> <td style="border:1px solid purple">超人速度</td> </tr> </table>
- 使用rowspan=2來跨兩個row，此處將所有邊界繪出以方便看出布置。
- table雖可用來做layout，但應盡量避免。
- 可使用thead、tbody、tfoot標籤來group table的內容。
圖片與影像
- 此處介紹圖片與影像的用法
Img
- 使用img標籤來加入圖片
html3_1.html
<section> <img src="Superman.png" align='right' alt="超人照片"> <article> <p> <cite>Superman</cite> was born on the planet Krypton and named Kal-El... </p> </article> </section>
- cite用來定義某成果(book,movie,song,painting,etc)的名稱，原則上就是斜體。
- 使用img搭配src屬性來加入圖片，圖片可以是網路上或是已下載之檔案，只要給定路徑即可。
- 若加上alt屬性可於照片未能正常顯示時出現文字說明。
- 若加上align屬性可形成文繞圖，可能參數有middle, bottom, right, left。在CSS中使用float來達到類似效果。
- 圖片作為背景
<body background="background1.jpg"> <div style="background-image: url(background.jpg);"> Siegel and Shuster shifted to making comic strips, with a focus on adventure and comedy stories. They wanted to become syndicated newspaper strip authors, so they showed their ideas to various newspaper editors. However, the editors told them that their ideas weren't sensational enough; if they wanted to make a successful comic strip, it had to be something more sensational than anything else on the market. This prompted Siegel to revisit Superman as a comic strip character. He modified Superman's powers to make him even more sensational. The second prototype of Superman is also given powers against his will by an unscrupulous scientist, but instead of psychic abilities, he acquires superhuman strength and bullet-proof skin. Additionally, this new Superman was a crime-fighting hero instead of a selfish villain, because Siegel noted that comic strips with heroic protagonists tended to be more successful. In later years, Siegel recalled that this Superman wore a "bat-like" cape in some panels, but typically he and Shuster agreed that there was no costume yet, and there is none apparent in the surviving artwork. </div>
- 在body中使用background=""來加入背景。使用CSS代替此方法。
- 在區塊中使用style="background-image: url(background.jpg);來給予背景圖。
Area
- 在圖片上分割出數個區塊
<section> <figure> <img src="img1.jpg" width="1024" height="700" usemap="#img1"> </figure> <figcaption>img1.jpg</figcaption> <map name="img1"> <area shape="rect" coords="0,0,300,300" href="http://www.yahoo.com"> <area shape="circle" coords="600,300,200" href="http://www.google.com"> <area shape="poly" coords="0,500,0,800,150,800,250,650,350,600,0,500" href="http://www.nkust.edu.tw"> </map> <article> To define an area inside an image </article> </section>
- 先建立一個img，須給定屬性usemap="#name"，使用width,height改變大小，此部分會在CSS中詳加介紹。此外，使用figure來建立一個容納圖片的區塊，而figcaption是figure的caption。
- 使用map及name屬性連結usemap屬性，在其中使用area定義區域。可使用不同的shape，如rect、circle、poly等，使用coords給定座標，加上href使該area成為連結。
picture
- 使用picture來容納img，img需為其最後一個tag，適合用在響應式網頁( responsive designs)。
<picture> <source media="(min-width:1200px)" srcset="Superman.png"> <source media="(min-width:750px)" srcset="background.jpg"> <img src = "img1.jpg" style="width:auto;"> </picture>
- 其中包含不同的source，media內的數值的意思是例如最小寬度為1200px時，使用Superman這個圖，當小於1200px且大於750px時，使用background這個圖，小於750px時則使用img1。所以當縮放視窗大小時圖會隨著改變。
Audio
- 增加Audio在網頁
<audio controls> <source src="sadmessage.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio>
- 使用audio標籤，controls表示會出現控制列。若是controls loop則表示會重複撥放。
- source表示audio的來源，可用於mp3或ogg檔。
Video
- 增加Audio在網頁
<video height=600 width=600 controls loop> <source src="The way we were.mp4" type="audio/mp4"> Your browser does not support the video tag. </video>
- 使用video標籤，controls表示會出現控制列。若是controls loop則表示會重複撥放。
- 可使用width與height屬性來控制寬高。
- source表示video的來源，可用於mp4或ogg檔。可將檔案下載至本機，或是給定路徑(若是來源有變動連結會失效)。
- 若是例如youtube上的video，可下載然後轉成mp4，或是直接在影片上點右鍵複製嵌入程式碼家在自己的網頁，請尊重智慧財產權。
Form
- 設計各式表單，多項表單元件可於學習後端程式(e.g. php)或JS再學，才有作用。
- 屬性簡介:
- : value指初始值。
- : readonly指輸入處為read only。
- : disabled指輸入不能使用不能點擊且資料不會回傳。
- : size指input field(type=text)的顯示長度。
- : maxlength指input field的輸入內容之最大容許長度。
- : autofocus指該表單在頁面一開始便得到focus。
- : width&height在使用image時控制圖案大小。
- : min&max用來控制input內的值之大小範圍(適用於number、range、date、datetime-local、month、time、week)。
- : multiple指在input可以輸入超過一個值(適用於email、file)。
- : required指該欄位必須填寫(適用於email、text、search、url、tel、password、date pickers、number、checkbox、radio、file)。
- : step表示步幅(適用於number、range、date、datetime-local、month、time、week)。
Button
- 按鈕
html4_1.html
<nav><center> <a href="html1_1.html"><button type='button'>html1</button></a> <a href="html2_1.html"><button type='button'>html2</button></a> <a href="html3_1.html"><button type='button'>html3</button></a> </center></nav>
- 使用button設計一個按鈕，可以置於a內成為連結。上例將nav的連結都做成button。
Form
- 建立表單
<form> First name:<input type='text' name='firstname' value='Clark'><br> Last name: <input type='text' name='lastname' value='Kent'><br> Tel: <input type='tel' name='tel'><br> Homepage: <input type='url' name='homepage' size=50><br> Email: <input type='email' name='email'><br> Password: <input type='password' name='password'><br> <input type='submit' value='submit'> <input type='reset' value='reset'> </form>
- 使用Form建立表單，在其中加入input並註明屬性type，即可得到不同的元件。
- value為元件的預設顯示文字，輸入後的資料在後端(伺服器)處處理。
- type是text為輸入列，若是tel則為輸入電話號碼處，若是url則為輸入網址處(使用size屬性控制長度)，若是email則為輸入email處，若是password為密碼，無法看到輸入內容。
- 按鈕的type可以為submit、button、或reset。與上述的button略有不同，例如button可以含有html元件像是圖片。
<button type='button'><img src="superman.png"></button>
Radio Button
- 建立Radio Button
<form> <input type='radio' name='hero' value='superman' checked> Superman<br> <input type='radio' name='hero' value='batman'> Batman<br> <input type='radio' name='hero' value='aquaman'> Aquaman<br> </form>
- 將input type改為radio來建立radio button。
- checked表示預設被選項目。
checkbox
- 建立checkbox
<form> <input type='checkbox' name='super' value='superman' checked> Superman<br> <input type='checkbox' name='bat' value='batman'> Batman<br> <input type='checkbox' name='aqua' value='aquaman'> Aquaman<br> </form>
- checkbox的選項name必須不同(所以可以複選)，radio則需相同。
- checked表示預設被選項目。
Select
- 設計下拉式選單
<select name='heros' size=2> <option value='superman'> Superman </option><br> <option value='batman'> Batman </option><br> <option value='aquaman'> Aquaman </option><br> </select>
- size屬性控制顯示數目，若沒寫則預設值為1。若在select加上multiple屬性表示可以複選(按著Shift或Ctrl)。
- 通常預設值是第一個，可以使用selected來改變預選項目。
datalist
- 建立datalist
<form> <input list='heros' name='heros'> <datalist id='heros'> <option value='superman'> <option value='batman'> <option value='aquaman'> </datalist> <input type='submit' value='submit'> </form>
- 也是下拉選單，不過選擇的值變成文字輸入值，也可以自行輸入資訊，select則必須自選單選擇。
- 。
Textarea
- 建立Textarea
<textarea name='message' rows=10 cols=100>Please write down your comments here... </textarea>
- 若是沒有給rows&cols，則顯示預設大小。可以使用例如100%代替數字。
- 若是加上disabled參數表示內容不可編輯。
Color
- 建立顏色選擇選單
<form> Select a color: <input type='color' name='color'> </form>
- 將type改為color即可成為顏色選擇選單。
Date
- 建立日期選擇選單
<form> Your Birthday: <input type='date' name='birthday'> </form>
- 將type改為date即可成為日期選擇選單。
month
- 建立年月選擇選單
<form> 出版日期: <input type='month' name='publish'> </form>
- 將type改為month即可成為年月選擇選單。
time
- 建立時間選擇選單
<form> 開會時間: <input type='time' name='meeting'> </form>
- 將type改為time即可成為時間選擇選單。
datetime-local
- 建立當地日期時間選擇選單(沒有時區)
<form> 預約日期時間: <input type='datetime-local' name='appointment'> </form>
- 將type改為datetime-local即可成為日期時間選擇選單。
week
- 建立星期選擇選單
<form> 開學週: <input type='week' name='semester'> </form>
- 將type改為week即可成為星期選擇選單。
file
- 建立檔案選擇選單
<form> 選擇開啟檔案: <input type='file' name='open'> </form>
- 將type改為fiel即可成為檔案選擇選單。
number
- 建立數量選擇選單
<form> 選擇購買數量: <input type='number' name='buy' min="0" max="100" step="10" value="50"> </form>
- 將type改為number即可成為數量選擇選單。
- 可以使用min、max、step、value等屬性來控制輸入內容。
range
- 建立範圍數量選擇選單
<form> 選擇購買數量: 0<input type='range' name='buy' min="0" max="100" step="1" value="0">100 <input type='submit' value='Submit'> </form>
- 將type改為range即可成為範圍數量選擇選單。
- 可以使用min、max、step、value等屬性來控制輸入內容。
search
- 建立搜尋輸入列
<form> 請輸入關鍵字: <input type='search' name='google'> <input type='submit' value='Search'> </form>
- 將type改為search即可成為搜尋輸入列。
image
- 使用圖形代替按鈕
<form> 請輸入願望後點擊超人: <input type='text' name='wish' value='Wishes for superman'> <input type='image' src='superman.png' alt="Submit" width='48' height='48'> </form>
- 將type改為image即可變成圖型，給定src以取得圖案，當圖型無法顯示時顯示alt。
- 使用width&height控制大小。
fieldset
- 使用fieldset來群組相關表單。
<form> <fieldset> <legend>Personal Information</legend> First name:<input type='text' name='firstname' value='Clark'><br> Last name: <input type='text' name='lastname' value='Kent'><br> Tel: <input type='tel' name='tel'><br> Homepage: <input type='url' name='homepage' size=50><br> Email: <input type='email' name='email'><br> Password: <input type='password' name='password'><br> <input type='submit' value='submit'> <input type='reset' value='reset'> </fieldset> </form>
- 加入legend來說明該群組特性。
HTML Symbols
- HTML的特殊符號
- space: 。
- &: &。
- <: <or <。
- >: >。
- §: §。
- ": "。
- ': '。
- ¢: ¢。
- £: £。
- ¥: ¥。
- €: € or € or &x20AC;。
- ©: © or ©。
- ®: ® or ®。
- à: à。
- á: á。
- â: â。
- ã: ã。
- ∀: ∀ or ∀。
- ∂: ∂ or ∂。
- ∃: ∃ or ∃。
- ∅: ∅ or ∅。
- ∇: ∇ or ∇。
- ∈: ∈ or ∈。
- ∉: ∉ or ∉。
- ∋: ∋ or ∋。
- ∏: ∏ or ∏。
- ∑: ∑ or ∑。
- Α: Α or Α。
- Β: Β or Β。
- Γ: Γ or Γ。
- Δ: Δ or Δ。
- Ε: Ε or Ε。
- Ζ: Ζ or Ζ。
- ™: ™ or ™。
- ←: ← or ←。
- ↑: ↑ or ↑。
- →: → or →。
- ↓: ↓ or ↓。
- ♠: ♠ or ♠。
- ♣: ♣ or ♣。
- ♥: ♥ or ♥。
- ♦: ♦ or ♦。
- ƒ: ƒ。
- …: …。
- †: †。
- ‰: ‰。
- Š: Š。
- ‹: ‹。
- Œ: Œ。
- Ž: Ž。
- •: •。
- –: –。
- —: —。
- š: š。
- ›: ›。
- œ: œ。
- ž: ž。
- Ÿ: Ÿ。
- ¤: ¤。
- ¦: ¦。
- ¨: ¨。
- ª: ª。
- «: «。
- ¬: ¬。
- ¯: ¯。
- °: °。
- ±: ±。
- ²: ²。
- ³: ³。
- ´: ´。
- µ: µ。
- ¶: ¶。
- ·: ·。
- ¸: ¸。
- ¹: ¹。
- º: º。
- »: »。
- ¼: ¼。
- ½: ½。
- ¾: ¾。
- ¿: ¿。
- ÀÁÂÃÄÅ: ÀÁÂÃÄÅ。
- Æ: Æ。
- Ç: Ç。
- ÈÉÊË: ÈÉÊË。
- ÌÍÎÏ: ÌÍÎÏ。
- Ð: Ð。
- Ñ: Ñ。
- ÒÓÔÕÖ: ÒÓÔÕÖ。
- ×: ×。
- Ø: Ø。
- ÙÚÛÜ: ÙÚÛÜ。
- Ý: Ý。
- Þ: Þ。
- ß: ß。
- àáâãäå: àáâãäå。
- æ: æ。
- ç: ç。
- èéêë: èéêë。
- ìíîï: ìíîï。
- ð: ð。
- ñ: ñ。
- òóôõö: òóôõö。
- ÷: ÷。
- ø: ø。
- ùúûü: ùúûü。
- ý: ý。
- þ: þ。
- ÿ: ÿ。
HTML5
- 一些關於HTML5的內容
- new block: header、section、footer、aside、nav、main、article、figure。CSS(display: block;)。
- new Form: datalist、output。
- new input type: color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week。
- new Media: audio、video(embed、source、track)。
- canvas & svg: 可繪圖(JavaScript)。
- new syntax: 如之前介紹之語法。
design new element
- HTML5可以讓我們自訂新的標籤元素
<heros style="display:block; background:lightgreen; color:blue; font-size:30px;">Superman</heros>
- heros變成一個標籤元素。
Section & Article
- Section & Article可以互相nested組合
<section style="border:1px solid blue;"> <section style="border:1px solid blue;margin:3px 3px 3px 3px;"> section in section <article style="border:1px solid red;margin:3px 3px 3px 3px;"> article in section </article> </section> <article style="border:1px solid red;margin:3px 3px 3px 3px;"> article in section <section style="border:1px solid blue;margin:3px 3px 3px 3px;"> section in article </section> <article style="border:1px solid red;margin:3px 3px 3px 3px;"> article in article <article> </article> </section>
- 也可以使用div(或div in article、div in section in article)，style部分見CSS。
Others
- 其他事項
- 在head加上<meta charset="utf-8">來定義character encoding。
- 在head加上<meta name="viewport" content="width=device-width, initial-scale=1.0">來告訴瀏覽器頁面如何隨著設備大小變化。width表示設備的screen-width，initial-scale=1.0表示最初縮放等級。。
- html、body、head等標籤不建議省略。
- 元素名稱使用大小寫皆可，最好一致。屬性名稱最好使用小寫。
- 屬性可以沒有quotes，但是建議加上。
ai算圖
| Learn Prompting | PromptHero | CLIP Interrogator | Midjourney Prompt Generator |
Other related links: Civitai | leonardo.ai | playground | ai prompt guide | prompthero | prompthero | stability ai | Stable Diffusion
or install Stable Diffusion WebUI on your computer, you may need a better NVIDIA graphics card (with at least 4GB memory)
More AI tools:
- 搜尋引擎&Chat: Bing | Bard | You.com | ChatGPT | Poe | AutoGPT
- 文章生成: RYTR | Writesonic | Jasper | Copy.ai | Wordtune | QuillBot
- 提高生產力: Heyday | Lateral.io
- 文字轉語音、圖像、影片: Descript | Synthesys X | Pictory | Murf.ai | Synthesia | D-id | Bhuman | Revoicer
- 語音轉文字、翻譯: Otter | Taption | Lark | Assemblyai | cSubtitle | ALPHY
- 聊天機器人: God in a box | Character ai
- 音源、影片編輯: Adobe Podcast | Unscreen | Clipdrop | Runwayml
- 簡報生成、編輯、教練: Tome | Beautiful.Ai | Presenter Coach | Canva | Notion | Prezo | Gamma
- AI交易: Tickeron | Capitalise
- 圖像修復: Imglarger | Leiapix
- 影片產生: Visla
- 圖像生成: Recraft
使用多個工具來完成你的工作，例如可以使用chatGPD建立文字內容(故事或劇本等)，然後使用QuillBot來修正潤飾文字，接著可以使用Murf.ai來產生語音，或是使用Midjourney來產生圖片，或是使用Pictory來產生video。可參照Futurepedia找尋更多AI工具。