HTML 介紹

HTML:HyperText Markup Language,是一個用來建構網頁結構的一種標籤語法,以下是各版本的發佈年份。

年份 版本
1993 HTML
1995 HTML 2.0
1997 HTML 3.2
1997 HTML 4
1999 HTML 4.01
2000 XHTML
2014 HTML 5

撰寫HTML文件時,第一行可以宣告本文件所採用的版本,例如:

HTML 5

<!DOCTYPE html>

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

其中XHTML強制每個標籤都要有結束,如果沒有外部封閉標籤的,需使用內部封閉的方式,例如:

外部封閉:<p>內容1</p><p>內容2</p>

內部封閉:內容1<br />內容2

目前大部分的瀏覽器都支援HTML5,但若要IE8以前的瀏覽器支援,請加入下面的語法:

<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

想要測試自己的瀏覽器是不是完全支援所有的HTML5標籤,可以到這個網站來測試看看,以下是為大家整理的HTML標籤:

基礎結構類標籤
標籤 說明 備註
<html></html> 建構整份網頁文件
<head></head> 網頁描述資料
<body></body> 網頁內容

基礎描述類標籤
標籤 說明 備註
<title></title> 網頁標題
<base> 連結參考 針對相對路徑的參考位置
<meta> 頁面描述資料 關鍵字、描述…等
<style></style> CSS樣式 直接在網頁文件中撰寫CSS樣式
<script></script> Javascript語法 直接在網頁文件中撰寫Javascript樣式
<noscript></noscript> 不支援語法時顯示訊息
<link> 連結外部檔案 例如:CSS樣式表、網頁圖示檔…等

內容結構類標籤
標籤 說明 備註
<h1></h1>~<h6></h6> 標題 數字越小權重越高
<p></p> 段落
<br> 跳行
<wbr> 文字過長則斷行 HTML 5新增
<hr> 水平線
<table></table> 表格
<th></th> 標題欄位
<tr></tr>
<td></td>
<caption></caption> 表格標題
<colgroup></colgroup> 欄群組
<col> 欄群組屬性設定
<thead></thead> 表格標題群組
<tbody></tbody> 表格內容群組
<tfoot></tfoot> 表格頁尾群組
<ul></ul> 定義無順序清單
<ol></ol> 定義有順序清單
<li></li> 清單項目
<dl></dl> 定義描述清單
<dt></dt> 描述項目
<dd></dd> 項目說明
<div></div> 定義區塊型的區域
<span></span> 定義單行型的區域
<header></header> 定義網頁標題區域 HTML 5新增
<nav></nav> 定義網頁導覽區域 HTML 5新增
<main></main> 定義網頁主內容區塊 HTML 5新增
<section></section> 定義網頁章節區域 HTML 5新增
<article></article> 定義網頁內容區域 HTML 5新增
<aside></aside> 定義網頁邊欄區域 HTML 5新增
<footer></footer> 定義網頁頁尾區域 HTML 5新增
<details></details> 定義詳細訊息 HTML 5新增
<summary></summary> 定義詳細訊息總結 HTML 5新增
<iframe></iframe> 內嵌頁框
<menuitem></menuitem> 彈出式選單內容 HTML 5新增(僅Firefox支援)

內容描述類標籤
標籤 說明 備註
<b></b> 粗體字
<strong></strong> 粗體字 除了文字樣式上變粗之外,語意上也有加強的意思
<i></i> 斜體字
<em></em> 斜體字 除了文字樣式上變斜之外,語意上也有強調的意思
<small></small> 較小的字
<mark></mark> 突顯的字  HTML 5新增
<del></del> 刪除的字
<ins></ins> 加入的字
<sub></sub> 下標字
<sup></sup> 上標字
<q></q> 引用 用於較短的文字引用
<blockquote></blockquote> 引用 用於較長的文字引用,利用cite屬性說明出處
<abbr></abbr> 縮寫字說明 利用title屬性說明縮寫字
<address></address> 聯絡資訊
<cite></cite> 作品標題
<bdo></bdo> 文字方向 利用dir屬性決定方向(ltr:由左向右、rtl:由右向左)
<dfn></dfn> 術語
<kbd></kbd> 鍵盤輸入 表達需要使用者用鍵盤按下某按鍵
<samp></samp> 電腦回饋內容
<code></code> 程式碼
<pre></pre> 預先格式化 內容會按照在HTML中的排版來顯示
<var></var> 變數
<ruby></ruby> 文字音標 HTML 5新增
<rt></rt> 文字音標內容 HTML 5新增
<rp></rp> 不支援文字音標時顯示 HTML 5新增
<time></time> 定義日期時間 HTML 5新增
<bdo></bdo> 反向文字 HTML 5新增
<bdo></bdo> 對話框 HTML 5新增
<figure></figure> 圖片說明 HTML 5新增
<figcaption></figcaption> 圖片說明內容 HTML 5新增

連結類標籤
標籤 說明 備註
<a></a> 超連結

圖形類標籤
標籤 說明 備註
<img> 圖片
<map></map> 影像連結地圖
<area></area> 影像連結區域
<svg></svg> 網頁向量圖檔 HTML 5新增

表單類標籤
標籤 說明 備註
<form></form> 表單範圍
<input> 表單輸入項目
<fieldset></fieldset> 表單欄位群組
<legend></legend> 表單欄位群組名稱
<select></select> 表單選單
<optgroup></optgroup> 表單選單選項群組
<option></option> 表單選單選項
<textarea></textarea> 表單文字區域
<button></button> 表單按鈕
<datalist></datalist> 表單資料清單
<keygen> 表單金鑰產生欄位 HTML 5新增
<output></output> 表單計算結果欄位
<meter></meter> 量度圖形 HTML 5新增
<progress></progress> 進度圖形 HTML 5新增

多媒體類標籤
標籤 說明 備註
<canvas></canvas> 畫布區域 HTML 5新增
<audio></audio> 聲音內容 HTML 5新增
<video></video> 視訊內容 HTML 5新增
<source> 內容來源 HTML 5新增
<track> 內容字幕指定 HTML 5新增
<embed> 外部程式內容嵌入 HTML 5新增
<object></object> 外部程式內容嵌入 HTML 5新增

28,562 Responses

  1. capcutobliz表示:

    кап кут премиум последняя скачать бесплатно

  2. promokodobliz表示:

    йони массаж улан удэ

  3. lukiobliz表示:

    казино играть на деньги с выводом

  4. I was very encouraged to find this site. The reason being that this is such an informative post. I wanted to thank you for this informative analysis of the subject. I definitely savored every little bit of it and I submitted your site to some of the biggest social networks so others can find your blog.

  5. JamesNut表示:

    mexican border pharmacies shipping to usa: mexican drugstore online – mexican drugstore online http://indianpharmacy.company/# top 10 pharmacies in india

  6. pyteshobliz表示:

    промокод яндекс путешествия 1000 рублей

  7. omskobliz表示:

    новые анкеты проституток омск

  8. promokodobliz表示:

    яндекс путешествия личный кабинет войти мои поездки

  9. Davidspike表示:

    The world’s best pizza for 2024 isn’t in Naples – or even in Italy. Here’s where it is … kraken2trfqodidvlh4aa337cpzfrhdlfldhve5nf7njhumwr7instad Many New Yorkers will gladly tell anyone who’ll listen – and even those who won’t – about how they have the best pizza. And now they’ve got some mouth-watering new back-up for their long-standing culinary claims. This week the Italy-based 50 Top Pizza Awards came out with its 2024 worldwide list and a Lower East Side restaurant came out on top. Una Pizza Napoletana opened by pizza maestro Anthony Mangieri in March 2022 not only beat out US competitors but also global ones. That includes pizzerias in Naples Italy the holy land for pizza aficionados and foodies in general. “It’s inspiring to be recognized for this 30 years into my career especially in Naples where pizza originated” Mangieri said in an email to CNN Travel on Thursday. https://kraken2trfqodidvlh4aa337cpzfrhdlfldhve5nf7njhumwr7insta.cc kraken3yvbvzmhytnrnuhsy772i6dfobofu652e27f5hx6y5cpj7rgyd Adding to their bragging rights New Yorkers saw three other pizzerias make the 2024 list which included 101 restaurants in total despite the “50” in the name of the awards. The rankings for the other New York pizzerias were Ribalta at No. 19 Don Antonio at No. 30 and L’industrie Pizzeria at No. 80. Italy still managed to dominate the overall list with 41 eateries while the United States got a total of 15 places recognized. And Naples managed to best New York with five entries on the list including a tie for the No. 2 spot with Diego Vigtaliano Pizzeria. Showing how truly global the awards are nations not exactly known for their pizza scenes –South Korea Bolivia and India to name three ­– were represented on the list.

  10. samaraobliz表示:

    шлюхи самара кировский

  11. BruceHef表示:

    Scientists have solved the mystery of a 650-foot mega-tsunami that made the Earth vibrate for 9 days kraken2trfqodidvlh4aa337cpzfrhdlfldhve5nf7njhumwr7instad onion It started with a melting glacier that set off a huge landslide which triggered a 650-foot high mega-tsunami in Greenland last September. Then came something inexplicable: a mysterious vibration that shook the planet for nine days. Over the past year dozens of scientists across the world have been trying to figure out what this signal was. Now they have an answer according to a new study in the journal Science and it provides yet another warning that the Arctic is entering “uncharted waters” as humans push global temperatures ever upwards. https://kraken2trfqodidvlh4aa337cpzfrhdlfldhve5nf7njhumwr7insta.cc kraken3yvbvzmhytnrnuhsy772i6dfobofu652e27f5hx6y5cpj7rgyd onion Some seismologists thought their instruments were broken when they started picking up vibrations through the ground back in September said Stephen Hicks a study co-author and a seismologist at University College London. It wasn’t the rich orchestra of high pitches and rumbles you might expect with an earthquake but more of a monotonous hum he told CNN. Earthquake signals tend to last for minutes; this one lasted for nine days. He was baffled it was “completely unprecedented” he said. Seismologists traced the signal to eastern Greenland but couldn’t pin down a specific location. So they contacted colleagues in Denmark who had received reports of a landslide-triggered tsunami in a remote part of the region called Dickson Fjord. The result was a nearly year-long collaboration between 68 scientists across 15 countries who combed through seismic satellite and on-the-ground data as well as simulations of tsunami waves to solve the puzzle.

  12. Charlesjek表示:

    pharmacies in mexico that ship to usa medication from mexico pharmacy or medicine in mexico pharmacies http://www.teacherlearningproject.com/index?URL=http://mexicopharmacy.cheap best online pharmacies in mexico mexican mail order pharmacies buying from online mexican pharmacy and buying prescription drugs in mexico online п»їbest mexican online pharmacies

  13. ArthurKib表示:

    https://pharmbig24.com/# topamax online pharmacy

  14. MauriceGueda表示:

    metronidazole pharmacy: best online pharmacies no prescription – bupropion hcl xl global pharmacy

  15. JamesNut表示:

    world pharmacy india: top 10 pharmacies in india – reputable indian online pharmacy http://mexicopharmacy.cheap/# mexican mail order pharmacies

  16. Perhaps creating a extra formal look will higher match your own home’s fashion (suppose geometrical shapes and straight lines), or, if your lot backs as much as plenty of trees, a woodland look full of natural paths, native plants and plenty of groundcover.

  17. RobertMag表示:

    best online pharmacy india top online pharmacy india or indian pharmacies safe http://www.google.com.bd/url?q=https://indianpharmacy.company/ Online medicine order buy prescription drugs from india pharmacy website india and best online pharmacy india top 10 online pharmacy in india

  18. ArthurKib表示:

    http://mexicopharmacy.cheap/# reputable mexican pharmacies online

  19. The Report of the Metric System and Decimal Coinage Committee (1959) was amongst the primary formal stories on decimalisation of the forex, discussion continued into the 1960s on the subject.

  20. RobertMef表示:

    advair pharmacy price: Viagra Super Active – wellbutrin pharmacy online

  21. Within the later Christchurch earthquake in February 2011 the constructing was severely broken, and it is deliberate by Heritage New Zealand for it to be dismantled, with the possibility of reconstruction.

  22. MauriceGueda表示:

    top 10 pharmacies in india: top online pharmacy india – top 10 pharmacies in india

  23. RobertMef表示:

    medication from mexico pharmacy: mexican border pharmacies shipping to usa – buying prescription drugs in mexico

  24. Charlesjek表示:

    buying prescription drugs in mexico reputable mexican pharmacies online or mexican pharmaceuticals online https://toolbarqueries.google.ch/url?q=http://mexicopharmacy.cheap pharmacies in mexico that ship to usa mexican mail order pharmacies mexico pharmacies prescription drugs and mexico drug stores pharmacies mexican drugstore online

  25. ArthurKib表示:

    https://indianpharmacy.company/# buy prescription drugs from india

  26. Josephfub表示:

    pharmacy website india indian pharmacy indian pharmacy

  27. LutherAtomy表示:

    Scientists who discovered mammals can breathe through their anuses receive Ig Nobel prize kraken onion The world still holds many unanswered questions. But thanks to the efforts of the research teams awarded the IG Nobel Prize on Thursday some of these questions – which you might not even have thought existed – now have answers. We now know that many mammals can breathe through their anuses that there isn’t an equal probability that a coin will land on head or tails that some real plants somehow imitate the shapes of neighboring fake plastic plants that fake medicine which causes painful side-effects can be more effective than fake medicine without side-effects and that many of the people famous for reaching lofty old ages lived in places that had bad record-keeping. https://kraken3yvbvzmhytnrnuhsy772i6dfobofu652e27f5hx6y5cpj7rgyd.cc kraken3yvbvzmhytnrnuhsy772i6dfobofu652e27f5hx6y5cpj7rgyd onion The awards – which have no affiliation to the Nobel Prizes – aim to “celebrate the unusual honor the imaginative – and spur people’s interest in science medicine and technology” by making “people laugh then think.” In a two-hour ceremony as quirky as the scientific achievements it was celebrating audience members were welcomed to their seats by accordion music before a safety briefing warned them not to “sit on anyone unless you are a child” not to “feed chase or eat ducks” and to throw their paper airplane safely. There were two “paper airplane deluges” during the ceremony in which the audience attempted to throw their creations – safely – at a target in the middle of the stage. Among those collecting their prizes was a Japanese research team led by Ryo Okabe and Takanori Takebe who discovered that mammals can breathe through their anuses. They say in their paper that this potentially offers an alternative way of getting oxygen into critically ill patients if ventilator and artificial lung supplies run low like they did during the Covid-19 pandemic. American psychologist B.F Skinner was posthumously awarded the peace prize for his work attempting to use pigeons to guide the flight path of missiles while a European-wide research team was awarded the probability prize for conducting 350757 experiments to demonstrate that a coin tends to land on the same side it started when it is flipped.

  28. Haroldhit表示:

    Hyundai and GM to work together on developing new cars kra6 gl Hyundai and General Motors GM have agreed to look for ways to work together on developing new vehicles supply chains and technologies in an effort to cut costs and move more quickly. Global carmakers are under intense pressure to come up with new electric vehicle EV and battery technology because they face vehicle emissions regulations around the world. Those research and development efforts could cost tens of billions of dollars. They’re also facing an onslaught of potential competition from Chinese automakers particularly EV producers trying to export their lower-cost models overseas in order to escape a huge oversupply problem at home. kra8 cc https://kraken3yvbvzmhytnrnuhsy772i6dfobofu652e27f5hx6y5cpj7rgyd.cc South Korea’s Hyundai and America’s GM GM said on Thursday they would collaborate on joint product development manufacturing and future clean energy technologies. They plan to work together on internal combustion clean-energy electric and hydrogen vehicles. The non-binding framework agreement was signed by Hyundai Motor Executive Chair Euisun Chung and GM Chair and CEO Mary Barra. “Our goal is to unlock the scale and creativity of both companies to deliver even more competitive vehicles to customers faster and more efficiently” Barra said in the statement. Including its affiliate Kia Hyundai Motor is the world’s third-largest automaker by sales according to Reuters while GM is currently America’s largest carmaker having retaken that title from Toyota TM in 2022. “This partnership will enable Hyundai Motor and GM to evaluate opportunities to enhance competitiveness in key markets and vehicle segments as well as drive cost efficiencies and provide stronger customer value” Chung said in the statement. Carmakers are increasingly sealing partnerships as a way of becoming more competitive in a cut-throat industry driven by price wars. Last year Nissan and Renault finalized the terms of their revamped alliance which will focus on developing EVs. GM and Honda HMC along with Cruise — GM’s autonomous driving subsidiary — have agreed to create a driverless ride-hailing company in Japan.

  29. 竹田の宮表示:

    To keep away from this systematic danger funding managers may diversify into totally different non-perfectly-correlated asset classes.

  30. RobertLoony表示:

    Hyundai and GM to work together on developing new cars kra8 cc Hyundai and General Motors GM have agreed to look for ways to work together on developing new vehicles supply chains and technologies in an effort to cut costs and move more quickly. Global carmakers are under intense pressure to come up with new electric vehicle EV and battery technology because they face vehicle emissions regulations around the world. Those research and development efforts could cost tens of billions of dollars. They’re also facing an onslaught of potential competition from Chinese automakers particularly EV producers trying to export their lower-cost models overseas in order to escape a huge oversupply problem at home. kra7 cc https://kraken3yvbvzmhytnrnuhsy772i6dfobofu652e27f5hx6y5cpj7rgyd.cc South Korea’s Hyundai and America’s GM GM said on Thursday they would collaborate on joint product development manufacturing and future clean energy technologies. They plan to work together on internal combustion clean-energy electric and hydrogen vehicles. The non-binding framework agreement was signed by Hyundai Motor Executive Chair Euisun Chung and GM Chair and CEO Mary Barra. “Our goal is to unlock the scale and creativity of both companies to deliver even more competitive vehicles to customers faster and more efficiently” Barra said in the statement. Including its affiliate Kia Hyundai Motor is the world’s third-largest automaker by sales according to Reuters while GM is currently America’s largest carmaker having retaken that title from Toyota TM in 2022. “This partnership will enable Hyundai Motor and GM to evaluate opportunities to enhance competitiveness in key markets and vehicle segments as well as drive cost efficiencies and provide stronger customer value” Chung said in the statement. Carmakers are increasingly sealing partnerships as a way of becoming more competitive in a cut-throat industry driven by price wars. Last year Nissan and Renault finalized the terms of their revamped alliance which will focus on developing EVs. GM and Honda HMC along with Cruise — GM’s autonomous driving subsidiary — have agreed to create a driverless ride-hailing company in Japan.

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。