HTML5的代碼標(biāo)準(zhǔn)格式是什么

你想問的應(yīng)該是，在搭建一個HTML文件時，基本的文件結(jié)構(gòu)是什么樣子吧？

10多年的平江網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。營銷型網(wǎng)站的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整平江建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“平江網(wǎng)站設(shè)計(jì)”,“平江網(wǎng)站推廣”以來，每個客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

標(biāo)準(zhǔn)的HTML文件由“文檔聲明、文件頭、文件體”組成。

對于HTML5，文檔聲明也應(yīng)該采取HTML5.0的聲明方式，具體代碼如下：

!doctype html

html

head

meta charset="UTF-8"

titleHTML5學(xué)堂（碼匠） ?言成科技?聯(lián)合出品/title

meta name="viewport" content="width=device-width,user-scalable=no"

link rel="stylesheet" href="../css/reset.css"

/head

body

div具體內(nèi)容/div

/body

/html

在html標(biāo)簽當(dāng)中包含head標(biāo)簽和body標(biāo)簽兩種，而head標(biāo)簽表示的是文件頭，body標(biāo)簽表示文件體，文件頭當(dāng)中需要包含“字符編碼”（head標(biāo)簽中的第一行）、“標(biāo)題”（title標(biāo)簽）、“其他元信息”（除了字符編碼外的其他meta），而文件體當(dāng)中書寫的具體代碼就是在網(wǎng)頁當(dāng)中會顯示的內(nèi)容。

此外，在文件頭部或文件體當(dāng)中還可以使用link標(biāo)簽引入CSS文件，或者使用script標(biāo)簽引入JS文件。

關(guān)于文檔聲明，在傳統(tǒng)的HTML4當(dāng)中，有另外三種聲明方法，請?jiān)斠姟段臋n聲明 DOCTYPE常見的文檔類型》

為了HTML5，到底需要多少種編碼格式

目前來說，廣泛被瀏覽器支持的的視頻編碼格式總共有三種，但是沒有一種可以達(dá)到通吃所有瀏覽器的境界。所以對于同一個視頻，至少需要兩種格式，才能在所有瀏覽器里播放。

首先要選擇一個被支持最多的視頻格式，那么就是 MP4 + H.264 這個組合了，音頻方面則是 AAC 或者 MP3。MP4 封裝的視頻，可以在 Safari、Chrome 和 IE9 里播放（悲劇的是 IE9 只支持 Windows Vsita 和 Windows 7）。同時，這個組合也是你通過 Flash 來作為播放器播放的最好選擇了，同時這個組合也可以在很多手持設(shè)備上播放，比如 iOS、Android、Blackberry、PSP、PS3 等等。在 H.264 編碼的時候，可以選擇 “High Profile” 以獲得最好的編碼質(zhì)量，或者 “Baseline” 來應(yīng)對一些移動設(shè)備。

除此之外，還有兩個組合，WebM + VP8 和 Ogg + Theora + Vorbis 來滿足其他的瀏覽器。WebM 可以在 Firefox（4.0+）、Chrome（6.0+）和 Opera（10.60+）中播放；Ogg 可以在 Firefox（3.5+）、Chrome（3.0+）和 Opera（10.54+）中播放。

HTML5添加了utf-8中文還是亂碼

原因：問題就出編輯器身上。

1、用鼠標(biāo)右鍵單擊亂碼的html文件，選擇用記事本打開。

2、點(diǎn)擊記事本菜單欄的文件，選擇文件另存為。

3、在另存為的窗口中會發(fā)現(xiàn)保存有編碼選擇，默認(rèn)編碼為ANSI。

4、但是我們需要的編碼為UTF-8,所以在保存的時候選擇UTF-8，點(diǎn)擊保存，替換原來的文件，就解決了html本身內(nèi)容亂碼問題。

如何用HTML5向網(wǎng)頁中插入音頻

工具/材料

Sublime Text

01

打開Sublime Text工具，準(zhǔn)備好如下圖所示的目錄結(jié)構(gòu)，目錄里面包括要插入的音頻文件和一個html文件。

02

打開HTML文件，新建一個空的HTML5文檔結(jié)構(gòu)，如下圖所示，注意編碼一定設(shè)置為UTF-8。

03

接下來在body標(biāo)簽中插入audio元素，audio元素里面通過source引入音頻文件，如下圖所示，注意文件的類型要寫對。

04

運(yùn)行編寫好的頁面程序，你會在網(wǎng)頁中看到如下圖所示的音頻播放器，我們點(diǎn)擊播放按鈕就會自動播放音頻。

05

當(dāng)然有很多的老版本的瀏覽器并不支持audio元素，這個時候我們可以在audio里面添加一個提示，當(dāng)瀏覽器不支持audio元素的時候就會顯示這個提示。

06

如果想進(jìn)入播放頁面就立即自動播放音頻內(nèi)容，那么需要在audio中添加一個controls屬性，如下圖所示。

07

最后，我列舉了一下當(dāng)前主流瀏覽器對HTML5里面audio元素的支持情況，大家可以做一下參考。

html5基本知識點(diǎn)

一、HTML的開發(fā)工具和使用的瀏覽器

開發(fā)工具：記事本等文本編輯器，Atom、VisualStudioCode( VSCode)、Brackets、Sublime text和Hbuider。

瀏覽器：Chrome、Firefox、IE、Safari、IPhone、Android。

二、HTML的基本要素

DOCTYPE? 描述文檔的類型

html? ? ?網(wǎng)頁的根元素，寫在網(wǎng)頁的在外面

head??? 網(wǎng)頁的頭部信息，寫在html標(biāo)記的里面

body? ? 網(wǎng)頁的內(nèi)容，寫在html標(biāo)記的里面

具體描述：

1、DOCTYPE? 描述文檔的類型，規(guī)定web 瀏覽器關(guān)于頁面使用哪個 HTML 版本進(jìn)行編寫的指令。

網(wǎng)頁可以使用的具體版本，網(wǎng)頁中可以使用那些標(biāo)記，每個版本的DTD版本均有不同

使用例子

HTML4的例子

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""

HTML5的例子

2、html/html?網(wǎng)頁文檔中的根標(biāo)記

html 標(biāo)簽有三個特殊的屬性

manifest? ?指定網(wǎng)頁緩存文件，可以讓用戶離線的時候也可以訪問文件。

xmlns? ?設(shè)置html名空間，比如把網(wǎng)頁設(shè)置成xhml的時候可以使用這個值。

lang? ?設(shè)置網(wǎng)頁的描述語言，比如中文是zh；英文是en。

3、head/head頭部標(biāo)簽在網(wǎng)頁中只能有一個，設(shè)置HTML文檔的頭部信息，里面內(nèi)容不會在頁面中顯示出來·。

head里面的標(biāo)記

meta 標(biāo)記

title定義網(wǎng)頁的標(biāo)題

link 鏈接

script? 標(biāo)記JavaScript腳本的內(nèi)容

style? 標(biāo)記css樣式

meta? 標(biāo)記

4、body/body只能有一個，顯示網(wǎng)頁的主體內(nèi)容。

代碼示例：

請點(diǎn)擊輸入圖片描述

1 !DOCTYPE html 2 html lang="en" 3 head 4 ? ? meta charset="UTF-8" 5 ? ? title網(wǎng)頁標(biāo)題(顯示在瀏覽器上)/title 6 ? ? meta name="description" content="網(wǎng)頁內(nèi)容的簡單描述" 7 ? ? meta name="keywords" content="網(wǎng)頁關(guān)鍵詞" 8 ? ? link rel="/css/style.css" 9 ? ? script src="/js/script.js"/script10 /head11 body12 ? ? header網(wǎng)頁頭部內(nèi)容/header13 ? ? main網(wǎng)頁主要內(nèi)容/main14 ? ? nav網(wǎng)頁的導(dǎo)航內(nèi)容/nav15 ? ? footer網(wǎng)頁的頁腳內(nèi)容/footer16 /body17 /html

請點(diǎn)擊輸入圖片描述

請點(diǎn)擊輸入圖片描述

三、寫在head中的標(biāo)簽

（一）、meta標(biāo)簽

meta元素的屬性：

name?描述信息的名稱，來標(biāo)記這是一個什么樣的信息

http-equiv? 描述行為

content? 描述的內(nèi)容

charset? ?指定網(wǎng)頁的編碼

1、name 屬性

1 meta name="author" content="nyw"2 ? ? !--作者， 定義網(wǎng)頁的作者 --3 meta name="description" content="meta標(biāo)記學(xué)習(xí)"4 ? ? !-- 描述，描述網(wǎng)頁的實(shí)際內(nèi)容 --5 meta name="keywords" content="HTML,meta"6 ? ? !-- 關(guān)鍵字，定義網(wǎng)頁關(guān)鍵字 --

2、http-equiv屬性

1 meta http-equiv="refresh" content="30"2 ? ? !-- 網(wǎng)頁30s后自動刷新 --3 meta http-equiv="refresh" content="5,url=dom.html"4 ? ? !-- 網(wǎng)頁30秒后跳轉(zhuǎn)到dom.html文檔 --

meta http-equiv="refresh" content="5,url=dom.html"

http-equiv描述網(wǎng)頁的行為，行為 refresh刷新，內(nèi)容為5，表示5秒后跳轉(zhuǎn)到 dom.html這個文檔。

3、content 屬性

特殊屬性

content-type???指定http頭部信息的文字編碼（最為常用）

default-style? ?指定優(yōu)先使用的樣式單（stylesheet）

refresh? ? 用于網(wǎng)頁的自動刷新或是頁面跳轉(zhuǎn)

set-cookie???設(shè)置頁面的cookie（現(xiàn)在已經(jīng)不再推薦使用）

4、charset屬性

指定網(wǎng)頁的編碼，推薦使用UTF-8來增加網(wǎng)頁的兼容性。

代碼實(shí)例：

為搜索引擎抓取機(jī)器人準(zhǔn)備一些信息

這段代碼可以禁止搜索引擎緩存和跟蹤網(wǎng)頁。

meta name="robots" content="noindex,nofollow"

!-- name定義的是機(jī)器人，內(nèi)容部分表示不要被搜索引擎緩存，也不要被搜索引擎跟蹤 --

代碼實(shí)例：

請點(diǎn)擊輸入圖片描述

1 !DOCTYPE html 2 html lang="en" 3 head 4 ? ? meta charset="UTF-8" 5 ? ? title網(wǎng)頁標(biāo)題(顯示在瀏覽器上)/title 6 ? ? meta name="author" content="nyw" 7 ? ? !--作者， 定義網(wǎng)頁的作者 -- 8 ? ? meta name="description" content="meta標(biāo)記學(xué)習(xí)" 9 ? ? !-- 描述，描述網(wǎng)頁的實(shí)際內(nèi)容 --10 ? ? meta name="keywords" content="HTML,meta"11 ? ? !-- 關(guān)鍵字，定義網(wǎng)頁關(guān)鍵字 --12 ? ? meta http-equiv="refresh" content="30"13 ? ? !-- 網(wǎng)頁30s后自動刷新 --14 ? ? meta http-equiv="refresh" content="5,url=dom.html"15 ? ? !-- 網(wǎng)頁30秒后跳轉(zhuǎn)到dom.html文檔 --16 ? ? meta name="robots" content="noindex,nofollow"17 ? ? !-- name定義的是機(jī)器人，內(nèi)容部分表示不要被搜索引擎緩存，也不要被搜索引擎跟蹤 --18 /head19 body20 /body21 /html

請點(diǎn)擊輸入圖片描述

（二）、title、base標(biāo)記

title和base標(biāo)記都是寫在head標(biāo)簽中

title：設(shè)置網(wǎng)頁的標(biāo)題

寫法：title內(nèi)容/title。

base：指定網(wǎng)頁跳轉(zhuǎn)基準(zhǔn)URL，如果不指定的話默認(rèn)為當(dāng)前網(wǎng)站的當(dāng)前路徑。

寫法：base href=""

base屬性值：

href? 指定網(wǎng)頁跳轉(zhuǎn)到基準(zhǔn)URL，如果不指定的話則默認(rèn)為當(dāng)前網(wǎng)站的當(dāng)前路徑。

base href=""??這是將頁面跳轉(zhuǎn)到百度的網(wǎng)站打開。

target? 指定鏈接的跳轉(zhuǎn)幀如果不指定的話，則是在當(dāng)前頁面中跳轉(zhuǎn)。

base target="_blank"?網(wǎng)頁中的鏈接都應(yīng)該在新的窗口中打開。

terget屬性值：

_blank? 在新窗口中打開被鏈接的文檔

_self? ?默認(rèn)值，在相同框架中打開被鏈接的文檔

_parent? ?在父框架集中

_top? ?在整個窗口中打開被鏈接文檔·

framename? ?在指定框架中打開被鏈接文檔

（三）、link標(biāo)記

link標(biāo)記：鏈接外部文件時使用的標(biāo)記，可以把外部文件的內(nèi)容引入到當(dāng)前文件中來，使當(dāng)前網(wǎng)頁實(shí)現(xiàn)更多的功能。

link屬性：

href：指定鏈接外部路徑的路徑和文件名，要設(shè)置全路徑并且?guī)募?/p>

rel：引用文件，引用資源的類型定義

我們在使用link標(biāo)簽引用外部文件的時候，外部文件的類型是多種多樣的。

alternate? ?代替文檔（種子，其他語言版本，其他格式等等）

author? ?網(wǎng)頁的作者

help? 幫助文件的鏈接

icon? 網(wǎng)頁的圖標(biāo)

next? 如果是連續(xù)網(wǎng)頁的時候，指定下一個網(wǎng)頁

prefetch? ?把鏈接外部資源時提前緩存起來。

prev? ?如果是連續(xù)網(wǎng)頁

media? 鏈接文件或是資源屬于哪一種資源。

hreflang? ?鏈接文件的語言種類

type? 鏈接文件的mi/me類型（比如說，圖片圖標(biāo)文本）

sizes? 根據(jù)link鏈接文件的類型，來指定文件的大小

代碼示例：

鏈接網(wǎng)頁圖標(biāo)：

網(wǎng)站的圖標(biāo)指定，可以顯示在瀏覽器的圖標(biāo)欄，也可以被手機(jī)讀取作為網(wǎng)站的圖標(biāo)存入收藏夾

1 !-- 網(wǎng)站的圖標(biāo)指定，可以顯示在瀏覽器的圖標(biāo)欄，也可以被手機(jī)讀取作為網(wǎng)站的圖標(biāo)存入收藏夾 --2 ? ? link rel="icon"3 ? ? !-- 示例 --4 ? ? link rel="icon" href="img/favicon.png" type="image/png"5 ? ? link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"6 ? ? link rel="apple-touch-icon" href="img/apple-touch-icon.png" type="image/png"

注意：后面的href和前面type標(biāo)注的類型要一致，這樣既可以顯示在瀏覽器，又可以顯示在手機(jī)上

鏈接外部樣式單

1 link rel="stylesheet"2 ? ? link rel="stylesheet" href="style1.css" media="screen"3 ? ? link rel="stylesheet" href="style2.css" title="主題樣式文件"4 ? ? link rel=" alternate stylesheet" href="style3.css" title="可選樣式單"

說明：

alternate 會在瀏覽器中會彈出一個對話框，供用戶可以進(jìn)行選擇

media? 表示媒體類型為屏幕，可以是手機(jī)，但不包括打印機(jī)和投影儀

title? 對這個link進(jìn)行簡單的說明

網(wǎng)站RSS種子指定

!-- 網(wǎng)站RSS種子指定 --

link rel="alternate" type="application/rss+xml"

為搜索引擎的準(zhǔn)備的網(wǎng)頁的URL

!-- 為搜索引擎的準(zhǔn)備的網(wǎng)頁的URL --

link rel="canonical"

link rel="canonical" href=""

網(wǎng)頁題目：html5編碼設(shè)置,設(shè)置網(wǎng)頁編碼
分享路徑：http://www.rwnh.cn/article26/dsigpcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、云服務(wù)器、電子商務(wù)、網(wǎng)站設(shè)計(jì)公司、Google、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)