็†ฑ้–€ๅˆ†้กž
 ่ผ‰ๅ…ฅไธญ…
็›ฎ้Œ„

๐ŸŒ HTML ็š„่ตทๆบ、็™ผๅฑ•่ˆ‡ๆœชไพ†ๆ‡‰็”จ

    ๐ŸŒ HTML ็š„่ตทๆบ、็™ผๅฑ•่ˆ‡ๆœชไพ†ๆ‡‰็”จ

    HTML(HyperText Markup Language)ๆ˜ฏๆง‹ๅปบ็ถฒ้ ็š„ๅŸบ็Ÿณ่ชž่จ€。ๅพž 1990 ๅนด่ช•็”Ÿ่‡ณไปŠ,ๅฎƒไธๅชๆ˜ฏๆจ™่จ˜่ชž่จ€,ๆ›ดๆ˜ฏ็ถฒ้š›็ถฒ่ทฏ็š„「้ชจๆžถ」。ๆœฌๆ–‡ๅฐ‡ไป‹็ดน HTML ็š„่ตทๆบ、็™ผๅฑ•ๆญท็จ‹、ไธป่ฆๆ‡‰็”จ,ไปฅๅŠๅฎƒๅฆ‚ไฝ•ๅปถไผธๅ‡บ็พไปฃ็ถฒ้ ็”Ÿๆ…‹็š„ๅ„้ …ๆŠ€่ก“。

    ๐Ÿ•ฐ ไธ€、HTML ็š„่ตทๆบ

    HTML ็š„ๆญทๅฒๅฏ่ฟฝๆบฏ่‡ณ 1990 ๅนด,็”ฑ Tim Berners-Lee ๅœจๆญๆดฒๆ ธๅญ็ ”็ฉถ็ต„็น”(CERN)้–‹็™ผ,ๆ—จๅœจๅปบ็ซ‹ไธ€ๅ€‹่ฎ“็ง‘ๅญธๅฎถๅˆ†ไบซ็ ”็ฉถ่ณ‡่จŠ็š„็ณป็ตฑ。้€™ๅ€‹็ณป็ตฑๅพŒไพ†ๆผ”่ฎŠ็‚บ「ๅ…จ็ƒ่ณ‡่จŠ็ถฒ」(World Wide Web)。

    • HTML ็š„้ฆ–ๅ€‹็‰ˆๆœฌไธป่ฆ็”จๆ–ผๆ–‡ๅญ—่ˆ‡้€ฃ็ต็š„่ถ…้€ฃ็ตๅฑ•็คบ。
    • 1991 ๅนด,Berners-Lee ็™ผไฝˆไบ†「HTML ๆจ™็ฑค้›†」,ๅŒ…ๅซ 18 ๅ€‹ๅŸบๆœฌๆจ™็ฑค。
    • ้šจ่‘—็€่ฆฝๅ™จ(ๅฆ‚ Mosaic、Netscape)็š„่ˆˆ่ตท,HTML ๆˆ็‚บๅ…จ็ƒ่ณ‡่จŠ็ถฒ็š„ๆจ™ๆบ–่ชž่จ€。

    ๐Ÿ“ˆ ไบŒ、HTML ็š„็™ผๅฑ•ๆญท็จ‹

    HTML ็ถ“ๆญทไบ†ๅคšๆฌก็‰ˆๆœฌๆผ”้€ฒ,ๆฏไธ€ๆฌก้ƒฝๅผ•ๅ…ฅๆ–ฐ็š„่ชžๆณ•่ˆ‡ๆŠ€่ก“ไปฅ็ฌฆๅˆ็ถฒ้ ็š„ๆ™‚ไปฃ้œ€ๆฑ‚:

    ็‰ˆๆœฌๅนดไปฝ้‡้ปž็‰น่‰ฒ
    HTML 1.01993ๆœ€ๅˆ็‰ˆๆœฌ,็”จๆ–ผๅŸบๆœฌๆ–‡ไปถๆŽ’็‰ˆ่ˆ‡่ถ…้€ฃ็ต。
    HTML 2.01995ๅผ•ๅ…ฅ่กจๅ–ฎ(form)่ˆ‡่กจๆ ผ(table)。
    HTML 4.011999ๆ”ฏๆด CSS ๆจฃๅผ่กจ,ๆŽจๅ‹•็ตๆง‹่ˆ‡ๅค–่ง€ๅˆ†้›ข。
    XHTML 1.02000XML ๅŒ–็š„ HTML,ๅผทๅŒ–่ชžๆณ•ๅšด่ฌนๆ€ง。
    HTML52014ๅŠ ๅ…ฅๅฝฑ้Ÿณ(video/audio)、Canvas、่ชžๆ„ๅŒ–ๆจ™็ฑค。

    ๐Ÿ’ป ไธ‰、HTML ็š„ไธป่ฆๆ‡‰็”จ

    HTML ไธๅƒ…็”จๆ–ผ้œๆ…‹้ ้ข,ๅฎƒๅทฒ่ˆ‡ๅ…ถไป–ๅ‰็ซฏๆŠ€่ก“็ตๅˆๆˆ็‚บ「็ถฒ้ ๆ‡‰็”จ」็š„ๆ ธๅฟƒ:

    • ็ตๆง‹ๅŒ–ๅ…งๅฎน:HTML ๆไพ›้ ้ข้ชจๆžถ,็ตๅˆ CSS ๅ‘ˆ็พๆจฃๅผ。
    • ไบ’ๅ‹•ๆ€งๅฏฆ็พ:ๆญ้… JavaScript ๅฏๅปบ็ซ‹ๅ‹•ๆ…‹ไป‹้ข。
    • ๅฏๅญ˜ๅ–ๆ€ง(Accessibility):้€้Ž่ชžๆ„ๅŒ–ๆจ™็ฑค(ๅฆ‚ <header><article>)ๆๅ‡ๆœๅฐ‹ๅผ•ๆ“Ž็†่งฃๅบฆ。
    • ่ทจๅนณๅฐๆ”ฏๆด:HTML5 ๆ‡‰็”จๆ–ผๆ‰‹ๆฉŸ็ถฒ้ 、PWA(Progressive Web Apps)่ˆ‡ๆททๅˆๅผๆ‡‰็”จ。
    <!DOCTYPE html>
    <html lang="zh-TW">
    <head>
      <meta charset="utf-8">
      <title>ๆˆ‘็š„็ฌฌไธ€ๅ€‹ HTML ้ ้ข</title>
    </head>
    <body>
      <h1>ๆญก่ฟŽไพ†ๅˆฐๆˆ‘็š„็ถฒ็ซ™!</h1>
      <p>้€™ๆ˜ฏ HTML ็ตๆง‹็š„ๅŸบๆœฌ็ฏ„ไพ‹。</p>
    </body>
    </html>
    

    ๐Ÿš€ ๅ››、HTML ็š„ๆœชไพ†่ˆ‡่ก็”ŸๆŠ€่ก“

    ้šจ่‘— Web ๆŠ€่ก“ไธๆ–ท้€ฒๆญฅ,HTML ไธๆ–ท่ขซๅปถไผธ、็ตๅˆ่ˆ‡้ฉๆ–ฐ:

    • Web Components:ไปฅ HTML Template、Custom Elements ๅฝขๆˆๅฏ้‡็”จๅ…ƒไปถ。
    • PWA(Progressive Web App):HTML5 ่ˆ‡ Service Worker ๆ‰“้€ ่ฟ‘ไผผๅŽŸ็”Ÿ App ็š„้ซ”้ฉ—。
    • AMP(Accelerated Mobile Pages):็”ฑ Google ไธปๅฐŽ็š„ๅฟซ้€Ÿ่กŒๅ‹•็‰ˆ็ถฒ้ ๆจ™ๆบ–。
    • WebAssembly:่ฎ“็€่ฆฝๅ™จๅฏๅŸท่กŒ้ซ˜ๆ•ˆ่ƒฝ็จ‹ๅผ(ๅฆ‚ C/C++ ็ทจ่ญฏ็ตๆžœ)。

    ๐Ÿ“˜ ็ต่ชž

    HTML ๆ˜ฏ็ถฒ้ ไธ–็•Œ็š„่ตท้ปž,ไนŸๆ˜ฏ็พไปฃ็ถฒ้š›็ถฒ่ทฏ็”Ÿๆ…‹็š„ๆ ธๅฟƒ。ๅพžๆœ€ๅˆ็š„้œๆ…‹ๆจ™็ฑค่ชž่จ€,ๆผ”่ฎŠ็‚บ่ƒฝๆ‰ฟ่ผ‰ๅคšๅช’้ซ”่ˆ‡ๆ‡‰็”จ็จ‹ๅผ็š„ๅนณๅฐ。้šจ่‘—้›ฒ็ซฏ、AI ่ˆ‡่กŒๅ‹•ๆ‡‰็”จ็š„่žๅˆ,HTML ็š„่ง’่‰ฒๅฐ‡ๆ›ดๅŠ ้—œ้ต——ๅฎƒไธๅชๆ˜ฏ「ๆจ™่จ˜่ชž่จ€」,่€Œๆ˜ฏ「็ถฒ่ทฏ็š„้€š็”จ่ชž่จ€」。


    ๐Ÿ”— ๅปถไผธ้–ฑ่ฎ€

    — WWFandy・ๆŠ€่ก“็ญ†่จ˜

    ๐Ÿ”— ๅˆ†ไบซ้€™็ฏ‡ LINE Facebook X

    ๆฒ’ๆœ‰็•™่จ€:

    ๅผต่ฒผ็•™่จ€

    ๅญ—็ดš