什麼是HTML文檔

時間 2019-11-05

標籤什麼 html 文檔欄目 HTML 简体版

原文原文鏈接

HTML文檔

文章同步到githubjavascript

HTML指的是超文本標記語言 (Hyper Text Markup Language)，HTML文檔就是咱們常說的網頁，一個標準的HTML文檔由 文檔元素和 元數據元素組成，兩者用來建立HTML文檔以及其內容。

順便說一下什麼是元數據元素: 用來構建HTML文檔的基本結構，以及就如何處理文檔向瀏覽器提供信息和指示，它們自己不是文檔內容，但提供了關於後面文檔內容的信息。包含在head內，如title、base、meta等都是元數據元素。本文不作重點介紹。css

文檔元素

文檔元素一共有四個DOCTYPE、html、head、bodyhtml

DOCTYPE

每個HTML文檔都必須由DOCTYPE元素開頭，告訴瀏覽器要處理的是HTML文檔，在HTML5中DOCTYPE 聲明變得很是簡單並且惟一，不用寫版本號瀏覽器也能識別這是HTML5文檔，由於和以前的HTML版本有所差別java

<!DOCTYPE html> //HTML5聲明

在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD，由於 HTML 4.01 基於 SGML。DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。HTML5 不基於 SGML，因此不須要引用 DTD。--W3schoolgit

HTML4中聲明以下:github

HTML 4.01 Strict(不容許使用框架集):segmentfault

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

HTML 4.01 Frameset(容許使用框架集):瀏覽器

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

html

html表示根元素，表示HTML文檔的開始，必須須要的元素，html具備以下屬性:緩存

屬性	值	功能
manifest	url	定義一個url，描述文檔的緩存信息
xmlns	"http://www.w3.org/1999/xhtml"	定義 XML namespace 屬性(其實這個我也沒用過不懂啊)，感興趣的大神本身研究下吧

head

包含文檔的元數據，向瀏覽器提供文檔內容和標記的信息，還包括腳本和對外資源的引用，如引入外聯.css文件、js文件等。
|包含元素|是否必須|功能|

title	是	必須有一個title元素，定義網站的標題
base	否	設置一個基準URL，讓HTML文檔中的相對連接在此基礎上解析
meta	否	定義各類文檔元數據，可見個人上一篇文章<meta>經常使用屬性總結
style	否	1. 指定樣式類型; 2. 指定樣式做用範圍; 3. 指定樣式使用的媒體類型
link	否	1. 載入外部樣式表; 2. 爲頁面定義網站標誌; 3. 預先獲取關聯資源
script	否	1. 定義文檔內嵌腳本; 2. 載入外部腳本
noscript	否	能夠向禁用或不知JavaScript的瀏覽器展現一些內容

<base>介紹:

若是在瀏覽器地址爲"https://segmentfault.com/demo/index.html"中載入一個文檔，代碼以下:框架

<DOCTYPE html>
<html>
    <head>
        <base href="https://segmentfault.com/">
    </head>
    <body>
        <a href="page2.html">跳轉</a>
    </body>
</html>

正常點擊a連接，瀏覽器將從"https://segmentfault.com/page2.html"中加載文檔
若是不包含<base>元素，瀏覽器將從"https://segmentfault.com/demo/index.html"中加載文檔地址

style

style元素擁有局部屬性:type、scoped、media，其對應做用以下:

1.指定內嵌樣式，type屬性是高速瀏覽器文檔所定義的類型、這個值只有一種text/css

<style>
    .box {
        width: 200px;
        height: 200px;
        background: red;
    }
</style>

2.指定樣式範圍，scoped屬性的做用爲style元素內定義的樣式只做用於該元素的父級及其全部兄弟元素

3.media屬性代表文檔在指定的設備下顯示其定義的樣式

<style media="screen" type="text/css">
    .box {
        width: 200px;
        height: 200px;
        background: red;
    }
</style>

media屬性全部的設備值以下表(--HTML5權威指南)，不少在工做中幾乎都用不上，列出來瞭解一下及以備查閱:

設備(media的值)	說明
all	將樣式用於全部設備(默認值)
aural	將樣式用於語音合成器
braille	將樣式用於盲文設備
handheld	將樣式用於手持設備
projection	講樣式用於投影機
print	將樣式用於打印預覽和打印頁面時
screen	將樣式用於計算機顯示屏幕
tty	將樣式用於電傳打印機之類的等寬設備
tv	將樣式用於電視機

media不僅能規定設備，還能定義更具體的使用條件，舉例以下:

<style media="screen AND (max-width:500px)" type="text/css">
//只在瀏覽器寬度小於500px的狀況下生效
    .box {
        width: 200px;
        height: 200px;
        background: red;
    }
</style>

<style media="screen AND (mix-width:500px)" type="text/css">
//只在瀏覽器寬度大於500px的狀況下生效
    .box {
        width: 200px;
        height: 200px;
        background: blue;
    }
</style>

除了用AND來定義具體條件，還可使用NOT和OR(','表示)，另外還有其餘供media使用的特性就不列舉了，你們能夠本身去百度了，再補充一個吧，device-width，這些特性均可以結合max-/mix-來使用

link

擁有的局部屬性以下表:

屬性	說明
href	指定引入資源的URL
hreflang	說明關聯資源使用的語言
media	說明關聯內容用於哪一種設備
rel	說明文檔與關聯資源的關係類型，屬性值決定了瀏覽器如何解析link元素
sizes	HTML5中新增，指定網站圖標大小
type	指定所關聯資源的MIME類型，如text/css

rel屬性經常使用值rel值列表及其表示的link元素功能

屬性	說明
stylesheet	載入外部樣式表
icon	指定圖標資源
prefetch	預先獲取一個資源

1.引入外聯樣式表

<link rel="stylesheet" type="text/css" href="index.css">

2.添加網站圖標

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
 //href屬性值爲圖片路徑

3.預先獲取關聯的資源

<link rel="prefetch"  href="demo.html">

rel屬性值設置爲prefetch，能夠預先加載demo.html，若是頁面存在連接以下，爲須要demo.html頁面的操做作好準備

<a href="demo.html">demo</a>

script

script元素能夠定義頁面內嵌腳本、引入外部文件腳本並經過script自己局部屬性值設定加載腳本的各類方式

script的經常使用局部屬性及其說明以下表:

屬性	說明
type	表示引用或定義的腳本類型，若是是javascript腳本，此屬性能夠省略，省略type屬性時瀏覽器默認爲使用JavaScript腳本
src	指定加載外部腳本資源的URL
defer	設定腳本執行的方式爲延遲執行，告訴瀏覽器等頁面載入和解析完畢才能執行此腳本，只能與src屬性一塊兒使用
async	設定腳本執行的方式爲異步執行，只能與src屬性一塊兒使用
charset	說明外部腳本資源的字符編碼，只能與src屬性一塊兒使用

1.定義文檔內嵌腳本

<script>
    window.onload = function() {
        alert('頁面加載完成');
    } 
</script>

通常狀況下script元素應該放在文檔最後，等頁面所有加載完成後纔去執行，保證腳本文件內能夠獲取到當前頁面的所有內容。

若是script元素在head內，若是是當前內嵌腳本，則能夠添加window.onload來告訴瀏覽器當全部頁面所有加載完成纔去執行。

2.載入外部腳本

<script src="index.js"></script>

3.使用defer屬性延遲加載外部腳本

<script defer src="index.js"></script>

若是在head中使用script元素，defer屬性將會在HTML文檔全部元素都解析完畢以後才加載和執行。

注意:defer屬性只能處理外部腳本，對內嵌腳本無效。

4.使用async屬性異步執行腳本

<script async src="index.js"></script>

瀏覽器在解析script元素時的默認行爲是加載和執行腳本的時候暫停處理頁面，各script元素按順序同步執行。

使用async屬性可使外部腳本在加載HTML時異步執行，如何使用需結合具體產品功能需求，不過帶來的影響是，頁面中的腳本不能再按次序同步執行，因此若是當前腳本中與其餘腳本有關聯，則不適合使用async屬性

body

HTML文檔的元數據和文檔信息都包含在head內，文檔內容包含在body內，body緊跟在head後面，具體不在贅述！

本文不少概念和屬性表格結合《HTML5權威指南》、W3school、MDN，因爲博主能力有限，不少概念直接拿過來引用，並附上相關連接，以保證其正確性，對HTML文檔的相關知識做一個簡單的總結，但願能幫助到須要的人，同時也方便本身後續查閱。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。