如何在HTML里嵌入javascript-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_5725/article/details/82680379

本文介绍了在HTML文档中嵌入JavaScript的三种常见方式：内部放置、外部引用及内联引用，并提供了示例代码。同时探讨了不同方式的特点与应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在HTML文档里嵌入客户端JS代码有三中

1内部放置在<script>和</script>标签之间的

2外部引用就是引用HTML文件外部的JS文件这种方式代码更加清晰方法就是吧JS文件放到head标签内

3内联引用就是通过HTML标签中的事件属性实现的

用第一种方法内部引用举个例子

    <!DOCTYPE. html>            
    <html>                             
    <head>                             
    <title>Digital clock</title>  
    <script>                        //js代码  
    //定义一个函数来显示时间  
    function displayTime(){  
        var elt=document.getElementById('clock')   //通过id 'clock'找到元素  
        var now = new Date()                         //得到当前时间  
        elt.innerHTML = now//让elt来显示  
        setTimeout(displayTime,1000)                     //在一千毫秒也就是一秒后再次执行  
    }  
    window.οnlοad=displayTime                    //当onload事件发生时开始显示时间  
    </script>  
<body>
	<div id='clock'></div>

</body>

#cloock{ // 定义id=‘CLOCK’得元素的样式

fount:bold 24pt sans //使用粗体大号字

background:#ddf //定义兰灰色背景

padding:10px //周围有一圈空白

border:solid black 2px //定义纯黑边框

border-radius :10px //定义圆角（有些浏览器不支持）

}

使用外部引用的好处
方标查看维护更安全可以压缩可以加密单个JS文件浏览器可以缓存JS文件减少宽带使用

通过引用HTML文件的方式加载JavaScript文件可以使HTML代码更简洁

<head>

　　<script type="text/javascript" src=ga.js"></script>

　　</head>

方法是把JavaScript文件放到head一些不关键的JavaScript文件，可以放到HTML文件的底部可以提高网页访问速度

<script type="text/javascript" src="ga.js"></script>

　　</body>

　　</html>

3内联引用

<input type="button" value="" οnclick="alert（'内联引用的方式调用了JavaScript代码'）；">

HTML5 文件和 HTML文件的分别

html:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

html5:<!doctype html>