大二网页制作实习总结
整體流程
目標確立
第一天討論確定下要做的內容，打算制作傳統節日相關的。
因為需要分工合作，使用的工具也都不同，所以不能使用腳手架和webpack來工程化開發。
搭建的目錄結構如下：
每個文件夾內留出一個index.html與其他模塊進行鏈接，我負責制作中秋模塊。
制作
之后的幾天可以直接開寫了，我用了vue的一些基礎，這樣寫起來方便，也可以用element-ui，加快速度
比如這個輪播圖，手寫實在是麻煩
優化
全部完成之后，頁面的數據分散在各個頁面中，因為js沒有采用模塊化，所以可以把數據都集中在一個文件中統一管理（我也不清楚這樣好不好，反正是這么干了）
制作過程
整體結構
首先肯定要制作整體結構
將結構復制粘貼到各個頁面（這里可以優化使用路由，重復的內容實在太多了）
這樣剩下的區域放一小點內容就可以了，老師要求寫10頁，我也不想花太多的時間，只能縮減每個頁面的內容了。
素材
素材都是現找的
- 圖片直接復制在線地址
- 音樂去網易云下載
- 視頻去B站下載然后轉碼。
B站的視頻下載要用到edge瀏覽器的插件，一搜就有。
下載完之后是flv格式，需要轉為mp4格式
在線視頻編輯器
這個網頁可以處理很多日常的剪輯需要
組件庫
組件庫使用了element-ui，但這個組件庫整體風格跟我想要的不符，很多零碎的部分都來自于bilibili 的一位up主艾恩小灰灰
bilibili艾恩小灰灰的個人首頁
艾恩小灰灰的gitee地址
css學藝不精，也沒什么美感，實在做不出這么漂亮的效果
新知識
視頻和音頻
之前沒有用過這些東西，也不知道video和audio標簽應該怎么用。在這里總結一下。
瀏覽器新增加的video和audio標簽，可以在不使用flash的情況下播放媒體文件，audio（音頻）和video（視頻）都屬于媒體文件。
標簽創建
//簡單的寫法 <audio src="test.mp3"></audio> <video src="test.mov" width=300 height=300></video>因為瀏覽器對不同格式的媒體文件支持程度不同，有更保險的寫法
<video width="320" height="240" controls="controls"><source src="movie.mp4" type="video/mp4" /><source src="movie.ogg" type="video/ogg" /><source src="movie.webm" type="video/webm" /> Your browser does not support the video tag. </video><audio controls="controls"><source src="song.mp3" type="audio/mp3" /><source src="song.ogg" type="audio/ogg" /> Your browser does not support this audio format. </audio>也可以通過js來創建標簽
new Audio(); new Video();媒體控制
可以使用js來修改以下屬性控制媒體
| src | 媒體資源的路徑 |
| play() | 播放媒體資源 |
| pause() | 暫停媒體資源 |
| currentTime | 指定播放器應該跳過播放的時間，單位秒，取值區間為initialTime和duration之間 |
| volume | 設置音量，0~1 |
| muted | 為true進入靜音模式 |
| playbackRate | 指定媒體播放速度，0~1表示慢放，1正常，大于1快進，為負表示回退 |
| controls | 為true時表示顯示播放控件 |
| loop | 為true時表示循環播放 |
| proload | 指定用戶在開始播放媒體之前，是否或者多少媒體內容需要預加載：其值有以下幾種：1、none：不需要預加載2、metadata：加載諸如時長、比特率、幀大小這樣的元數據，而非媒體數據3、auto：預加載瀏覽器認為適量的媒體內容（默認值） |
| autoplay | 為true時自動播放媒體，此屬性為true相當于高度瀏覽器需要預加載媒體內容 |
在標簽上添加controls屬性可以添加默認的音頻控件，如果不滿意可以通過上面的屬性和下面的狀態自定義控件。
| paused | 如果是暫停狀態，返回true |
| seeking | 如果播放器正跳到一個新的播放點，返回true |
| ended | 播放完畢并且停下來了返回true |
| duration | 媒體時長，單位秒，如果在元數據未加載之前查詢此屬性，返回NaN |
| initialTime | 已經緩存的數據的最早時間以及能夠回退到的最早時間 |
| played | 返回已經播放的時間段 |
| buffered | 返回當前已經緩沖的時間段 |
| seekable | 返回當前播放器需要跳到的時間段 |
以上涉及到時間段的字段返回的都是TimeRanges對象，包含length屬性和start()/end()方法，length指當前的一個時間段，start()和end()指當前時間段的起始時間點和結束時間點
媒體事件
| loadstart | 當媒體元素開始請求媒體資源的時候觸發 |
| progress | 正在通過網絡加載媒體資源的時候觸發，此事件一般每秒觸發2-8次 |
| loadedmetadata | 元數據加載完畢時觸發 |
| loadeddata | 當前播放位置的媒體內容首次加載完畢 |
| canplay | 已經加載一些媒體內容，可以開始播放，但需要緩沖更多數據，此時readyState為HAVE_CURRENT_DATA |
| canplaythrough | 所有媒體內容已加載完畢，可以流暢播放 |
| suspend | 已經緩沖大量數據，可以暫停下載，此時NetworkState為NETWORK_IDLE |
| stalled | 嘗試加載數據，但無法獲取到數據，此時NetworkState為NETWORK_LOADING |
| play | 調用play()方法或設置相應的autoplay屬性為true時觸發，如果已經加載了足夠多的緩存，緊接著會觸發palying事件，否則觸發waiting事件 |
| waiting | 由于未緩存足夠的數據，導致播放未能開始或者播放停止 |
| playing | 已經開始播放媒體文件 |
| timeupdate | currentTime屬性發生改變時觸發，此事件每秒會觸發4-60次 |
| pause | 調用pause()方法時觸發 |
| seeking | 通過腳本或用戶通過播放控件將當前播放時間調至一個還未緩沖的時間點，導致在內容沒有加載完時，停止播放。此時seeking屬性值為true |
| seeked | seeking值又變為false |
| ended | 播放完畢時，播放停止時觸發 |
| durationchange | duration屬性發生變化時觸發 |
| volumechange | 聲音發生變化時觸發 |
| ratechange | playbackRate或defaultPlaybakcRate發生改變時觸發 |
| abort | 用戶要求停止加載媒體內容時觸發,此時error.code為MEDIA_ERR_ABORTED |
| error | 由于發生網絡錯誤或者其它錯誤阻止媒體內容的加載時觸發，此時error.code不會是MEDIA_ERR_ABORTED |
| emptied | 發生了錯誤或者中止，導致networkState屬性值又變回MEDIA_ERR_ABORTED |
第三方
不知道有沒有更好的替代品
音頻使用雅虎播放器
雅虎媒體播放器為您的用戶提供的是一個小型的播放按鈕，而不是完整的播放器。不過，當您點擊該按鈕，會彈出完整的播放器。
請注意，這個播放器始終停靠在窗框底部。只需點擊它，就可將其滑出。
視頻使用優酷播放器
如果您希望在網頁中播放視頻，那么您可以把視頻上傳到優酷等視頻網站，然后在您的網頁中插入 HTML 代碼即可播放視頻：
之后有時間自己定義一個視頻、音頻的播放器。
排他算法
雖然vue有別的寫法，但我覺得還是學習一下的好，js的基礎真的太薄弱了。
排他算法的思路就是先將所有元素去除，然后為當前元素添加。
可以封裝成函數
function removeOtherClass (selector, className){let items = document.querySelectorAll(selector);items.forEach(item => {item.addEventListener('click',setActive);})function setActive(){// 遍歷所有.item元素，移出active樣式items.forEach((item)=>{item.classList.remove(className);})// 為當前選中項添加active樣式this.classList.add(selector);} }一些css樣式
css真的有太多沒見過的屬性了，艾恩小灰灰讓我大開眼界。
其實并沒有太多新的css屬性，主要原因在于某些css的組合做出了漂亮的效果。
font-awesome
雖然有阿里的icon-font，但多學一個總是不虧的。
這也是一個字體圖標庫。
很詳細很基礎的教程，與阿里的icon-font差別不大
font-awesome基礎用法
總結
以上是生活随笔為你收集整理的大二网页制作实习总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 哈工大软件构造lab1
- 下一篇： 用ajax实现dropdownlist多