当前位置 : IT培训网 > Web前端 > Web教程 > 如何用html脚本制作绚丽的网页

如何用html脚本制作绚丽的网页

时间:2016-12-05 13:44:25  来源:web前端培训网  作者:IT培训网  已有:名学员访问该课程
标签(Tag):   html(100)html脚本(4)
关于html脚步语言就介绍到这里,希望大家都可以用心学习,掌握主要的知识点,制作出绚丽的页面效果。如果你觉得这部分知识点比较难,那就赶紧加入IT培训网学习吧,快速学会html脚本语言,快速找到工作制作绚丽的页面效果。

在网页中嵌入脚步语言有什么用呢,也许你不知道,可在我们浏览页面是哪些选项栏,哪些页面特效,还有幻灯片等等,一般都是用脚步语言来支撑运行的,既然html脚步语言这么强大,就让我们一起学习下吧!

HTML 脚本

JavaScript 使 HTML 页面具有更强的动态和交互性。

HTML 脚本标签

标签

描述

<script>

定义了客户端脚本

<noscript>

定义了不支持脚本浏览器输出的文本

 

HTML <script> 标签

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

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

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

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

实例

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

源代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>IT培训网(www.cnitedu.cn)</title>

</head>

<body>

<script>

document.write("Hello World!")

</script>

</body>

</html>

运行结果:

Hello World!

HTML<noscript> 标签

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

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

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

实例

<script>

document.write("Hello World!")

</script>

<noscript>抱歉,你的浏览器不支持 JavaScript!</noscript>

源代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>IT培训网(www.cnitedu.cn)</title>

</head>

<body>

<script>

document.write("Hello World!")

</script>

<noscript>抱歉,你的浏览器不支持 JavaScript!</noscript>

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

</body>

</html>

运行结果:

Hello World!

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

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

JavaScript实例代码:

JavaScript可以直接在HTML输出:

document.write("<p>这是一个段落。</p>");

源代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>IT培训网(www.cnitedu.cn)</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>

运行结果:

JavaScript 能够直接写入 HTML 输出流中:

这是一个标题

这是一个段落。

您只能在 HTML 输出流中使用 document.write。 如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。

JavaScript事件响应:

<button type="button" onclick="myFunction()">点我!</button>

源代码:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培训网(www.cnitedu.cn)</title> 

</head>

<body>

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

<p id="demo">

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

<script>

function myFunction()

{

         document.getElementById("demo").innerHTML="Hello JavaScript!";

}

</script>

<button type="button" onclick="myFunction()">点我</button>

</body>

</html>

运行结果:

我的第一个 JavaScript

JavaScript 可以触发事件,就像按钮点击。

按钮:点我

Hello JavaScript!

JavaScript处理 HTML 样式:

document.getElementById("demo").style.color="#ff0000";

源代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>IT培训网(www.cnitedu.cn)</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>

运行结果:

我的第一段 JavaScript

JavaScript 能改变 HTML 元素的样式。

点击这里(点击之后变色)

JavaScript 能改变 HTML 元素的样式。

关于html脚步语言就介绍到这里,希望大家都可以用心学习,掌握主要的知识点,制作出绚丽的页面效果。如果你觉得这部分知识点比较难,那就赶紧加入IT培训网学习吧,快速学会html脚本语言,快速找到工作制作绚丽的页面效果。

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
------分隔线----------------------------
Web 教程
1、HTML 教程
1.1 HTML 简介
1.2 HTML 编辑器
1.3 HTML 基础
1.4 HTML 元素
1.5 HTML 属性
1.6 HTML 标题
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 链接
1.10 HTML 头部
1.11 HTML CSS
1.12 HTML 图像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 区块
1.16 HTML 布局
1.17 HTML 表单
1.18 HTML 框架
1.19 HTML 颜色
1.20 HTML 颜色名
1.21 HTML 颜色值
1.22 HTML 脚本
1.23 HTML 字符实体
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 总结
1.27 HTML 简介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 浏览器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 内联 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(视频)
2.10 HTML5 Audio(音频)
2.11 HTML5 Input 类型
2.12 HTML5 表单元素
2.13 HTML5 表单属性
2.14 HTML5 语义元素
2.15 HTML5 Web 存储
2.16 HTML5 Web SQL
2.17 HTML5 应用程序缓存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代码规范
3、HTML 媒体
3.1 HTML 媒体(Media)
3.2 HTML 插件
3.3 HTML 音频(Audio)
3.4 HTML视频(Videos)播放