整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          為HTML頁(yè)面添加視頻、音頻的方法-零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          頻、視頻的格式

          開始學(xué)習(xí)之前,我們要下載些素材用來(lái)測(cè)試使用,地址如下:https://pan.baidu.com/s/1reRWno0ibYRcYXjw4MClqw

          提取碼:td80

          其中包括兩個(gè)視頻一個(gè)音頻和一個(gè)安裝程序。

          學(xué)習(xí)如何在頁(yè)面中添加音頻、視頻之前應(yīng)該了解一點(diǎn)基礎(chǔ)知識(shí)。

          我們應(yīng)該都有在互聯(lián)網(wǎng)上下載電影、視頻、音樂(lè)的經(jīng)歷,大家會(huì)注意到,有的視頻文件名的后綴是.avi,有的視頻是.mp4,還有.mov的,據(jù)不完全統(tǒng)計(jì),常見(jiàn)的各種視頻格式有十幾種之多。

          常見(jiàn)的音頻的格式比起視頻來(lái)會(huì)顯得少一些,一般是.wav和.mp3格式。

          為什么存儲(chǔ)相同的內(nèi)容可以有這么多不同的格式呢?

          格式產(chǎn)生的核心在于對(duì)音頻、視頻等多媒體文件進(jìn)行的不同編碼方式。

          那什么是編碼呢?

          簡(jiǎn)單來(lái)說(shuō)我們可以把"編碼"這個(gè)詞分成兩個(gè)部分,第一個(gè)是"編",也就是"整理、組織"的意思,第二個(gè)是"碼",也就是我們平時(shí)所說(shuō)的"數(shù)碼"。

          首先說(shuō)"碼",我們的計(jì)算機(jī)中的數(shù)據(jù)最終都是通過(guò)二進(jìn)制的數(shù)字(0和1)來(lái)存儲(chǔ)或計(jì)算的,這些0或1就是數(shù)碼。無(wú)論代碼、程序、圖片、音樂(lè)、視頻、文字等的存儲(chǔ)與計(jì)算都不例外。不管多么復(fù)雜或簡(jiǎn)單的文件,在計(jì)算機(jī)看來(lái),都是一大堆0和1。

          一個(gè)0或1被稱為1比特,圖片或視頻中的一個(gè)黑白像素通常是8比特(八位),如果一張1080乘720個(gè)像素的圖片所占內(nèi)存的大小就是1080*720*8=6220800字節(jié),約等于0,74mb。如果一個(gè)視頻每秒中有25幀,也就是一秒鐘在我們眼前閃過(guò)25張圖片(視頻播放實(shí)際上就是在我們眼前快速的更替圖片,這些圖片在大腦中會(huì)被自動(dòng)連成動(dòng)作,這也是小的時(shí)候在課本的角上畫好一套走路的小人的不同動(dòng)作后,快速翻動(dòng)書頁(yè),畫面中的小人會(huì)走路的原因,大家可以自行百度"視覺(jué)暫留原理")。

          一秒鐘25張1080乘720的圖片的視頻,一秒鐘就會(huì)占0.74*25=18.5mb的內(nèi)存。如果是一分鐘呢,18.5*60=1110mb約等于1.08gb。這樣的數(shù)據(jù)量是不是很嚇人。

          但事實(shí)上我們下載的1080*720的一小時(shí)三十分鐘左右的視頻的體積往往也沒(méi)有超過(guò)1gb,這又是為什么呢?

          這就是"編"的功勞!對(duì)數(shù)碼進(jìn)行整理和組織的主要目的是壓縮體積,壓縮數(shù)據(jù)體積既能節(jié)省磁盤又能方便傳播與攜帶,是信息技術(shù)的關(guān)鍵技術(shù)之一,壓縮的方法一般有兩類,一類叫做無(wú)損壓縮,也就是通過(guò)對(duì)這一大堆數(shù)碼進(jìn)行一個(gè)特殊的組合使其占有更小的空間,一類叫做有損壓縮,是在無(wú)損壓縮的基礎(chǔ)上剔除掉人眼睛識(shí)別不到的冗余信息。具體的壓縮過(guò)程涉及到很多數(shù)學(xué)知識(shí),這里大家簡(jiǎn)單了解一下即可。

          壓縮后的視頻或音頻文件最終通過(guò)播放器對(duì)該文件的壓縮算法進(jìn)行逆向運(yùn)算后,還原成計(jì)算機(jī)可以解讀的畫面和聲音再呈現(xiàn)給觀眾,這個(gè)過(guò)程叫做"解碼"。

          通過(guò)"編"的方式壓縮文件體積,通過(guò)"解"的方式再還原出文件內(nèi)容成了處理大規(guī)模數(shù)據(jù)的通用手法。

          不同的編碼和解碼方式催生出不同的文件格式,這種情況下,瀏覽器在播放視頻的時(shí)候就要有應(yīng)對(duì)不同格式的不同解碼方式,在15年以前,瀏覽器為了能夠播放不同格式的視頻,就要調(diào)用電腦中不同的播放器,這個(gè)過(guò)程的寫法非常麻煩。隨著技術(shù)不斷地整合,時(shí)至今日,在頁(yè)面中播放視頻不需要這么復(fù)雜的寫法了,但是因?yàn)槊總€(gè)瀏覽器都不是包打一切,因此,雖然不用指定播放器,但是也要預(yù)設(shè)不同格式的視頻來(lái)應(yīng)對(duì)不同的瀏覽器。

          因此,我們?cè)谶@一部分的學(xué)習(xí)中除了講解如何向頁(yè)面添加不同格式的音視頻外還會(huì)告訴大家如何為音視頻轉(zhuǎn)換格式。

          為頁(yè)面添加音頻、視頻

          添加音頻使用<audio></audio>標(biāo)簽,這個(gè)標(biāo)簽被所有瀏覽器支持,是html5推薦的音頻導(dǎo)入標(biāo)簽,但是遺憾的是在html4標(biāo)準(zhǔn)中是不被支持的或者說(shuō)是非法的。

          這里給大家簡(jiǎn)要介紹一下html5和html4的區(qū)別。

          簡(jiǎn)單來(lái)說(shuō)呢,一個(gè)html文件的第一條語(yǔ)句是<!DOCTYPE HTML>,它就是HTML5標(biāo)準(zhǔn)的文件。如果是html4,它的第一條聲明語(yǔ)句有三種寫法,像這樣

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

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

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

          版權(quán)聲明:本文為CSDN博主「痦子」的原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權(quán)協(xié)議,轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

          原文鏈接:https://blog.csdn.net/yh1061632045/article/details/81518141

          這讓我想到了孔乙己的"茴"字的多種寫法

          是不是很麻煩,其實(shí)html5比html4更簡(jiǎn)單,功能更強(qiáng)大,而且我們一直以html5的標(biāo)準(zhǔn)進(jìn)行學(xué)習(xí),所以大家不必糾結(jié)。

          下面我們導(dǎo)入一個(gè)音頻試試吧。示例代碼如下:

          <!DOCTYPE HTML>
            <html>
            <head> 
            <title>音視頻導(dǎo)入</title>
            </head> 
            <body>
            <audio controls="controls"> 
              <source src="audio/千年的祈禱.mp3" type="audio/mp3" />
            </audio>
            </body> 
            </html>

          頁(yè)面效果如下:

          其中controls屬性就是用來(lái)顯示播放控制界面的,就是這個(gè):(偷懶的話可以寫成"controls"就ok,不必加"="以及后面的內(nèi)容了。)

          如果以后您使用自己編寫的控制界面,就可以不添加這個(gè)屬性。

          刪掉這個(gè)屬性后就是這樣:這樣為自定義的播放控制界面留出了位置。

          <audio></audio>標(biāo)簽夾著<source>標(biāo)簽,一個(gè)<audio></audio>標(biāo)簽中可以添加多個(gè)<source>用以支持不同的格式要求。示例代碼如下:(這段代碼來(lái)自w3school)

          <audio controls="controls"> 
            <source src="song.ogg" type="audio/ogg" /> 
            <source src="song.mp3" type="audio/mpeg" />
            Your browser does not support the audio element.<!--你的瀏覽器不支持這個(gè)音頻元素-->
          </audio>

          type屬性是告訴瀏覽器音樂(lè)文件的類型。

          不同格式的文件的生成需要我們自己去做,這就涉及到如何給一個(gè)音頻文件進(jìn)行格式轉(zhuǎn)化的問(wèn)題。這個(gè)問(wèn)題我們明天再說(shuō),今天先學(xué)習(xí)為頁(yè)面添加音頻和視頻。

          下面我們來(lái)看一下視頻的導(dǎo)入方法,示例代碼如下:

          <video controls> 
            <source src="video/阿塔麗.mp4" type="video/mp4" />
          </video>

          頁(yè)面效果如下:

          我們可以通過(guò)設(shè)置height和width屬性來(lái)控制視頻的面積。實(shí)例代碼如下:

          <video controls width="850" height="500" > 
            <source src="video/阿塔麗.mp4" type="video/mp4" />
          </video>

          頁(yè)面效果如下:

          視頻畫面變小了,和視頻并排的是我們之前添加的音頻文件,由此可知,這兩個(gè)元素都是內(nèi)聯(lián)元素。

          今天的內(nèi)容結(jié)束了,明天我們繼續(xù)學(xué)習(xí)格式轉(zhuǎn)換和為不同瀏覽器預(yù)設(shè)不同音視頻格式的方法。

          如果您有任何疑問(wèn)請(qǐng)給我留言,如有問(wèn)題或錯(cuò)誤請(qǐng)予以斧正!

          HTML完整學(xué)習(xí)目錄

          HTML序章(學(xué)習(xí)目的、對(duì)象、基本概念)——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          HTML是什么?——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          第一個(gè)HTML頁(yè)面如何寫?——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          HTML頁(yè)面中head標(biāo)簽有啥用?——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          HTML元素中的屬性2(路徑詳解)——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          使用HTML添加表格1(基本元素)——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          使用HTML添加表格2(表格頭部與腳部)——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          使用HTML添加表格3(間距與顏色)——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          使用HTML添加表格4(行顏色與表格嵌套)——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          在HTML頁(yè)面中嵌入其他頁(yè)面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          封閉在家學(xué)網(wǎng)頁(yè)制作!為頁(yè)面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          HTML表單3(下拉列表、多行文字輸入)——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          HTML表單4(form的action、method屬性)——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          為HTML頁(yè)面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          lt;div>塊元素基礎(chǔ)屬性講解

          <div>元素是個(gè)有故事的元素,這個(gè)元素很早就出現(xiàn)在html超文本標(biāo)記語(yǔ)言中,它設(shè)計(jì)之初就是為了解決網(wǎng)頁(yè)頁(yè)面布局的需求。但是遺憾的是它出生后一直懷才不遇。

          在我還上初中的時(shí)候,智能手機(jī)還沒(méi)有出現(xiàn),更沒(méi)有平板電腦等移動(dòng)設(shè)備。上網(wǎng)是通過(guò)擺在桌子上的計(jì)算機(jī)來(lái)完成的。

          那時(shí),大街小巷上有好多網(wǎng)吧。

          那時(shí),馬云剛剛辭去工作準(zhǔn)備創(chuàng)業(yè)。

          那時(shí),發(fā)送郵件的操作都會(huì)出現(xiàn)在計(jì)算機(jī)課程中。

          那時(shí),對(duì)頁(yè)面還沒(méi)有現(xiàn)在的跨平臺(tái)要求。

          那時(shí),flashplayer大行其道。

          那時(shí),dreamwaver、flash、fireworks被稱為網(wǎng)頁(yè)三劍客!

          那時(shí),制作網(wǎng)頁(yè)可以不用懂的html的寫法!

          第一次接觸網(wǎng)頁(yè)制作是在大學(xué)的專業(yè)課上,使用三劍客,通過(guò)點(diǎn)擊軟件菜單中的按鈕就能制作網(wǎng)頁(yè),精力都放在了如何使用flash制作酷炫的交互動(dòng)畫上了。

          那時(shí),對(duì)html還沒(méi)有深刻的認(rèn)識(shí),但是卻對(duì)<table></table>這個(gè)標(biāo)簽有著極深的印象。

          因?yàn)楫?dāng)時(shí)的dreamwaver通過(guò)非代碼方式生成的頁(yè)面都是使用<table>表格元素進(jìn)行布局的!

          也就是說(shuō),在移動(dòng)智能設(shè)備誕生之前,在用戶對(duì)頁(yè)面還沒(méi)有可以適應(yīng)不同屏幕比例的要求前,<table>這個(gè)本來(lái)用來(lái)做表格的元素同時(shí)兼職了<div>的頁(yè)面布局工作,而且把兼職干成了主業(yè),讓<div>這個(gè)專業(yè)的塊元素閑置了好久。

          直到智能手機(jī),平板電腦產(chǎn)生后,由于對(duì)頁(yè)面的跨平臺(tái)顯示的要求的出現(xiàn)(這類適應(yīng)多平臺(tái)的頁(yè)面布局叫做響應(yīng)式布局),<table>表格制作的頁(yè)面在響應(yīng)式布局大行其道的今天,用它布局的頁(yè)面開始出現(xiàn)代碼冗余,維護(hù)困難等諸多問(wèn)題。手機(jī)端的瀏覽器在播放視頻或其他交互動(dòng)畫時(shí)也不再依賴flashplayer這個(gè)給我們帶來(lái)無(wú)數(shù)反感和惱火的插件。

          從此,頁(yè)面制作的世道變了,從不需要編程就能制作頁(yè)面的三劍客,變成了必須懂得相關(guān)代碼寫法才能使用的HTML+CSS+JavaScript了。dreamwaverCC版本也恢復(fù)了寫代碼做頁(yè)面的操作方式,過(guò)去的點(diǎn)擊加拖拽的制作方式也消失了。這讓很多不懂編程和HTML等頁(yè)面制作核心技術(shù)的從業(yè)人感到難受。

          dreamwaver的老東家Adobe后來(lái)也嘗試過(guò)推出新模式下通過(guò)界面操作來(lái)制作網(wǎng)頁(yè)的軟件,還搞出一個(gè)叫做Muse的軟件,但是依舊沒(méi)能撬動(dòng)代碼書寫的方式。

          這個(gè)故事在開始學(xué)習(xí)<div>和css布局之前我都會(huì)講給學(xué)生(一群文科生)聽(tīng),我只是想告訴大家,學(xué)習(xí)任何計(jì)算機(jī)技術(shù),我們可以從簡(jiǎn)單易學(xué)的方式入手,但要有透過(guò)這種方式向下挖掘核心知識(shí)的決心和勇氣!對(duì)于自己從事的工作我們不能滿足于會(huì)做,還要盡量透析它的原理,這樣才能在技術(shù)換代中不會(huì)被輕易淘汰。

          在我研究生階段,有一門讓我終生難忘的選修課,這門課叫做《數(shù)字娛樂(lè)技術(shù)概述》,這門課既不娛樂(lè)也不概述,但是通篇都是數(shù)字,那位年輕的教授為我們透析了游戲、影視特效的核心----計(jì)算機(jī)圖形學(xué)。

          從此我開始學(xué)習(xí)數(shù)學(xué)。因?yàn)槔蠋煹囊痪湓挘?strong>從2000年到現(xiàn)在(2014)雖然各種軟件層出不窮,但是計(jì)算機(jī)圖形學(xué)的核心算法卻幾乎沒(méi)什么改變。

          向下挖掘雖然很難,但是有必要!與各位共勉!

          下面開始今天的內(nèi)容。

          首先,我們將之前的"第一個(gè)頁(yè)面.html"文件復(fù)制一個(gè),叫做"塊元素學(xué)習(xí).html"。然后把<body></body>中間的內(nèi)容清空。

          如圖:

          下面,我們?cè)?lt;body></body>中間添加<div></div>標(biāo)簽。示例代碼如下:

          <body><div></div></body>

          我們看看效果:

          啦啦啦,什么都沒(méi)有!

          為了讓大家可以看出來(lái)不同,我們?yōu)?lt;div>添加邊框?qū)傩裕?/p>

          我們使用style屬性為<div>添加邊框,style屬性里的代碼就是以后在CSS中使用的代碼!實(shí)際上我們已經(jīng)開始接觸CSS的一些內(nèi)容了。具體寫法的講解大家可以看這個(gè)教程,這里不再贅述。

          示例代碼如下:(通過(guò)style = "border-style: solid;"可以為很多元素添加邊框,就不需要大家記憶或查詢不同元素的不同寫法,是不是很方便?。?/p>

          <div style = "border-style: solid;">

          效果如圖:

          因?yàn)槔锩鏇](méi)有內(nèi)容,所以<div>的寬度是0,因此顯示的就是一條直線。下面我們向<div>中添加內(nèi)容。

          為了看起來(lái)花哨些,加張圖片吧!

          示例圖片

          示例代碼如下:

          <div style = "border-style: solid;"><img src = "img/示例圖片/image4.jpg"/ style = "width:50%;"></div>

          大家請(qǐng)按照<img>中的scr自行建立文件夾和命名吧!如果您看不懂請(qǐng)參照《HTML元素中的屬性2(路徑詳解)——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作》

          效果如下:

          其中,我們也是使用了style的方式為<img>設(shè)置的寬度,這個(gè)設(shè)置方法在<div>中一樣使用!

          代碼示例:大家注意寫法,不同的屬性都添加到style的雙引號(hào)中即可,同時(shí)使用;隔開!

          <div style = "border-style: solid; width:50%;">
            <img src = "img/示例圖片/image4.jpg"/ style = "width:50%;">
              </div>

          效果如圖:

          整個(gè)邊框縮小了50%,圖片更有趣,尺寸變成了div的50%乘以自身的50%。這個(gè)特性大家要記住。

          為了方便觀看,我們?nèi)サ鬱iv的width設(shè)置。同時(shí)在<div>中繼續(xù)添加<div>標(biāo)簽。為了方便顯示,我們?cè)谛碌?lt;div>中添加一段文字!

          示例代碼如下:

          <div style = "border-style: solid;">
            <img src = "img/示例圖片/image4.jpg"/ style = "width:50%;">
              <div>
              <p>學(xué)習(xí)網(wǎng)頁(yè)制作非常有趣!</p>
          </div>
          </div>

          效果如下:

          如果為了美觀,我們讓文字到圖片右邊的空間中怎么做呢?

          示例代碼如下:

          <div style = "float:right;"><p>學(xué)習(xí)網(wǎng)頁(yè)制作非常有趣!</p></div>

          我們通過(guò)為新的<div>標(biāo)簽中的style屬性添加float(浮動(dòng))屬性,同時(shí)設(shè)置為right(右)。

          頁(yè)面效果如圖:

          大家思考一下如何讓圖片與文字都靠在左邊呢?

          是不是為圖片style添加float:left;同時(shí)把新<div>的float改為left?

          我們?cè)囋嚳矗?/p>

          示例代碼如下:

          <div style = "border-style: solid;">
            <img src = "img/示例圖片/image4.jpg" style = "width:50%; float:left;"/>
              <div style = "float:left;">
                <p>學(xué)習(xí)網(wǎng)頁(yè)制作非常有趣!</p>
          </div>
          </div>

          頁(yè)面效果:

          效果完全不對(duì),圖片和文字跑到外邊來(lái)了。

          這是div布局中經(jīng)常出現(xiàn)的一個(gè)問(wèn)題!解決方案有點(diǎn)奇葩,既不是修改<img>屬性也不是修改<div>屬性,而是增加一組空的<div></div>標(biāo)簽!給這個(gè)新的空的<div>的style設(shè)置為"clear:both"即可修正。

          示例代碼如下:

          <div style = "border-style: solid;">
            <img src = "img/示例圖片/image4.jpg" style = "width:50%; float:left;"/>
              <div style = "float:left;">
                <p>學(xué)習(xí)網(wǎng)頁(yè)制作非常有趣!</p>
          </div>
          <div style = "clear:both;"></div>
          </div>

          頁(yè)面效果如下:

          值得注意的是,如果您不使用<div>的話直接使用<img>和<p>,同時(shí)對(duì)兩個(gè)標(biāo)簽的style設(shè)置為float:left,是沒(méi)有問(wèn)題的,只有把它們放到<div>中才會(huì)出現(xiàn)上面的情況。

          代碼如下:

          <body>
            <img src = "img/示例圖片/image4.jpg" style = "width:50%; float:left;"/>
              <p style = "float:left;">學(xué)習(xí)網(wǎng)頁(yè)制作非常有趣!</p>
          </body>

          頁(yè)面顯示效果如下:

          大家觀察一下,文字也變小了。至于為什么去掉<div>之后就不會(huì)出現(xiàn)上面那種出框的情況,而且文字也變小的問(wèn)題在以后的講解中我們?cè)偕钊胩接懀?/p>

          現(xiàn)在希望大家可以記牢這個(gè)情況和操作,更多布局問(wèn)題我們會(huì)在CSS的浮動(dòng)(float)的講解中詳細(xì)說(shuō)明。

          疫情期間,請(qǐng)大家少出門,不聚會(huì),沒(méi)事在家學(xué)學(xué)網(wǎng)頁(yè)制作,即抗擊疫情又提高自己!

          喜歡的小伙伴請(qǐng)關(guān)注我,閱讀中遇到任何問(wèn)題請(qǐng)給我留言,如有疏漏或錯(cuò)誤歡迎大家斧正,不勝感激!

          HTML完整學(xué)習(xí)目錄

          HTML序章(學(xué)習(xí)目的、對(duì)象、基本概念)——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          HTML是什么?——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          第一個(gè)HTML頁(yè)面如何寫?——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          HTML頁(yè)面中head標(biāo)簽有啥用?——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          HTML元素中的屬性2(路徑詳解)——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          使用HTML添加表格1(基本元素)——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          使用HTML添加表格2(表格頭部與腳部)——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          使用HTML添加表格3(間距與顏色)——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          使用HTML添加表格4(行顏色與表格嵌套)——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          在HTML頁(yè)面中嵌入其他頁(yè)面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          封閉在家學(xué)網(wǎng)頁(yè)制作!為頁(yè)面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          HTML表單3(下拉列表、多行文字輸入)——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          HTML表單4(form的action、method屬性)——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          為HTML頁(yè)面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          常,我們希望限制元素相對(duì)于其父元素的寬度,同時(shí)使其具有動(dòng)態(tài)性。因此,有一個(gè)基礎(chǔ)寬度或高度的能力,使其擴(kuò)展的基礎(chǔ)上,可用的空間。比如說(shuō),我們有一個(gè)按鈕,它的寬度應(yīng)該是最小的,不應(yīng)該低于它的寬度。這就是最大和最小屬性變得方便的地方。

          在本文中,我們將詳細(xì)介紹CSS的最大和最小寬度和高度屬性,并使用可能的用例和技巧詳細(xì)解釋每一個(gè)屬性。

          width 屬性

          首先要討論的是與寬度相關(guān)的屬性。我們有min-width和max-width,它們中的每一個(gè)都很重要,都有自己的用例。

          Min Width

          設(shè)置min-width的值時(shí),其好處在于防止width屬性使用的值變得小于min-width的指定值。 請(qǐng)注意,min-width的默認(rèn)值是auto,它解析為0。

          讓我們舉一個(gè)基本的例子來(lái)說(shuō)明這一點(diǎn)。

          我們有一個(gè)按鈕,里面有一個(gè)變化的文本。文本的范圍可能從一個(gè)單詞到多個(gè)單詞。為了確保即使只有一個(gè)單詞,它也有最小寬度,應(yīng)該使用min-width。

          最小寬度為100px,這樣即使按鈕的內(nèi)容很短,比如Done,或者只有一個(gè)圖標(biāo),它仍然足夠大,可以被注意到。在使用阿拉伯語(yǔ)等多語(yǔ)言網(wǎng)站時(shí),這一點(diǎn)非常重要。 考慮以下來(lái)自Twitter的示例:

          在以前的情況下,按鈕上帶有單詞“??”,表示完成。 按鈕的寬度太小,因此在后面的案例中,我增加了它的最小寬度。

          min-width 和 padding

          在內(nèi)容較長(zhǎng)的情況下,min-width可以擴(kuò)展按鈕的寬度,而水平方向上的padding應(yīng)該被添加,以實(shí)現(xiàn)一個(gè)合適的外觀按鈕。

          Max Width

          在設(shè)置max-width值時(shí),它的好處在于防止width屬性使用的值超過(guò)max-width的指定值。max-width的默認(rèn)值是none。

          max-width的常見(jiàn)且簡(jiǎn)單的用例是將其與圖像一起使用。 考慮以下示例:

          圖像比它的父元素大。通過(guò)使用max-width: 100%,圖像的寬度不會(huì)超過(guò)其父圖像的寬度。如果圖像比父圖像小,則max-width: 100%不會(huì)對(duì)圖像產(chǎn)生實(shí)際影響,因?yàn)樗雀笀D像小。

          使用最小寬度和最大寬度

          當(dāng)min-width和max-width都用于一個(gè)元素時(shí),它們中的哪一個(gè)將覆蓋另一個(gè)?換句話說(shuō),哪個(gè)優(yōu)先級(jí)更高?

          html

          <div class="wrapper">
            <div class="sub"></div>
          </div>

          css

          .sub {
            width: 100px;
            min-width: 50%;
            max-width: 100%;
          }

          初始width值為100px,并在其上加上min-width和max-width值。 結(jié)果是元素寬度未超過(guò)其包含的塊/父元素的50%。

          height 屬性

          除了最小和最大寬度屬性外,我們還具有與高度相同的屬性。

          min-height

          設(shè)置min-height的值時(shí),其好處在于防止使用的height屬性值變得小于min-height的指定值。 請(qǐng)注意,最小高度的默認(rèn)值為auto,它解析為0。

          我們用一個(gè)簡(jiǎn)單的例子來(lái)演示一下。

          我們有一個(gè)帶有描述文本的部分。目標(biāo)是為section設(shè)置一個(gè)最小高度,這樣它就可以處理短或長(zhǎng)內(nèi)容??紤]下面的基本情況

          .sub {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            min-height: 100px;
            color: #fff;
            background: #3c78dB;
          }

          最小高度為100px,使用flexbox時(shí),內(nèi)容水平和垂直居中。 如果內(nèi)容更長(zhǎng),會(huì)發(fā)生什么? 例如一段?

          是的,你猜對(duì)了!section的高度將展開以包含新內(nèi)容。有了它,我們就可以構(gòu)建靈活的組件,并對(duì)其內(nèi)容做出響應(yīng)。

          事例源碼:https://codepen.io/shadeed/pen/cfb600cf30acdae9cf6f9cb5347a37cf

          max-height

          在設(shè)置max-height值時(shí),它的好處在于防止height屬性使用的值超過(guò)max-height的指定值。注意,max-height的默認(rèn)值是none。

          考慮下面的示例,其中我為內(nèi)容設(shè)置了max-height。 但是,因?yàn)樗笥谥付ǖ目臻g,所以會(huì)發(fā)生溢出。 因此,文本超出了其父邊界。

          最小和最大屬性的用例

          我們將介紹min-width,min-height,max-width和max-height的一些常見(jiàn)和不常見(jiàn)的用例。

          標(biāo)簽列表

          當(dāng)有一個(gè)標(biāo)簽列表時(shí),建議限制一個(gè)標(biāo)簽的最小寬度,這樣如果它的內(nèi)容很短,它的外觀就不會(huì)受到影響。

          通過(guò)具有這種靈活性,無(wú)論內(nèi)容有多短,標(biāo)簽都將看起來(lái)不錯(cuò)。 但是,如果內(nèi)容作者輸入了一個(gè)非常長(zhǎng)的標(biāo)簽名稱,而他使用的內(nèi)容管理系統(tǒng)沒(méi)有標(biāo)簽的最大字符長(zhǎng)度,將會(huì)發(fā)生什么情況呢? 我們也可以使用max-width。

          .c-tag {
            display: inline-block;
            min-width: 100px;
            max-width: 250px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            /*Other styles*/
          }

          通過(guò)使用max-width,標(biāo)簽寬度將被限制為特定值。 但是,這還不夠,標(biāo)簽名稱應(yīng)被截?cái)唷?/p>

          事例地址:https://codepen.io/shadeed/pen/320e42b7ad75c438a9e633417d737d16

          按鈕

          對(duì)于按鈕的最小值和最大值有不同的用例,因?yàn)榘粹o組件有多種變體??紤]下面的圖:

          請(qǐng)注意,按鈕的“Get”寬度太小。 如果不設(shè)置最小寬度,則由于任何原因而沒(méi)有文本時(shí),情況可能會(huì)變得更糟。 在這種情況下,設(shè)置最小寬度很重要。

          使用 flexbox 將最小寬度設(shè)置為零

          min-width的默認(rèn)值是auto,它被計(jì)算為0。當(dāng)一個(gè)元素是一個(gè)flex項(xiàng)時(shí),min-width的值不會(huì)計(jì)算為零。flex 項(xiàng)目的最小大小等于其內(nèi)容的大小。

          根據(jù)CSSWG:

          默認(rèn)情況下,flex項(xiàng)目不會(huì)縮小到它們的最小內(nèi)容大小(最長(zhǎng)單詞或固定大小元素的長(zhǎng)度)以下。要更改此設(shè)置,請(qǐng)?jiān)O(shè)置min-width或 min-height屬性。

          考慮下面的例子

          這個(gè)人的名字有一個(gè)很長(zhǎng)的單詞,這導(dǎo)致了溢出和水平滾動(dòng)。盡管如此,我還是在標(biāo)題中添加了下面的CSS來(lái)截?cái)嗨?/p>

          .c-person__name {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
          }

          由于title是flex項(xiàng)目,因此解決方案是重置min-width并將其強(qiáng)制為零。

          .c-person__name {
              /*Other styles*/
              min-width: 0;
          }

          下面是修復(fù)后的樣子

          根據(jù)CSSWG:

          在彈性項(xiàng)目的主軸上可見(jiàn)溢出的項(xiàng)目上,當(dāng)在彈性項(xiàng)目的主軸min-size屬性中指定時(shí),指定自動(dòng)最小尺寸。

          意味著,將overflow設(shè)置為visible值以外的值會(huì)導(dǎo)致min-width被計(jì)算為0,這解決了我們不設(shè)置min-width: 0的問(wèn)題。

          事例源碼:https://codepen.io/shadeed/pen/398ccffcd437a2fb042f5ce3bdd68c57

          使用 flexbox 將最小高度設(shè)置為零

          雖然與min-width相比,這是一個(gè)不太常見(jiàn)的問(wèn)題,但是它可能發(fā)生。 只是為了確認(rèn),問(wèn)題與不能少于其內(nèi)容的彈性項(xiàng)目有關(guān)。 結(jié)果min-height值被設(shè)置為與內(nèi)容一樣長(zhǎng)。

          考慮以下示例:

          用紅色表示的文本應(yīng)該在父文本中裁剪。因?yàn)槊姘逯黧w是一個(gè)flex項(xiàng)目,所以它的min-height與它的內(nèi)容相等。為了防止這種情況,我們應(yīng)該重新設(shè)置最小高度值??纯碒TML和CSS是怎么樣的。

          HTML

          <div class="c-panel">
            <h2 class="c-panel__title"><!-- Title --></h2>
            <div class="c-panel__body">
              <div class="c-panel__content"><!-- Content --></div>
            </div>
          </div>

          CSS

          .c-panel {
            display: flex;
            flex-direction: column;
            height: 180px;
          }
          
          .c-panel__body {
            min-height: 0;
          }
          
          .c-panel__content {
            overflow-y: scroll;
            height: 100%;
          }

          通過(guò)向面板主體添加min-height: 0,這將重置該屬性,并且現(xiàn)在應(yīng)該可以正常工作。

          事例源碼:https://codepen.io/shadeed/pen/dea75b84b1fcfd03e5c21173a40afc20?editors=0100

          混合最小寬度和最大寬度

          在某些情況下,我們有一個(gè)最小寬度的元素,但同時(shí),它沒(méi)有最大寬度。這可能會(huì)導(dǎo)致組件太寬,而我們并不想這樣做??紤]以下示例

          由于寬度是以像素為單位定義的,因此不能保證上面的方法適用于移動(dòng)視口。為了解決這個(gè)問(wèn)題,我們可以使用百分比來(lái)代替像素作為最小和最大屬性。考慮下面這個(gè)具有article主體的示例。

          我為圖像添加了以下CSS:

          img {
            min-width: 35%;
            max-width: 70%;
          }

          事例源碼:https://codepen.io/shadeed/pen/11f49fd1a35ad06ce241bee17c3d3124

          #### 頁(yè)面包裝器/容器

          最常用的`max-width`用例之一是頁(yè)面包裝器或容器。通過(guò)向頁(yè)面添加最大寬度,我們可以確保內(nèi)容對(duì)用戶來(lái)說(shuō)是可讀的、易于瀏覽的。

          下面是一個(gè)包裝器的例子,它是居中的,左右兩邊有水平的填充。

          .wrapper {
              max-width: 1170px;
              padding-left: 16px;
              padding-right: 16px;
              margin-left: auto;
              margin-right: auto;
          }

          最大寬度和ch單位

          ch 是一個(gè)相對(duì)于數(shù)字0的大小,1ch 就是數(shù)字 0 的寬度。如定義一個(gè)3ch的寬度,那么就只能裝下 3個(gè)0。

          <!-- HTML代碼 -->
          
          <div>0000</div>
          
          /* CSS代碼 */
          
          div {
            width: 3ch;
            background: powderblue;
          }

          在前面的wrapper元素示例中,我們可以利用ch單元,因?yàn)樗且粋€(gè)article 主體。

          .wrapper {
              max-width: 70ch;
              /* Other styles */
          }

          對(duì)高度未知的元素進(jìn)行動(dòng)畫處理

          在某些情況下,我們面臨著使手風(fēng)琴或移動(dòng)菜單具有意想不到的內(nèi)容高度的挑戰(zhàn)。在這種情況下,max-height可能是一個(gè)很好的解決方案。

          請(qǐng)考慮以下示例:

          單擊菜單按鈕后,菜單應(yīng)隨動(dòng)畫從上到下滑動(dòng)。 如果沒(méi)有固定的高度(不建議這樣做),除非使用JavaScript,否則這是不可能的。 但是,對(duì)于max-height,這是可能的。 想法是為高度添加一個(gè)較大的值,例如max-height:20rem,可能無(wú)法達(dá)到,然后我們可以使用動(dòng)畫從max-height: 0變換到max-height: 20rem。

          .c-nav {
              max-height: 0;
              overflow: hidden;
              transition: 0.3s linear;
          }
          
          .c-nav.is-active {
              max-height: 22rem;
          }

          點(diǎn)擊菜單按鈕可以看到動(dòng)畫的運(yùn)行。

          事例源碼:https://codepen.io/shadeed/pen/164c7ef67f5d4541bddb8bc12b2772da

          Hero 元素的最小高度

          一般來(lái)說(shuō),我不喜歡給元素添加固定的高度。我覺(jué)得這樣做,會(huì)破壞流式布局的結(jié)構(gòu)。但有些情況設(shè)置固定高度卻很有用。

          考慮下面的例子,在這里我們有一個(gè)設(shè)置了固定高度的hero部分。

          是,當(dāng)內(nèi)容較長(zhǎng)時(shí),它會(huì)溢出并離開hero包裝器,這可不太好。

          為了預(yù)先解決這個(gè)問(wèn)題,我們可以使用min-height來(lái)代替height。我們可以用這種方式先解決問(wèn)題,盡管這可能會(huì)導(dǎo)致頁(yè)面看起來(lái)很奇怪,但是我認(rèn)為應(yīng)該首先防止內(nèi)容管理系統(tǒng)(CMS)中發(fā)生這樣的事情。這樣,問(wèn)題就解決了,看起來(lái)也不錯(cuò)。

          內(nèi)容溢出的問(wèn)題不僅在于內(nèi)容是否大于固定的hero 高度。它可以發(fā)生在屏幕大小調(diào)整作為文本換行的結(jié)果。

          如果改用min-height,則上述情況根本不會(huì)發(fā)生。

          模態(tài)組件

          對(duì)于模態(tài)組件,它需要最小和最大寬度,以便可以適應(yīng)移動(dòng)設(shè)備到PC的屏幕上的適應(yīng)。

          思路1

          .c-modal__body {
              width: 600px;
              max-width: 100%;
          }

          思路2

          .c-modal__body {
              width: 100%;
              max-width: 600px;
          }

          對(duì)于我來(lái)說(shuō),我更喜歡第二個(gè)思路,因?yàn)槲抑恍枰xmax-width: 600px。modal是一個(gè)<div>元素,因此它已經(jīng)具有其父元素的100%寬度,對(duì)嗎?

          考慮下面為模態(tài)設(shè)計(jì)簡(jiǎn)化的測(cè)試案例。 請(qǐng)注意,如果可用視口空間不足,則寬度如何更改為其父級(jí)的100%。

          事例源碼:https://codepen.io/shadeed/pen/5dcb1c4c6773cc3a97a766c327c36443

          最小高度和粘性頁(yè)腳

          當(dāng)一個(gè)網(wǎng)站的內(nèi)容不夠長(zhǎng),它希望看到頁(yè)腳粘到底部。讓我們用一個(gè)可視化的例子來(lái)更好地展示這一點(diǎn)。

          請(qǐng)注意,頁(yè)腳未粘貼在瀏覽器窗口的末尾。 那是因?yàn)閮?nèi)容不足以達(dá)到瀏覽器窗口高度的長(zhǎng)度。 修復(fù)后,其外觀應(yīng)如下所示:

          首先,將body元素作為flexbox容器,然后將其最小高度設(shè)置為視口高度的100%。

          事例源碼:https://codepen.io/shadeed/pen/aeb14f2819b9cc4805275b88c2d55645?editors=1100

          最大寬度/高度和視口單位的流體比率

          為了使比例容器能夠根據(jù)視口大小進(jìn)行響應(yīng)縮放,引入了padding hack。 現(xiàn)在,我們可以通過(guò)組合CSS中的視口單位和最大寬度/高度來(lái)模仿相同的行為。

          我們有一個(gè)尺寸為644 * 1000像素的圖像。 為了使其流暢,我們需要以下內(nèi)容:

          • 縱橫比:高度/寬度
          • 容器的寬度:可以是固定數(shù)字,也可以是動(dòng)態(tài)數(shù)字(100%)
          • 設(shè)置height為視口寬度的100%乘以縱橫比
          • 設(shè)置max-heigh,該高度是容器的寬度乘以縱橫比
          • max-width設(shè)置為等于容器寬度

          人才們的 【三連】 就是小智不斷分享的最大動(dòng)力,如果本篇博客有任何錯(cuò)誤和建議,歡迎人才們留言,最后,謝謝大家的觀看。


          作者:Ahmad shaded 譯者:前端小智 來(lái)源:sitepoint 原文:https://www.impressivewebs.com/min-max-width-height-css


          主站蜘蛛池模板: 亚洲综合一区二区| 日本精品一区二区三区在线观看| 精品视频一区二区观看| 国产成人精品一区二区三区| 美女视频一区三区网站在线观看| 久久精品无码一区二区三区日韩 | 青娱乐国产官网极品一区| 少妇无码一区二区二三区| 一区二区三区免费看| 日韩av片无码一区二区不卡电影| 日本精品高清一区二区| 国产在线一区二区杨幂| 极品少妇一区二区三区四区| 中文字幕一区二区三区久久网站| 免费无码一区二区三区蜜桃| 一区二区手机视频| 国产福利电影一区二区三区,亚洲国模精品一区 | 久久精品国产一区| 久久免费视频一区| 精品人妻少妇一区二区三区在线| 国产精品一区二区香蕉| 成人精品一区二区电影| 国产视频一区二区| 天天爽夜夜爽人人爽一区二区| 国产成人精品视频一区| 一区二区免费国产在线观看| 亚洲AⅤ无码一区二区三区在线| 成人在线一区二区| 99精品高清视频一区二区| 国产一区二区三区精品视频| 成人午夜视频精品一区| 清纯唯美经典一区二区| 无码av免费一区二区三区试看| 亚洲成AV人片一区二区| 精品福利一区二区三区免费视频 | 国产不卡视频一区二区三区 | 国产一区二区免费在线| 亚洲一区二区三区在线播放| 久久影院亚洲一区| 亚洲综合一区二区精品久久| 国模视频一区二区|