一、簡介

1.HTML是超文本標(biāo)記語言，標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用，解釋性語言。

2.“超文本”就是指頁面內(nèi)可以包含圖片、鏈接，甚至音樂、程序等非文字元素。

3.超文本標(biāo)記語言的結(jié)構(gòu)包括“頭”部分（英語：Head）、和“主體”部分（英語：Body），其中“頭”部提供關(guān)于網(wǎng)頁的信息，“主體”部分提供網(wǎng)頁的具體內(nèi)容。

二、語言特點（內(nèi)容摘抄自--百度百科）

1.簡易性：超級文本標(biāo)記語言版本升級采用超集方式，從而更加靈活方便。

2.可擴展性：超級文本標(biāo)記語言的廣泛應(yīng)用帶來了加強功能，增加標(biāo)識符等要求，超級文本標(biāo)記語言采取子類元素的方式，為系統(tǒng)擴展帶來保證。

3.平臺無關(guān)性：雖然個人計算機大行其道，但使用MAC等其他機器的大有人在，超級文本標(biāo)記語言可以使用在廣泛的平臺上，這也是萬維網(wǎng)（WWW）盛行原因之一。

4.通用性：另外，HTML是網(wǎng)絡(luò)的通用語言,一種簡單、通用的全置標(biāo)記語言。它允許網(wǎng)頁制作人建立文本與圖片相結(jié)合的復(fù)雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。

三、整體結(jié)構(gòu)

HTML標(biāo)準(zhǔn)文件結(jié)構(gòu)有一個基本的整體結(jié)構(gòu)，即超文本標(biāo)記語言文件的開頭與結(jié)尾標(biāo)志和超文本標(biāo)記語言的頭部與實體兩大部分。有三個雙標(biāo)記符用于頁面整體結(jié)構(gòu)的確認(rèn)。

1.文件代碼整體

標(biāo)記符 html ,說明該文件是用超文本標(biāo)記語言（本標(biāo)簽的中文全稱）來描述的, html /html 是超文本標(biāo)記語言文件的開始標(biāo)記和結(jié)尾標(biāo)記。

2.頭部內(nèi)容

head /head ；這2個標(biāo)記符分別表示頭部信息的開始和結(jié)尾。頭部中包含的標(biāo)記是頁面的標(biāo)題、序言、說明等內(nèi)容，它本身不作為內(nèi)容來顯示，但影響網(wǎng)頁顯示的效果。頭部中最常用的標(biāo)記符是標(biāo)題標(biāo)記符和meta標(biāo)記符，

其中標(biāo)題標(biāo)記符用于定義網(wǎng)頁的標(biāo)題，它的內(nèi)容顯示在網(wǎng)頁窗口欄中，網(wǎng)頁標(biāo)題可被瀏覽器用作書簽和收藏清單。

HTML head 元素：

HTML當(dāng)中的meta標(biāo)簽

 1 !DOCTYPE html 2 html 3 head 4 title HTML當(dāng)中的meta標(biāo)簽 /title 5 6 !--設(shè)置網(wǎng)頁的編碼-- 7 meta charset= utf-8 / 8 9 !--設(shè)置網(wǎng)頁的關(guān)鍵字-- 10 meta name= keywords content= 頁面關(guān)鍵字 / 11 12 !--設(shè)置網(wǎng)頁的描述-- 13 meta name= description content= 網(wǎng)頁相關(guān)描述信息 / 14 15 !--設(shè)置網(wǎng)頁的更新信息-- 16 meta name= revised content= 更新信息,2017年3月2日09:55:00 / 17 18 !--設(shè)置網(wǎng)頁刷新頻率以及跳轉(zhuǎn)地址-- 19 meta http-equiv= refresh content= 3, / 20 21 !--設(shè)置標(biāo)題處的ico小圖標(biāo)-- 22 link rel= shortcut icon href= ./my1.ico type= image/x-icon / 23 24 !--引入一個外部的css層疊樣式表-- 25 link rel= stylesheet href= ./css.css?1.1.11 type= text/css / 26 /head 27 body 28 /body 29 /html 

head標(biāo)簽中的Script標(biāo)簽和Style標(biāo)簽

 1 !DOCTYPE html 2 html 3 head 4 title head標(biāo)簽中的Script標(biāo)簽和Style標(biāo)簽 /title 5 meta charset= utf-8 / 6 7 !--通常是寫js用的標(biāo)簽-- 8 script 9 //在網(wǎng)頁打開的同時彈出了一個對話框10 //alert( 彈框內(nèi)容 11 /script 12 13 !--引入一個外部的js文件-- 14 script src= 1.js?1.1.11 /script 15 16 !--在當(dāng)前頁面來添加css樣式-- 17 style 18 font{19 color:red;20 }21 /style 22 /head 23 body 24 25 /body 26 /html 

3.主體內(nèi)容

body /body ；，網(wǎng)頁中顯示的實際內(nèi)容均包含在這2個正文標(biāo)記符之間。正文標(biāo)記符又稱為實體標(biāo)記。

HTML當(dāng)中的文本標(biāo)簽

 1 !DOCTYPE html 2 html 3 head 4 title HTML當(dāng)中的文本標(biāo)簽 /title 5 meta charset= utf-8 / 6 /head 7 body 8 !--標(biāo)題標(biāo)簽-- 9 h1 讓我們來看一下， u 字體 /u 字體的大小變化 /h1 10 h2 讓我們來看一下，字體的大小變化 /h2 11 h3 讓我們來看一下，字體的大小變化 /h3 12 h4 讓我們來看一下，字體的大小變化 /h4 13 h5 讓我們來看一下，字體的大小變化 /h5 14 h6 讓我們來看一下，字體的大小變化 /h6 15 16 !--水平線標(biāo)簽-- 17 hr/ 18 19 !--b標(biāo)簽：普通的加粗標(biāo)簽-- 20 b 文字加粗 /b br/ 21 22 !--strong標(biāo)簽：加粗強調(diào)的作用，SEO可以著重抓取到的內(nèi)容-- 23 strong 文字加粗（強調(diào)） /strong br/ 24 25 !--斜體、強調(diào)標(biāo)簽-- 26 em 斜體（強調(diào)） /em br/ 27 28 !--普通的斜體標(biāo)簽-- 29 i 讓你隨時 u 脈動 /u 回來！ /i br/ 30 31 !--普通的斜體標(biāo)簽-- 32 cite 讓你隨時脈動回來！ /cite br/ 33 34 !--下標(biāo)標(biāo)簽-- 35 H sub 2 /sub 0 br/ 36 37 !--上標(biāo)標(biāo)簽-- 38 2 sup 2 /sup =439 40 !--段落標(biāo)簽-- 41 p p標(biāo)簽代表段落，一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字 /p 42 43 /body 44 /html 

文本標(biāo)簽頁面展示效果：

 1 !DOCTYPE html 2 html 3 head 4 title HTML當(dāng)中的文本標(biāo)簽 /title 5 meta charset= utf-8 / 6 /head 7 body 8 h1 HTML當(dāng)中的文本標(biāo)簽 /h1 9 10 !--定義文檔的輸出方向-- 11 bdo dir= ltr 正大光明 /bdo br/ 12 bdo dir= rtl 正大光明 /bdo br/ 13 14 !--定義一個短的引用-- 15 沙僧說： q 師傅，大師兄和二師兄被妖怪抓走啦~~ /q br/ 16 17 !--表示一個縮寫的形式-- 18 abbr title= United States US /abbr br/ 19 20 !--刪除線標(biāo)簽-- 21 測試刪除線測試刪除線測試刪除線測試刪除線測試刪除線 del 蒼老師？ /del ， del 被刪除了哈哈 /del br/ 22 23 !--定義一段被隱藏的文字,summary標(biāo)簽可以定義列表的標(biāo)題-- 24 details 25 summary 鬼吹燈系列叢書 /summary 26 鬼吹燈之精絕古城 br/ 27 鬼吹燈之黃皮子墳 br/ 28 鬼吹燈之云南蟲谷 br/ 29 /details 30 31 !--對話標(biāo)簽-- 32 dialog open 33 dt 男： /dt dd 我們分手吧~~ /dd 34 dt 女： /dt dd 為什么？ /dd 35 dt 男： /dt dd 我懷孕了~~ /dd 36 dt 女： /dt dd 不，不可能，我不相信…… /dd 37 dt 男： /dt dd 你看你，我們連最起碼的信任都沒有了，還談什么？ /dd 38 dt 女： /dt dd ………… /dd 39 /dialog 40 /body 41 /html 

HTML當(dāng)中的列表標(biāo)簽

 1 !DOCTYPE html 2 html 3 head 4 title HTML當(dāng)中的列表標(biāo)簽 /title 5 meta charset= utf-8 / 6 /head 7 body 8 h1 HTML當(dāng)中的列表標(biāo)簽 /h1 9 !--有序列表-- 10 ol type= A 11 li 有序列表1 /li 12 li 有序列表2 /li 13 li 有序列表3 /li 14 /ol 15 16 !--無序列表-- 17 ul type= circle 18 li 無序列表1 /li 19 li 無序列表2 /li 20 li 無序列表3 /li 21 /ul 22 23 !--格式化輸出標(biāo)簽-- 24 pre 25 *26 * *27 * * *28 * * * *29 /pre 30 /body 31 /html 

頁面顯示效果：

在 ol 標(biāo)簽中增加 type 屬性，使其屬性值為 A or a or 1 會顯示不同的排序編碼，可視情況而定

HTML當(dāng)中的超鏈接標(biāo)簽

a /a ：超鏈接標(biāo)簽
屬性： 值：
href： 路徑或外部網(wǎng)站
title： 鼠標(biāo)移入鏈接時提示的內(nèi)容
target： _self (默認(rèn)，從當(dāng)前標(biāo)簽頁打開鏈接)
_blank (在新標(biāo)簽頁中打開鏈接)
_parent (在父級框架中打開鏈接)
_top (在頂級框架中打開鏈接)
framename(在制定框架名的位置打開鏈接)

 1 !DOCTYPE html 2 html 3 head 4 title HTML當(dāng)中的超鏈接標(biāo)簽 a /title 5 meta charset= utf-8 / 6 /head 7 body 8 !--相對路徑鏈接到本地的文件-- 9 a href= ./1.html 鏈接本地HTML文件 /a br/ br/ 10 11 !--鏈接到了一個外部的網(wǎng)站-- 12 a href= http://lol.qq.com target= _blank 英雄聯(lián)盟網(wǎng)址 /a 13 14 !--使用絕對路徑鏈接到本地文件-- 15 a href= D:/Wamp/www/test/lesson_HTML/test.html title= 超鏈接信息 5.html /a 16 17 /body 18 /html 

頁面顯示效果：

a標(biāo)簽的錨點功能

使 a 鏈接標(biāo)簽可跳轉(zhuǎn)到頁面指定元素的位置

 1 !DOCTYPE html 2 html 3 head 4 title a標(biāo)簽的錨點功能 /title 5 meta charset= utf-8 / 6 style 7 /*找到4個div添加了一些屬性*/ 8 div{ 9 /*設(shè)置一下div的寬度*/10 width:500px;11 12 /*設(shè)置一下div的高度*/13 height:500px;14 15 /*設(shè)置一下div的邊框：1像素寬，實線，紅色*/16 border:1px solid red;17 }18 /style 19 /head 20 body 21 h1 a標(biāo)簽的錨點功能 /h1 22 a href= #one 第一章：三打白骨將 /a br/ 23 a href= #two 第二章：倒拔垂楊柳 /a br/ 24 a href= #three 第三章：火燒赤壁 /a br/ 25 a href= #four 第四章：劉姥姥進大觀園 /a br/ 26 27 !--第一章-- 28 h2 a id= one /a 第一章：三打白骨將 /h2 29 div 30 p 胡八一（靳東飾）上山下鄉(xiāng)來到中蒙邊境的崗崗營子，帶上了家中僅存的一本書——《十六字陰陽風(fēng)水秘術(shù)》①，閑來無事將書中文字背得滾瓜爛熟。之后參軍到西藏，遇上雪崩掉落一條巨大的地溝當(dāng)中，胡八一利用自己懂得的墓葬秘術(shù)逃得不死。復(fù)員后，胡八一和好友王胖子（趙達(dá)飾）一起加入了一支前往新疆考古的考古隊。一行人歷經(jīng)萬險來到了塔克拉瑪干沙漠中的精絕古城遺址，進入了地下“鬼洞”。洞中機關(guān)重重、陷阱不斷，這神秘的鬼洞似乎在一位先知的掌控之中。31 /p 32 /div 33 34 !--第二章-- 35 h2 a id= two /a 第二章：倒拔垂楊柳 /h2 36 div 37 p 胡八一（靳東飾）上山下鄉(xiāng)來到中蒙邊境的崗崗營子，帶上了家中僅存的一本書——《十六字陰陽風(fēng)水秘術(shù)》①，閑來無事將書中文字背得滾瓜爛熟。之后參軍到西藏，遇上雪崩掉落一條巨大的地溝當(dāng)中，胡八一利用自己懂得的墓葬秘術(shù)逃得不死。復(fù)員后，胡八一和好友王胖子（趙達(dá)飾）一起加入了一支前往新疆考古的考古隊。一行人歷經(jīng)萬險來到了塔克拉瑪干沙漠中的精絕古城遺址，進入了地下“鬼洞”。洞中機關(guān)重重、陷阱不斷，這神秘的鬼洞似乎在一位先知的掌控之中。38 /p 39 /div 40 41 !--第三章-- 42 h2 a id= three /a 第三章：火燒赤壁 /h2 43 div 44 p 胡八一（靳東飾）上山下鄉(xiāng)來到中蒙邊境的崗崗營子，帶上了家中僅存的一本書——《十六字陰陽風(fēng)水秘術(shù)》①，閑來無事將書中文字背得滾瓜爛熟。之后參軍到西藏，遇上雪崩掉落一條巨大的地溝當(dāng)中，胡八一利用自己懂得的墓葬秘術(shù)逃得不死。復(fù)員后，胡八一和好友王胖子（趙達(dá)飾）一起加入了一支前往新疆考古的考古隊。一行人歷經(jīng)萬險來到了塔克拉瑪干沙漠中的精絕古城遺址，進入了地下“鬼洞”。洞中機關(guān)重重、陷阱不斷，這神秘的鬼洞似乎在一位先知的掌控之中。45 /p 46 /div 47 48 !--第四章-- 49 h2 a id= four /a 第四章：劉姥姥進大觀園 /h2 50 div 51 p 胡八一（靳東飾）上山下鄉(xiāng)來到中蒙邊境的崗崗營子，帶上了家中僅存的一本書——《十六字陰陽風(fēng)水秘術(shù)》①，閑來無事將書中文字背得滾瓜爛熟。之后參軍到西藏，遇上雪崩掉落一條巨大的地溝當(dāng)中，胡八一利用自己懂得的墓葬秘術(shù)逃得不死。復(fù)員后，胡八一和好友王胖子（趙達(dá)飾）一起加入了一支前往新疆考古的考古隊。一行人歷經(jīng)萬險來到了塔克拉瑪干沙漠中的精絕古城遺址，進入了地下“鬼洞”。洞中機關(guān)重重、陷阱不斷，這神秘的鬼洞似乎在一位先知的掌控之中。52 /p 53 /div 54 /body 55 /html 

HTML當(dāng)中的常見實體內(nèi)容：

以上就是分享對HTML基本知識的總結(jié)的詳細(xì)內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。