HTML教程 HTML教程HTML是什么HTML 代码编辑器HTML 基础标签HTML 元素HTML 属性HTML 标题HTML 段落HTML 文本格式化HTML CSSHTML 头部HTML链接HTML 图像HTML 区块和行内元素HTML 表格HTML 列表HTML 引用和定义元素HTML 计算机代码元素HTML 布局HTML 框架HTML 脚本/JavaScriptHTML 文件路径HTML 颜色HTML 字符(编码)和实体HTML URL(网址)HTML XHTMLHTML - Web服务器HTML表单 HTML 表单HTML 表单属性HTML 表单元素HTML 表单input类型HTML 表单input属性

HTML 脚本/JavaScript

向HTML 添加脚本(Script),使其动态性和交互性更强。<script>定义客户端脚本(默认为JavaScript脚本语言)JavaScript 最常用于内容动态更新。

自动弹出窗口

gaitubao_微信图片_20210629223201.png

<script>
   alert("Hello javascript!");
</script>

运行代码

JavaScript的组成

JavaScript由ECMAScript、DOM、BOM三部分组成。

(1)ECMAScript:描述了该语言的语法和基本对象。

(2)DOM:文档对象模型(DOM),描述处理网页内容的方法和接口。

(3)BOM:浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口。

动态更改 HTML 元素内容

gaitubao_微信图片_20210629223229.png

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

<p id="anli">这是一个静态文本。</p>

<script>
function Function() { 
  document.getElementById("anli").innerHTML = "Hello JavaScript!";
}
</script>

运行代码

动态改变html内容样式

gaitubao_微信图片_20210629223247.png

<p id="anli">被改变前的样子</p>
    
    <script>
    function Function() {
      document.getElementById("anli").style.fontSize = "20px"; 
      document.getElementById("anli").style.color = "yellow";
      document.getElementById("anli").style.backgroundColor = "red";        
    }
    </script>
    
    <button type="button" onclick="Function()">改变样式</button>

运行代码

不支持脚本标签

<script>
document.write("炫代码!")
</script>
<noscript>注意:你的浏览器可能关闭了JavaScript,或者不支持JavaScript</noscript>

运行代码

支持浏览器

ChromeIEFirefoxsafarioprea

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