站開發入門指南:媒體資源格式。
我們帶著大家來簡單的了解一下在網頁開發中常用的這些媒體資源的一些文件格式。
·首先是圖片資源,圖片的這個文件格式在講圖片標簽的時候其實也給大家去展示過有哪幾種常用的圖片格式。這里我就把這些格式的一些優缺點都先列在這里了,大家可以暫停先看。在網頁當中去使用圖片是有兩個核心的這樣的使用場景。
→那首先是非常常見的就是具體去展示的這種圖片,這些圖片都是展示的圖片,還有就是像這些功能型的圖片,功能型的這種小圖標的圖片。
→像這兩種場景理論上來講用任何一種圖片格式都是可以的。但是目前來講最常用的就是這兩種格式,這兩種格式大家注意看。這個SVG的圖片格式就是現在是經常會用在這種功能型的一種場景。因為現在很多在線的設計軟件都可以快速的方便的去復制這個設計好的圖標的一個 SVG的版本。
而且SVG它本身是一個矢量,它任意縮放都不會有這種模糊的問題,所以它其實非常適合來做圖標的這樣效果。而且它圖標本身一般來說都是比較簡單的圖形,所以也不會說牽扯到這種復雜圖片導致文件過大的這樣的一個問題。
·然后像展示型的文件現在很多的網站都用這種web.p的格式,VIP它是谷歌開發的一種圖片的格式,它支持透明度和動畫,還有就是它的這種圖像質量會比這種PNG的更好,它的文件還比這個PNG的小很多,所以就是在現在很多的網站上都會大量的采用這個webp的格式來作為這種展示型圖片的這樣的一種格式。
然后像這種不同的圖片格式,其實很多的設計軟件都是可以導出的。
目前來說webp的格式可能就是很多軟件并不支持直接的去導出這個格式。但是網上有很多可以轉換的格式、轉換的工具或者在線的工具都可以很方便的。比如說可以把JPG的格式、GIF的格式轉換成webp的格式。然后是這個視頻文件格式,主流的常用的就是這幾種。
最常用的就是MP4格式和Web.m格式。Webm格式也是谷歌開發的這樣一種視頻格式。目前來說主流的瀏覽器對這兩種視頻格式支持度都已經非常不錯。這兩種視頻文件格式都能在保證比較小的文件大小的前提下提供比較高的視頻質量。
一個視頻文件的文件大小是受很多因素去影響的,比如說像視頻本身的幀率、分辨率還有碼率等一些因素。如果你想更加深入的去研究,這塊東西可以自行的查找一些資料去了解一下。
這里給大家補充一個很小的知識點,就是平常說的這些視頻文件格式,其實它是一種容器格式就是我們的視頻文件。內部其實包裹著兩種重要的數據,一種就是我們所謂的這種視頻的數據,另外一種就是音頻的數據,它們兩者其實是分開的。
有的同學可能聽說過這樣的一種視頻格式叫做H.264。像這種其實是一種視頻數據的編碼標準。這個視頻文件容器內的視頻文件,這個視頻數據才是真正的按照這些編碼,視頻的編碼標準編碼出來的這樣一些視頻數據。
像這個視頻數據就是純視頻,也就是純圖像,它是沒有任何聲音的,只有跟音頻的資源。音頻的數據結合到一塊之后才是看到的這種整體的打包好的、有聲音、有圖像的一種視頻文件。所以我們要明白這些視頻文件是一種容器的格式。
最后就是音頻資源,音頻資源其實核心常用的也就是這四種,最常用的肯定就是MP3。
像一般場景來說MP3的格式完全就夠用了,像WAV它是一種無損的,所以文件一般來說會比較大。如果某一些特別的需要一些高保真的這樣一種高質量音頻的場景可能會用到這種格式。一般來說絕大部分的時候一般用MP3的格式就夠了。
TML: HyperText Markup Language 超文本標記語言
HTML代碼不區分大小寫, 包括HTML標記、屬性、屬性值都不區分大小寫;
任何空格或回車鍵在代碼中都無效,插入空格或回車有專用的標記,分別是 、<br>
HTML標記中不要有空格,否則瀏覽器可能無法識別。
如何添加注釋(comment:評論;注釋)
<!-- -->
<comment></comment>
<!-- --> 不能留有空格
字符集
<meta http-equiv="Content-Type" content="text/html;charset=#"/>
<base target="_blank">
可以將a鏈接的默認屬性設置為_blank屬性
單個標簽要有最好有結束符(可以沒有結束符)
<br/> <img src="" width="" />
便于兼容XHTML(XHTML必須要有結束符)
HTML標簽的屬性值可以有引號,可以沒有引號,為了提高代碼的可讀性,推薦使用引號(單引號和雙引號),盡管屬性值是整數,也推薦加上引號。
<marquee behavior="slide"></marquee>
便于兼容XHTML(XHTML必須要有引號)
<marquee behavior=slide></marquee>
經過測試,以上程序都可以正確運行
HTML標簽涉及到的顏色值格式:
color_name 規定顏色值為顏色名稱的文本顏色(比如 "red")。
hex_number 規定顏色值為十六進制值的文本顏色(比如 "#ff0000")。
rgb_number 規定顏色值為 rgb 代碼的文本顏色(比如 "rgb(255,0,0)")。
transparent 透明色 color:transparent
rgba(紅0-255,綠0-255,藍0-255,透明度0-1)
opacity屬性: 就是葫蘆娃兄弟老六(技能包隱身)
css:
div{opacity:0.1} /*取值為0-1*/
英文(顏色值)不區分大小寫
HTML中顏色值:采用十六進制兼容性最好(十六進制顯示顏色效果最佳)
CSS中顏色值:不存在兼容性
紅色 #FF0000
綠色 #00FF00
藍色 #0000FF
黑色: #000000
灰色 #CCCCCC
白色 #FFFFFF
青色 #00FFFF
洋紅 #FF00FF
黃色 #FFFF00
請問后綴 html 和 htm 有什么區別?
答: 1. 如果一個網站有 index.html和index.htm,默認情況下,優先訪問.html
2. htm后綴是為了兼容以前的DOS系統8.3的命名規范
XHTML與HTML之間的關系?
XHTML是EXtensible HyperText Markup Language的英文縮寫,即可擴展的超文本標記語言.
XHTML語言是一種標記語言,它不需要編譯,可以直接由瀏覽器執行.
XHTML是用來代替HTML的, 是2000年w3c公布發行的.
XHTML是一種增強了的HTML,它的可擴展性和靈活性將適應未來網絡應用更多的需求.
XHTML是基于XML的應用.
XHTML更簡潔更嚴謹.
XHTML也可以說就是HTML一個升級版本.(w3c描述它為'HTML 4.01')
XHTML是大小寫敏感的,XHTML與HTML是不一樣的;HTML不區分大小寫,標準的XHTML標簽應該使用小寫.
XHTML屬性值必須使用引號,而HTML屬性值可用引號,可不要引號
XHTML屬性不能簡寫:如checked必須寫成checked="checked"
單標記<br>, XHTML必須有結束符<br/>,而HTML可以使用<br>,也可以使用<br/>
除此之外XHTML和HTML基本相同.
網頁寬度設置多少為最佳?
960px
target屬性值理解
_self 在當前窗口中打開鏈接文件,是默認值
_blank 開啟一個新的窗口打開鏈接文件
_parent 在父級窗口中打開文件,常用于框架頁面
_top 在頂層窗口中打開文件,常用語框架頁面
字符集:
charset=utf-8
Gb2312 簡單中文字符集, 最常用的中文字符
Gbk 簡繁體字符集, 中文字符集
Big5 繁體字符集, 臺灣等等
Utf-8 世界性語言的字符集
ANSI編碼格式編碼格式的擴展字符集有gb2312和gbk
單位問題:
HTML屬性值數值型的一般不帶單位, CSS必須帶單位;
強制刷新
ctrl+F5
以下HTML標記用于格式化網頁上文本的外觀。這可以使網頁變得更加生動,但是,文本格式的太多變化也會使人不快。
head標記有6個級別可用,從h1用于最大和最重要的標題,到h6是最小的標題。
b標記之間的文本以粗體顯示,與周圍的文本相對突出。
i標記以一個小角度顯示文本。
u標記在文本正文添加一條線,請注意,鏈接已經有下劃線,不需要額外的標記。
strike標記在文本的正中間畫一條線,通常用來表示文本是舊的,不再相關,刪除。也可以用<s></s>代替。
pre標記之間的任何文本,包括空格、回車符和標點符號,都將像在文本編輯器中一樣顯示在瀏覽器中(通常瀏覽器會忽略多個空格)
code標記之間的文本以固定寬度字體顯示,通常在顯示源代碼時使用。
tt標記之間的文本就像是用打字機打出了一個固定寬度的文字。
blockquote標記定義一個塊引用,并且在塊的左右添加額外的邊距。
small標記讓你無需設置字體大小,就可以使文本呈現比周圍稍小的外觀。
font標記的color屬性改變幾個字或一段文字的顏色。屬性使用十六進制顏色代碼。
font標記的size屬性改變字體的大小,值范圍從1到7,1是最小,7是最大。
font標記的size屬性還可以相對于其前面的字體大小的作即時更改,此用法將按你指定的數字增減字體大小。例如:<font size="-1">一些文本</font>
font標記的face屬性以指定的字體顯示文本,值為字體名稱,如“Helvetica”、“Arial”或“Courier”。
center標記之間的所有內容都居中。
em標記用于強調文本,文本通常以斜體顯示,可能會根據瀏覽器的不同而有所不同。
strong標記用于著重強調文本,通常以粗體顯示,可能會根據瀏覽器的不同而有所不同。
下面是以上標記的示例:
瀏覽器顯示內容如下所示:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。