1. HTML基本标签与网页结构
HTML概述
HTML（Hypertext Markup Language）是用于创建Web页面的标准标记语言。它定义了网页的基本结构，通过各种HTML标签来描述网页的内容和布局。HTML的主要作用是为浏览器提供内容的结构，使用户能够查看到网站的文本、图片、链接等信息。
HTML文档结构
HTML文档的结构通常包含以下几个部分：
-
文档类型声明（DOCTYPE）：告诉浏览器使用哪个版本的HTML或XHTML标准来解析页面。最新版本为HTML5。
<!DOCTYPE html> -
html标签：整个HTML页面被包裹在
<html>标签内。<html lang="en"> </html> -
head标签：定义网页的元数据（如标题、字符集、链接样式文件等），浏览器不会直接显示
head中的内容。<head> <meta charset="UTF-8"> <title>Page Title</title> </head> -
body标签：网页的可视内容部分，所有用户可以看到的文本、图片、链接等都放在
<body>标签内。<body> <h1>Welcome to My Webpage</h1> </body>
常用HTML标签
-
文本标签：
<h1>到<h6>：定义标题，<h1>是最大的标题，<h6>是最小的。<p>：定义段落。<b>：加粗文本。<i>：斜体文本。<a href="URL">：定义超链接。<strong>：强调文本（加粗并有语义含义）。<em>：强调文本（斜体并有语义含义）。
-
列表标签：
<ul>：无序列表，内部使用<li>标签定义每个列表项。<ol>：有序列表，内部使用<li>标签定义每个列表项。
-
表格标签：
<table>：定义表格。<tr>：定义表格行。<th>：定义表格头部单元格。<td>：定义表格数据单元格。
-
表单标签：
<form>：定义表单。<input>：定义输入控件。<textarea>：定义多行文本框。<button>：定义按钮。
-
媒体标签：
<img src="image.jpg" alt="image description">：定义图片。<audio src="audio.mp3" controls>：定义音频文件。<video src="video.mp4" controls>：定义视频文件。
HTML5新增功能
随着HTML5的引入，许多新特性和标签得到了支持，特别是多媒体、图形绘制、离线存储等方面的增强。
- 语义化标签：如
<header>,<footer>,<article>,<section>,<nav>等。 - 音频与视频标签：
<audio>,<video>标签用于嵌入音频和视频文件。 - 表单新控件：如
<input type="email">,<input type="date">,<input type="range">等，增强表单交互性。 - Canvas元素：
<canvas>用于在Web页面上绘制图形。 - 本地存储：
localStorage和sessionStorage为Web应用提供了客户端存储功能。 - Web Workers：使得Web页面可以在后台线程中执行JavaScript代码，提高性能。
HTML页面示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Webpage</title>
</head>
<body>
<header>
<h1>Welcome to My Webpage</h1>
</header>
<section>
<p>This is a paragraph of text on my webpage.</p>
<a href="https://www.example.com">Click here</a> to visit an external site.
</section>
<footer>
<p>© 2024 My Webpage</p>
</footer>
</body>
</html>2. CSS样式与布局
CSS概述
CSS（Cascading Style Sheets）是层叠样式表的缩写，它用于描述HTML元素的展示样式。CSS使得开发者能够控制网页的布局、字体、颜色、间距等属性，从而使网页更加美观且易于用户使用。通过CSS，开发者可以分离网页的内容和外观，增强页面的可维护性和可复用性。
CSS基本语法
CSS规则由选择器和声明块组成：
- 选择器：指定哪些HTML元素应用此规则。
- 声明块：包含一组CSS属性及其值，用花括号包围。
selector {
property: value;
}例如，设置页面标题的颜色为红色：
h1 {
color: red;
}常用CSS属性
-
文本相关：
color: 设置文本颜色。font-size: 设置字体大小。font-family: 设置字体。text-align: 设置文本对齐方式（left, center, right）。
-
盒模型相关：
width: 设置元素的宽度。height: 设置元素的高度。margin: 设置元素的外边距。padding: 设置元素的内边距。border: 设置元素的边框。
-
背景相关：
background-color: 设置背景颜色。background-image: 设置背景图片。background-size: 设置背景图片的大小。
-
布局相关：
display: 设置元素的显示类型（如block, inline, flex, grid等）。position: 设置元素的定位方式（relative, absolute, fixed, sticky）。flex: 用于Flexbox布局的快捷方式。grid: 用于CSS Grid布局的快捷方式。
CSS布局模型
- 普通文档流布局：每个元素按照文档的顺序垂直排列，占据父容器的全部宽度。
- Flexbox布局：通过
display: flex创建灵活的布局结构，可以在一个容器中对元素进行方向、对齐、排序等控制。 - Grid布局：通过
display: grid创建网格布局，使元素可以在两维上进行精确控制。
Flexbox布局示例
.container {
display: flex;
justify-content: space-between;
align-items: center;
}<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>Grid布局示例
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>CSS媒体查询
媒体查询允许开发者根据不同的设备特性（如屏幕宽度、分辨率等）来应用不同的CSS样式。这使得Web页面能够在不同设备上呈现出最佳效果。
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}3. JavaScript基础语法与DOM操作
JavaScript概述
JavaScript是一种高效、灵活且功能强大的脚本语言，用于为网页增加互动性。它广泛应用于浏览器端开发，允许开发者在网页中实现动态效果、与服务器交互、处理用户输入等功能。
JavaScript基础语法
-
变量声明： JavaScript提供了三种声明变量的方式：
var、let、const。let name = "John"; // 可以修改的变量 const age = 30; // 不可修改的常量 var city = "New York"; // 旧的声明方式，不推荐使用 -
数据类型： JavaScript有六种原始数据类型：
String、Number、Boolean、Null、Undefined、Symbol。 -
运算符：
- 算术运算符：
+,-,*,/,%等。 - 逻辑运算符：
&&,||,!等。 - 比较运算符：
==,===,!=,!==,>,<,>=,<=等。
- 算术运算符：
-
控制结构：
- 条件判断：
if,else if,else。 - 循环：
for,while,do-while。
- 条件判断：
DOM操作
DOM（Document Object Model）是浏览器为HTML文档提供的对象表示模型，JavaScript可以通过DOM操作来动态改变页面的内容和结构。
-
获取元素：
const element = document.getElementById("myElement"); // 根据ID获取元素 const elements = document.getElementsByClassName("myClass"); // 根据类名获取元素 const queryElements = document.querySelectorAll(".myClass"); // 使用CSS选择器获取元素 -
修改元素内容：
element.innerHTML = "New Content"; // 修改元素的HTML内容 element.textContent = "New Text"; // 修改元素的文本内容 -
修改元素样式：
element.style.backgroundColor = "blue"; // 修改元素的背景色 -
事件处理：
element.addEventListener("click", function() { alert("Element clicked!"); });
JavaScript事件示例
<button id="myButton">Click Me</button>
<script>
document.getElementById("myButton").addEventListener("click", function() {
alert("Button clicked!");
});
</script>总结
本节详细介绍了HTML、CSS和JavaScript的基础知识，并展示了如何使用这些技术来构建和美化网页。掌握这些基础是成为一名合格的Web开发者的前提。随着前端开发技术的不断发展，了解如何使用这些技术来实现更复杂的交互和布局将是后续学习的重点。
关于作者：
15年互联网开发、带过10-20人的团队，多次帮助公司从0到1完成项目开发，在TX等大厂都工作过。当下为退役状态，写此篇文章属个人爱好。本人开发期间收集了很多开发课程等资料，需要可联系我
