摘要：众所周知，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。
扫一扫
10万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
