前端新手必看!HTML、CSS 和 JavaScript 详解与实用案例全攻略
qiyuwang 2024-11-17 15:09 9 浏览 0 评论
大家好呀！我是魏大帅，一位热爱前端开发的程序员。今天在这呢，我来跟大家聊聊 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切换图片，点击“上一张”或“下一张”，图片切换自如，酷炫！
五、结尾
看完这篇，觉得有帮助就一键三连[赞][赞][赞]，关注我吧，你的关注就是我最大的动力，前端知识，我分享，你学，咱们一起进步[比心]
相关推荐
- MySQL常用函数详解，内含示例（mysql函数大全以及举例）
-
前言从今天开始本系列内容就带各位小伙伴学习数据库技术。数据库技术是Java开发中必不可少的一部分知识内容。也是非常重要的技术。本系列教程由浅入深,全面讲解数据库体系。非常适合零基础的小伙伴来学习。...
- PostgreSQL分区表操作:TRUNCATE TABLE技巧与优化
-
MySQL和PostgreSQL的分区表该如何操作，特别是TRUNCATEPARTITION这个功能，分区表在大数据场景下非常有用，能显著提升查询性能和管理效率。咱们一起来看看这两个数据库在分区表操...
- mysql的截取函数用法详解（mysql 截断函数）
-
substring()函数测试数据准备：用法：以下语法是mysql自动提示的1:substirng(str,pos)：从指定位置开始截取一直到数据完成...
- MySQL 截取整数位、小数位以及四舍五入的方法
-
本文介绍了如何在MySQL中截取整数部分和小数部分，并展示了如何进行一位小数的四舍五入操作，适用于数据处理和精度调整场景。...
- 第二十六章 Bat文件（bat文件百科）
-
第二十六章Bat文件bat文件是dos下的批处理文件。批处理文件是无格式的文本文件，它包含一条或多条命令。它的文件扩展名为.bat或.cmd。在命令提示下输入批处理文件的名称，或者双击该批处理...
- 自媒体良器:音频文件批处理，FFmpeg一行搞定!果断收藏
-
引言FFMpeg是众多多媒体应用程序的核心，但该程序本身不具备一次转换多个文件的能力。但也拦不住，FFMpeg本身是命令行程序，可编写脚本，借助Bash轻松快速地构建自动化程序。...
- 批处理:创建和删除文件夹命令（批处理命令 删除文件夹）
-
上一期，我们学习了文件夹的查看命令：tree和dir，以及文件夹切换命令：cd，今天，我继续给大家讲解下批处理的目录（文件夹）操作命令：创建和删除。一.md：创建目录（文件夹）可以在当前文件夹下创建...
- 利用VBA创建新的工作簿（vba 创建工作簿）
-
【分享成果，随喜正能量】我告诫自己：你的话说得太多，你听别人倾诉得太多，你咖啡喝得太多，你在陌生的房间里坐的时间太长，你的睡眠质量太差，你醒着的时间太长，你平庸的事想得太多，你希望过多，你安慰自己太频...
- 实用小工具，注册表文件快速转换.bat文件
-
关于注册表注册表是Windows操作系统中的一个核心数据库，它用于存储系统和应用程序的设置信息。这个数据库文件控制着Windows操作系统的外观和如何响应外来事件的工作方式。注册表包含了各种参数，直接...
- 如何给自己的电脑做一个截图工具?现场教会你具体流程和步骤
-
做自媒体，经常要用到一些图片，有时候图片上有水印去不掉，这时候要是有一个能随意截图的工具该有多少呀！今天教授让大家自己设计一个截图工具。下面就是流程和步骤：1、在电脑页面的任意位置，点击鼠标右键，新建...
- Windows使用批处理文件更改目录下的文件名(含序号)
-
从网上下载的图片，默认的名字是由许多字母和数字组成的比较长的一个字符串，不便于人记忆，使用起来比较麻烦。如下图所示：本文的目的是写一个批处理文件，将该目录中的所有扩展名为jpeg的文件改名为日期加序号...
- 学习VB编程第35天，如何调用bat批处理
-
今天学习了刘金玉老师零基础VB教程的第43期，学习的主要内容是如何调用bat批处理登录。一、什么是批处理1.什么是命令提示符（cmd）？在Windows开始菜单运行（windows+r键也可调出）中输...
- 利用bat让文件在指定时间自动进行备份
-
在很多时候，我们需要备份电脑中的一些文件，特别是企业服务器的备份，可能是有一些文件每天都会有更新，或者定期更新，而文件又是相对比较重要的，需要我们定时去备份。可有时候文件比较大，备份时间比较长，或者在...
- BAT 批处理脚本教程（批处理脚本编写教程）
-
BAT批处理脚本教程第一章批处理基础第一节常用批处理内部命令简介批处理定义：顾名思义，批处理文件是将一系列命令按一定的顺序集合为一个可执行的文本文件，其扩展名为BAT或者CMD。这些命令统称批处...
- Windows系统bat批处理常用命令(一)
-
一、批处理中常用的命令：@命令：加在每个命令行的最前面，表示运行时不显示这一行的命令行。eg:@echooff//不显示后续命令行及当前命令行...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- navicat无法连接mysql服务器 (65)
- 下横线怎么打 (71)
- flash插件怎么安装 (60)
- lol体验服怎么进 (66)
- ae插件怎么安装 (62)
- yum卸载 (75)
- .key文件 (63)
- cad一打开就致命错误是怎么回事 (61)
- rpm文件怎么安装 (66)
- linux取消挂载 (81)
- ie代理配置错误 (61)
- ajax error (67)
- centos7 重启网络 (67)
- centos6下载 (58)
- mysql 外网访问权限 (69)
- centos查看内核版本 (61)
- ps错误16 (66)
- nodejs读取json文件 (64)
- centos7 1810 (59)
- 加载com加载项时运行错误 (67)
- php打乱数组顺序 (68)
- cad安装失败怎么解决 (58)
- 因文件头错误而不能打开怎么解决 (68)
- js判断字符串为空 (62)
- centos查看端口 (64)