專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時間：2021-08-30 10:40:06 來源：動力節點 瀏覽1085次
1.HTML
HTML是超文本標記語言(Hyper TextMarkup Language)，是用來對靜態頁面布局的工具。我們知道，一個網頁通常由三部分組成，即結構、樣式、行為，而html其實就是決定一個網頁結構的標記語言，樣式就是所謂的CSS(Cascading Style Sheets)層疊樣式表，行為就是javascript所控制的網頁的特效。至于我為什么沒有單獨講CSS，主要是因為，在實際應用中，CSS往往離不開Html中的各種標簽，也就是說兩者的使用是一起出現的，就比如說標簽的形成的布局相當于一個人，而CSS就相當于這個人身上所披的一件美麗的外衣。
2.javascript
javascript是前端開發中所用的一門腳本語言，但是它又和java沒有什么聯系。對于 js它只是運行于網頁中的一個腳本，而JAVA，它是后臺開發所要用到的一門編程語言，是運行于JAVA虛擬機中的，純面向對象的強類型語言，當然我這里所討論的js其實是一種弱類型語言，所謂的弱類型簡單地說就是只要用一個類型即var,就能聲明所有變量，包括數字類型(number)，字符串類型(string)、布爾類型(boolean)、未定義類型(undefined)、空類型(null);而這五種類型就是js中的基本數據類型，另外還有復合數據類型，其包括：函數、對象、數組。對于所謂的強類型語言，我這里也簡單說一下，強類型就是變量種類的聲明都有嚴格的限制，如整形應聲明為int 、浮點float或double、字符形為char等等，對于JAVA，其中的類型檢查機制是非常嚴格的，比C/C++還要嚴，有興趣的讀者可以了解一些這種強類型編程語言，這里就不多介紹了。
對于要學一門新的編程語言的人來說，我認為要把這門語言學好的前提條件是首先要準備好一個或多個"編譯器"，從這兩個語言來說可能多數人會選擇使用dreamweaver和HBuilder之類的工具，但我認為作為初學的人來說最好使用EditPlus4.0這款工具的主要特點是我們寫代碼的時候是沒有帶任何提示的，這對提高我們寫代碼的功底是非常有利的，下圖就是這款工具的一個截圖。下面我分別來談一下， HTML和javascript的入門方法。
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>。
2.javascript
想要學javascript標簽這塊內容一定要能拿得下，在學這個腳本語言之前，我們肯定首先要有一個“編譯器”，其實這個與html所用到的是一樣的，也就是說js代碼其實就是嵌套在html代碼當中，只不過js代碼需要套在 標簽中才能運行。如果你之前學習過一些編程語言，想要入門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和JavaScript的入門"，希望對大家有幫助，想了解更多可查看JavaScript教程。動力節點在線學習教程，針對沒有任何Java基礎的讀者學習,讓你從入門到精通,主要介紹了一些Java基礎的核心知識，讓同學們更好更方便的學習和了解Java編程，感興趣的同學可以關注一下。
Java實驗班
0基礎 0學費 15天面授
Java就業班
有基礎 直達就業
Java夜校直播班
業余時間 高薪轉行
Java在職加薪班
工作1~3年，加薪神器
Java架構師班
工作3~5年，晉升架構
提交申請后，顧問老師會電話與您溝通安排學習
官方微信
官方抖音
京公網安備 11030102010736號