需要準(zhǔn)備的材料分別有：電腦、瀏覽器、html編輯器。
1、首先，打開html編輯器，新建html文件，例如：index.html，輸入問(wèn)題基礎(chǔ)代碼。
2、在index.html中的<script>標(biāo)簽中，輸入js代碼：$('a').hover(function(){$('img').css('display','block');})3、瀏覽器運(yùn)行index.html頁(yè)面，此時(shí)鼠標(biāo)移動(dòng)到超鏈接上，下面的圖片自動(dòng)顯示了出來(lái)。
相信正在學(xué)習(xí)Web前端知識(shí)的小伙伴們都知道，學(xué)習(xí)Web前端開發(fā)基礎(chǔ)技術(shù)需要掌握：HTML、CSS、JavaScript，那么這三個(gè)都是分別可以創(chuàng)建什么有趣的東西呢？
一、HTML是網(wǎng)頁(yè)內(nèi)容的載體內(nèi)容就是網(wǎng)頁(yè)制作者放在頁(yè)面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
二、CSS樣式是表現(xiàn)就像網(wǎng)頁(yè)的外衣，比如：標(biāo)題字體、顏色變化、為標(biāo)題加入背景圖片、邊框等。
所有這些用來(lái)改變內(nèi)容外觀的東西稱之為表現(xiàn)。
三、JavaScript是用來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)上的特效效果比如：鼠標(biāo)滑過(guò)彈出下拉菜單、鼠標(biāo)滑過(guò)表格的背景顏色改變、焦點(diǎn)新聞的輪換。
可以理解為：有動(dòng)畫的、有交互的一般都用JavaScript來(lái)實(shí)現(xiàn)。
HTML之代碼注釋：
代碼注釋是幫助程序員標(biāo)注代碼的作用，過(guò)一段時(shí)間后再看你所編寫的代碼，就能很快想起這段代碼的作用。
代碼注釋不僅方便程序員自己回憶起以前代碼的用途，還可以幫助其他程序員很快的讀懂你的程序的功能，方便多人合作開發(fā)網(wǎng)頁(yè)代碼。
HTML之語(yǔ)義化：
語(yǔ)義化其實(shí)就是明白每個(gè)標(biāo)簽的用途，它能夠讓你的網(wǎng)頁(yè)更好的被搜索引擎理解。
它的好處可以總結(jié)為兩點(diǎn)：
(1)更容易被搜索引擎收錄；
(2)更容易讓屏幕閱讀器讀出網(wǎng)頁(yè)內(nèi)容；
HTML之em、strong和span的區(qū)別：
(1)和標(biāo)簽是為了強(qiáng)調(diào)一段話中的關(guān)鍵字時(shí)使用，他們的語(yǔ)義是強(qiáng)調(diào)；
(2)標(biāo)簽是沒有語(yǔ)義的，它的作用就是為了設(shè)置單獨(dú)的樣式用的；
HTML之summary,caption：
作用是為table添加標(biāo)題和摘要
摘要的內(nèi)容不會(huì)在瀏覽器中顯示出來(lái)，它的作用是增加表格的可讀性(語(yǔ)義化)，使搜索引擎更好的讀懂表格內(nèi)容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內(nèi)容。
代碼注釋：
在CSS中的注釋語(yǔ)句：用/*注釋語(yǔ)句*/來(lái)標(biāo)明
在Html中使用來(lái)標(biāo)明
HTML選擇器的問(wèn)題：
后代選擇器與子選擇器的區(qū)別
子選擇器(child selector)僅是指它的直接后代，或者你可以理解為作用于子元素的第一代后代。而后代選擇器是作用于所有子后代元素。后代選擇器通過(guò)空格來(lái)進(jìn)行選擇，而子選擇器是通過(guò)“>”進(jìn)行選擇。
總結(jié)：>作用于元素的第一代后代，空格作用于元素的所有后代。
以上就是我總結(jié)的HTML、CSS、JavaScript這三個(gè)分別能實(shí)現(xiàn)的功能，希望能幫到大家！
1、標(biāo)題標(biāo)簽： h1~h6 ctrl+1~6
2、段落標(biāo)簽： p ctrl+shift+p
3、換行標(biāo)簽： br shift+回車
4、水平線： hr
5、加粗標(biāo)簽： strong ctrl+b
6、傾斜標(biāo)簽： em ctrl+i
7、空格標(biāo)簽：
8、圖片標(biāo)簽：<img src=’圖片路徑’ alt=’圖片加載錯(cuò)誤提示文字’ title=’鼠標(biāo)懸停文字’ width=’寬度’ height=’高度’ />
9、超鏈接：<a href=’鏈接路徑’ traget=’_blank’>文本/圖片</a>
10、錨鏈接：
(1) 定義錨：給標(biāo)簽加id屬性，id=”top”
(2) 跳轉(zhuǎn)到錨：<a href=”#top”>top</a>
11、行級(jí)標(biāo)簽
1.Strong
2.Em
3.A
4.Img
12、塊級(jí)標(biāo)簽
1.標(biāo)題標(biāo)簽
2.段落標(biāo)簽
Display：inline-block設(shè)置元素具有行級(jí)標(biāo)簽和塊級(jí)標(biāo)簽的屬性
.da dl dd p:nth-of-type(1)：當(dāng)dd下面的段落p有好幾個(gè)的時(shí)候，你有只想給第一個(gè)段落p加樣式的時(shí)候用到這個(gè)！！！
Float：浮動(dòng)
Z-index：層次 z-index：1比z-index：2 低一層
設(shè)置div半透明的代碼：opacity:0.7；
設(shè)置div溢出隱藏的代碼：overflow:hidden;
設(shè)置css的動(dòng)畫效果：transition: all 0.5s linear
設(shè)置css時(shí)圖片在div中同比例放大或者同比例縮小：transform: scale(1.1)