浅谈HTML和JavaScript的入门

更新时间：2021-08-30 10:40:06 来源：星辉浏览832次

HTML和javascript简介

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++还要严，有兴趣的读者可以了解一些这种强类型编程语言，这里就不多介绍了。

HTML和javascript快速入门方法

对于要学一门新的编程语言的人来说，我认为要把这门语言学好的前提条件是首先要准备好一个或多个"编译器"，从这两个语言来说可能多数人会选择使用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编程，感兴趣的同学可以关注一下。

JavaScript教程 HTML教程

上一篇CSS颜色样式下一篇JavaScript修改CSS的方法

浅谈HTML和JavaScript的入门

HTML和javascript简介

HTML和javascript快速入门方法

JVM

多线程下载器项目实战

Java日志框架全集（选学）

高并发解决方案（选学）

零基础能学Java吗？

零基础能学Java吗？

零基础能学Java吗？

关于星辉平台

星辉平台

在线课程

资料广场

全国免费电话