我爱自学网 > HTML/CSS > HTML 教程 > HTML 教程 > HTML 脚本 访问量:

HTML 脚本

<上一篇:HTML 颜色值 下一篇:HTML 字符实体 >
HTML 脚本 JavaScript 使 HTML 页面具有更强的动态和交互性。 在线实例 插入一段脚本 如何将脚本插入 HTML 文档。 使用 <noscript> 标签 如何应对不支持脚本或禁用脚本的浏览器。 HTML <script> 标签 <script> 标签用于定义客户端脚本,比如 JavaScript。

在线实例

插入一段脚本
如何将脚本插入 HTML 文档。
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我爱自学网—5azixuewang.com</title> 
</head>
<body>

<script>
document.write("Hello World!")
</script> 

</body>
</html>
使用 <noscript>  标签
如何应对不支持脚本或禁用脚本的浏览器。
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我爱自学网—5azixuewang.com</title> 
</head> 
<body>

<script>
document.write("Hello World!")
</script>
<noscript>抱歉,你的浏览器不支持 JavaScript!</noscript>

<p>不支持 JavaScript 的浏览器会使用 <noscript> 元素中定义的内容(文本)来替代。</p>
 
</body>
</html>

HTML <script> 标签

<script> 标签用于定义客户端脚本,比如 JavaScript。

<script> 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

下面的脚本会向浏览器输出"Hello World!":

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我爱自学网—5azixuewang.com</title> 
</head> 
<body>

<script>
document.write("Hello World!")
</script>
<noscript>抱歉,你的浏览器不支持 JavaScript!</noscript>

<p>不支持 JavaScript 的浏览器会使用 <noscript> 元素中定义的内容(文本)来替代。</p>
 
</body>
</html>

Tip: 学习更多关于Javascript教程,请查看JavaScript 教程!

HTML<noscript> 标签

<noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。

<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

只有在浏览器不支持脚本或者禁用脚本时,才会显示 <noscript> 元素中的内容:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我爱自学网—5azixuewang.com</title> 
</head> 
<body>

<script>
document.write("Hello World!")
</script>
<noscript>抱歉,你的浏览器不支持 JavaScript!</noscript>

<p>不支持 JavaScript 的浏览器会使用 <noscript> 元素中定义的内容(文本)来替代。</p>
 
</body>
</html>

JavaScript体验(来自本站javascript教程)

JavaScript实例代码:
1、JavaScript可以直接在HTML输出:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我爱自学网—5azixuewang.com</title>
</head>
<body>
	
<p>
JavaScript 能够直接写入 HTML 输出流中:
</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
</p>
	
</body>
</html>
2、JavaScript事件响应:

 

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我爱自学网—5azixuewang.com</title> 
</head>
<body>

<h1>我的第一个 JavaScript </h1>

<p id="demo">
JavaScript 可以触发事件,就像按钮点击。</p>

<script>
function myFunction()
{
	document.getElementById("demo").innerHTML="Hello JavaScript!";
} 

</script>

</body>
</html>
3、JavaScript处理 HTML 样式:
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我爱自学网—5azixuewang.com</title> 
</head>
<body>
	
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
	x=document.getElementById("demo") // 找到元素
	x.style.color="#ff0000";          // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>
</html>

HTML 脚本标签

标签 描述
<script> 定义了客户端脚本
<noscript> 定义了不支持脚本浏览器输出的文本

<上一篇:HTML 颜色值 下一篇:HTML 字符实体 >
本章内容:
1. HTML 简介
2. HTML 编辑器
3. HTML 基础
4. HTML 元素
5. HTML 属性
6. HTML 标题
7. HTML 段落
8. HTML 文本格式化
9. HTML 链接
10. HTML 头部<head>
11. HTML CSS样式
12. HTML 图像
13. HTML 表格
14. HTML 列表
15. HTML 区块
16. HTML 布局
17. HTML 表单
18. HTML 框架
19. HTML 颜色
20. HTML 颜色名
21. HTML 颜色值
22. HTML 脚本
23. HTML 字符实体
24. HTML URL
25. HTML 速查列表
26. HTML 总结
27. HTML - XHTML
28. HTML 多媒体
29. HTML 插件
30. HTML 音频
31. HTML 视频