當前位置 : 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.oalvodamoda.com)</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.oalvodamoda.com)</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.oalvodamoda.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>

運行結果:

JavaScript 能夠直接寫入 HTML 輸出流中:

這是一個標題

這是一個段落。

您只能在 HTML 輸出流中使用 document.write。 如果您在文檔已加載后使用它(比如在函數中),會覆蓋整個文檔。

JavaScript事件響應:

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

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</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.oalvodamoda.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>

運行結果:

我的第一段 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)播放
五月情天