專(zhuān)注Java教育14年
全國(guó)咨詢(xún)/投訴熱線(xiàn)：400-8080-105
更新時(shí)間：2021-08-30 10:40:06 來(lái)源：動(dòng)力節(jié)點(diǎn) 瀏覽1325次
1.HTML
HTML是超文本標(biāo)記語(yǔ)言(Hyper TextMarkup Language)，是用來(lái)對(duì)靜態(tài)頁(yè)面布局的工具。我們知道，一個(gè)網(wǎng)頁(yè)通常由三部分組成，即結(jié)構(gòu)、樣式、行為，而html其實(shí)就是決定一個(gè)網(wǎng)頁(yè)結(jié)構(gòu)的標(biāo)記語(yǔ)言，樣式就是所謂的CSS(Cascading Style Sheets)層疊樣式表，行為就是javascript所控制的網(wǎng)頁(yè)的特效。至于我為什么沒(méi)有單獨(dú)講CSS，主要是因?yàn)?，在?shí)際應(yīng)用中，CSS往往離不開(kāi)Html中的各種標(biāo)簽，也就是說(shuō)兩者的使用是一起出現(xiàn)的，就比如說(shuō)標(biāo)簽的形成的布局相當(dāng)于一個(gè)人，而CSS就相當(dāng)于這個(gè)人身上所披的一件美麗的外衣。
2.javascript
javascript是前端開(kāi)發(fā)中所用的一門(mén)腳本語(yǔ)言，但是它又和java沒(méi)有什么聯(lián)系。對(duì)于 js它只是運(yùn)行于網(wǎng)頁(yè)中的一個(gè)腳本，而JAVA，它是后臺(tái)開(kāi)發(fā)所要用到的一門(mén)編程語(yǔ)言，是運(yùn)行于JAVA虛擬機(jī)中的，純面向?qū)ο蟮膹?qiáng)類(lèi)型語(yǔ)言，當(dāng)然我這里所討論的js其實(shí)是一種弱類(lèi)型語(yǔ)言，所謂的弱類(lèi)型簡(jiǎn)單地說(shuō)就是只要用一個(gè)類(lèi)型即var,就能聲明所有變量，包括數(shù)字類(lèi)型(number)，字符串類(lèi)型(string)、布爾類(lèi)型(boolean)、未定義類(lèi)型(undefined)、空類(lèi)型(null);而這五種類(lèi)型就是js中的基本數(shù)據(jù)類(lèi)型，另外還有復(fù)合數(shù)據(jù)類(lèi)型，其包括：函數(shù)、對(duì)象、數(shù)組。對(duì)于所謂的強(qiáng)類(lèi)型語(yǔ)言，我這里也簡(jiǎn)單說(shuō)一下，強(qiáng)類(lèi)型就是變量種類(lèi)的聲明都有嚴(yán)格的限制，如整形應(yīng)聲明為int 、浮點(diǎn)float或double、字符形為char等等，對(duì)于JAVA，其中的類(lèi)型檢查機(jī)制是非常嚴(yán)格的，比C/C++還要嚴(yán)，有興趣的讀者可以了解一些這種強(qiáng)類(lèi)型編程語(yǔ)言，這里就不多介紹了。
對(duì)于要學(xué)一門(mén)新的編程語(yǔ)言的人來(lái)說(shuō)，我認(rèn)為要把這門(mén)語(yǔ)言學(xué)好的前提條件是首先要準(zhǔn)備好一個(gè)或多個(gè)"編譯器"，從這兩個(gè)語(yǔ)言來(lái)說(shuō)可能多數(shù)人會(huì)選擇使用dreamweaver和HBuilder之類(lèi)的工具，但我認(rèn)為作為初學(xué)的人來(lái)說(shuō)最好使用EditPlus4.0這款工具的主要特點(diǎn)是我們寫(xiě)代碼的時(shí)候是沒(méi)有帶任何提示的，這對(duì)提高我們寫(xiě)代碼的功底是非常有利的，下圖就是這款工具的一個(gè)截圖。下面我分別來(lái)談一下， HTML和javascript的入門(mén)方法。
1.HTML入門(mén)
這門(mén)語(yǔ)言是對(duì)標(biāo)簽樣式操作的一門(mén)語(yǔ)言，控制著整個(gè)網(wǎng)頁(yè)的布局和樣式。因此對(duì)標(biāo)簽樣式操作的熟練程度是決定能否掌握這門(mén)語(yǔ)言的因素。所以我們?cè)趧倓倢W(xué)這門(mén)語(yǔ)言時(shí)，一定要對(duì)相關(guān)的標(biāo)簽有所熟悉。而總的來(lái)說(shuō)，標(biāo)簽可以分為三種類(lèi)型：行內(nèi)標(biāo)簽、塊級(jí)標(biāo)簽、行內(nèi)塊標(biāo)簽。利用這三種標(biāo)簽，我們就可以控制整個(gè)網(wǎng)頁(yè)的結(jié)構(gòu)，當(dāng)然這中間還離不開(kāi)CSS樣式。這三種標(biāo)簽的含義是什么?
行內(nèi)標(biāo)簽：一行里可以有多個(gè)這樣的標(biāo)簽而且對(duì)寬度(width)和高度(height)值的設(shè)置將不會(huì)生效，除非對(duì)這此標(biāo)簽添加display:block;或display:inline-block;或float:left;或float:right;屬性之一，這些標(biāo)簽有：<span></span>、<a></a>、<strong></strong>、<em></em>、<label></label>、<input></input>、<select></select>也就是說(shuō)在這些標(biāo)簽之間它不會(huì)產(chǎn)生換行，例如以<span></span>標(biāo)簽為例，在布局中有這樣一個(gè)內(nèi)容：<span>111</span><span>222</span>，通過(guò)"目測(cè)法"我們就很快知道”111“和”222“之間是不會(huì)換行的，即在網(wǎng)頁(yè)中是這樣顯示的：”111222“，這樣并沒(méi)有什么換行，因?yàn)樗鼈兪窃谛袃?nèi)標(biāo)簽中的，于其它這樣的標(biāo)簽我們也可以同理得出。
塊級(jí)標(biāo)簽：這樣的標(biāo)簽當(dāng)我們對(duì)寬度(width)和高度(height)值進(jìn)行設(shè)置時(shí)，將會(huì)生效。這種標(biāo)簽也有一個(gè)特點(diǎn)，那就是很”霸道“，一個(gè)標(biāo)簽它要獨(dú)占一行，它"不喜歡"和別的標(biāo)簽共享它那一行的空間，除非我們?nèi)藶榈娜ゲ扇?rdquo;強(qiáng)制“措施，叫它們"不愿意"這樣做也不得不這樣做。而我們這里的"強(qiáng)制措施"就是給這些"不聽(tīng)話(huà)"的標(biāo)簽添加一個(gè)float:left;或float:right;屬性，這樣它們就可以在同一行中進(jìn)行顯示了。這種常見(jiàn)的標(biāo)簽有：<div></div>、<form></form>、<table></table>、<p></p>、<pre></pre>、<h1--h6></h1--h6>、 <dl></dl>、<ol><li></li></ol>、<ul><li></li></ul>。
2.javascript
想要學(xué)javascript標(biāo)簽這塊內(nèi)容一定要能拿得下，在學(xué)這個(gè)腳本語(yǔ)言之前，我們肯定首先要有一個(gè)“編譯器”，其實(shí)這個(gè)與html所用到的是一樣的，也就是說(shuō)js代碼其實(shí)就是嵌套在html代碼當(dāng)中，只不過(guò)js代碼需要套在 標(biāo)簽中才能運(yùn)行。如果你之前學(xué)習(xí)過(guò)一些編程語(yǔ)言，想要入門(mén)js并不是非常困難。因?yàn)楦骶幊陶Z(yǔ)言的思維是相似的，更何況js為弱類(lèi)型語(yǔ)言，可能對(duì)于某些有編程基礎(chǔ)的人來(lái)說(shuō)就更容易入門(mén)了。下面是js代碼應(yīng)用的一個(gè)例子。代碼后的圖片為效果圖(其實(shí)就是一個(gè)下拉菜單的功能)。
<!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%;
}
/*菜單樣式開(kāi)始*/
.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;
}
菜單樣式結(jié)束
.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');//通過(guò)id值獲取菜單項(xiàng)的元素或節(jié)點(diǎn)
var oSubMenu = document.getElementById('submenu');//通過(guò)id值獲取整個(gè)子菜單項(xiàng)的元素或節(jié)點(diǎn)
oHasMenu.onmouseover = function() {//鼠標(biāo)經(jīng)過(guò)菜單項(xiàng)時(shí)子菜單顯示同時(shí)顯示向上方向箭
oHasMenu.className='up';
oSubMenu.style.display = 'block';
}
oHasMenu.onmouseout = function() {//鼠標(biāo)移出菜單項(xiàng)時(shí)子菜單隱藏同時(shí)顯示向下方向箭
oHasMenu.className='down';
oSubMenu.style.display = 'none';
}
}
</script>
</head>
<body>
<div class="wrap"><--整體的容器開(kāi)始-->
<div class="head"><--頭部開(kāi)始-->
<div class="search"><--搜索框開(kāi)始-->
<p class="logo"><img src="img/logo.png" /></p>
<ul class="menu">
<li class="down" id="hasmenu">網(wǎng)頁(yè)
<ul class="submenu" id="submenu">
<li>網(wǎng)頁(yè)</li>
<li>圖片</li>
<li>視頻</li>
<li>音樂(lè)</li>
<li>地圖</li>
<li>問(wèn)問(wèn)</li>
<li>百科</li>
<li>新聞</li>
<li>購(gòu)物</li>
</ul>
</li>
</ul>
<input type="text" class="input-text" />
<input type="button" class="btn" value="搜狗搜索" />
</div><--搜索框結(jié)束-->
</div><--頭部結(jié)束-->
</div><--整體的容器結(jié)束-->
</body>
</html>
以上就是動(dòng)力節(jié)點(diǎn)小編介紹的"淺談HTML和JavaScript的入門(mén)"，希望對(duì)大家有幫助，想了解更多可查看JavaScript教程。動(dòng)力節(jié)點(diǎn)在線(xiàn)學(xué)習(xí)教程，針對(duì)沒(méi)有任何Java基礎(chǔ)的讀者學(xué)習(xí),讓你從入門(mén)到精通,主要介紹了一些Java基礎(chǔ)的核心知識(shí)，讓同學(xué)們更好更方便的學(xué)習(xí)和了解Java編程，感興趣的同學(xué)可以關(guān)注一下。
Java實(shí)驗(yàn)班
0基礎(chǔ) 0學(xué)費(fèi) 15天面授
Java就業(yè)班
有基礎(chǔ) 直達(dá)就業(yè)
Java夜校直播班
業(yè)余時(shí)間 高薪轉(zhuǎn)行
Java在職加薪班
工作1~3年，加薪神器
Java架構(gòu)師班
工作3~5年，晉升架構(gòu)
提交申請(qǐng)后，顧問(wèn)老師會(huì)電話(huà)與您溝通安排學(xué)習(xí)
京公網(wǎng)安備 11030102010736號(hào)