淺談HTML與javascript的入門


摘要:眾所周知,html與javascript是前端開發中的兩個極為重要的工具,猶其是javascript。對於搞前端的人來說,能否把js玩得 "6",關系到能否真正掌握前端技術的決定性因素。然而,不管怎樣,如果我們想學一種新的東西,肯定是都要經過一個從不會到了解,從入門到精通的過程。本文以html和js的一些基礎知識為例,簡要地探討一下,如何快速入門這兩個編程語言。

一 HTML和javascript簡介

      1.1 HTML

          HTML是超文本標記語言(Hyper TextMarkup Language),是用來對靜態頁面布局的工具。我們知道,一個網頁通常由三部分組成,即結構、樣式、行為,而html其實就是決定一個網頁結構的標記語言,樣式就是所謂的CSS(Cascading Style Sheets)層疊樣式表,行為就是javascript所控制的網頁的特效。至於我為什么沒有單獨講CSS,主要是因為,在實際應用中,CSS往往離不開mtml中的各種標簽,也就是說兩者的使用是一起出現的,就比如說標簽的形成的布局相當於一個人,而CSS就相當於這個人身上所披的一件美麗的外衣。如果沒有CSS,一個網頁的視覺效果大家可想而知,這就相當於一個人身上什么都沒有穿,連內褲也不例外,也就是傳說中的”裸體“偷笑。像這種沒有樣式的網頁相信大家都會覺得很蛋疼的。所以后面內容我是將兩者結合起來講解的。

       1.2 javascript

             javascript是前端開發中所用的一門腳本語言,但是它又和java沒有什么聯系。對於 js它只是運行於網頁中的一個腳本,而JAVA,它是后台開發所要用到的一門編程語言,是運行於JAVA虛擬機中的,純面向對象的強類型語言,當然我這里所討論的js其實是一種弱類型語言,所謂的弱類型簡單地說就是只要用一個類型即var,就能聲明所有變量,包括數字類型(number),字符串類型(string)、布爾類型(boolean)、未定義類型(undefined)、空類型(null);而這五種類型就是js中的基本數據類型,另外還有復合數據類型,其包括:函數、對象、數組。對於所謂的強類型語言,我這里也簡單說一下,強類型就是變量種類的聲明都有嚴格的限制,如整形應聲明為int 、浮點float或double、字符形為char等等,對於JAVA,其中的類型檢查機制是非常嚴格的,比C/C++還要嚴,有興趣的讀者可以了解一些這種強類型編程語言,這里就不多介紹了。

二   HTML和javascript快速入門方法

        對於要學一門新的編程語言的人來說,我認為要把這門語言學好的前提條件是首先要准備好一個或多個"編譯器",從這兩個語言來說可能多數人會選擇使用dreamweaver和HBuilder之類的工具,但我認為作為初學的人來說最好使用EditPlus4.0這款工具的主要特點是我們寫代碼的時候是沒有帶任何提示的,這對提高我們寫代碼的功底是非常有利的,下圖就是這款工具的一個截圖。下面我分別來談一下, HTML和javascript的入門方法。

         2.1 HTML入門

          這門語言是對標簽樣式操作的一門語言,控制着整個網頁的布局和樣式。因此對標簽樣式操作的熟練程度是決定能否掌握這門語言的因素。所以我們在剛剛學這門語言時,一定要對相關的標簽有所熟悉。而總的來說,標簽可以分為三種類型:行內標簽、塊級標簽、行內塊標簽。利用這三種標簽,我們就可以控制整個網頁的結構,當然這中間還離不開CSS樣式。這三種標簽的含義是什么?

          行內標簽:一行里可以有多個這樣的標簽而且對寬度(width)和高度(height)值的設置將不會生效,除非對這此標簽添加display:block;或display:inline-block;或float:left;或float:right;屬性之一,這些標簽有:<span></span>、<a></a>、<strong></strong>、<em></em>、<label></label>、<input></input>、<select></select>也就是說在這些標簽之間它不會產生換行,例如以<span></span>標簽為例,在布局中有這樣一個內容:<span>111</span><span>222</span>,通過"目測法"我們就很快知道”111“和”222“之間是不會換行的,即在網頁中是這樣顯示的:”111222“,這樣並沒有什么換行,因為它們是在行內標簽中的,於其它這樣的標簽我們也可以同理得出。

          塊級標簽:這樣的標簽當我們對寬度(width)和高度(height)值進行設置時,將會生效。這種標簽也有一個特點,那就是很”霸道“,一個標簽它要獨占一行,它"不喜歡"和別的標簽共享它那一行的空間,除非我們人為的去采取”強制“措施,叫它們"不願意"這樣做也不得不這樣做。這就像當年我讀初中時,學校動不動采取強制措施禁止中學生談戀愛一樣。而我們這里的"強制措施"就是給這些"不聽話"的標簽添加一個float:left;或float:right;屬性,這樣它們就可以在同一行中進行顯示了。這種常見的標簽有:<div></div>、<form></form>、<table></table>、<p></p>、<pre></pre>、<h1--h6></h1--h6>、 <dl></dl>、<ol><li></li></ol>、<ul><li></li></ul>。以<p></p>標簽為例,在布局中有這樣一個內容<p>111</p><p>222</p>,同樣是通過"目測法"我們便很快得出在網頁中顯示的內容將會是這樣:111

                                                                                                                                                                       222

"111"之間"222"產生換行了。

         另外還有比較特殊的標簽就是行內塊標簽了。這類標簽的話它們可以顯示在同一行,並且我們可以直接對它們的寬度(width)和高度(height)值進行設置。比較典型和常用的有:<img />標簽。圖像標簽,也就是在網頁中插入圖像用的。既然說到這個標簽,我要多說幾句。就是說,這個標簽它是由四要素組成的即:src、alt 、width 、height;src就是要加載的圖像的路徑通常是相對路徑;第二個重要屬性就是alt屬性;這個屬性是很重要的。我們知道當我們在搜索引擎輸入幾個關鍵字(以"美女圖片"為例)的時候點擊搜索按鈕我們可以看到會跳出很多美女圖片,當然這時我們要清楚這樣一個情況,就是這一堆美女圖片(如下圖)但這並不是百度自己請很多模特去拍照然后再把這些照片弄進去的,這其實都是通過一個叫"百度蜘蛛"的東西從第三方網站中將這些圖片抓取過來的。我們可以占擊任意一張圖片進去,可以看到第三方的網站的地址。要知道的是"百度蜘蛛"抓取的圖片是以alt這個屬性值來決定的,也就是說,"百度蜘蛛"能否抓取到你網頁中的這個圖片取決於你對這個alt屬性值的設置。講到這里,請允許我再來幾句廢話,就是搞IT這個東西有時候確實挺好的,因為我們可以光明正大地看美女圖片了,不用偷偷摸摸地看,如有人說那家伙一天到晚都在看美女圖片,到底是怎么回事。現在我們終於有理由了,我們可以說我們這是在就地取素材的。我們知道,對於一個互聯網產品,流量和客戶量就是其生命,如果沒有用戶量,那么你的產品做得再好,再牛”B“,也沒用。因此在如此大的因特網中想讓別人搜到並了解你的產品,其中的一個方法就是把圖片的alt屬性給設置好。最后一個重要的重要屬性是寬度(width)和高度(height)值,值得一提的是,在我們使用<img />標簽時,最好這兩個值進行設置一下,因為如果不設置的話,在瀏覽器的內核有這樣一個機制,它會對你的圖片寬度和高度值進行檢查,如果你沒有設置圖片寬高值,瀏覽器內核會為你的圖片計算一次寬高值,這在很大程度上延長了網頁的加載時間,如果你對其進行了設置,瀏覽器內核就不會去計算了,這也就省去了計算時間,加快了網頁的加載速度。




        基本標簽差不多就是以上這些,還有一點需要我們注意的是,在寫相關代碼時,命名要規范,要見名知義,你不要讓別人猜,猜,我讓你猜你願不願意?!!試想一下,如果有這樣一堆代碼一個注釋也沒有寫,命名也不規范,我想有的人看了,肯定是想死的心都有了,恨不得把那個寫代碼的人拉過來狠狠地揍一頓,所以我們不能這么做,這么做不是"同流合污"嗎???所以我們不能讓后台開發人員的那個腰部以下兩腿中間的那個玩意感到很痛(簡稱蛋疼),要做到這一點,我們只有規范自己的前端代碼。還有就是我認為前端開發的最高境界是模塊化、區塊化、插件化,學了之后我們一定要會寫一些自定義的插件。

2.2 javascript

        想要學javascript標簽這塊內容一定要能拿得下,在學這個腳本語言之前,我們肯定首先要有一個“編譯器”,其實這個與html所用到的是一樣的,也就是說js代碼其實就是嵌套在html代碼當中,只不過js代碼需要套在<script type="text/javascript"></script>標簽中才能運行。如果你之前學習過一些編程語言,我個人認為想要入門js並不是非常困難。因為各編程語言的思維是相似的,更何況js為弱類型語言,可能對於某些有編程基礎的人來說就更容易入門了。下面是js代碼應用的一個例子。代碼后的圖片為效果圖(其實就是一個下拉菜單的功能)。

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}

.search {
width: 760px;
height: 70px;
margin: 0 auto;
}

.logo {
float: left;
width: 188px;
height: 70px;
margin-right: 44px;
}

.logo img {
width: 100%;
height: 100%;
}
/*菜單樣式開始*/
.menu {
float: left;
width: 60px;
height: 40px;

margin-top: 11px;
border: 2px solid dodgerblue;
border-right: none;
}
.menu #hasmenu{
width: 60px;
height: 40px;
line-height: 40px;
padding-left: 10px;
color: grey;

}
.menu .up{background: url(img/up.png) no-repeat 46px center;}
.menu .down{background: url(img/down.png) no-repeat 46px center;}
.menu .submenu {
width: 60px;
height: 223px;
margin-left: -11px;
border:1px solid dodgerblue;
border-top: none;
display: none;
background: #FFFFFF;
}
.menu .submenu li{
width: 60px;
height: 25px;
line-height: 25px;
text-align: center;
color: grey;
}
                         /*菜單樣式結束*/
.input-text {width: 200px;height: 40px;margin-top: 11px;border: 2px solid dodgerblue;border-left: none;}.btn {width: 120px;height: 40px;border: 0;background: dodgerblue;color: #fff}</style><script type="text/javascript">window.onload = function() {var oHasMenu = document.getElementById('hasmenu');//通過id值獲取菜單項的元素或節點var oSubMenu = document.getElementById('submenu');//通過id值獲取整個子菜單項的元素或節點oHasMenu.onmouseover = function() {//鼠標經過菜單項時子菜單顯示同時顯示向上方向箭oHasMenu.className='up';oSubMenu.style.display = 'block';}oHasMenu.onmouseout = function() {//鼠標移出菜單項時子菜單隱藏同時顯示向下方向箭oHasMenu.className='down';oSubMenu.style.display = 'none';}}</script></head><body><div class="wrap"><--整體的容器開始--><div class="head"><--頭部開始--><div class="search"><--搜索框開始--><p class="logo"><img src="img/logo.png" /></p><ul class="menu"><li class="down" id="hasmenu">網頁<ul class="submenu" id="submenu"><li>網頁</li><li>圖片</li><li>視頻</li><li>音樂</li><li>地圖</li><li>問問</li><li>百科</li><li>新聞</li><li>購物</li></ul></li></ul><input type="text" class="input-text" /><input type="button" class="btn" value="搜狗搜索" /></div><--搜索框結束--></div><--頭部結束--></div><--整體的容器結束--></body></html>


三  結語

      以上的內容只是介紹一些關於html和js的很基本的知識,當然這是入門時必須要知道的。總之,要熟練掌握這兩門語言,最終還是要多去練習,多敲代碼,多去思考。對於html一定要多找一些網頁模仿其布局,對js一定要多考慮幾個為什么,因為這門語言還是需要一些邏輯思維的。最后祝看到這篇文章的讀者能真正掌握html和js。



注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com