当前位置：首页 > 行业动态 > 正文

html写js

在HTML中嵌入JS可通过标签实现，支持内联/外链形式，常用方法包括：1. 页面直接书写alert(‘Hello’)；2. 外部引入；3. DOM加载后执行window.onload=

HTML基础结构

HTML（超文本标记语言）是网页的骨架，通过标签定义内容结构，常用标签及功能如下：

功能描述
<html> 根元素，包裹所有内容
<head> 头部区域，包含元数据
<body> 主体区域，显示网页内容
<h1>~<h6> 标题（<h1>为最高级别）
<p> 段落文本
<a> 超链接
<img> 图片
<div> 容器，用于布局和分组内容
<span> 器，用于局部样式
<table> 表格
<form> 表单，含输入框、按钮等元素

示例：基础HTML页面

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">示例页面</title>
</head>
<body>
  <h1>欢迎学习HTML</h1>
  <p>这是一个段落。</p>
  <a href="https://example.com">点击访问示例网站</a>
</body>
</html>

JavaScript基础语法

JavaScript是网页的脚本语言,用于实现交互功能，核心语法包括：

html写js 第1张

变量与数据类型

关键字 类型说明 示例
var 函数作用域变量 var name = "Alice"
let 块级作用域变量 let age = 20
const 常量（不可修改） const PI = 3.14

条件与循环

  • 条件语句： 
    if (condition) { / 代码 / } else { / 代码 / }
  • 循环语句： 
    for (let i = 0; i < 5; i++) { console.log(i); }

函数定义

  • 传统函数： 
    function add(a, b) { return a + b; }
  • 箭头函数： 
    const add = (a, b) => a + b;

HTML与JavaScript的结合

通过JavaScript操作HTML元素,实现动态交互。

获取HTML元素

方法 说明 示例
getElementById 通过ID获取元素 document.getElementById("myId")
querySelector 通过CSS选择器获取第一个匹配元素 document.querySelector(".class")
getElementsByTagName 获取所有指定标签元素 document.getElementsByTagName("p")

修改元素内容与属性

  • 修改文本： 
    const p = document.querySelector("p");
p.textContent = "新内容"; // 或 p.innerText = "新内容";
  • 修改属性： 
    const img = document.querySelector("img");
img.src = "new-image.jpg"; // 修改图片路径
img.alt = "新描述";         // 修改alt属性

事件监听

  • 绑定事件： 
    const btn = document.querySelector("button");
btn.addEventListener("click", function() { alert("按钮被点击！"); });
  • 事件类型：click（点击）、mouseover（鼠标悬停）、submit（表单提交）等。

实际应用案例

案例：点击按钮修改文本

HTML部分：

<button id="myButton">点击我</button>
<p id="targetText">原始文本</p>

JavaScript部分：

const button = document.getElementById("myButton");
const text = document.getElementById("targetText");
button.addEventListener("click", function() {
  text.textContent = "文本已被修改！";
});

常见问题与调试

问题描述 解决方案
JavaScript代码不执行 检查<script>标签是否在</body>前，或代码是否有语法错误
无法获取元素 确认ID/类名是否正确，确保脚本在DOM加载后执行（可放</body>前或用DOMContentLoaded事件）
事件绑定无效 检查选择器是否准确，确保事件类型正确（如click而非change）

问题与解答

Q1：如何通过JavaScript修改HTML元素的样式？

A1：通过element.style属性直接设置CSS样式。

const box = document.querySelector(".box");
box.style.backgroundColor = "blue"; // 修改背景色
box.style.width = "200px";         // 修改宽度

Q2：为什么getElementById返回null？

A2：可能原因：

  1. ID名称拼写错误（大小写敏感）。
  2. 脚本在DOM元素加载前执行（需将<script>放在</body>前，或使用window.onload/`DOMContentLoad
0

相关文章