HTML、CSS、JavaScript学习-CSDN博客

本文链接：https://blog.csdn.net/2302_79688307/article/details/135719524

期末考试结束后，我开始了安全web的基础学习，在学习HTML、CSS和JavaScript之前，我总觉得网页开发是一项复杂且深奥的技能，但随着学习的深入，我逐渐认识到，这些其实都是非常基础且必要的技能。

（学习工具：b站看名笑，菜鸟教程）

HTML：网页骨架的搭建者
HTML是网页的基础，它负责网页的结构。学习HTML的过程相对简单，主要是学习各种标签，如标题、段落、链接、图片等。但是，真正掌握HTML需要理解语义化标签、HTML5新特性以及如何合理使用表格和div布局。
CSS：网页的华丽外衣
CSS是用来描述网页外观和格式的语言。与HTML相比，CSS的学习曲线稍微陡峭一些。需要理解盒模型、布局、浮动、定位等概念。而要掌握CSS，则需要对CSS选择器、CSS3新特性以及动画有深入的了解。
JavaScript：网页的灵魂
JavaScript负责网页的行为。在学习JavaScript的过程中，我首先被其丰富的API和事件驱动的编程模型所吸引。但随着学习的深入，我逐渐认识到，JavaScript的核心其实是函数、作用域和闭包。此外，对于异步编程和性能优化也需要有深入的理解。

一、HTML学习
1. HTML基础
HTML 是网页内容的骨架，它使用各种标签来描述网页内容
常见的 HTML 标签包括 <h1> 到 <h6> (标题)、<p> (段落)、<a> (链接)、<img> (图片) 等
一个基本的 HTML 结构通常包含 <!DOCTYPE html>, <html>, <head> 和 <body>

2. 文本格式化
使用 <h1> 到 <h6> 来表示标题，其中 <h1> 是最大的标题，<h6> 是最小的
使用 <p> 标签来创建段落
使用 <em> 和 <strong> 来表示强调和重要文本

3. 链接
使用 <a> 标签来创建链接。例如：<a href="https://www.example.com">访问网站</a>
可以使用 target="_blank" 属性在新窗口打开链接

4. 图片
使用 <img> 标签来插入图片。例如：<img src="image.jpg" alt="描述图片">
src 属性指定图片的来源，alt 属性提供图片的描述

5. 列表
使用 <ul> 或 <ol> 标签来创建无序或有序列表
无序列表使用 <li> 标签，有序列表使用 <ol> 和 <li>

6. 表单
使用 <form> 标签来创建表单
使用 <input> 标签来创建各种输入字段，如文本、密码、复选框等
使用 <button> 标签来创建按钮

7. CSS样式
HTML 和 CSS 可以结合使用，使网页更美观。通过内联样式、内部样式表或外部样式表将 CSS 应用到 HTML 中
CSS 选择器用于选择要应用样式的 HTML 元素，如 p { color: red; } 将使所有段落文本变为红色

8. JavaScript交互
HTML 可以与 JavaScript 结合，实现动态交互效果。JavaScript 可以直接在 HTML 中编写或放在外部 .js 文件中
DOM (Document Object Model) 是 JavaScript 与 HTML 交互的接口，可以通过它来操作页面元素

二、CSS学习

学习CSS是构建网页样式和布局的关键一步

基本概念：

1. 选择器（Selectors）：选择器用于选择HTML元素，并将样式应用于这些元素。例如，div、.class、#id都是选择器

2. 属性（Properties）：属性是样式规则的具体设置，控制元素的外观。例如，color、font-size、margin 是属性

3. 值（Values）：属性的值是具体的样式设置。例如，red、16px、10px 20px 都是值

4. 盒模型（Box Model）：每个HTML元素都被视为一个矩形盒子，包括内容区、内边距、边框和外边距

常用属性：

1. 颜色和背景：
- color：文本颜色
- background-color：背景颜色
- background-image：背景图片

2. 文本样式：
- font-family：字体
- font-size：字体大小
- font-weight：字体粗细
- text-align：文本对齐方式

3. 布局：
- width：宽度
- height：高度
- margin：外边距
- padding：内边距
- border：边框

4. 定位：
- position：元素定位方式（static, relative, absolute, fixed）
- top, right, bottom, left：相对于定位父元素的位置

5. 显示和隐藏：
- display：元素的显示方式（block, inline, none）
- visibility：元素的可见性

6. 其他：
- float：元素浮动
- clear：清除浮动
- border-radius：边框圆角
- box-shadow：盒子阴影

选择器：

1. 基本选择器：
- 元素选择器：div、p
- 类选择器：.class
- ID选择器：#id

2. 组合选择器：
- 后代选择器：div p
- 子元素选择器：div > p
- 相邻兄弟选择器：h2 + p

3. 伪类和伪元素：
- :hover 鼠标悬停
- :nth-child(n) 第n个子元素
- ::before 和 ::after 伪元素

CSS3 新特性：

1. Flexbox：弹性盒子布局
2. Grid：网格布局
3. 动画和过渡：@keyframes 和 transition 属性
4. 响应式设计：使用媒体查询

示例代码：

css
/* 基本样式设置 */
body {
font-family: "Arial", sans-serif;
background-color: #f4f4f4;
}

/* 元素选择器 */
h1 {
color: #333;
}

/* 类选择器 */
.button {
background-color: #3498db;
color: #fff;
padding: 10px 20px;
}

/* ID选择器 */
#header {
border-bottom: 1px solid #ccc;
}

/* 盒模型 */
.box {
width: 200px;
height: 100px;
margin: 10px;
padding: 20px;
border: 1px solid #ddd;
}

/* 伪类和伪元素 */
a:hover {
text-decoration: underline;
}

li::before {
content: "• ";
color: #333;
}

三、javascript

1、变量和数据类型：
变量：在JavaScript中，使用var、let或const关键字声明变量
var name = "Alice";
let age = 25;
const isStudent = true;

数据类型：JavaScript中有多种数据类型，如字符串（String）、数字（Number）、布尔值（Boolean）、对象（Object）、数组（Array）等
var str = "Hello, World!"; // 字符串
var num = 100; // 数字
var bool = true; // 布尔值
var obj = { name: "John", age: 30 }; // 对象
var arr = [1, 2, 3, 4]; // 数组

2、运算符：
加法运算符：
var sum = 5 + 3; // sum 的值为8

比较运算符：
var isEqual = (5 === 5); // isEqual 的值为true

3、条件语句：
if语句：
if (num > 10) {
console.log("数字大于10");
}

4、循环语句：
for循环：
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]); // 输出数组元素
}

5、函数：
函数定义：
function greet(name) {
console.log("Hello, " + name);
}

6、数组：
访问数组元素：
console.log(arr[0]); // 输出数组的第一个元素

7、事件处理：
在HTML元素上添加事件监听器，例如点击事件：
<button οnclick="handleClick()">点击我</button>

以下是我用这几天所学写的静态百度界面（尝试了很多方法，那个百度的logo就是移不到中间啊啊啊啊啊啊啊啊🥳，持续努力ing😇）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度一下，你就知道</title>
<style>
body {
font-family: sans-serif;
background-color: #fff;
margin: 0;
padding: 0;
}

#header {
text-align: center;
color: #fff;
}

#header img {
display: block;
margin: 0 auto;
}

#nav {
padding: 10px;
text-align: center;
font-size: 14px;
}

#login {
padding: 5px 10px;
background-color: #3385ff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}

#search-container {
text-align: center;
margin: 20px auto;
}

#search-box {
padding: 10px;
width: 500px;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;
font-size: 16px;
}

#search-button {
padding: 10px 20px;
background-color: #3385ff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}

#hot-search {
margin-top: 20px;
text-align: center;
}

.hot-search-item {
text-align: left;
display: inline-block;
margin: 5px;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
border-collapse: separate;
border-spacing: 30px;
}

#footer {
color: #666565;
font-size: 12px;
padding: 10px;
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
a:link{color:#666565; text-decoration:none;}
a:visited{color: #666565;}
a:hover{color: #666565;}
a:active{color: #666565;}
}

a:link{color:#0b0b0b; text-decoration:none;}
a:visited{color: #0b0b0b ;}
a:hover{color: #3265f0;}
a:active{color: #d54040;}

</style>
</head>
<body>

<div id="hot-search">
<table class="hot-search-item">
<h3>百度热搜：</h3>
<tr>
<td >南方雨雪天气如约而至</td>
<td >在天津不吃天津菜</td>
</tr>
<tr>
<td >有时候觉得这个世界真的挺奇妙的</td>
<td >龙年大吉啊啊啊</td>
</tr>
<tr>
<td>上大学哪有不疯的！！</td>
<td>当离别开出花~~~</td>
</tr>
</table>
</div>

</div>

<div id="footer">
<a href="#">关于百度</a >
<a href="#">About Baidu</a >
<a href="#">使用百度前必读</a >
<a href="#">帮助中心</a >
<a href="#">企业推广</a >
<a href="#">京公网安备00000000000号</a >
<a href="#">京ICP证202401号</a >
<span>互联网新闻信息服务许可证13110000000 网络文化经营许可证：京网文〔2024〕1234-111号</span>
</div>

</body>
</html>