<script language="javascript"> function ChangeBgColor(){ document.getElementById("box").style="width:200px;height:60px;backgroundcolor:#FFC9C9;"; } function clickFN(){ if (window.event.srcElement.tagName == "A" && window.event.shiftKey) window.event.returnvalue = false; } } </script> <body onclick="clickFN()"> <div onmouseover="ChangeBgColor()" id="box" style="width:200px;height:60px;background-color:#FFCC6E;"> 鼠标移经这将改变颜色 <a href="http://www.jxnu.edu.cn">链接测试</a> </div>

时间: 2023-12-05 10:48:19 浏览: 132

html css js网页设计教程.docx

### HTML CSS JS网页设计教程知识点概述 #### 一、HTML基础 **HTML（HyperText Markup Language）**，即超文本标记语言，是用于构建网页结构的基础语言。它由一系列的元素组成，这些元素通过标签来表示。每个标签都有特定的功能，它们组合起来形成一个完整的网页文档。 **HTML文档的基本结构**： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>页面标题</title> </head> <body>  </body> </html> ``` - `<!DOCTYPE html>`：定义文档类型为HTML5。 - `<html>`：文档根元素。 - `<head>`：包含文档元数据，如字符集、标题等。 - `<title>`：显示在浏览器标签上的页面标题。 - `<body>`：包含网页的所有可见内容。 #### 二、CSS简介 **CSS（Cascading Style Sheets）**，即层叠样式表，是一种用来描述HTML或XML文档样式的语言，用于控制网页的外观和布局。 **CSS的三种使用方式**： 1. **内联样式**：直接写在HTML元素的style属性中。 2. **内部样式表**：放在`<head>`中的`<style>`标签内。 3. **外部样式表**：保存为.css文件，并通过`<link>`标签链接到HTML文档中。 **CSS选择器**： - **类选择器**：`.classname`，适用于多个元素。 - **ID选择器**：`#idname`，适用于单个元素。 - **标签选择器**：`tagname`，应用于所有该类型的元素。 - **通用选择器**：`*`，应用于所有元素。 - **属性选择器**：`[attribute]`，根据元素的属性选择元素。 **示例**： ```css body { background-color: lightblue; } h1 { color: red; } ``` #### 三、JavaScript基础 **JavaScript**是一种广泛使用的编程语言，主要用于前端开发，能够为网页添加交互性和动态效果。 **基本语法**： - 变量声明：`var x = 10;` - 函数定义：`function myFunction() {}` - 条件语句：`if (condition) {}` - 循环语句：`for (var i = 0; i < 5; i++) {}` **DOM操作**： - 获取元素：`document.getElementById("myDiv");` - 修改元素：`element.innerHTML = "New Text";` - 添加事件监听器：`element.addEventListener("click", myFunction);` **示例**： ```html <button onclick="alert('按钮被点击了！')">点击我</button> <script> function showMessage() { alert('按钮被点击了！'); } </script> ``` #### 四、响应式网页设计 **响应式设计**是指让网页在不同设备和屏幕尺寸上都能够良好展示的设计方法。通常采用流式布局、弹性图片等技术，并利用媒体查询（Media Queries）来适应不同的屏幕尺寸。 **示例**： ```html <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>响应式网页示例</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>我的响应式网页</h1> </header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于</a></li> <li><a href="#">联系</a></li> </ul> </nav> <main> <section> <h2>欢迎</h2> <p>这是一个响应式网页示例。</p> </section> </main> <footer> <p>© 2024 我的响应式网页</p> </footer> </body> </html> ``` **CSS样式**： ```css /* styles.css */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header, nav, main, footer { padding: 20px; text-align: center; } nav ul { list-style-type: none; padding: 0; } nav ul li { display: inline; margin: 0 10px; } @media (max-width: 600px) { nav ul li { display: block; margin: 10px 0; } } ``` #### 五、动态网页示例 **动态网页**是指能够根据用户输入或其他动态变化的数据而改变其内容或外观的网页。 **示例**： ```html <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>动态网页示例</title> <style> body { background-color: lightblue; } h1 { color: red; } .box { width: 100px; height: 100px; background-color: blue; } </style> <script> function changeColor() { var box = document.querySelector('.box'); box.style.backgroundColor = 'green'; } </script> </head> <body> <h1>动态网页示例</h1> <div class="box" onclick="changeColor();"></div> </body> </html> ``` 在这个示例中，当用户点击蓝色方块时，它的背景颜色会变为绿色，实现了动态效果。通过学习HTML、CSS和JavaScript的基础知识以及如何将它们结合起来创建响应式和动态网页，你可以开始构建自己的网页项目。这些技能对于现代网页开发至关重要，也是成为一名合格前端开发人员的基础。

这是一段 JavaScript 代码，它包含了两个函数：ChangeBgColor() 和 clickFN()。页面中有一个 div 元素，当鼠标移动到该元素上时，会触发 ChangeBgColor() 函数，该函数会将该元素的背景颜色改变为 #FFC9C9。当用户在页面中单击时，会触发 clickFN() 函数，该函数会检查事件源是否是 a 标签，并且检查是否按下了 shift 键，如果同时满足这两个条件，就会阻止默认的链接跳转行为。这段代码中有一个拼写错误，将 "backgroundcolor" 写成了 "background-color"，应该修改为 "background-color" 才能正确设置背景颜色。

阅读全文

相关推荐

WebCalculator：编码中的简单Web计算器

javascript 三组文字间隙滚动实例代码

javascript带颜色的欢迎窗口

浮点vfdsfJAVA实现链表,双向链表.txtJAVA实现链表,双向链表.txt

html+css购物网页设计.zip

前端开发基础：HTML、CSS和JavaScript

前端技术应用：HTML、CSS与JavaScript

前端开发入门：HTML、CSS与JavaScript

Web开发基础：HTML、CSS、JavaScript

HTML、CSS和JavaScript基础：前端页面解析

Web开发基础：HTML、CSS、JavaScript详解

前端开发入门：HTML、CSS、JavaScript基础

Web开发入门：HTML、CSS和JavaScript基础

前端开发入门：从HTML、CSS到JavaScript

前端技术入门：HTML、CSS和JavaScript基础知识

HTML、CSS和JavaScript基础知识

初识DHTML：动态HTML的基本概念

友价免签约支付接口插件最新版

基于java的微信小程序跳蚤市场设计与实现答辩PPT.pptx

最新推荐

友价免签约支付接口插件最新版

基于java的微信小程序跳蚤市场设计与实现答辩PPT.pptx

java程序员面试求职指南

探索AVL树算法：以Faculdade Senac Porto Alegre实践为例

管理建模和仿真的文件

【ggplot2绘图技巧】：R语言中的数据可视化艺术

HAL库怎样将ADC两个通道的电压结果输出到OLED上？

小学语文教学新工具：创新黑板设计解析

"互动学习：行动中的多样性与论文攻读经历"

【R语言并行计算秘籍】：倍增数据处理速度的高效策略