期末考试结束后,我开始了安全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="nav">
<span style="float: left;">
<a href=" ">新闻</a >
<a href="#">hao123</a >
<a href="#">地图</a >
<a href="#">贴吧</a >
<a href="#">视频</a >
<a href="#">图片</a >
<a href=" ">网盘</a >
<a href="#">文库</a >
<a href="#">更多</a >
</span>
<span style="float: right;">
<a href="#">设置</a >
<button id="login">登录</button>
</span>
</div>
<div id="header">
< img src="bai百度.jpg" width="300" hight="300" alt="logo"/>
</div>
<div id="search-container">
<input type="text" id="search-box" value="百度一下,你就知道">
<button id="search-button" οnclick="searchBaidu()">百度一下</button>
<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>
<script>
function searchBaidu() {
var searchInput = document.getElementById('search-box');
var searchTerm = searchInput.value;
console.log('搜索:', searchTerm);
}
</script>
</body>
</html>