[{"data":1,"prerenderedAt":2931},["ShallowReactive",2],{"blog:\u002Fblog\u002Fhtml\u002Fnote":3},{"id":4,"title":5,"author":6,"body":7,"category":2917,"date":2918,"description":2919,"draft":2920,"extension":2921,"image":2922,"meta":2923,"navigation":79,"path":2924,"seo":2925,"series":2922,"seriesOrder":2922,"seriesTitle":2922,"stem":2926,"tags":2927,"updatedAt":2929,"__hash__":2930},"blog\u002Fblog\u002Fhtml\u002Fnote.md","HTML 筆記","charles",{"type":8,"value":9,"toc":2896},"minimark",[10,14,111,121,125,160,219,223,247,251,254,285,289,327,332,336,351,356,359,416,420,460,479,482,549,553,949,955,959,1028,1033,1038,1041,1055,1215,1221,1242,1436,1441,1456,1743,1748,1751,2294,2297,2453,2458,2461,2651,2656,2659,2776,2781,2785,2794,2797,2850,2855,2859,2864,2887,2892],[11,12,13],"h2",{"id":13},"基本框架",[15,16,21],"pre",{"className":17,"code":18,"language":19,"meta":20,"style":20},"language-html= shiki shiki-themes material-theme-lighter github-light github-dark","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\"> \u003C!-- 可以設定其他語言 -->\n  \u003Chead>\n    \u003C!--全域設定-->\n    \u003Cmeta charset=\"UTF-8\" \u002F> \u003C!-- 此行必須在head內第一行 -->\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    \u003Ctitle> 標題 \u003C\u002Ftitle>\n  \u003C\u002Fhead>\n\n  \u003Cbody>\n    \u003Cscript type=\"module\" src=\"\u002Fmain.js\">\u003C\u002Fscript>\n    \u003C!-- 網頁內容 -->\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html=","",[22,23,24,32,38,44,50,56,62,68,74,81,87,93,99,105],"code",{"__ignoreMap":20},[25,26,29],"span",{"class":27,"line":28},"line",1,[25,30,31],{},"\u003C!DOCTYPE html>\n",[25,33,35],{"class":27,"line":34},2,[25,36,37],{},"\u003Chtml lang=\"en\"> \u003C!-- 可以設定其他語言 -->\n",[25,39,41],{"class":27,"line":40},3,[25,42,43],{},"  \u003Chead>\n",[25,45,47],{"class":27,"line":46},4,[25,48,49],{},"    \u003C!--全域設定-->\n",[25,51,53],{"class":27,"line":52},5,[25,54,55],{},"    \u003Cmeta charset=\"UTF-8\" \u002F> \u003C!-- 此行必須在head內第一行 -->\n",[25,57,59],{"class":27,"line":58},6,[25,60,61],{},"    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",[25,63,65],{"class":27,"line":64},7,[25,66,67],{},"    \u003Ctitle> 標題 \u003C\u002Ftitle>\n",[25,69,71],{"class":27,"line":70},8,[25,72,73],{},"  \u003C\u002Fhead>\n",[25,75,77],{"class":27,"line":76},9,[25,78,80],{"emptyLinePlaceholder":79},true,"\n",[25,82,84],{"class":27,"line":83},10,[25,85,86],{},"  \u003Cbody>\n",[25,88,90],{"class":27,"line":89},11,[25,91,92],{},"    \u003Cscript type=\"module\" src=\"\u002Fmain.js\">\u003C\u002Fscript>\n",[25,94,96],{"class":27,"line":95},12,[25,97,98],{},"    \u003C!-- 網頁內容 -->\n",[25,100,102],{"class":27,"line":101},13,[25,103,104],{},"  \u003C\u002Fbody>\n",[25,106,108],{"class":27,"line":107},14,[25,109,110],{},"\u003C\u002Fhtml>\n",[112,113,114],"blockquote",{},[115,116,117,120],"p",{},[22,118,119],{},"\u003Cmeta>","：用來定義網頁本身設定的標籤",[11,122,124],{"id":123},"block-elements","block elements",[126,127,128,132,135],"ul",{},[129,130,131],"li",{},"組成一個可見區塊",[129,133,134],{},"單獨佔據一行",[129,136,137,138],{},"前後以換行分隔\n",[112,139,140],{},[115,141,142,143,146,147,146,150,146,153,146,156,159],{},"e.g. ",[22,144,145],{},"\u003Cp>"," ",[22,148,149],{},"\u003Cli>",[22,151,152],{},"\u003Cnav>",[22,154,155],{},"\u003Cfooter>",[22,157,158],{},"\u003Cdiv>","\nblock elements 可以巢狀其他 block elements，但不能套在 inline elements 中",[15,161,163],{"className":17,"code":162,"language":19,"meta":20,"style":20},"\u003C!-- 正確👍 -->\n\u003Cdiv>\n  \u003Cp>This is a paragraph inside a div.\u003C\u002Fp>\n  \u003Cdiv>\n    \u003Ch2>Heading 2 inside a nested div\u003C\u002Fh2>\n    \u003Cp>Another paragraph inside the nested div.\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003C!-- 錯誤❌ -->\n\u003Cp>This is a paragraph with a \u003Cdiv>block element\u003C\u002Fdiv> inside.\u003C\u002Fp>\n",[22,164,165,170,175,180,185,190,195,200,205,209,214],{"__ignoreMap":20},[25,166,167],{"class":27,"line":28},[25,168,169],{},"\u003C!-- 正確👍 -->\n",[25,171,172],{"class":27,"line":34},[25,173,174],{},"\u003Cdiv>\n",[25,176,177],{"class":27,"line":40},[25,178,179],{},"  \u003Cp>This is a paragraph inside a div.\u003C\u002Fp>\n",[25,181,182],{"class":27,"line":46},[25,183,184],{},"  \u003Cdiv>\n",[25,186,187],{"class":27,"line":52},[25,188,189],{},"    \u003Ch2>Heading 2 inside a nested div\u003C\u002Fh2>\n",[25,191,192],{"class":27,"line":58},[25,193,194],{},"    \u003Cp>Another paragraph inside the nested div.\u003C\u002Fp>\n",[25,196,197],{"class":27,"line":64},[25,198,199],{},"  \u003C\u002Fdiv>\n",[25,201,202],{"class":27,"line":70},[25,203,204],{},"\u003C\u002Fdiv>\n",[25,206,207],{"class":27,"line":76},[25,208,80],{"emptyLinePlaceholder":79},[25,210,211],{"class":27,"line":83},[25,212,213],{},"\u003C!-- 錯誤❌ -->\n",[25,215,216],{"class":27,"line":89},[25,217,218],{},"\u003Cp>This is a paragraph with a \u003Cdiv>block element\u003C\u002Fdiv> inside.\u003C\u002Fp>\n",[11,220,222],{"id":221},"inline-elements","inline elements",[126,224,225,228,231],{},[129,226,227],{},"專門放在 block elements 裡的內容",[129,229,230],{},"非完整段落或群組，通常只出現在一段文字中",[129,232,233,234],{},"不會產生新的一行\n",[112,235,236],{},[115,237,142,238,146,241,146,244],{},[22,239,240],{},"\u003Ca>",[22,242,243],{},"\u003Cspan>",[22,245,246],{},"\u003Cbr>",[11,248,250],{"id":249},"paragraph-p","paragraph ( p )",[115,252,253],{},"將一段內容標註為段落，成為 block",[15,255,259],{"className":256,"code":257,"language":258,"meta":20,"style":20},"language-html shiki shiki-themes material-theme-lighter github-light github-dark","\u003Cp>>context\u003C\u002Fp>\n","html",[22,260,261],{"__ignoreMap":20},[25,262,263,267,270,273,277,280,282],{"class":27,"line":28},[25,264,266],{"class":265},"sP7_E","\u003C",[25,268,115],{"class":269},"sQzsp",[25,271,272],{"class":265},">",[25,274,276],{"class":275},"su5hD",">context",[25,278,279],{"class":265},"\u003C\u002F",[25,281,115],{"class":269},[25,283,284],{"class":265},">\n",[11,286,288],{"id":287},"break-br","break ( br )",[15,290,292],{"className":256,"code":291,"language":258,"meta":20,"style":20},"在同個block中換行\n\u003Cp>>text\u003Cbr \u002F>1234\u003C\u002Fp>\n",[22,293,294,299],{"__ignoreMap":20},[25,295,296],{"class":27,"line":28},[25,297,298],{"class":275},"在同個block中換行\n",[25,300,301,303,305,307,310,312,315,318,321,323,325],{"class":27,"line":34},[25,302,266],{"class":265},[25,304,115],{"class":269},[25,306,272],{"class":265},[25,308,309],{"class":275},">text",[25,311,266],{"class":265},[25,313,314],{"class":269},"br",[25,316,317],{"class":265}," \u002F>",[25,319,320],{"class":275},"1234",[25,322,279],{"class":265},[25,324,115],{"class":269},[25,326,284],{"class":265},[112,328,329],{},[115,330,331],{},"text\n1234",[11,333,335],{"id":334},"horizontal-rule-hr","horizontal rule ( hr )",[15,337,339],{"className":256,"code":338,"language":258,"meta":20,"style":20},"\u003Chr \u002F>\n",[22,340,341],{"__ignoreMap":20},[25,342,343,345,348],{"class":27,"line":28},[25,344,266],{"class":265},[25,346,347],{"class":269},"hr",[25,349,350],{"class":265}," \u002F>\n",[112,352,353],{},[115,354,355],{},"水平分隔線",[11,357,358],{"id":358},"strong",[15,360,362],{"className":256,"code":361,"language":258,"meta":20,"style":20},"強調標示內容\n\u003Cstrong>text\u003C\u002Fstrong>\n\n\u003Cp>\u003Cstrong>text\u003C\u002Fstrong>\u003C\u002Fp>\n",[22,363,364,369,386,390],{"__ignoreMap":20},[25,365,366],{"class":27,"line":28},[25,367,368],{"class":275},"強調標示內容\n",[25,370,371,373,375,377,380,382,384],{"class":27,"line":34},[25,372,266],{"class":265},[25,374,358],{"class":269},[25,376,272],{"class":265},[25,378,379],{"class":275},"text",[25,381,279],{"class":265},[25,383,358],{"class":269},[25,385,284],{"class":265},[25,387,388],{"class":27,"line":40},[25,389,80],{"emptyLinePlaceholder":79},[25,391,392,394,396,399,401,403,405,407,409,412,414],{"class":27,"line":46},[25,393,266],{"class":265},[25,395,115],{"class":269},[25,397,398],{"class":265},">\u003C",[25,400,358],{"class":269},[25,402,272],{"class":265},[25,404,379],{"class":275},[25,406,279],{"class":265},[25,408,358],{"class":269},[25,410,411],{"class":265},">\u003C\u002F",[25,413,115],{"class":269},[25,415,284],{"class":265},[11,417,419],{"id":418},"anchor-target-a-target-錨點","anchor target (a target) (錨點)",[15,421,423],{"className":256,"code":422,"language":258,"meta":20,"style":20},"\u003Ca href=\"https:\u002F\u002Fwww.google.com\">Google首頁\u003C\u002Fa>\n",[22,424,425],{"__ignoreMap":20},[25,426,427,429,432,436,439,443,447,449,451,454,456,458],{"class":27,"line":28},[25,428,266],{"class":265},[25,430,431],{"class":269},"a",[25,433,435],{"class":434},"s9AJx"," href",[25,437,438],{"class":265},"=",[25,440,442],{"class":441},"sjJ54","\"",[25,444,446],{"class":445},"s_sjI","https:\u002F\u002Fwww.google.com",[25,448,442],{"class":441},[25,450,272],{"class":265},[25,452,453],{"class":275},"Google首頁",[25,455,279],{"class":265},[25,457,431],{"class":269},[25,459,284],{"class":265},[126,461,462,465,468,471],{},[129,463,464],{},"_self (default)：覆蓋當前頁面",[129,466,467],{},"_blank：開新分頁",[129,469,470],{},"_parent：在父框架開啟頁面",[129,472,473,474],{},"_top：在最頂端框架開啟頁面\n",[112,475,476],{},[115,477,478],{},"href=#id 可以連結到同頁面指定的 block element",[11,480,481],{"id":481},"img",[15,483,485],{"className":256,"code":484,"language":258,"meta":20,"style":20},"\u003Cimg src=\".\u002Fimages\u002F1.png\" alt=\"圖片1\" \u002F>\n\u003Cimg src=\"https:\u002F\u002Fblog.hubspot.com\u002Fhubfs\u002Fimage8-2.jpg\" alt=\"G_logo\" \u002F>\n",[22,486,487,519],{"__ignoreMap":20},[25,488,489,491,493,496,498,500,503,505,508,510,512,515,517],{"class":27,"line":28},[25,490,266],{"class":265},[25,492,481],{"class":269},[25,494,495],{"class":434}," src",[25,497,438],{"class":265},[25,499,442],{"class":441},[25,501,502],{"class":445},".\u002Fimages\u002F1.png",[25,504,442],{"class":441},[25,506,507],{"class":434}," alt",[25,509,438],{"class":265},[25,511,442],{"class":441},[25,513,514],{"class":445},"圖片1",[25,516,442],{"class":441},[25,518,350],{"class":265},[25,520,521,523,525,527,529,531,534,536,538,540,542,545,547],{"class":27,"line":34},[25,522,266],{"class":265},[25,524,481],{"class":269},[25,526,495],{"class":434},[25,528,438],{"class":265},[25,530,442],{"class":441},[25,532,533],{"class":445},"https:\u002F\u002Fblog.hubspot.com\u002Fhubfs\u002Fimage8-2.jpg",[25,535,442],{"class":441},[25,537,507],{"class":434},[25,539,438],{"class":265},[25,541,442],{"class":441},[25,543,544],{"class":445},"G_logo",[25,546,442],{"class":441},[25,548,350],{"class":265},[11,550,552],{"id":551},"ordered-list-ol","ordered list (ol)",[15,554,556],{"className":256,"code":555,"language":258,"meta":20,"style":20},"\u003Col type=\"1\">\n  \u003Cli>項目1\u003C\u002Fli>\n  \u003Cli>項目2\u003C\u002Fli>\n  \u003Cli>項目3\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Col type=\"A\">\n  \u003Cli>項目1\u003C\u002Fli>\n  \u003Cli>項目2\u003C\u002Fli>\n  \u003Cli>項目3\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Col type=\"a\">\n  \u003Cli>項目1\u003C\u002Fli>\n  \u003Cli>項目2\u003C\u002Fli>\n  \u003Cli>項目3\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Col type=\"I\">\n  \u003Cli>項目1\u003C\u002Fli>\n  \u003Cli>項目2\u003C\u002Fli>\n  \u003Cli>項目3\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Col type=\"i\">\n  \u003Cli>項目1\u003C\u002Fli>\n  \u003Cli>項目2\u003C\u002Fli>\n  \u003Cli>項目3\u003C\u002Fli>\n\u003C\u002Fol>\n",[22,557,558,579,597,614,631,639,658,674,690,706,714,732,748,764,780,789,809,826,843,860,869,889,906,923,940],{"__ignoreMap":20},[25,559,560,562,565,568,570,572,575,577],{"class":27,"line":28},[25,561,266],{"class":265},[25,563,564],{"class":269},"ol",[25,566,567],{"class":434}," type",[25,569,438],{"class":265},[25,571,442],{"class":441},[25,573,574],{"class":445},"1",[25,576,442],{"class":441},[25,578,284],{"class":265},[25,580,581,584,586,588,591,593,595],{"class":27,"line":34},[25,582,583],{"class":265},"  \u003C",[25,585,129],{"class":269},[25,587,272],{"class":265},[25,589,590],{"class":275},"項目1",[25,592,279],{"class":265},[25,594,129],{"class":269},[25,596,284],{"class":265},[25,598,599,601,603,605,608,610,612],{"class":27,"line":40},[25,600,583],{"class":265},[25,602,129],{"class":269},[25,604,272],{"class":265},[25,606,607],{"class":275},"項目2",[25,609,279],{"class":265},[25,611,129],{"class":269},[25,613,284],{"class":265},[25,615,616,618,620,622,625,627,629],{"class":27,"line":46},[25,617,583],{"class":265},[25,619,129],{"class":269},[25,621,272],{"class":265},[25,623,624],{"class":275},"項目3",[25,626,279],{"class":265},[25,628,129],{"class":269},[25,630,284],{"class":265},[25,632,633,635,637],{"class":27,"line":52},[25,634,279],{"class":265},[25,636,564],{"class":269},[25,638,284],{"class":265},[25,640,641,643,645,647,649,651,654,656],{"class":27,"line":58},[25,642,266],{"class":265},[25,644,564],{"class":269},[25,646,567],{"class":434},[25,648,438],{"class":265},[25,650,442],{"class":441},[25,652,653],{"class":445},"A",[25,655,442],{"class":441},[25,657,284],{"class":265},[25,659,660,662,664,666,668,670,672],{"class":27,"line":64},[25,661,583],{"class":265},[25,663,129],{"class":269},[25,665,272],{"class":265},[25,667,590],{"class":275},[25,669,279],{"class":265},[25,671,129],{"class":269},[25,673,284],{"class":265},[25,675,676,678,680,682,684,686,688],{"class":27,"line":70},[25,677,583],{"class":265},[25,679,129],{"class":269},[25,681,272],{"class":265},[25,683,607],{"class":275},[25,685,279],{"class":265},[25,687,129],{"class":269},[25,689,284],{"class":265},[25,691,692,694,696,698,700,702,704],{"class":27,"line":76},[25,693,583],{"class":265},[25,695,129],{"class":269},[25,697,272],{"class":265},[25,699,624],{"class":275},[25,701,279],{"class":265},[25,703,129],{"class":269},[25,705,284],{"class":265},[25,707,708,710,712],{"class":27,"line":83},[25,709,279],{"class":265},[25,711,564],{"class":269},[25,713,284],{"class":265},[25,715,716,718,720,722,724,726,728,730],{"class":27,"line":89},[25,717,266],{"class":265},[25,719,564],{"class":269},[25,721,567],{"class":434},[25,723,438],{"class":265},[25,725,442],{"class":441},[25,727,431],{"class":445},[25,729,442],{"class":441},[25,731,284],{"class":265},[25,733,734,736,738,740,742,744,746],{"class":27,"line":95},[25,735,583],{"class":265},[25,737,129],{"class":269},[25,739,272],{"class":265},[25,741,590],{"class":275},[25,743,279],{"class":265},[25,745,129],{"class":269},[25,747,284],{"class":265},[25,749,750,752,754,756,758,760,762],{"class":27,"line":101},[25,751,583],{"class":265},[25,753,129],{"class":269},[25,755,272],{"class":265},[25,757,607],{"class":275},[25,759,279],{"class":265},[25,761,129],{"class":269},[25,763,284],{"class":265},[25,765,766,768,770,772,774,776,778],{"class":27,"line":107},[25,767,583],{"class":265},[25,769,129],{"class":269},[25,771,272],{"class":265},[25,773,624],{"class":275},[25,775,279],{"class":265},[25,777,129],{"class":269},[25,779,284],{"class":265},[25,781,783,785,787],{"class":27,"line":782},15,[25,784,279],{"class":265},[25,786,564],{"class":269},[25,788,284],{"class":265},[25,790,792,794,796,798,800,802,805,807],{"class":27,"line":791},16,[25,793,266],{"class":265},[25,795,564],{"class":269},[25,797,567],{"class":434},[25,799,438],{"class":265},[25,801,442],{"class":441},[25,803,804],{"class":445},"I",[25,806,442],{"class":441},[25,808,284],{"class":265},[25,810,812,814,816,818,820,822,824],{"class":27,"line":811},17,[25,813,583],{"class":265},[25,815,129],{"class":269},[25,817,272],{"class":265},[25,819,590],{"class":275},[25,821,279],{"class":265},[25,823,129],{"class":269},[25,825,284],{"class":265},[25,827,829,831,833,835,837,839,841],{"class":27,"line":828},18,[25,830,583],{"class":265},[25,832,129],{"class":269},[25,834,272],{"class":265},[25,836,607],{"class":275},[25,838,279],{"class":265},[25,840,129],{"class":269},[25,842,284],{"class":265},[25,844,846,848,850,852,854,856,858],{"class":27,"line":845},19,[25,847,583],{"class":265},[25,849,129],{"class":269},[25,851,272],{"class":265},[25,853,624],{"class":275},[25,855,279],{"class":265},[25,857,129],{"class":269},[25,859,284],{"class":265},[25,861,863,865,867],{"class":27,"line":862},20,[25,864,279],{"class":265},[25,866,564],{"class":269},[25,868,284],{"class":265},[25,870,872,874,876,878,880,882,885,887],{"class":27,"line":871},21,[25,873,266],{"class":265},[25,875,564],{"class":269},[25,877,567],{"class":434},[25,879,438],{"class":265},[25,881,442],{"class":441},[25,883,884],{"class":445},"i",[25,886,442],{"class":441},[25,888,284],{"class":265},[25,890,892,894,896,898,900,902,904],{"class":27,"line":891},22,[25,893,583],{"class":265},[25,895,129],{"class":269},[25,897,272],{"class":265},[25,899,590],{"class":275},[25,901,279],{"class":265},[25,903,129],{"class":269},[25,905,284],{"class":265},[25,907,909,911,913,915,917,919,921],{"class":27,"line":908},23,[25,910,583],{"class":265},[25,912,129],{"class":269},[25,914,272],{"class":265},[25,916,607],{"class":275},[25,918,279],{"class":265},[25,920,129],{"class":269},[25,922,284],{"class":265},[25,924,926,928,930,932,934,936,938],{"class":27,"line":925},24,[25,927,583],{"class":265},[25,929,129],{"class":269},[25,931,272],{"class":265},[25,933,624],{"class":275},[25,935,279],{"class":265},[25,937,129],{"class":269},[25,939,284],{"class":265},[25,941,943,945,947],{"class":27,"line":942},25,[25,944,279],{"class":265},[25,946,564],{"class":269},[25,948,284],{"class":265},[115,950,951],{},[481,952],{"src":953,"width":954},"https:\u002F\u002Fi.imgur.com\u002FS3mgTvo.png",50,[11,956,958],{"id":957},"unordered-list-ul","Unordered List (ul)",[15,960,962],{"className":256,"code":961,"language":258,"meta":20,"style":20},"\u003Cul>\n  \u003Cli>項目1\u003C\u002Fli>\n  \u003Cli>項目2\u003C\u002Fli>\n  \u003Cli>項目3\u003C\u002Fli>\n\u003C\u002Ful>\n",[22,963,964,972,988,1004,1020],{"__ignoreMap":20},[25,965,966,968,970],{"class":27,"line":28},[25,967,266],{"class":265},[25,969,126],{"class":269},[25,971,284],{"class":265},[25,973,974,976,978,980,982,984,986],{"class":27,"line":34},[25,975,583],{"class":265},[25,977,129],{"class":269},[25,979,272],{"class":265},[25,981,590],{"class":275},[25,983,279],{"class":265},[25,985,129],{"class":269},[25,987,284],{"class":265},[25,989,990,992,994,996,998,1000,1002],{"class":27,"line":40},[25,991,583],{"class":265},[25,993,129],{"class":269},[25,995,272],{"class":265},[25,997,607],{"class":275},[25,999,279],{"class":265},[25,1001,129],{"class":269},[25,1003,284],{"class":265},[25,1005,1006,1008,1010,1012,1014,1016,1018],{"class":27,"line":46},[25,1007,583],{"class":265},[25,1009,129],{"class":269},[25,1011,272],{"class":265},[25,1013,624],{"class":275},[25,1015,279],{"class":265},[25,1017,129],{"class":269},[25,1019,284],{"class":265},[25,1021,1022,1024,1026],{"class":27,"line":52},[25,1023,279],{"class":265},[25,1025,126],{"class":269},[25,1027,284],{"class":265},[115,1029,1030],{},[481,1031],{"src":1032,"width":954},"https:\u002F\u002Fi.imgur.com\u002FlQVTItF.png",[112,1034,1035],{},[115,1036,1037],{},"項目符號樣式交由 CSS list-style-type 設定",[11,1039,1040],{"id":1040},"table",[115,1042,1043,1046,1047,1050,1051,1054],{},[22,1044,1045],{},"\u003Cth>","：表格標題 (table header)\n",[22,1048,1049],{},"\u003Ctr>","：表格列 (table row)\n",[22,1052,1053],{},"\u003Ctd>","：表格資料 (table data)",[15,1056,1058],{"className":256,"code":1057,"language":258,"meta":20,"style":20},"\u003Ctable>\n  \u003Ctr>\n    \u003Cth>title A\u003C\u002Fth>\n    \u003Cth>title B\u003C\u002Fth>\n    \u003Cth>title C\u003C\u002Fth>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>content A\u003C\u002Ftd>\n    \u003Ctd>content B\u003C\u002Ftd>\n    \u003Ctd>content C\u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftable>\n",[22,1059,1060,1068,1077,1096,1113,1130,1139,1147,1165,1182,1199,1207],{"__ignoreMap":20},[25,1061,1062,1064,1066],{"class":27,"line":28},[25,1063,266],{"class":265},[25,1065,1040],{"class":269},[25,1067,284],{"class":265},[25,1069,1070,1072,1075],{"class":27,"line":34},[25,1071,583],{"class":265},[25,1073,1074],{"class":269},"tr",[25,1076,284],{"class":265},[25,1078,1079,1082,1085,1087,1090,1092,1094],{"class":27,"line":40},[25,1080,1081],{"class":265},"    \u003C",[25,1083,1084],{"class":269},"th",[25,1086,272],{"class":265},[25,1088,1089],{"class":275},"title A",[25,1091,279],{"class":265},[25,1093,1084],{"class":269},[25,1095,284],{"class":265},[25,1097,1098,1100,1102,1104,1107,1109,1111],{"class":27,"line":46},[25,1099,1081],{"class":265},[25,1101,1084],{"class":269},[25,1103,272],{"class":265},[25,1105,1106],{"class":275},"title B",[25,1108,279],{"class":265},[25,1110,1084],{"class":269},[25,1112,284],{"class":265},[25,1114,1115,1117,1119,1121,1124,1126,1128],{"class":27,"line":52},[25,1116,1081],{"class":265},[25,1118,1084],{"class":269},[25,1120,272],{"class":265},[25,1122,1123],{"class":275},"title C",[25,1125,279],{"class":265},[25,1127,1084],{"class":269},[25,1129,284],{"class":265},[25,1131,1132,1135,1137],{"class":27,"line":58},[25,1133,1134],{"class":265},"  \u003C\u002F",[25,1136,1074],{"class":269},[25,1138,284],{"class":265},[25,1140,1141,1143,1145],{"class":27,"line":64},[25,1142,583],{"class":265},[25,1144,1074],{"class":269},[25,1146,284],{"class":265},[25,1148,1149,1151,1154,1156,1159,1161,1163],{"class":27,"line":70},[25,1150,1081],{"class":265},[25,1152,1153],{"class":269},"td",[25,1155,272],{"class":265},[25,1157,1158],{"class":275},"content A",[25,1160,279],{"class":265},[25,1162,1153],{"class":269},[25,1164,284],{"class":265},[25,1166,1167,1169,1171,1173,1176,1178,1180],{"class":27,"line":76},[25,1168,1081],{"class":265},[25,1170,1153],{"class":269},[25,1172,272],{"class":265},[25,1174,1175],{"class":275},"content B",[25,1177,279],{"class":265},[25,1179,1153],{"class":269},[25,1181,284],{"class":265},[25,1183,1184,1186,1188,1190,1193,1195,1197],{"class":27,"line":83},[25,1185,1081],{"class":265},[25,1187,1153],{"class":269},[25,1189,272],{"class":265},[25,1191,1192],{"class":275},"content C",[25,1194,279],{"class":265},[25,1196,1153],{"class":269},[25,1198,284],{"class":265},[25,1200,1201,1203,1205],{"class":27,"line":89},[25,1202,1134],{"class":265},[25,1204,1074],{"class":269},[25,1206,284],{"class":265},[25,1208,1209,1211,1213],{"class":27,"line":95},[25,1210,279],{"class":265},[25,1212,1040],{"class":269},[25,1214,284],{"class":265},[115,1216,1217],{},[481,1218],{"src":1219,"width":1220},"https:\u002F\u002Fi.imgur.com\u002FRPBIGfj.png",200,[112,1222,1223],{},[115,1224,1225,1226,1228,1229,1228,1231,1233,1234,1237,1238,1241],{},"可以在 ",[22,1227,1045],{},"、",[22,1230,1049],{},[22,1232,1053],{}," 中加入 ",[22,1235,1236],{}," colspan=\"n\""," 或 ",[22,1239,1240],{}," rowspan=\"n\""," 讓該儲存格跨越 n 欄或 n 列",[15,1243,1245],{"className":256,"code":1244,"language":258,"meta":20,"style":20},"\u003Ctable>\n  \u003Ctr>\n    \u003Cth colspan=\"3\">Table\u003C\u002Fth>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Cth>title A\u003C\u002Fth>\n    \u003Cth>title B\u003C\u002Fth>\n    \u003Cth>title C\u003C\u002Fth>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>content A\u003C\u002Ftd>\n    \u003Ctd>content B\u003C\u002Ftd>\n    \u003Ctd>content C\u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftable>\n",[22,1246,1247,1255,1263,1292,1300,1308,1324,1340,1356,1364,1372,1388,1404,1420,1428],{"__ignoreMap":20},[25,1248,1249,1251,1253],{"class":27,"line":28},[25,1250,266],{"class":265},[25,1252,1040],{"class":269},[25,1254,284],{"class":265},[25,1256,1257,1259,1261],{"class":27,"line":34},[25,1258,583],{"class":265},[25,1260,1074],{"class":269},[25,1262,284],{"class":265},[25,1264,1265,1267,1269,1272,1274,1276,1279,1281,1283,1286,1288,1290],{"class":27,"line":40},[25,1266,1081],{"class":265},[25,1268,1084],{"class":269},[25,1270,1271],{"class":434}," colspan",[25,1273,438],{"class":265},[25,1275,442],{"class":441},[25,1277,1278],{"class":445},"3",[25,1280,442],{"class":441},[25,1282,272],{"class":265},[25,1284,1285],{"class":275},"Table",[25,1287,279],{"class":265},[25,1289,1084],{"class":269},[25,1291,284],{"class":265},[25,1293,1294,1296,1298],{"class":27,"line":46},[25,1295,1134],{"class":265},[25,1297,1074],{"class":269},[25,1299,284],{"class":265},[25,1301,1302,1304,1306],{"class":27,"line":52},[25,1303,583],{"class":265},[25,1305,1074],{"class":269},[25,1307,284],{"class":265},[25,1309,1310,1312,1314,1316,1318,1320,1322],{"class":27,"line":58},[25,1311,1081],{"class":265},[25,1313,1084],{"class":269},[25,1315,272],{"class":265},[25,1317,1089],{"class":275},[25,1319,279],{"class":265},[25,1321,1084],{"class":269},[25,1323,284],{"class":265},[25,1325,1326,1328,1330,1332,1334,1336,1338],{"class":27,"line":64},[25,1327,1081],{"class":265},[25,1329,1084],{"class":269},[25,1331,272],{"class":265},[25,1333,1106],{"class":275},[25,1335,279],{"class":265},[25,1337,1084],{"class":269},[25,1339,284],{"class":265},[25,1341,1342,1344,1346,1348,1350,1352,1354],{"class":27,"line":70},[25,1343,1081],{"class":265},[25,1345,1084],{"class":269},[25,1347,272],{"class":265},[25,1349,1123],{"class":275},[25,1351,279],{"class":265},[25,1353,1084],{"class":269},[25,1355,284],{"class":265},[25,1357,1358,1360,1362],{"class":27,"line":76},[25,1359,1134],{"class":265},[25,1361,1074],{"class":269},[25,1363,284],{"class":265},[25,1365,1366,1368,1370],{"class":27,"line":83},[25,1367,583],{"class":265},[25,1369,1074],{"class":269},[25,1371,284],{"class":265},[25,1373,1374,1376,1378,1380,1382,1384,1386],{"class":27,"line":89},[25,1375,1081],{"class":265},[25,1377,1153],{"class":269},[25,1379,272],{"class":265},[25,1381,1158],{"class":275},[25,1383,279],{"class":265},[25,1385,1153],{"class":269},[25,1387,284],{"class":265},[25,1389,1390,1392,1394,1396,1398,1400,1402],{"class":27,"line":95},[25,1391,1081],{"class":265},[25,1393,1153],{"class":269},[25,1395,272],{"class":265},[25,1397,1175],{"class":275},[25,1399,279],{"class":265},[25,1401,1153],{"class":269},[25,1403,284],{"class":265},[25,1405,1406,1408,1410,1412,1414,1416,1418],{"class":27,"line":101},[25,1407,1081],{"class":265},[25,1409,1153],{"class":269},[25,1411,272],{"class":265},[25,1413,1192],{"class":275},[25,1415,279],{"class":265},[25,1417,1153],{"class":269},[25,1419,284],{"class":265},[25,1421,1422,1424,1426],{"class":27,"line":107},[25,1423,1134],{"class":265},[25,1425,1074],{"class":269},[25,1427,284],{"class":265},[25,1429,1430,1432,1434],{"class":27,"line":782},[25,1431,279],{"class":265},[25,1433,1040],{"class":269},[25,1435,284],{"class":265},[115,1437,1438],{},[481,1439],{"src":1440,"width":1220},"https:\u002F\u002Fi.imgur.com\u002FLmascWo.png",[112,1442,1443],{},[115,1444,1445,1446,1228,1449,1228,1452,1455],{},"可使用 ",[22,1447,1448],{},"\u003Cthead>",[22,1450,1451],{},"\u003Ctbody>",[22,1453,1454],{},"\u003Ctfoot>"," 將表格內容分區。\n不影響外觀，但提升 code 可讀性",[15,1457,1459],{"className":256,"code":1458,"language":258,"meta":20,"style":20},"\u003Ctable>\n  \u003Cthead>\n    \u003Ctr>\n      \u003Cth colspan=\"3\">Table\u003C\u002Fth>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Cth>title A\u003C\u002Fth>\n      \u003Cth>title B\u003C\u002Fth>\n      \u003Cth>title C\u003C\u002Fth>\n    \u003C\u002Ftr>\n  \u003C\u002Fthead>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd>content A\u003C\u002Ftd>\n      \u003Ctd>content B\u003C\u002Ftd>\n      \u003Ctd>content C\u003C\u002Ftd>\n    \u003C\u002Ftr>\n  \u003C\u002Ftbody>\n  \u003Ctfoot>\n    \u003Ctr>\n      \u003Ctd colspan=\"3\">Update Information\u003C\u002Ftd>\n    \u003C\u002Ftr>\n  \u003C\u002Ftfoot>\n\u003C\u002Ftable>\n",[22,1460,1461,1469,1478,1486,1513,1522,1530,1546,1562,1578,1586,1594,1603,1611,1627,1643,1659,1667,1675,1684,1692,1719,1727,1735],{"__ignoreMap":20},[25,1462,1463,1465,1467],{"class":27,"line":28},[25,1464,266],{"class":265},[25,1466,1040],{"class":269},[25,1468,284],{"class":265},[25,1470,1471,1473,1476],{"class":27,"line":34},[25,1472,583],{"class":265},[25,1474,1475],{"class":269},"thead",[25,1477,284],{"class":265},[25,1479,1480,1482,1484],{"class":27,"line":40},[25,1481,1081],{"class":265},[25,1483,1074],{"class":269},[25,1485,284],{"class":265},[25,1487,1488,1491,1493,1495,1497,1499,1501,1503,1505,1507,1509,1511],{"class":27,"line":46},[25,1489,1490],{"class":265},"      \u003C",[25,1492,1084],{"class":269},[25,1494,1271],{"class":434},[25,1496,438],{"class":265},[25,1498,442],{"class":441},[25,1500,1278],{"class":445},[25,1502,442],{"class":441},[25,1504,272],{"class":265},[25,1506,1285],{"class":275},[25,1508,279],{"class":265},[25,1510,1084],{"class":269},[25,1512,284],{"class":265},[25,1514,1515,1518,1520],{"class":27,"line":52},[25,1516,1517],{"class":265},"    \u003C\u002F",[25,1519,1074],{"class":269},[25,1521,284],{"class":265},[25,1523,1524,1526,1528],{"class":27,"line":58},[25,1525,1081],{"class":265},[25,1527,1074],{"class":269},[25,1529,284],{"class":265},[25,1531,1532,1534,1536,1538,1540,1542,1544],{"class":27,"line":64},[25,1533,1490],{"class":265},[25,1535,1084],{"class":269},[25,1537,272],{"class":265},[25,1539,1089],{"class":275},[25,1541,279],{"class":265},[25,1543,1084],{"class":269},[25,1545,284],{"class":265},[25,1547,1548,1550,1552,1554,1556,1558,1560],{"class":27,"line":70},[25,1549,1490],{"class":265},[25,1551,1084],{"class":269},[25,1553,272],{"class":265},[25,1555,1106],{"class":275},[25,1557,279],{"class":265},[25,1559,1084],{"class":269},[25,1561,284],{"class":265},[25,1563,1564,1566,1568,1570,1572,1574,1576],{"class":27,"line":76},[25,1565,1490],{"class":265},[25,1567,1084],{"class":269},[25,1569,272],{"class":265},[25,1571,1123],{"class":275},[25,1573,279],{"class":265},[25,1575,1084],{"class":269},[25,1577,284],{"class":265},[25,1579,1580,1582,1584],{"class":27,"line":83},[25,1581,1517],{"class":265},[25,1583,1074],{"class":269},[25,1585,284],{"class":265},[25,1587,1588,1590,1592],{"class":27,"line":89},[25,1589,1134],{"class":265},[25,1591,1475],{"class":269},[25,1593,284],{"class":265},[25,1595,1596,1598,1601],{"class":27,"line":95},[25,1597,583],{"class":265},[25,1599,1600],{"class":269},"tbody",[25,1602,284],{"class":265},[25,1604,1605,1607,1609],{"class":27,"line":101},[25,1606,1081],{"class":265},[25,1608,1074],{"class":269},[25,1610,284],{"class":265},[25,1612,1613,1615,1617,1619,1621,1623,1625],{"class":27,"line":107},[25,1614,1490],{"class":265},[25,1616,1153],{"class":269},[25,1618,272],{"class":265},[25,1620,1158],{"class":275},[25,1622,279],{"class":265},[25,1624,1153],{"class":269},[25,1626,284],{"class":265},[25,1628,1629,1631,1633,1635,1637,1639,1641],{"class":27,"line":782},[25,1630,1490],{"class":265},[25,1632,1153],{"class":269},[25,1634,272],{"class":265},[25,1636,1175],{"class":275},[25,1638,279],{"class":265},[25,1640,1153],{"class":269},[25,1642,284],{"class":265},[25,1644,1645,1647,1649,1651,1653,1655,1657],{"class":27,"line":791},[25,1646,1490],{"class":265},[25,1648,1153],{"class":269},[25,1650,272],{"class":265},[25,1652,1192],{"class":275},[25,1654,279],{"class":265},[25,1656,1153],{"class":269},[25,1658,284],{"class":265},[25,1660,1661,1663,1665],{"class":27,"line":811},[25,1662,1517],{"class":265},[25,1664,1074],{"class":269},[25,1666,284],{"class":265},[25,1668,1669,1671,1673],{"class":27,"line":828},[25,1670,1134],{"class":265},[25,1672,1600],{"class":269},[25,1674,284],{"class":265},[25,1676,1677,1679,1682],{"class":27,"line":845},[25,1678,583],{"class":265},[25,1680,1681],{"class":269},"tfoot",[25,1683,284],{"class":265},[25,1685,1686,1688,1690],{"class":27,"line":862},[25,1687,1081],{"class":265},[25,1689,1074],{"class":269},[25,1691,284],{"class":265},[25,1693,1694,1696,1698,1700,1702,1704,1706,1708,1710,1713,1715,1717],{"class":27,"line":871},[25,1695,1490],{"class":265},[25,1697,1153],{"class":269},[25,1699,1271],{"class":434},[25,1701,438],{"class":265},[25,1703,442],{"class":441},[25,1705,1278],{"class":445},[25,1707,442],{"class":441},[25,1709,272],{"class":265},[25,1711,1712],{"class":275},"Update Information",[25,1714,279],{"class":265},[25,1716,1153],{"class":269},[25,1718,284],{"class":265},[25,1720,1721,1723,1725],{"class":27,"line":891},[25,1722,1517],{"class":265},[25,1724,1074],{"class":269},[25,1726,284],{"class":265},[25,1728,1729,1731,1733],{"class":27,"line":908},[25,1730,1134],{"class":265},[25,1732,1681],{"class":269},[25,1734,284],{"class":265},[25,1736,1737,1739,1741],{"class":27,"line":925},[25,1738,279],{"class":265},[25,1740,1040],{"class":269},[25,1742,284],{"class":265},[115,1744,1745],{},[481,1746],{"src":1747,"width":1220},"https:\u002F\u002Fi.imgur.com\u002Fm9cPkEz.png",[11,1749,1750],{"id":1750},"form",[126,1752,1753,1781],{},[129,1754,1755,1756],{},"label",[126,1757,1758,1761,1764,1772,1775,1778],{},[129,1759,1760],{},"action：送到的頁面",[129,1762,1763],{},"for：label 限定的參數",[129,1765,1766,1767],{},"method：表單送出的方法 GET 或 POST\n",[112,1768,1769],{},[115,1770,1771],{},"method=\"\" 預設為 get\nget -> 會將資訊夾帶在網址，適合提交公開非隱私資料 (如搜尋關鍵字)\npost -> 會隱藏傳送的參數，適合提交隱私資訊 (如登入帳號密碼)",[129,1773,1774],{},"type：定義 input 型別，根據型別可輸入各種值",[129,1776,1777],{},"size：輸入框的長度",[129,1779,1780],{},"maxlength：輸入框字數限制",[129,1782,1783,1784,1785,1784,1787,1784,1791,1793,1799,1801,1802,2274,2279,2284,2289],{},"input","\n  ",[314,1786],{},[481,1788],{"src":1789,"width":1790},"https:\u002F\u002Fi.imgur.com\u002F604NvcP.png",400,[314,1792],{},[431,1794,1798],{"href":1795,"rel":1796},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Finput",[1797],"nofollow","🔗More Input List",[314,1800],{},"sample：",[15,1803,1805],{"className":256,"code":1804,"language":258,"meta":20,"style":20},"\u003Cbody>\n  \u003Cform action=\"\" method=\"post\">\n    \u003Clabel for=\"username\">帳號\u003C\u002Flabel>\n    \u003Cinput id=\"username\" type=\"text\" name=\"username\" \u002F>\n    \u003Clabel for=\"password\">密碼\u003C\u002Flabel>\n    \u003Cinput id=\"password\" name=\"password\" type=\"password\" \u002F>\n\n    \u003Cinput type=\"checkbox\" id=\"show\" \u002F> 顯示密碼\n    \u003Cbutton type=\"submit\">登入\u003C\u002Fbutton>\n  \u003C\u002Fform>\n\n  \u003Cscript>\n    let checkbox = document.querySelector(\"#show\");\n    let password = document.querySelector(\"#password\");\n    checkbox.addEventListener(\"click\", () => {\n      if (password.type == \"password\") {\n        password.type = \"text\";\n      } else {\n        password.type = \"password\";\n      }\n    });\n  \u003C\u002Fscript>\n\u003C\u002Fbody>\n",[22,1806,1807,1816,1844,1873,1913,1941,1979,1983,2016,2045,2053,2057,2066,2104,2132,2163,2196,2216,2226,2244,2249,2258,2266],{"__ignoreMap":20},[25,1808,1809,1811,1814],{"class":27,"line":28},[25,1810,266],{"class":265},[25,1812,1813],{"class":269},"body",[25,1815,284],{"class":265},[25,1817,1818,1820,1822,1825,1827,1830,1833,1835,1837,1840,1842],{"class":27,"line":34},[25,1819,583],{"class":265},[25,1821,1750],{"class":269},[25,1823,1824],{"class":434}," action",[25,1826,438],{"class":265},[25,1828,1829],{"class":441},"\"\"",[25,1831,1832],{"class":434}," method",[25,1834,438],{"class":265},[25,1836,442],{"class":441},[25,1838,1839],{"class":445},"post",[25,1841,442],{"class":441},[25,1843,284],{"class":265},[25,1845,1846,1848,1850,1853,1855,1857,1860,1862,1864,1867,1869,1871],{"class":27,"line":40},[25,1847,1081],{"class":265},[25,1849,1755],{"class":269},[25,1851,1852],{"class":434}," for",[25,1854,438],{"class":265},[25,1856,442],{"class":441},[25,1858,1859],{"class":445},"username",[25,1861,442],{"class":441},[25,1863,272],{"class":265},[25,1865,1866],{"class":275},"帳號",[25,1868,279],{"class":265},[25,1870,1755],{"class":269},[25,1872,284],{"class":265},[25,1874,1875,1877,1879,1882,1884,1886,1888,1890,1892,1894,1896,1898,1900,1903,1905,1907,1909,1911],{"class":27,"line":46},[25,1876,1081],{"class":265},[25,1878,1783],{"class":269},[25,1880,1881],{"class":434}," id",[25,1883,438],{"class":265},[25,1885,442],{"class":441},[25,1887,1859],{"class":445},[25,1889,442],{"class":441},[25,1891,567],{"class":434},[25,1893,438],{"class":265},[25,1895,442],{"class":441},[25,1897,379],{"class":445},[25,1899,442],{"class":441},[25,1901,1902],{"class":434}," name",[25,1904,438],{"class":265},[25,1906,442],{"class":441},[25,1908,1859],{"class":445},[25,1910,442],{"class":441},[25,1912,350],{"class":265},[25,1914,1915,1917,1919,1921,1923,1925,1928,1930,1932,1935,1937,1939],{"class":27,"line":52},[25,1916,1081],{"class":265},[25,1918,1755],{"class":269},[25,1920,1852],{"class":434},[25,1922,438],{"class":265},[25,1924,442],{"class":441},[25,1926,1927],{"class":445},"password",[25,1929,442],{"class":441},[25,1931,272],{"class":265},[25,1933,1934],{"class":275},"密碼",[25,1936,279],{"class":265},[25,1938,1755],{"class":269},[25,1940,284],{"class":265},[25,1942,1943,1945,1947,1949,1951,1953,1955,1957,1959,1961,1963,1965,1967,1969,1971,1973,1975,1977],{"class":27,"line":58},[25,1944,1081],{"class":265},[25,1946,1783],{"class":269},[25,1948,1881],{"class":434},[25,1950,438],{"class":265},[25,1952,442],{"class":441},[25,1954,1927],{"class":445},[25,1956,442],{"class":441},[25,1958,1902],{"class":434},[25,1960,438],{"class":265},[25,1962,442],{"class":441},[25,1964,1927],{"class":445},[25,1966,442],{"class":441},[25,1968,567],{"class":434},[25,1970,438],{"class":265},[25,1972,442],{"class":441},[25,1974,1927],{"class":445},[25,1976,442],{"class":441},[25,1978,350],{"class":265},[25,1980,1981],{"class":27,"line":64},[25,1982,80],{"emptyLinePlaceholder":79},[25,1984,1985,1987,1989,1991,1993,1995,1998,2000,2002,2004,2006,2009,2011,2013],{"class":27,"line":70},[25,1986,1081],{"class":265},[25,1988,1783],{"class":269},[25,1990,567],{"class":434},[25,1992,438],{"class":265},[25,1994,442],{"class":441},[25,1996,1997],{"class":445},"checkbox",[25,1999,442],{"class":441},[25,2001,1881],{"class":434},[25,2003,438],{"class":265},[25,2005,442],{"class":441},[25,2007,2008],{"class":445},"show",[25,2010,442],{"class":441},[25,2012,317],{"class":265},[25,2014,2015],{"class":275}," 顯示密碼\n",[25,2017,2018,2020,2023,2025,2027,2029,2032,2034,2036,2039,2041,2043],{"class":27,"line":76},[25,2019,1081],{"class":265},[25,2021,2022],{"class":269},"button",[25,2024,567],{"class":434},[25,2026,438],{"class":265},[25,2028,442],{"class":441},[25,2030,2031],{"class":445},"submit",[25,2033,442],{"class":441},[25,2035,272],{"class":265},[25,2037,2038],{"class":275},"登入",[25,2040,279],{"class":265},[25,2042,2022],{"class":269},[25,2044,284],{"class":265},[25,2046,2047,2049,2051],{"class":27,"line":83},[25,2048,1134],{"class":265},[25,2050,1750],{"class":269},[25,2052,284],{"class":265},[25,2054,2055],{"class":27,"line":89},[25,2056,80],{"emptyLinePlaceholder":79},[25,2058,2059,2061,2064],{"class":27,"line":95},[25,2060,583],{"class":265},[25,2062,2063],{"class":269},"script",[25,2065,284],{"class":265},[25,2067,2068,2072,2075,2078,2081,2084,2088,2091,2093,2096,2098,2101],{"class":27,"line":101},[25,2069,2071],{"class":2070},"sbsja","    let",[25,2073,2074],{"class":275}," checkbox ",[25,2076,438],{"class":2077},"smGrS",[25,2079,2080],{"class":275}," document",[25,2082,2083],{"class":265},".",[25,2085,2087],{"class":2086},"sGLFI","querySelector",[25,2089,2090],{"class":275},"(",[25,2092,442],{"class":441},[25,2094,2095],{"class":445},"#show",[25,2097,442],{"class":441},[25,2099,2100],{"class":275},")",[25,2102,2103],{"class":265},";\n",[25,2105,2106,2108,2111,2113,2115,2117,2119,2121,2123,2126,2128,2130],{"class":27,"line":107},[25,2107,2071],{"class":2070},[25,2109,2110],{"class":275}," password ",[25,2112,438],{"class":2077},[25,2114,2080],{"class":275},[25,2116,2083],{"class":265},[25,2118,2087],{"class":2086},[25,2120,2090],{"class":275},[25,2122,442],{"class":441},[25,2124,2125],{"class":445},"#password",[25,2127,442],{"class":441},[25,2129,2100],{"class":275},[25,2131,2103],{"class":265},[25,2133,2134,2137,2139,2142,2144,2146,2149,2151,2154,2157,2160],{"class":27,"line":782},[25,2135,2136],{"class":275},"    checkbox",[25,2138,2083],{"class":265},[25,2140,2141],{"class":2086},"addEventListener",[25,2143,2090],{"class":275},[25,2145,442],{"class":441},[25,2147,2148],{"class":445},"click",[25,2150,442],{"class":441},[25,2152,2153],{"class":265},",",[25,2155,2156],{"class":265}," ()",[25,2158,2159],{"class":2070}," =>",[25,2161,2162],{"class":265}," {\n",[25,2164,2165,2169,2173,2175,2177,2180,2183,2186,2188,2190,2193],{"class":27,"line":791},[25,2166,2168],{"class":2167},"sVHd0","      if",[25,2170,2172],{"class":2171},"skxfh"," (",[25,2174,1927],{"class":275},[25,2176,2083],{"class":265},[25,2178,2179],{"class":275},"type",[25,2181,2182],{"class":2077}," ==",[25,2184,2185],{"class":441}," \"",[25,2187,1927],{"class":445},[25,2189,442],{"class":441},[25,2191,2192],{"class":2171},") ",[25,2194,2195],{"class":265},"{\n",[25,2197,2198,2201,2203,2205,2208,2210,2212,2214],{"class":27,"line":811},[25,2199,2200],{"class":275},"        password",[25,2202,2083],{"class":265},[25,2204,2179],{"class":275},[25,2206,2207],{"class":2077}," =",[25,2209,2185],{"class":441},[25,2211,379],{"class":445},[25,2213,442],{"class":441},[25,2215,2103],{"class":265},[25,2217,2218,2221,2224],{"class":27,"line":828},[25,2219,2220],{"class":265},"      }",[25,2222,2223],{"class":2167}," else",[25,2225,2162],{"class":265},[25,2227,2228,2230,2232,2234,2236,2238,2240,2242],{"class":27,"line":845},[25,2229,2200],{"class":275},[25,2231,2083],{"class":265},[25,2233,2179],{"class":275},[25,2235,2207],{"class":2077},[25,2237,2185],{"class":441},[25,2239,1927],{"class":445},[25,2241,442],{"class":441},[25,2243,2103],{"class":265},[25,2245,2246],{"class":27,"line":862},[25,2247,2248],{"class":265},"      }\n",[25,2250,2251,2254,2256],{"class":27,"line":871},[25,2252,2253],{"class":265},"    }",[25,2255,2100],{"class":275},[25,2257,2103],{"class":265},[25,2259,2260,2262,2264],{"class":27,"line":891},[25,2261,1134],{"class":265},[25,2263,2063],{"class":269},[25,2265,284],{"class":265},[25,2267,2268,2270,2272],{"class":27,"line":908},[25,2269,279],{"class":265},[25,2271,1813],{"class":269},[25,2273,284],{"class":265},[112,2275,2276],{},[115,2277,2278],{},"加入 required 參數為必填",[112,2280,2281],{},[115,2282,2283],{},"checkbox 加入 checked 參數為預設打勾",[112,2285,2286],{},[115,2287,2288],{},"button 放在 form 裡面時預設 type=submit，會將 form 當中 name 參數的 value 傳給後端，若放在 form 外面時預設 type=button，無任何效果",[112,2290,2291],{},[115,2292,2293],{},"只有 name 參數會被傳送到後端，HTML 也以相同 name 名稱視為同一主體，\n例如有 3 個 input 的 name 相同，則這個 name 回傳的值由這 3 個 input 的內容共同決定，像是 3 選 1 或複選",[11,2295,2296],{"id":2296},"select",[15,2298,2300],{"className":256,"code":2299,"language":258,"meta":20,"style":20},"\u003Cselect name=\"gender\" id=\"gender\" required>\n  \u003Coption disabled selected value>請選擇性別\u003C\u002Foption>\n  \u003Coption value=\"male\">男性\u003C\u002Foption>\n  \u003Coption value=\"female\">女性\u003C\u002Foption>\n  \u003Coption value=\"other\">其他\u003C\u002Foption>\n\u003C\u002Fselect>\n",[22,2301,2302,2334,2361,2389,2417,2445],{"__ignoreMap":20},[25,2303,2304,2306,2308,2310,2312,2314,2317,2319,2321,2323,2325,2327,2329,2332],{"class":27,"line":28},[25,2305,266],{"class":265},[25,2307,2296],{"class":269},[25,2309,1902],{"class":434},[25,2311,438],{"class":265},[25,2313,442],{"class":441},[25,2315,2316],{"class":445},"gender",[25,2318,442],{"class":441},[25,2320,1881],{"class":434},[25,2322,438],{"class":265},[25,2324,442],{"class":441},[25,2326,2316],{"class":445},[25,2328,442],{"class":441},[25,2330,2331],{"class":434}," required",[25,2333,284],{"class":265},[25,2335,2336,2338,2341,2344,2347,2350,2352,2355,2357,2359],{"class":27,"line":34},[25,2337,583],{"class":265},[25,2339,2340],{"class":269},"option",[25,2342,2343],{"class":434}," disabled",[25,2345,2346],{"class":434}," selected",[25,2348,2349],{"class":434}," value",[25,2351,272],{"class":265},[25,2353,2354],{"class":275},"請選擇性別",[25,2356,279],{"class":265},[25,2358,2340],{"class":269},[25,2360,284],{"class":265},[25,2362,2363,2365,2367,2369,2371,2373,2376,2378,2380,2383,2385,2387],{"class":27,"line":40},[25,2364,583],{"class":265},[25,2366,2340],{"class":269},[25,2368,2349],{"class":434},[25,2370,438],{"class":265},[25,2372,442],{"class":441},[25,2374,2375],{"class":445},"male",[25,2377,442],{"class":441},[25,2379,272],{"class":265},[25,2381,2382],{"class":275},"男性",[25,2384,279],{"class":265},[25,2386,2340],{"class":269},[25,2388,284],{"class":265},[25,2390,2391,2393,2395,2397,2399,2401,2404,2406,2408,2411,2413,2415],{"class":27,"line":46},[25,2392,583],{"class":265},[25,2394,2340],{"class":269},[25,2396,2349],{"class":434},[25,2398,438],{"class":265},[25,2400,442],{"class":441},[25,2402,2403],{"class":445},"female",[25,2405,442],{"class":441},[25,2407,272],{"class":265},[25,2409,2410],{"class":275},"女性",[25,2412,279],{"class":265},[25,2414,2340],{"class":269},[25,2416,284],{"class":265},[25,2418,2419,2421,2423,2425,2427,2429,2432,2434,2436,2439,2441,2443],{"class":27,"line":52},[25,2420,583],{"class":265},[25,2422,2340],{"class":269},[25,2424,2349],{"class":434},[25,2426,438],{"class":265},[25,2428,442],{"class":441},[25,2430,2431],{"class":445},"other",[25,2433,442],{"class":441},[25,2435,272],{"class":265},[25,2437,2438],{"class":275},"其他",[25,2440,279],{"class":265},[25,2442,2340],{"class":269},[25,2444,284],{"class":265},[25,2446,2447,2449,2451],{"class":27,"line":58},[25,2448,279],{"class":265},[25,2450,2296],{"class":269},[25,2452,284],{"class":265},[112,2454,2455],{},[115,2456,2457],{},"select-option 設定下拉式選單",[11,2459,2460],{"id":2460},"datalist",[15,2462,2464],{"className":256,"code":2463,"language":258,"meta":20,"style":20},"\u003Clabel for=\"area\">地區\u003C\u002Flabel>\n\u003Cinput list=\"area_list\" type=\"text\" name=\"area\" id=\"area\" \u002F>\n\u003Cdatalist id=\"area_list\">\n  \u003Coption value=\"台北市\">台北市\u003C\u002Foption>\n  \u003Coption value=\"台中市\">台中市\u003C\u002Foption>\n  \u003Coption value=\"高雄市\">高雄市\u003C\u002Foption>\n\u003C\u002Fdatalist>\n",[22,2465,2466,2494,2544,2562,2589,2616,2643],{"__ignoreMap":20},[25,2467,2468,2470,2472,2474,2476,2478,2481,2483,2485,2488,2490,2492],{"class":27,"line":28},[25,2469,266],{"class":265},[25,2471,1755],{"class":269},[25,2473,1852],{"class":434},[25,2475,438],{"class":265},[25,2477,442],{"class":441},[25,2479,2480],{"class":445},"area",[25,2482,442],{"class":441},[25,2484,272],{"class":265},[25,2486,2487],{"class":275},"地區",[25,2489,279],{"class":265},[25,2491,1755],{"class":269},[25,2493,284],{"class":265},[25,2495,2496,2498,2500,2503,2505,2507,2510,2512,2514,2516,2518,2520,2522,2524,2526,2528,2530,2532,2534,2536,2538,2540,2542],{"class":27,"line":34},[25,2497,266],{"class":265},[25,2499,1783],{"class":269},[25,2501,2502],{"class":434}," list",[25,2504,438],{"class":265},[25,2506,442],{"class":441},[25,2508,2509],{"class":445},"area_list",[25,2511,442],{"class":441},[25,2513,567],{"class":434},[25,2515,438],{"class":265},[25,2517,442],{"class":441},[25,2519,379],{"class":445},[25,2521,442],{"class":441},[25,2523,1902],{"class":434},[25,2525,438],{"class":265},[25,2527,442],{"class":441},[25,2529,2480],{"class":445},[25,2531,442],{"class":441},[25,2533,1881],{"class":434},[25,2535,438],{"class":265},[25,2537,442],{"class":441},[25,2539,2480],{"class":445},[25,2541,442],{"class":441},[25,2543,350],{"class":265},[25,2545,2546,2548,2550,2552,2554,2556,2558,2560],{"class":27,"line":40},[25,2547,266],{"class":265},[25,2549,2460],{"class":269},[25,2551,1881],{"class":434},[25,2553,438],{"class":265},[25,2555,442],{"class":441},[25,2557,2509],{"class":445},[25,2559,442],{"class":441},[25,2561,284],{"class":265},[25,2563,2564,2566,2568,2570,2572,2574,2577,2579,2581,2583,2585,2587],{"class":27,"line":46},[25,2565,583],{"class":265},[25,2567,2340],{"class":269},[25,2569,2349],{"class":434},[25,2571,438],{"class":265},[25,2573,442],{"class":441},[25,2575,2576],{"class":445},"台北市",[25,2578,442],{"class":441},[25,2580,272],{"class":265},[25,2582,2576],{"class":275},[25,2584,279],{"class":265},[25,2586,2340],{"class":269},[25,2588,284],{"class":265},[25,2590,2591,2593,2595,2597,2599,2601,2604,2606,2608,2610,2612,2614],{"class":27,"line":52},[25,2592,583],{"class":265},[25,2594,2340],{"class":269},[25,2596,2349],{"class":434},[25,2598,438],{"class":265},[25,2600,442],{"class":441},[25,2602,2603],{"class":445},"台中市",[25,2605,442],{"class":441},[25,2607,272],{"class":265},[25,2609,2603],{"class":275},[25,2611,279],{"class":265},[25,2613,2340],{"class":269},[25,2615,284],{"class":265},[25,2617,2618,2620,2622,2624,2626,2628,2631,2633,2635,2637,2639,2641],{"class":27,"line":58},[25,2619,583],{"class":265},[25,2621,2340],{"class":269},[25,2623,2349],{"class":434},[25,2625,438],{"class":265},[25,2627,442],{"class":441},[25,2629,2630],{"class":445},"高雄市",[25,2632,442],{"class":441},[25,2634,272],{"class":265},[25,2636,2630],{"class":275},[25,2638,279],{"class":265},[25,2640,2340],{"class":269},[25,2642,284],{"class":265},[25,2644,2645,2647,2649],{"class":27,"line":64},[25,2646,279],{"class":265},[25,2648,2460],{"class":269},[25,2650,284],{"class":265},[112,2652,2653],{},[115,2654,2655],{},"input 設定 list = datalist，將 user 的 input 值控制在 datalist 設定好的選項之中",[11,2657,2658],{"id":2658},"textarea",[15,2660,2662],{"className":256,"code":2661,"language":258,"meta":20,"style":20},"\u003Clabel for=\"introduction\">自我介紹\u003C\u002Flabel>\n\u003Ctextarea\n  name=\"introduction\"\n  id=\"introduction\"\n  placeholder=\"請介紹自己\"\n  cols=\"30\"\n  rows=\"10\"\n>\u003C\u002Ftextarea>\n",[22,2663,2664,2692,2699,2713,2726,2740,2754,2768],{"__ignoreMap":20},[25,2665,2666,2668,2670,2672,2674,2676,2679,2681,2683,2686,2688,2690],{"class":27,"line":28},[25,2667,266],{"class":265},[25,2669,1755],{"class":269},[25,2671,1852],{"class":434},[25,2673,438],{"class":265},[25,2675,442],{"class":441},[25,2677,2678],{"class":445},"introduction",[25,2680,442],{"class":441},[25,2682,272],{"class":265},[25,2684,2685],{"class":275},"自我介紹",[25,2687,279],{"class":265},[25,2689,1755],{"class":269},[25,2691,284],{"class":265},[25,2693,2694,2696],{"class":27,"line":34},[25,2695,266],{"class":265},[25,2697,2698],{"class":269},"textarea\n",[25,2700,2701,2704,2706,2708,2710],{"class":27,"line":40},[25,2702,2703],{"class":434},"  name",[25,2705,438],{"class":265},[25,2707,442],{"class":441},[25,2709,2678],{"class":445},[25,2711,2712],{"class":441},"\"\n",[25,2714,2715,2718,2720,2722,2724],{"class":27,"line":46},[25,2716,2717],{"class":434},"  id",[25,2719,438],{"class":265},[25,2721,442],{"class":441},[25,2723,2678],{"class":445},[25,2725,2712],{"class":441},[25,2727,2728,2731,2733,2735,2738],{"class":27,"line":52},[25,2729,2730],{"class":434},"  placeholder",[25,2732,438],{"class":265},[25,2734,442],{"class":441},[25,2736,2737],{"class":445},"請介紹自己",[25,2739,2712],{"class":441},[25,2741,2742,2745,2747,2749,2752],{"class":27,"line":58},[25,2743,2744],{"class":434},"  cols",[25,2746,438],{"class":265},[25,2748,442],{"class":441},[25,2750,2751],{"class":445},"30",[25,2753,2712],{"class":441},[25,2755,2756,2759,2761,2763,2766],{"class":27,"line":64},[25,2757,2758],{"class":434},"  rows",[25,2760,438],{"class":265},[25,2762,442],{"class":441},[25,2764,2765],{"class":445},"10",[25,2767,2712],{"class":441},[25,2769,2770,2772,2774],{"class":27,"line":70},[25,2771,411],{"class":265},[25,2773,2658],{"class":269},[25,2775,284],{"class":265},[112,2777,2778],{},[115,2779,2780],{},"多行內容輸入框",[11,2782,2784],{"id":2783},"entity-code","entity code",[112,2786,2787],{},[115,2788,2789],{},[431,2790,2793],{"href":2791,"rel":2792},"https:\u002F\u002Fwww.htmlsymbols.xyz\u002F",[1797],"符號代碼清單",[11,2795,2796],{"id":2796},"icon",[15,2798,2800],{"className":256,"code":2799,"language":258,"meta":20,"style":20},"\u003Chead>\n  \u003Clink rel=\"icon\" href=\".\u002Ffavicon.ico\" \u002F>\n\u003C\u002Fhead>\n",[22,2801,2802,2811,2842],{"__ignoreMap":20},[25,2803,2804,2806,2809],{"class":27,"line":28},[25,2805,266],{"class":265},[25,2807,2808],{"class":269},"head",[25,2810,284],{"class":265},[25,2812,2813,2815,2818,2821,2823,2825,2827,2829,2831,2833,2835,2838,2840],{"class":27,"line":34},[25,2814,583],{"class":265},[25,2816,2817],{"class":269},"link",[25,2819,2820],{"class":434}," rel",[25,2822,438],{"class":265},[25,2824,442],{"class":441},[25,2826,2796],{"class":445},[25,2828,442],{"class":441},[25,2830,435],{"class":434},[25,2832,438],{"class":265},[25,2834,442],{"class":441},[25,2836,2837],{"class":445},".\u002Ffavicon.ico",[25,2839,442],{"class":441},[25,2841,350],{"class":265},[25,2843,2844,2846,2848],{"class":27,"line":40},[25,2845,279],{"class":265},[25,2847,2808],{"class":269},[25,2849,284],{"class":265},[112,2851,2852],{},[115,2853,2854],{},"於網頁頁籤顯示 icon",[11,2856,2858],{"id":2857},"semantic-tags-語意標籤","Semantic Tags (語意標籤)",[112,2860,2861],{},[115,2862,2863],{},"HTML5 用更精確的 element 取代 div，方便維護及閱讀並增強 SEO",[126,2865,2866,2869,2872,2875,2878,2881,2884],{},[129,2867,2868],{},"section: 有意義的主題區塊，例如表格的篩選列",[129,2870,2871],{},"article: 可以獨立的完整區塊，例如一篇文章",[129,2873,2874],{},"nav: 導航連結區塊",[129,2876,2877],{},"header: 標頭區塊",[129,2879,2880],{},"footer: 頁尾區塊",[129,2882,2883],{},"main: 頁面主要內容區塊，每個頁面只能有 1 個",[129,2885,2886],{},"aside: 跟主要內容無關的區塊",[115,2888,2889],{},[481,2890],{"alt":20,"src":2891},"https:\u002F\u002Fi.imgur.com\u002FWyX5qEn.png",[2893,2894,2895],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sQzsp, html code.shiki .sQzsp{--shiki-light:#E53935;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9AJx, html code.shiki .s9AJx{--shiki-light:#9C3EDA;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sbsja, html code.shiki .sbsja{--shiki-light:#9C3EDA;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sGLFI, html code.shiki .sGLFI{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .skxfh, html code.shiki .skxfh{--shiki-light:#E53935;--shiki-default:#24292E;--shiki-dark:#E1E4E8}",{"title":20,"searchDepth":40,"depth":40,"links":2897},[2898,2899,2900,2901,2902,2903,2904,2905,2906,2907,2908,2909,2910,2911,2912,2913,2914,2915,2916],{"id":13,"depth":34,"text":13},{"id":123,"depth":34,"text":124},{"id":221,"depth":34,"text":222},{"id":249,"depth":34,"text":250},{"id":287,"depth":34,"text":288},{"id":334,"depth":34,"text":335},{"id":358,"depth":34,"text":358},{"id":418,"depth":34,"text":419},{"id":481,"depth":34,"text":481},{"id":551,"depth":34,"text":552},{"id":957,"depth":34,"text":958},{"id":1040,"depth":34,"text":1040},{"id":1750,"depth":34,"text":1750},{"id":2296,"depth":34,"text":2296},{"id":2460,"depth":34,"text":2460},{"id":2658,"depth":34,"text":2658},{"id":2783,"depth":34,"text":2784},{"id":2796,"depth":34,"text":2796},{"id":2857,"depth":34,"text":2858},"HTML","2024-09-13","HTML 基礎語法與常用標籤",false,"md",null,{},"\u002Fblog\u002Fhtml\u002Fnote",{"title":5,"description":2919},"blog\u002Fhtml\u002Fnote",[2928,2917],"Frontend","2024-09-21","z-nj5_nWIt1JGRGsmSQeAaod4wFRkXLeQnqyZ8_3Ko8",1780512500948]