前端新手必看!HTML、CSS 和 JavaScript 详解与实用案例全攻略
myzbx 2024-12-01 18:23 24 浏览
大家好呀！我是魏大帅，一位热爱前端开发的程序员。今天在这呢，我来跟大家聊聊 HTML、CSS 还有 JavaScript 的知识，希望能对你们有用哈！[送心]
一、HTML：网页的骨架担当
1. HTML速成课
HTML（HyperText Markup Language）就是那个超文本标记语言，是搭建网页结构的基础语言。啥？不懂？简单来说，就是用各种标签把网页的不同部分（比如标题、段落、链接、图片啥的）拼凑起来。
2. HTML基本布局
一个HTML小萌新通常长这样：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
页面内容
</body>
</html>
注意啦，<!DOCTYPE html>是告诉我们这是一个HTML5的文档。<html>标签是整个页面的根元素，<head>里藏着页面的元数据，比如编码、标题啥的。<body>则是页面的主要内容。3. HTML 常用标签
- 标题标签：<h1>、<h2>、<h3>等，用于定义不同级别的标题。
- 段落标签：<p>，定义段落。
- 链接标签：<a>，创建链接。
- 图像标签：<img>，插入图像。
- 列表标签：<ul>（无序列表）、<ol>（有序列表）和<li>（列表项），创建列表。
- 表格标签：<table>、<tr>（表格行）、<td>（表格单元格），创建表格。
- 表单标签：<form>、<input>、<select>、<textarea>等，用于创建表单。
- 语义化标签：如<header>、<nav>、<section>、<article>、<aside>、<footer>等，让网页结构更清晰。
4. HTML5 新特性
- 多媒体标签：<audio>和<video>，播放音频和视频。
- 画布标签：<canvas>，绘制图形。
- 本地存储：使用localStorage和sessionStorage在浏览器中存储数据。
- 地理定位：使用navigator.geolocation获取用户地理位置信息。
- Web Workers：在后台运行 JavaScript 代码，不影响页面性能。
- 拖放 API：实现元素的拖放功能。
二、CSS：网页的时尚装扮
1. CSS 简介
CSS（Cascading Style Sheets）就是那个层叠样式表，专门负责给网页穿衣服，定义字体、颜色、大小、间距、背景等，让页面美美哒。
2. CSS 引入方式
- 内联样式：在 HTML 标签中用style属性直接定义样式。
- 内部样式表：在 HTML 文件的<head>标签中用<style>标签定义样式。
- 外部样式表：将 CSS 代码保存为独立文件，在 HTML 文件中用<link>标签引入。
3. CSS 选择器
- 元素选择器：根据元素名称选择元素。
- 类选择器：根据元素的class属性选择元素。
- ID 选择器：根据元素的id属性选择元素。
- 后代选择器：选择某个元素的后代元素。
- 伪类选择器：根据元素的特定状态选择元素，如:hover（鼠标悬停时）、:active（被点击时）等。
- 属性选择器：根据元素的属性值选择元素。
- 兄弟选择器：选择与某个元素相邻的兄弟元素。
- 通用选择器：用*选择所有元素。
4. CSS 盒模型
CSS 盒模型由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。理解盒模型对布局和定位元素至关重要。
5. CSS 布局
- 流式布局：默认布局方式，元素会根据窗口大小自动调整位置。
- 弹性布局（Flexbox）：灵活布局方式，轻松实现水平和垂直居中、等分空间等布局效果。
- 网格布局（Grid）：创建复杂二维布局，精确控制元素位置和大小。
6. CSS 响应式设计
响应式设计能根据不同设备屏幕尺寸自动调整布局和样式。可以使用媒体查询（Media Queries）实现。
7. CSS 动画
CSS动画，就是让页面元素动起来，比如渐变、旋转、缩放等，用@keyframes规则就能定义动画效果。
8. CSS 预处理器
CSS预处理器，比如Sass、Less和Stylus，能让你写CSS的时候更高效，变量、嵌套、混合、函数啥的都有了。
三、JavaScript：网页的交互与动态效果
1. JavaScript 简介
JavaScript是一种脚本语言，能让你网页动起来，添加交互性和动态效果，还能操作HTML和CSS。
2. JavaScript 基本语法
- 变量声明：用var、let或const关键字声明变量。
- 数据类型：包括数字、字符串、布尔值、对象、数组等。
- 运算符：如算术运算符、比较运算符、逻辑运算符等。
- 控制流语句：如条件语句（if、else if、else）、循环语句（for、while、do-while）等。
- 函数：定义函数封装可重复使用的代码块。
3. JavaScript 操作 DOM
DOM（Document Object Model）就是文档对象模型，是表示 HTML 和 XML 文档的编程接口。JavaScript 可以通过 DOM 操作网页内容和结构。
- 获取元素：用document.getElementById()、document.getElementsByTagName()、document.getElementsByClassName()等方法获取 HTML 元素。
- 修改元素内容：用innerHTML、textContent等属性修改元素内容。
- 修改元素样式：用style属性或classList方法修改元素样式。
- 创建和删除元素：用document.createElement()和parentNode.removeChild()等方法创建和删除元素。
4. JavaScript 事件处理
事件是用户与网页交互时发生的动作，比如点击、鼠标移动、键盘输入等。JavaScript 可以通过事件处理程序响应这些事件。
- 注册事件处理程序：用addEventListener()方法注册事件处理程序。
- 移除事件处理程序：用removeEventListener()方法移除事件处理程序。
- 事件对象：事件处理程序可接收一个事件对象作为参数，包含有关事件的信息。
5. JavaScript 异步编程
- 回调函数：异步编程方式，将一个函数作为参数传递给另一个函数，在特定事件发生时调用。
- Promise：处理异步操作的对象，可以通过链式调用then()和catch()的方法处理成功和失败情况。
- async/await：基于 Promise 的异步编程语法糖，使异步代码看起来更像同步代码。
6. JavaScript 面向对象编程
JavaScript 是基于对象的语言，可以用面向对象编程的思想组织代码。可以使用构造函数、原型链和 ES6 的类实现面向对象编程。
7. JavaScript 模块化
随着项目规模的增大，代码管理变难。JavaScript 模块化可以将代码分割成多个独立的模块，提高可维护性和可扩展性。可以用 ES6 的模块系统或 CommonJS 模块系统实现模块化。
8. JavaScript 库和框架
JavaScript 库和框架，这可是神器啊！jQuery、Lodash、React、Vue、Angular，有了它们，开发效率那是嗖嗖的！
四、实用案例，这可是实战演练，来看看：
1. 简单网页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单网页</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
h1 {
color: #333;
}
p {
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个简单的网页示例，使用了 HTML、CSS 和 JavaScript。</p>
<script>
console.log('页面加载完成');
</script>
</body>
</html>
简单网页，HTML搭结构，CSS美美哒，JavaScript输出个信息，F12一看，Console里“页面加载完成”，完美！
2. 响应式网页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>响应式网页</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
h1 {
color: #333;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.5;
text-align: justify;
}
img {
max-width: 100%;
height: auto;
}
@media screen and (max-width: 768px) {
h1 {
font-size: 24px;
}
p {
font-size: 14px;
}
}
</style>
</head>
<body>
<h1>响应式网页示例</h1>
<p>这是一个响应式网页示例，能够根据不同的设备屏幕尺寸自动调整布局和样式。</p>
<img src="image.jpg" alt="图片">
<script>
window.addEventListener('resize', function() {
console.log('窗口大小改变');
});
</script>
</body>
</html>
响应式网页，CSS媒体查询，JavaScript监听窗口大小，一缩一扩，信息打印不停歇，F12一看，Console里“窗口大小改变”，666！
3. 表单验证页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
form {
width: 300px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
padding: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
input[type="submit"] {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
.error {
color: red;
margin-bottom: 10px;
}
</style>
</head>
<body>
<form>
<label for="name">姓名：</label>
<input type="text" id="name" required>
<label for="email">邮箱：</label>
<input type="email" id="email" required>
<label for="password">密码：</label>
<input type="password" id="password" required>
<input type="submit" value="提交">
</form>
<script>
const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
event.preventDefault();
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
let errorMessage = '';
if (name === '') {
errorMessage += '姓名不能为空。<br>';
}
if (email === '') {
errorMessage += '邮箱不能为空。<br>';
} else if (!isValidEmail(email)) {
errorMessage += '邮箱格式不正确。<br>';
}
if (password === '') {
errorMessage += '密码不能为空。<br>';
}
if (errorMessage!== '') {
const errorDiv = document.createElement('div');
errorDiv.className = 'error';
errorDiv.innerHTML = errorMessage;
form.appendChild(errorDiv);
} else {
alert('表单提交成功！');
}
});
function isValidEmail(email) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
}
</script>
</body>
</html>
表单验证页面，HTML搞表单，CSS美美化，JavaScript验证输入，空了、格式错了，错误信息飞出来，验证通过，提示框弹出来，用户体验那是杠杠的！
4. 轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
.slider {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
.slides {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide {
width: 500px;
height: 300px;
object-fit: cover;
}
.prev,
.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
color: #fff;
cursor: pointer;
z-index: 1;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
</style>
</head>
<body>
<div class="slider">
<div class="slides">
<img src="image1.jpg" alt="图片 1" class="slide">
<img src="image2.jpg" alt="图片 2" class="slide">
<img src="image3.jpg" alt="图片 3" class="slide">
</div>
<button class="prev"><</button>
<button class="next">></button>
</div>
<script>
const slider = document.querySelector('.slider');
const slides = document.querySelector('.slides');
const prevButton = document.querySelector('.prev');
const nextButton = document.querySelector('.next');
let slideIndex = 0;
prevButton.addEventListener('click', function() {
slideIndex--;
if (slideIndex < 0) {
slideIndex = slides.children.length - 1;
}
slides.style.transform = `translateX(-${slideIndex * 500}px)`;
});
nextButton.addEventListener('click', function() {
slideIndex++;
if (slideIndex >= slides.children.length) {
slideIndex = 0;
}
slides.style.transform = `translateX(-${slideIndex * 500}px)`;
});
</script>
</body>
</html>
轮播图，HTML搞结构，CSS美美哒，JavaScript切换图片，点击“上一张”或“下一张”，图片切换自如，酷炫！
五、结尾
看完这篇，觉得有帮助就一键三连[赞][赞][赞]，关注我吧，你的关注就是我最大的动力，前端知识，我分享，你学，咱们一起进步[比心]
相关推荐
- 休闲游戏《重力六边形》让你晕头转向
-
重力六边形游戏介绍给玩家们，看看这款游戏怎么玩，会给玩家们带来什么样的乐趣，就和蚕豆网小编瞧瞧重力六边形游戏介绍。Tiltagon《重力六边形》是一款快节奏的休闲游戏，开发者表示这款游戏最初的设计灵...
- 《重力实验室》测评 果然无法拒绝萌物!(7.5分)
-
话说怒鸟系列真真儿的经久不衰，这不，上周《愤怒的小鸟英雄传》又上架了。这么叫座的游戏，各家当然也是竞相模仿的啦~（模仿什么的，你们懂的）可是模仿也是要有技术滴~小编今天就遇到了一款叫做《重力实验室》的...
- 《重力存亡》评测:最爽快的重力感应游戏
-
《重力存亡（TilttoLive）》是一个动作游戏系列，与其他众多利用虚拟按键操作的动作游戏不同的是，这个系列全部都是以重力感应为主进行操作的，并且被评为“移动平台上最经典与爽快的重力感应游戏”，...
- Cluvens IW-SK:一款采用蝎子造型的零重力游戏椅子与工作站
-
来源：cnBeta据外媒报道，如果你正在寻找终极电脑工作站或电子游戏椅并假装自己被困在一只巨大的蝎子里面那么你的梦想就要成真了。CluvensIW-SK零重力电子竞技椅和工作站除了配有一张精致的椅子...
- 休闲游戏《动物重力冲刺》:让你上下颠倒傻傻分不清
-
寿司发表于2016-01-0417:00还记得休闲游戏《蜘蛛方块》里面的那只萌萌小方块吗？近日该作的开发商BoomBit发布了一款全新作品AnimalGravityRun《动物重力冲刺...
- 人体重力“游戏”成功解决四代机研制中的一项技术难点
-
这个夜晚，四代机研制的又一项技术难点完成攻关，碳纤维锯齿蒙皮制造、加工、检测技术实现了全方位突破。4月24日23时，狂风大作，大雨倾盆而下，马路上的积水已经吞没了半个自行车轮。而此时的航空工业成飞40...
- 了解四个基本音效术语，让你拥有更棒的音效
-
各位影人可能经常听到别人建议你聘请专业音效师，但你真的知道音效师在做什么吗？一个很棒的音效师能带领观众进入你的世界、沉浸在你说的故事中，但音效师的重要性经常被低估，有时他们的能力甚至没有被导演好好运用...
- 《死亡回归》帧率与分辨率测试 PS5功能体验绝佳
-
PS5主机独占新作《死亡回归》是目前在索尼次世代平台上体验最佳的游戏之一，国外媒体VGTech对这款游戏的分辨率和帧率效果进行了一些测试。《死亡回归》是曾经推出过像素卷轴射击游戏《光电战机》的Hou...
- ROG游戏手机3如何更改音频音效?
-
请将手机桌面由上向下滑动至快捷设置栏>点击齿轮设置按钮>声音和震动>音频向导>点击下拉菜单，选择类型并按确定即可。
- 怎么给游戏配音?快看这篇游戏配音教程吧
-
给游戏配音是一项非常重要的任务，一个好的配音不仅可以增强游戏的氛围和情感表现，还能够让玩家更好地沉浸在游戏中，体验游戏的乐趣和神秘。它需要创造力、技术知识和对声音掌控的能力，还需要对游戏的理解和深入思...
- Steam游戏评测 第566期《战争号令》
-
《战争号令——地狱之门：东线》是由BarbedwireStudios,Digitalmindsoft研发并由Digitalmindsoft发行的一款基于真实历史设计的即时战略游戏，游戏以二战时期的...
- 竞速游戏推荐哪个 高人气竞速游戏精选
-
探索速度与激情的巅峰对决！本文带你领略高人气竞速游戏精选，无论是狂飙突进的赛车体验，还是策略布局的竞技快感，总有一款能满足你对速度的渴望。无论你是资深玩家还是新手入门，这里将揭示最具热度的游戏世界，一...
- 游戏使用孙红雷台词声音被判侵权
-
10月13日，成都互联网法庭对演员孙红雷与成都睡神飞科技有限公司、北京睡神飞科技有限公司纠纷一案作出一审判决。合议庭认为，被告开发、发布的游戏未经原告同意也未取得相应授权，使用其参演的影视剧《征服》经...
- 雷蛇发布创意电竞椅头枕，可将游戏声音转换为触觉反馈
-
IT之家1月6日消息，雷蛇在CES2023上发布了首款带近场环绕音效和触觉反馈的电竞椅头枕，名为ProjectCarol。该头枕支持近场环绕音效搭配7.1环绕声，还搭载Raze...
- 《生化危机8》总监:PS5的3D音效太适合恐怖游戏
-
《生化危机8》还有不到一个月就要发售了。卡普空游戏总监佐藤盛正近日接受了PlayStation官方杂志的采访（186期，2021年5月号），介绍了他在面向索尼PS5平台开发这款游戏时的一些体验。“对恐...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)