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,398 Responses

  1. EdwardGROOM表示:

    Pharmacie sans ordonnance: Levitra 20mg prix en pharmacie – pharmacie en ligne fiable

  2. Allenacurf表示:

    pharmacie en ligne france livraison internationale: pharmacie en ligne sans ordonnance – Pharmacie sans ordonnance

  3. IgnacioSlima表示:

    Viagra prix pharmacie paris: Viagra generique en pharmacie – Viagra pas cher livraison rapide france

  4. Allenacurf表示:

    pharmacie en ligne fiable: kamagra livraison 24h – pharmacie en ligne france livraison internationale

  5. rust cheats表示:

    Hi there just wanted to give you a quick heads up. The text in your article seem to be running off the screen in Ie. I’m not sure if this is a format issue or something to do with browser compatibility but I thought I’d post to let you know. The layout look great though! Hope you get the issue fixed soon. Cheers

  6. Allenacurf表示:

    pharmacie en ligne france pas cher: pharmacie en ligne sans ordonnance – pharmacie en ligne sans ordonnance

  7. EdwardGROOM表示:

    trouver un mГ©dicament en pharmacie: kamagra 100mg prix – pharmacie en ligne fiable

  8. Allenacurf表示:

    Pharmacie sans ordonnance: Cialis sans ordonnance 24h – pharmacie en ligne france fiable

  9. Allenacurf表示:

    Pharmacie en ligne livraison Europe: pharmacie en ligne – Pharmacie sans ordonnance

  10. Jogos de azar no melhor cassino Fortune Tiger

  11. Отличный сайт! Рекомендую заглянуть тудаСтроительный консалтинг

  12. Ismaelfer表示:

    Как Апостилировать Диплом О Высшем Образовании
    Если Вы открыли страничку нашего сайта, значит, Вам необходимо срочно купить диплом в Москве, соответствующий оригинальному образцу который выдаёт учебное заведение. Это ещё одна причина, почему у нас выгодно покупать диплом специалиста в Волгограде любого ВУЗа России. В-третьих, это возможность стать преподавателем в ВУЗе, вся эта информация должна быть предоставлена нашим менеджерам, при возвращении женщиной своей девичей фамилии. И не трудно заметить, что очень часто одним из основных запросов является наличие у соискателя диплома о высшем образовании. Берите по несколько листов, заранее прикладывая бумажку с разметкой. А после того, как документ будет готов, мы отправим вам его личным курьером или службой почтовой доставки чтобы вы не тратили своё время.
    http://www.russkiy365-diploms-srednee.ru
    Купить Диплом О Высшем Образовании В Мелитополе
    Я сам уже успел попробовать несколько промо-предложений и честно говоря, они действительно приятно удивили. Бывают ситуации, когда теряют настоящий диплом, а на восстановление требуется масса денежных средств или же Вуз больше не существует. Этот колледж был присоединён к Санкт-Петербургскому торгово-экономическому университету в 2012 году, который в свою очередь в 2016 году был реорганизован путём присоединения к Политеху. Информация о покупке не разглашается третьим лицам, после завершения сделки вся личная информация удаляется.
    Диплом И Аттестат
    Теперь вы понимаете, где купить диплом техникума, дальше мы кратко поведаем о том, как получить и оплатить его, доставка оформляется удобными способами для заказчика. Годами наблюдая, как работает коллега, можно и самому понемногу вникнуть в принципы его деятельности. Восстановление документов является сложной, долгой и неприятной процедурой, которая переполнена бюрократическими проволочками. Но не все могут или собираются его обрести, так нужно понять и поддержать тех, кто ещё не определился со своей судьбой.

  13. SShaneevige表示:

    Диплом О Высшем Образовании Нового Образца
    Они позволяют устроиться на хорошую работу и получать нужные для профессионального роста знания. Даже не смотря на тот факт, что соискатель обладает хорошими знаниями дела и имеет за плечами хороший опыт без диплома вероятнее всего будет получен отказ. Работать и отдавать половину зарплаты за обучение, нервничать во время сессии, проводить выходные дни в суматохе за учебниками, или под дверью деканата. Персональные данные пользователей хранятся в тайне и подлежат немедленному аннулированию сразу после выполнения заявки. ИНФО поможет вам купить диплом о высшем образовании можно быстро и недорого.
    russkiy365-diploms-srednee.ru
    Синий Аттестат 11 Класс
    Все что вам нужно – это заказать диплом о высшем, среднем и любом другом профильном образовании под ключ. Без предоставления свидетельства о разводе, заявления о повторном вступлении в брак не будет рассмотрено, так как ЗАГС должен удостовериться в том, что человек на самом деле не состоит в предыдущем браке. Мы готовы предложить вам большой выбор дипломов и удостоверений, различной квалификации, начиная с дипломов об окончании университета, и заканчивая удостоверениями о повышении квалификации или присвоении разряда. Качественное оформление документов, огромный выбор учебных заведений, возможность создать проводку к ВУЗу и многие другие услуги.
    Где Можно Купить Диплом О Среднем Образовании
    Направления подготовки Учебный процесс Электронные образовательные ресурсы Расписание Производственные участки Электронный каталог библиотеки Факультеты Центр карьерных технологий Учебно-методическое управление Общежития Центр компетенций Антитеррор Вакантные места для приема (перевода) Расписание государственных аттестационных испытаний Квитанция за обложки образцов Комбинат профессиональной подготовки Внутренняя система оценки качества образования. В обычной жизни, просто спустившись в метро, мы ежедневно сталкиваемся с объявлениями о продаже дипломов, аттестатов или академических справок. Трудоустройство на такую должность предполагает наличие среднего специального образования.

  14. Allenacurf表示:

    Achat mГ©dicament en ligne fiable: Pharmacies en ligne certifiees – pharmacie en ligne

  15. EdwardGROOM表示:

    pharmacie en ligne pas cher: pharmacie en ligne – pharmacie en ligne france pas cher

  16. OLaneevige表示:

    Купить Диплом О Высшем Образовании В Омске

    Купить Диплом О Высшем Образовании В Омске
    За годы работы мы накопили огромный опыт в этой сфере, и теперь, предлагаем каждому желающему купить диплом бакалавра в Москве недорого. Мы помогли получить высшее образование тысячам студентов из всех уголков РФ. Как показывает опыт и практика, для достижения целей, необходимо уметь принимать важные решения. Поможем довести диплом до того процента, который требуется для сдачи вашей работы. Введение – в этой части автор обосновывает актуальность выбранной темы, формулируются цель и задачи работы, определяет объект и предмет исследования, указывает методы, использованные в работе. В нашей компании можно купить диплом магистра любого вуза Беларуси – быстро и с гарантией качества. Купить копии необходимых документов в нашем интернет-магазине будет намного проще.
    https://gruppa365-diploms-srednee.ru
    Купить Доверенность Без Доверителя
    Сотрудники, которые выбрали это дополнительное специальное образование, получают результаты в новых карьерных достижениях и увеличении заработка. В некоторых случаях за него это делает государство (бюджетные места), но в 90 сам студент или его семья. Человек, который строит для потребителя индивидуальную траекторию взаимодействия с продуктами искусства. Свяжитесь с менеджерами нашей фирмы в телефонном режиме или заполните анкету на сайте нашей компании.
    Какие Оценки Входят В Аттестат 9 Класса
    На формирование стоимости влияет несколько факторов: годы обучения (требования к оформлению менялись, это влияет на сложность работы). Грамотное и корректное заполнение документа мастерами каллиграфии с использованием качественной штемпельной краски, аккуратным заполнением всех данных, указанием актуальных реквизитов. Если вы в своё время не получили должное образование по семейным обстоятельствам или по причине финансовых трудностей, мы готовы к сотрудничеству.

  17. Allenacurf表示:

    pharmacie en ligne: pharmacie en ligne sans ordonnance – pharmacie en ligne france fiable

  18. Allenacurf表示:

    pharmacie en ligne sans ordonnance: cialis sans ordonnance – pharmacie en ligne fiable

  19. Allenacurf表示:

    Pharmacie Internationale en ligne: Pharmacies en ligne certifiees – pharmacie en ligne sans ordonnance

  20. IgnacioSlima表示:

    pharmacie en ligne sans ordonnance: kamagra en ligne – pharmacie en ligne france livraison internationale

  21. Allenacurf表示:

    pharmacie en ligne: levitra en ligne – pharmacie en ligne avec ordonnance

  22. IgnacioSlima表示:

    Sildenafil teva 100 mg sans ordonnance: viagra en ligne – Viagra femme sans ordonnance 24h

  23. IgnacioSlima表示:

    vente de mГ©dicament en ligne: acheter mГ©dicament en ligne sans ordonnance – trouver un mГ©dicament en pharmacie

  24. IgnacioSlima表示:

    pharmacie en ligne pas cher: cialis generique – Achat mГ©dicament en ligne fiable

  25. Jogos de azar no melhor cassino Fortune Tiger

  26. IgnacioSlima表示:

    pharmacie en ligne: levitra generique prix en pharmacie – Pharmacie Internationale en ligne

  27. Allenacurf表示:

    trouver un mГ©dicament en pharmacie: kamagra en ligne – pharmacie en ligne livraison europe

  28. Allenacurf表示:

    trouver un mГ©dicament en pharmacie: Cialis sans ordonnance 24h – Pharmacie Internationale en ligne

  29. Allenacurf表示:

    Viagra gГ©nГ©rique sans ordonnance en pharmacie: Acheter du Viagra sans ordonnance – Viagra homme prix en pharmacie sans ordonnance

  30. Allenacurf表示:

    pharmacie en ligne livraison europe: cialis generique – pharmacie en ligne sans ordonnance

發佈留言

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