整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
本教程的這一部分內(nèi)容是關(guān)于 JavaScript 語言本身的。
但是，我們需要一個(gè)工作環(huán)境來運(yùn)行我們的腳本，由于本教程是在線的，所以瀏覽器是一個(gè)不錯(cuò)的選擇。我們會(huì)盡可能少地使用瀏覽器特定的命令（比如 alert），所以如果你打算專注于另一個(gè)環(huán)境（比如 Node.js），你就不必多花時(shí)間來關(guān)心這些特定指令了。我們將在本教程的下一部分中專注于瀏覽器中的 JavaScript。
首先，讓我們看看如何將腳本添加到網(wǎng)頁上。對(duì)于服務(wù)器端環(huán)境（如 Node.js），你只需要使用諸如 "node my.js" 的命令行來執(zhí)行它。
“script” 標(biāo)簽
JavaScript 程序可以在 <script> 標(biāo)簽的幫助下插入到 HTML 文檔的任何地方。
比如：
<!DOCTYPE HTML>
<html>
<body>
<p>script 標(biāo)簽之前...</p>
<script>
alert('Hello, world!');
</script>
<p>...script 標(biāo)簽之后</p>
</body>
</html>
<script> 標(biāo)簽中包裹了 JavaScript 代碼，當(dāng)瀏覽器遇到 <script> 標(biāo)簽，代碼會(huì)自動(dòng)運(yùn)行。
現(xiàn)代的標(biāo)記
<script> 標(biāo)簽有一些現(xiàn)在很少用到的屬性，但是我們可以在老代碼中找到它們：
type 屬性：<script type=...>
language 屬性：<script language=...>
腳本前后的注釋：
<script type="text/javascript"><!-- ... //--></script>
外部腳本
如果你有大量的 JavaScript 代碼，我們可以將它放入一個(gè)單獨(dú)的文件。
腳本文件可以通過 src 屬性添加到 HTML 文件中。
<script src="/path/to/script.js"></script>
這里，/path/to/script.js 是腳本文件從站點(diǎn)根目錄開始的絕對(duì)路徑。當(dāng)然也可以提供當(dāng)前頁面的相對(duì)路徑。例如，src =“script.js” 表示當(dāng)前文件夾中的 “script.js” 文件。
我們也可以提供一個(gè)完整的 URL 地址，例如：
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
要附加多個(gè)腳本，請(qǐng)使用多個(gè)標(biāo)簽：
<script src="/js/script1.js"></script> <script src="/js/script2.js"></script> …
請(qǐng)注意：
一般來說，只有最簡單的腳本才嵌入到 HTML 中。更復(fù)雜的腳本存放在單獨(dú)的文件中。
使用獨(dú)立文件的好處是瀏覽器會(huì)下載它，然后將它保存到瀏覽器的緩存[1]中。
之后，其他頁面想要相同的腳本就會(huì)從緩存中獲取，而不是下載它。所以文件實(shí)際上只會(huì)下載一次。
這可以節(jié)省流量，并使得頁面（加載）更快。
提醒：如果設(shè)置了 src 屬性，script 標(biāo)簽內(nèi)容將會(huì)被忽略。
一個(gè)單獨(dú)的 <script> 標(biāo)簽不能同時(shí)有 src 屬性和內(nèi)部包裹的代碼。
這將不會(huì)工作：
<script src="file.js"> alert(1); // 此內(nèi)容會(huì)被忽略，因?yàn)樵O(shè)定了 src </script>
我們必須進(jìn)行選擇，要么使用外部的 <script src="…">，要么使用正常包裹代碼的 <script>。
為了讓上面的例子工作，我們可以將它分成兩個(gè) <script> 標(biāo)簽。
<script src="file.js"></script> <script> alert(1); </script>
總結(jié)
有關(guān)瀏覽器腳本以及它們和網(wǎng)頁的關(guān)系，還有很多可學(xué)的。但是請(qǐng)記住，教程的這部分主要是針對(duì) JavaScript 語言本身的，所以我們不該被瀏覽器特定的實(shí)現(xiàn)分散自己的注意力。我們將使用瀏覽器作為運(yùn)行 JavaScript 的一種方式，這種方式非常便于我們?cè)诰€閱讀，但這只是很多種方式中的一種。
作業(yè)題
1. 顯示一個(gè)提示語
重要程度：??????????
創(chuàng)建一個(gè)頁面，然后顯示一個(gè)消息 “I'm JavaScript!”。
在沙箱中或者在你的硬盤上做這件事都無所謂，只要確保它能運(yùn)行起來。
你可以先看一下 新窗口的演示結(jié)果[2]。
在微信公眾號(hào)「技術(shù)漫談」后臺(tái)回復(fù) 1-2-1 獲取本題答案。
2. 使用外部的腳本顯示一個(gè)提示語
重要程度：??????????
打開題目 1 的答案。將答案中腳本的內(nèi)容提取到一個(gè)外部的 alert.js 文件中，放置在相同的文件夾中。
打開頁面，確保它能夠工作。
你可以先看一下 新窗口的演示結(jié)果[3]。
在微信公眾號(hào)「技術(shù)漫談」后臺(tái)回復(fù) 1-2-1 獲取本題答案。
現(xiàn)代 JavaScript 教程：開源的現(xiàn)代 JavaScript 從入門到進(jìn)階的優(yōu)質(zhì)教程。React 官方文檔推薦，與 MDN 并列的 JavaScript 學(xué)習(xí)教程[4]。
在線免費(fèi)閱讀：https://zh.javascript.info/
參考資料
[1] 緩存: https://en.wikipedia.org/wiki/Web_cache
[2] 新窗口的演示結(jié)果: https://zh.js.cx/task/hello-alert/solution/
[3] 新窗口的演示結(jié)果: https://zh.js.cx/task/hello-alert/solution/
[4] React 官方文檔推薦，與 MDN 并列的 JavaScript 學(xué)習(xí)教程: https://zh-hans.reactjs.org/docs/getting-started.html#javascript-resources
關(guān)注微信公眾號(hào)「技術(shù)漫談」，訂閱更多精彩內(nèi)容。
網(wǎng)頁設(shè)計(jì)中，添加圖片并為其添加超鏈接是常見的需求。通過使用HTML，我們可以輕松實(shí)現(xiàn)這些功能。下面將詳細(xì)介紹如何實(shí)用地添加圖片，并為圖片添加超鏈接。
html代碼
首先，我們需要了解HTML中如何添加圖片。在HTML中，我們使用`<img>`標(biāo)簽來插入圖片。`<img>`標(biāo)簽有幾個(gè)重要的屬性，包括`src`、`alt`和`width`、`height`等。`src`屬性用于指定圖片的URL地址，`alt`屬性用于提供圖片無法加載時(shí)的替代文本，而`width`和`height`屬性則用于設(shè)置圖片的寬度和高度。
下面是一個(gè)簡單的示例，展示如何在HTML中添加圖片：
<img src="這里寫圖片地址，要帶http協(xié)議，比如：https://www.chaojilu.com" alt="看不到圖片，就顯示這個(gè)文字" width="500" height="300">在這個(gè)示例中，我們使用了`<img>`標(biāo)簽，并通過`src`屬性指定了圖片的URL地址。同時(shí)，我們還設(shè)置了`alt`屬性以提供替代文本，并通過`width`和`height`屬性設(shè)置了圖片的尺寸。
接下來，我們來看如何為圖片添加超鏈接。在HTML中，我們使用`<a>`標(biāo)簽來創(chuàng)建超鏈接。`<a>`標(biāo)簽的`href`屬性用于指定鏈接的目標(biāo)地址。為了將圖片包含在超鏈接中，我們可以將`<img>`標(biāo)簽放置在`<a>`標(biāo)簽內(nèi)部。
下面是一個(gè)示例，展示如何為圖片添加超鏈接：
<a href="https://www.chaojilu.com">
<img src="image.jpg" alt="看不到圖片，就顯示這個(gè)文字"width="這里寫寬度" height="高度">>
</a>在這個(gè)示例中，我們將`<img>`標(biāo)簽放置在`<a>`標(biāo)簽內(nèi)部，并通過`href`屬性指定了鏈接的目標(biāo)地址。當(dāng)用戶點(diǎn)擊圖片時(shí)，將會(huì)跳轉(zhuǎn)到指定的網(wǎng)址。同時(shí)，我們還通過`alt`屬性為圖片提供了替代文本，以便在圖片無法加載時(shí)為用戶提供提示。
除了基本的添加圖片和超鏈接功能外，我們還可以通過一些技巧來優(yōu)化圖片的顯示和加載效果。例如，我們可以使用CSS樣式來設(shè)置圖片的邊框、圓角等外觀屬性，提升頁面的美觀度。同時(shí)，我們還可以通過壓縮圖片文件大小、使用懶加載等技術(shù)來優(yōu)化圖片的加載速度，提高用戶體驗(yàn)。
需要注意的是，在添加圖片和超鏈接時(shí)，我們需要確保所使用的圖片資源是合法且可訪問的。避免使用未經(jīng)授權(quán)或侵權(quán)的圖片資源，以免引發(fā)法律問題。同時(shí)，我們還應(yīng)該關(guān)注圖片的版權(quán)和使用協(xié)議，確保在使用圖片時(shí)遵守相關(guān)規(guī)定。
總之，通過使用HTML的`<img>`和`<a>`標(biāo)簽，我們可以輕松地在網(wǎng)頁中添加圖片并為圖片添加超鏈接。通過合理設(shè)置屬性和優(yōu)化技巧，我們可以提升圖片的顯示效果和加載速度，為用戶提供更好的瀏覽體驗(yàn)。
各位鹿友有什么不懂可以在評(píng)論區(qū)留言，咱們一起探討學(xué)習(xí)。
頻、視頻的格式
開始學(xué)習(xí)之前，我們要下載些素材用來測試使用，地址如下：https://pan.baidu.com/s/1reRWno0ibYRcYXjw4MClqw
提取碼：td80
其中包括兩個(gè)視頻一個(gè)音頻和一個(gè)安裝程序。
學(xué)習(xí)如何在頁面中添加音頻、視頻之前應(yīng)該了解一點(diǎn)基礎(chǔ)知識(shí)。
我們應(yīng)該都有在互聯(lián)網(wǎng)上下載電影、視頻、音樂的經(jīng)歷，大家會(huì)注意到，有的視頻文件名的后綴是.avi，有的視頻是.mp4，還有.mov的，據(jù)不完全統(tǒng)計(jì)，常見的各種視頻格式有十幾種之多。
常見的音頻的格式比起視頻來會(huì)顯得少一些，一般是.wav和.mp3格式。
為什么存儲(chǔ)相同的內(nèi)容可以有這么多不同的格式呢？
格式產(chǎn)生的核心在于對(duì)音頻、視頻等多媒體文件進(jìn)行的不同編碼方式。
那什么是編碼呢？
簡單來說我們可以把"編碼"這個(gè)詞分成兩個(gè)部分，第一個(gè)是"編"，也就是"整理、組織"的意思，第二個(gè)是"碼"，也就是我們平時(shí)所說的"數(shù)碼"。
首先說"碼"，我們的計(jì)算機(jī)中的數(shù)據(jù)最終都是通過二進(jìn)制的數(shù)字（0和1）來存儲(chǔ)或計(jì)算的，這些0或1就是數(shù)碼。無論代碼、程序、圖片、音樂、視頻、文字等的存儲(chǔ)與計(jì)算都不例外。不管多么復(fù)雜或簡單的文件，在計(jì)算機(jī)看來，都是一大堆0和1。
一個(gè)0或1被稱為1比特，圖片或視頻中的一個(gè)黑白像素通常是8比特（八位），如果一張1080乘720個(gè)像素的圖片所占內(nèi)存的大小就是1080*720*8=6220800字節(jié)，約等于0,74mb。如果一個(gè)視頻每秒中有25幀，也就是一秒鐘在我們眼前閃過25張圖片（視頻播放實(shí)際上就是在我們眼前快速的更替圖片，這些圖片在大腦中會(huì)被自動(dòng)連成動(dòng)作，這也是小的時(shí)候在課本的角上畫好一套走路的小人的不同動(dòng)作后，快速翻動(dòng)書頁，畫面中的小人會(huì)走路的原因，大家可以自行百度"視覺暫留原理"）。
一秒鐘25張1080乘720的圖片的視頻，一秒鐘就會(huì)占0.74*25=18.5mb的內(nèi)存。如果是一分鐘呢，18.5*60=1110mb約等于1.08gb。這樣的數(shù)據(jù)量是不是很嚇人。
但事實(shí)上我們下載的1080*720的一小時(shí)三十分鐘左右的視頻的體積往往也沒有超過1gb，這又是為什么呢？
這就是"編"的功勞！對(duì)數(shù)碼進(jìn)行整理和組織的主要目的是壓縮體積，壓縮數(shù)據(jù)體積既能節(jié)省磁盤又能方便傳播與攜帶，是信息技術(shù)的關(guān)鍵技術(shù)之一，壓縮的方法一般有兩類，一類叫做無損壓縮，也就是通過對(duì)這一大堆數(shù)碼進(jìn)行一個(gè)特殊的組合使其占有更小的空間，一類叫做有損壓縮，是在無損壓縮的基礎(chǔ)上剔除掉人眼睛識(shí)別不到的冗余信息。具體的壓縮過程涉及到很多數(shù)學(xué)知識(shí)，這里大家簡單了解一下即可。
壓縮后的視頻或音頻文件最終通過播放器對(duì)該文件的壓縮算法進(jìn)行逆向運(yùn)算后，還原成計(jì)算機(jī)可以解讀的畫面和聲音再呈現(xiàn)給觀眾，這個(gè)過程叫做"解碼"。
通過"編"的方式壓縮文件體積，通過"解"的方式再還原出文件內(nèi)容成了處理大規(guī)模數(shù)據(jù)的通用手法。
不同的編碼和解碼方式催生出不同的文件格式，這種情況下，瀏覽器在播放視頻的時(shí)候就要有應(yīng)對(duì)不同格式的不同解碼方式，在15年以前，瀏覽器為了能夠播放不同格式的視頻，就要調(diào)用電腦中不同的播放器，這個(gè)過程的寫法非常麻煩。隨著技術(shù)不斷地整合，時(shí)至今日，在頁面中播放視頻不需要這么復(fù)雜的寫法了，但是因?yàn)槊總€(gè)瀏覽器都不是包打一切，因此，雖然不用指定播放器，但是也要預(yù)設(shè)不同格式的視頻來應(yīng)對(duì)不同的瀏覽器。
因此，我們?cè)谶@一部分的學(xué)習(xí)中除了講解如何向頁面添加不同格式的音視頻外還會(huì)告訴大家如何為音視頻轉(zhuǎn)換格式。
為頁面添加音頻、視頻
添加音頻使用<audio></audio>標(biāo)簽，這個(gè)標(biāo)簽被所有瀏覽器支持，是html5推薦的音頻導(dǎo)入標(biāo)簽，但是遺憾的是在html4標(biāo)準(zhǔn)中是不被支持的或者說是非法的。
這里給大家簡要介紹一下html5和html4的區(qū)別。
簡單來說呢，一個(gè)html文件的第一條語句是<!DOCTYPE HTML>，它就是HTML5標(biāo)準(zhǔn)的文件。如果是html4，它的第一條聲明語句有三種寫法，像這樣
一：<!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更簡單，功能更強(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>頁面效果如下：
其中controls屬性就是用來顯示播放控制界面的，就是這個(gè)：（偷懶的話可以寫成"controls"就ok，不必加"="以及后面的內(nèi)容了。）
如果以后您使用自己編寫的控制界面，就可以不添加這個(gè)屬性。
刪掉這個(gè)屬性后就是這樣：這樣為自定義的播放控制界面留出了位置。
<audio></audio>標(biāo)簽夾著<source>標(biāo)簽，一個(gè)<audio></audio>標(biāo)簽中可以添加多個(gè)<source>用以支持不同的格式要求。示例代碼如下：（這段代碼來自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屬性是告訴瀏覽器音樂文件的類型。
不同格式的文件的生成需要我們自己去做，這就涉及到如何給一個(gè)音頻文件進(jìn)行格式轉(zhuǎn)化的問題。這個(gè)問題我們明天再說，今天先學(xué)習(xí)為頁面添加音頻和視頻。
下面我們來看一下視頻的導(dǎo)入方法，示例代碼如下：
<video controls>
<source src="video/阿塔麗.mp4" type="video/mp4" />
</video>頁面效果如下:
我們可以通過設(shè)置height和width屬性來控制視頻的面積。實(shí)例代碼如下：
<video controls width="850" height="500" >
<source src="video/阿塔麗.mp4" type="video/mp4" />
</video>頁面效果如下：
視頻畫面變小了，和視頻并排的是我們之前添加的音頻文件，由此可知，這兩個(gè)元素都是內(nèi)聯(lián)元素。
今天的內(nèi)容結(jié)束了，明天我們繼續(xù)學(xué)習(xí)格式轉(zhuǎn)換和為不同瀏覽器預(yù)設(shè)不同音視頻格式的方法。
如果您有任何疑問請(qǐng)給我留言，如有問題或錯(cuò)誤請(qǐng)予以斧正！
HTML序章（學(xué)習(xí)目的、對(duì)象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
第一個(gè)HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作
為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
