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