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

html与js

HTML构建页面结构，JS实现交互

HTML基础

HTML（HyperText Markup Language）是构建网页结构的标记语言,通过标签定义内容语义。

标签类型 示例 作用
文本标签 <p><h1> 定义段落、标题等文本内容
容器标签 <div><section> 划分页面区域
表单标签 <form><input> 创建交互式表单元素
链接与导航 <a><nav> 定义超链接和导航栏
多媒体标签 <img><video> 嵌入图片、视频等媒体资源

示例：

<!DOCTYPE html>
<html>
<head>网页标题</title>
</head>
<body>
  <h1>欢迎来到我的网站</h1>
  <p>这是一个段落。</p>
  <a href="https://example.com">点击访问示例网站</a>
</body>
</html>

JavaScript基础

JavaScript是浏览器端脚本语言,用于实现网页交互和动态效果。

语法特性 示例 说明
变量声明 let x = 10; 使用let或const定义变量
函数定义 function sayHello() {} 封装可复用代码块
事件监听 button.addEventListener 响应用户操作（点击、输入等）
DOM操作 document.getElementById 修改网页内容和结构
条件判断 if (x > 5) {} 根据条件执行不同代码

示例：

// 弹出欢迎消息
alert("欢迎访问！");
// 计算按钮点击次数
let count = 0;
const button = document.getElementById("myButton");
button.addEventListener("click", () => {
  count++;
  button.textContent = "点击了" + count + "次";
});

HTML与JavaScript的结合

  1. 通过ID/类名获取元素
    HTML中的id或class属性可被JS用来定位元素。

    <button id="myButton">点击我</button>
<script>
  document.getElementById("myButton").style.backgroundColor = "blue";
</script>

  2. 动态修改内容
    JS可直接操作HTML结构或文本。

    const paragraph = document.querySelector("p");
paragraph.textContent = "这段文字被JavaScript修改了！";

  3. 事件驱动交互
    HTML元素触发事件后,JS执行对应逻辑。

    <input type="text" id="nameInput" placeholder="输入姓名">
<button onclick="showName()">提交</button>
<script>
  function showName() {
    const name = document.getElementById("nameInput").value;
    alert("你好，" + name + "！");
  }
</script>

常见问题与解答

问题1：HTML和JavaScript的区别是什么？

  • HTML：负责网页结构和内容（如文字、图片、链接），是静态的标记语言。
  • JavaScript：负责交互和动态行为（如表单验证、动画），需要浏览器解析执行。
    关系：HTML提供“舞台”，JavaScript控制“表演”。

问题2：如何用JavaScript动态修改HTML元素的内容？

  1. 通过document.getElementById或document.querySelector获取元素。
  2. 使用.textContent或.innerHTML。
    示例： 

    const element = document.getElementById("demo");
element.textContent = "新的内容"; // 或 element.innerHTML = "<b>新内容
前端开发动态网页设计
0

相关文章