html的基本格式

tml由element組成。element分兩種，正常element和空element。

正常element

<p class=“wd”>world</p>

element由tag和content構(gòu)成

開始tag <p class=“wd”>
結(jié)束tag</p>

content

可以是直接在頁面上顯示的內(nèi)容
也可包含別的tag

<ul>
<li>first</li>
<li>second</li>
</ul>

空element

沒有content和結(jié)束tag的element。比如

換行<br>
<img src=“bg.png”>
<input type=“text” name=“name”>

element之間存在三種關(guān)系

父子關(guān)系。
祖孫關(guān)系
兄弟關(guān)系

<div>
<h1>title</h1>
<p>p1</p>
<p>p<strong>2</strong ></p>
</div>

div和h1，div和p，p和strong是父子關(guān)系。

div和strong是祖孫關(guān)系。

h1和p是兄弟關(guān)系。

eb 上的多媒體指的是音效、音樂、視頻和動畫。

現(xiàn)代網(wǎng)絡(luò)瀏覽器已支持很多多媒體格式。

什么是多媒體？

多媒體來自多種不同的格式。它可以是您聽到或看到的任何內(nèi)容，文字、圖片、音樂、音效、錄音、電影、動畫等等。

在因特網(wǎng)上，您會經(jīng)常發(fā)現(xiàn)嵌入網(wǎng)頁中的多媒體元素，現(xiàn)代瀏覽器已支持多種多媒體格式。

在本教程中，您將了解到不同的多媒體格式，以及如何在您的網(wǎng)頁中使用它們。

瀏覽器支持

第一款因特網(wǎng)瀏覽器只支持文本，而且即使是對文本的支持也僅限于單一字體和單一顏色。隨后誕生了支持顏色、字體和文本樣式的瀏覽器，圖片支持也被加入。

不同的瀏覽器以不同的方式處理對音效、動畫和視頻的支持。某些元素能夠以內(nèi)聯(lián)的方式處理，而某些則需要額外的插件。

多媒體格式

格式多媒體元素（比如視頻和音頻）存儲于媒體文件中。

確定媒體類型的最常用的方法是查看文件擴(kuò)展名。當(dāng)瀏覽器得到文件擴(kuò)展名 .htm 或 .html 時，它會假定該文件是 HTML 頁面。.xml 擴(kuò)展名指示 XML 文件，而 .css 擴(kuò)展名指示樣式表。圖片格式則通過 .gif 或 .jpg 來識別。

多媒體元素元素也擁有帶有不同擴(kuò)展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4。

視頻格式

MP4是互聯(lián)網(wǎng)推出新的視頻格式。YouTube 推薦使用 MP4 。Flash Players 支持 MP4HTML5 支持 MP4。

格式	文件	描述
AVI	.avi	AVI (Audio Video Interleave) 格式是由微軟開發(fā)的。所有運(yùn)行 Windows 的計算機(jī)都支持 AVI 格式。它是因特網(wǎng)上很常見的格式，但非 Windows 計算機(jī)并不總是能夠播放。
WMV	.wmv	Windows Media 格式是由微軟開發(fā)的。Windows Media 在因特網(wǎng)上很常見，但是如果未安裝額外的（免費(fèi)）組件，就無法播放 Windows Media 電影。一些后期的 Windows Media 電影在所有非 Windows 計算機(jī)上都無法播放，因?yàn)闆]有合適的播放器。
MPEG	.mpg .mpeg	MPEG (Moving Pictures Expert Group) 格式是因特網(wǎng)上最流行的格式。它是跨平臺的，得到了所有最流行的瀏覽器的支持。
QuickTime	.mov	QuickTime 格式是由蘋果公司開發(fā)的。QuickTime 是因特網(wǎng)上常見的格式，但是 QuickTime 電影不能在沒有安裝額外的（免費(fèi)）組件的 Windows 計算機(jī)上播放。
RealVideo	.rm .ram	RealVideo 格式是由 Real Media 針對因特網(wǎng)開發(fā)的。該格式允許低帶寬條件下（在線視頻、網(wǎng)絡(luò)電視）的視頻流。由于是低帶寬優(yōu)先的，質(zhì)量常會降低。
Flash	.swf .flv	Flash (Shockwave) 格式是由 Macromedia 開發(fā)的。Shockwave 格式需要額外的組件來播放。但是該組件會預(yù)裝到 Firefox 或 IE 之類的瀏覽器上。
Mpeg-4	.mp4	Mpeg-4 (with H.264 video compression) 是一種針對因特網(wǎng)的新格式。事實(shí)上，YouTube 推薦使用 MP4。YouTube 接收多種格式，然后全部轉(zhuǎn)換為 .flv 或 .mp4 以供分發(fā)。越來越多的視頻發(fā)布者轉(zhuǎn)到 MP4，將其作為 Flash 播放器和 HTML5 的因特網(wǎng)共享格式。

	最新的 HTML5 標(biāo)準(zhǔn)只支持 MP4, WebM, 和 Ogg 視頻格式。

聲音格式

MP3是一種音頻壓縮技術(shù)，其全稱是動態(tài)影像專家壓縮標(biāo)準(zhǔn)音頻層面3（Moving Picture Experts Group Audio Layer III），簡稱為MP3。它被設(shè)計用來大幅度地降低音頻數(shù)據(jù)量。如果你的站點(diǎn)是音樂類型的，你可以選擇mp3格式。

格式	文件	描述
MIDI	.mid .midi	MIDI (Musical Instrument Digital Interface) 是一種針對電子音樂設(shè)備（比如合成器和聲卡）的格式。MIDI 文件不含有聲音，但包含可被電子產(chǎn)品（比如聲卡）播放的數(shù)字音樂指令。點(diǎn)擊這里播放 The Beatles。因?yàn)?MIDI 格式僅包含指令，所以 MIDI 文件極其小巧。上面的例子只有 23k 的大小，但卻能播放將近 5 分鐘。MIDI 得到了廣泛的平臺上的大量軟件的支持。大多數(shù)流行的網(wǎng)絡(luò)瀏覽器都支持 MIDI。
RealAudio	.rm .ram	RealAudio 格式是由 Real Media 針對因特網(wǎng)開發(fā)的。該格式也支持視頻。該格式允許低帶寬條件下的音頻流（在線音樂、網(wǎng)絡(luò)音樂）。由于是低帶寬優(yōu)先的，質(zhì)量常會降低。
Wave	.wav	Wave (waveform) 格式是由 IBM 和微軟開發(fā)的。所有運(yùn)行 Windows 的計算機(jī)和所有網(wǎng)絡(luò)瀏覽器（除了 Google Chrome）都支持它。
WMA	.wma	WMA 格式 (Windows Media Audio)，質(zhì)量優(yōu)于 MP3，兼容大多數(shù)播放器，除了 iPod。WMA 文件可作為連續(xù)的數(shù)據(jù)流來傳輸，這使它對于網(wǎng)絡(luò)電臺或在線音樂很實(shí)用。
MP3	.mp3 .mpga	MP3 文件實(shí)際上是 MPEG 文件的聲音部分。MPEG 格式最初是由運(yùn)動圖像專家組開發(fā)的。MP3 是其中最受歡迎的針對音樂的聲音格式。期待未來的軟件系統(tǒng)都支持它。

	HTML5 的最新標(biāo)準(zhǔn)支持 MP3, WAV, 和 Ogg 音頻格式。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

.br 強(qiáng)制換行標(biāo)簽

讓后面的文字、圖片、表格等等，顯示在下一行

碼海無際<br>碼海無際

2.p 換段落標(biāo)簽

在網(wǎng)頁中要把文字有條理地顯示出來，離不開段落標(biāo)簽，就如同我們平常寫文章一樣，整個網(wǎng)頁也可以分為若干個段落，而段落的標(biāo)簽就是

<p>碼海無際</p><p>碼海無際</p>

3.hr 水平分割線標(biāo)簽

在網(wǎng)頁中常常看到一些水平線將段落與段落之間隔開，使得文檔結(jié)構(gòu)清晰，層次分明。這些水平線可以通過插入圖片實(shí)現(xiàn)，也可以簡單地通過標(biāo)簽來完成，hr 就是創(chuàng)建橫跨網(wǎng)頁水平線的標(biāo)簽。

碼海無際<hr>碼海無際

4.div 分區(qū)顯示標(biāo)簽

分區(qū)顯示標(biāo)簽，也稱之為層標(biāo)簽，常用來編排一大段的HTML段落，也可以用于格式化表，和 p 很相似，是塊狀元素，經(jīng)常嵌套使用。

<div>碼海無際</div><div>碼海無際</div><div>  <div>碼海無際</div>  <div>碼海無際</div></div>

5.span 行內(nèi)標(biāo)簽

用來組合文檔中的行內(nèi)元素，沒有固定的格式表現(xiàn)。當(dāng)對它應(yīng)用樣式時，它才會產(chǎn)生視覺上的變化。

<span>碼海無際</span><span>碼海無際</span>

6.pre 預(yù)格式化標(biāo)簽

pre 元素可定義預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。而文本也會呈現(xiàn)為等寬字體。

<pre>  碼海無際  碼海無際</pre>

7.ul 無序列表標(biāo)簽

無序列表的各個列表項(xiàng)之間沒有順序級別之分，是并列的。

<ul>  <li>碼海無際</li>  <li>碼海無際</li>  <li>碼海無際</li></ul>

注意：

 1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標(biāo)簽中輸入其他標(biāo)簽或者文字的做法是不被允許的。 2. <li>與</li>之間相當(dāng)于一個容器，可以容納所有元素。 3. 無序列表會帶有自己樣式屬性，但是不推薦使用，一般會用CSS設(shè)置。

8.ol 有序列表標(biāo)簽

有序列表即為有排列順序的列表，其各個列表項(xiàng)按照一定的順序排列定義

1.格式：

<ol type="符號類型">    <li type="符號類型"></li>    <li type="符號類型"></li></ol>

2.有序列表的type屬性值:

1：阿拉伯?dāng)?shù)字1.2.3等等，默認(rèn)type屬性值
A：大小字母A、B、C等等
a：小寫字母a、b、c等等
Ⅰ：大寫羅馬數(shù)字Ⅰ、Ⅱ、Ⅲ、Ⅳ等等
ⅰ：小寫羅馬數(shù)字ⅰ、ⅱ、ⅲ、ⅳ等等

3.有序列表的value屬性值:

指定一個新的序列數(shù)字起始值

4.列表可以進(jìn)行嵌套

<ol>  <li>碼海無際</li>  <li>碼海無際</li>  <li>碼海無際</li></ol><hr><ol type="A">  <li>碼海無際</li>  <li>碼海無際</li>  <li>碼海無際</li></ol><hr><ol>  <li>碼海無際</li>  <li type="A">碼海無際</li>  <li>碼海無際</li></ol><hr><ol>  <li>碼海無際</li>  <li>碼海無際</li>  <li value="6" type="A">碼海無際</li>  <li>碼海無際</li>  <li>碼海無際</li></ol><hr><ol>  <li>碼海無際</li>  <li>碼海無際</li>  <li>    <ol type="A">      <li>志存高遠(yuǎn)</li>      <li>志存高遠(yuǎn)</li>    </ol>  </li>  <li>碼海無際</li>  <li>碼海無際</li></ol>

9.dl 自定義型列表標(biāo)簽

對列表?xiàng)l目進(jìn)行簡短的說明

<dl>  <dt>軟件說明：</dt>  <dd>這是軟件說明</dd>  <dt>軟件界面：</dt>  <dd>這是軟軟件界面</dd></dl>

10.center 居中對齊標(biāo)簽

居中對齊

<center>碼海無際</center>

在線咨詢

上一篇：手把手的教你用PHP將HTML生成PDF
下一篇：vue 封裝圖片預(yù)覽組件圖片放大、縮小、旋轉(zhuǎn)

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商