本文篇幅稍长，但比较综合地介绍了学习网安前必须了解的web前端相关知识，包括html、css及javascrip的t基本使用方法。
web基础概念知识（了解）
-
Web服务器：
也称为网站服务器，是指驻留于因特网上某种类 型计算机的程序。它可以处理浏览器等Web客户端的 请求并返回相应响应，也可以放置网站文件，让全世界浏览；还可以放置数据文件，供全世界下载。
IIS windows系统搭建网站的软件
阿帕奇 Linux系统搭建网站的软件
-
Web容器：
也称为Servlet容器或Web服务器），是一种服务器软件。它实现了Servlet和JavaServer Pages （JSP）规范，并提供了在服务器上运行Web应用程序的环境。可以看作是web服务器的拓展，功能比web服务器更加广泛。
-
Web开发框架
是一种提供开发者工具和功能的软件框架，用于简化和加速Web应用程序的开发过程、提高开发效率、简化开发流程、增强安全性、提高丰富的功能和工具、促进团队协作及代码复用。它提供了一套标准化的方法，使得开发人员可以更加高效地进行Web应用程序的开发。
-
Web（万维网）的组成构建主要包括以下几个核心部分：
客户端（前端）
服务器（后端）
数据库
-
web（万维网）的基本功能
资源共享
分布式处理与负载均衡
综合信息服务
HTML
HTML简介
-
html全称（hyper text markup language）译为超文本标记语言，它和其他编程语言不同的是，HTML不是一门真正意义上编程语言，而是一种标记语言，通过带有尖角号的标签对文本进行标记，从而实现网页的结构
推荐使用HBuilderX创建html、css、javascript
HTML语法
-
页面基本结构
-
先上示例，后面会逐一讲解
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>百度一下</title> <!--页面标题,ctrl + shift + / 是注释--> </head> <body> <h1>标题1</h1> <h2>标题2</h2> <p>第一个段落</p> <p>第二个段落<br /> <!--标签可嵌套--> 这是第二行</p> <br /> <img src="./photo.jpg" alt:="图片加载不出来时候的替换文本" width="1000px" height="1000px"> <a href="http://www.baidu.com">链接文本</a> <form action="http://www.baodu.com" method="get"> <!--点击提交之后跳转到action后的路径--> <!--method="get"规定了该url的请求方式，会将数据体接在url后面--> <!--method="post"则会将数据隐藏起来--> 账号：<input type="text" /><br /> 密码：<input type="password" /><br /> 性别：<input type="radio" name="sex" checked=""/>男 <!--checked表示默认选中--> <input type="radio" name="sex"/>女<br /> 爱好: <input type="checkbox" />唱歌 <input type="checkbox" />跳舞 <input type="checkbox" />rap <input type="checkbox" />篮球<br /> 自我介绍：<textarea></textarea><br /> 籍贯： <select> <option>北京</option> <option>上海</option> <option>湖南</option> <option>深圳</option> </select><br /> <input type="submit" > </form> </body> </html> -
标题标签
<h1>标题</h1> 到 <h6>标题</h6> -
段落标签
<p>第一个段落</p> -
换行
<br /> -
图片标签
<img src="./photo.jpg" alt:="图片加载不出来时候的替换文本" width="1000px" height="1000px"> <!--1000px表示1000个像素点--> -
超链接
<a href="url">链接文本</a> <!--超链接在HTML中通过 <a> 标签定义--> -
表单
<form></form>
CSS
CSS简介
- CSS是一种样式表语言，用于描述HTML文档的呈现。
- CSS 描述了在屏幕、纸张、 音频或其他媒体上的元素应该如何被渲染。
- CSS能够对网页中元素位置的排版进行像素级精确控制， 支持几乎所有的字体字号样式，拥有对网页对象和模型样 式编辑的能力。它不仅可以静态地修饰网页，还可以配合 各种脚本语言动态地对网页元素进行格式化
说白了CSS就是用来对html界面进行美化
CSS引入方式
行内样式
-
直接定义在 HTML 标签的 style 属性中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p style="color:red;">CSS引入方式一：行内样式。<br />直接定义在 HTML 标签的 style 属性中</p> </body> </html>
内嵌样式
-
写在style标签中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 这里对应着更改p标签的样式 */ p{ color:red; } </style> </head> <body> <p>html中css的内嵌样式，相当于预处理文本的样式，里面用花括号</p> </body> </html>
外嵌样式
-
将css写在一个单独的.css文件中，用link href引入，常用于样式表复用多时
/* .css文件中 */ p{ color:blue; }<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="./html-css3-style.css"> <!-- rel="stylesheet"申明其是一个样式表 --> <!-- href="./html-css3-style.css"申明css路径--> </head> <body> <p>html中css的外嵌样式</p> </body> </html>
三种样式可同时存在，优先级：行内样式>内嵌样式>外嵌样式，但不建议在一个html中使用多种样式
CSS选择器
id 选择器
- id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
- HTML元素以id属性来设置id选择器，CSS 中 id 选择器以 “#” 来定义。
class 选择器
- class 选择器用于描述一组元素的样式
- class 选择器有别于id选择器，class可以在多个元素中使用。
- class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点. 号显示
id选择器和class选择器举例
-
举例说明，如果不用选择器，上述的css style会应用于html中的所有段落，想要对特定的段落进行样式更改，则需要用到选择器
<!-- 没应用选择器时，这两个段落都会变色 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 这里对应着更改p标签的样式 */ p{ color:red; } </style> </head> <body> <p>选择器1</p> <p>选择器2</p> </body> </html><!-- 应用选择器后，可以针对某个段落进行变色处理 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 这里对应着更改id为d1的标签的样式 */ #d1{ color:red; } /* 这里对应着更改class为c1的标签的样式 */ .c1{ color:green; } </style> </head> <body> <p id="d1">选择器1</p> <p class="c1">选择器2</p> </body> </html> -
id选择器与class选择器的区别是：
-
一个id值在整个html文件中只能出现一次，不可重复使用
-
一个class值可以在整个html文件中出现多次，可以重复使用。所以class是针对一组元素进行样式更改
-
id以# 为前缀，class以. 为前缀
-
JavaScript
Javascript简介
- JavaScript是一种轻量级、解释型的高级编程语言，它是网页开发中不可或缺的一部分，主要用于客户端脚本处理。
- JavaScript可以用来为网页添加交互性，比如响应用户操作、 验证表单输入、动态更新内容等。 它也可以用于开发服务器端应用程序（通过Node.js等）。 JavaScript还被用于移动应用开发（如React Native）和游戏 开发。
Javascript组成
-
JavaScript可以给网页添加动态效果JavaScript通常由以下部分组成 ：
- 核心（ECMAScript）：提供语言的语法和基本对象；
- 文档对象模型（DOM）：提供操作html网页内容的方法和接口；（作用对象为网页html）
- 浏览器对象模型（BOM）：提供与浏览器进行交互的方法和接口，例如弹出移动，关闭窗口。（作用对象为浏览器）
JavaScript引入方式
内部引入script标签
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript">/* type="text/javascript"告诉浏览器接下来写的是javascript,随着技术进步，也不用写这句会默认下面为script语句 */ alert("这是一个警告框");/* alert为javascript内置方法，直接用 */ </script> </head> <body> <p id="d1">选择器1</p> <p class="c1">选择器2</p> </body> </html>
外部引入.js文件
-
js文件
/* .js文件 */ alert("这是一个警告框"); alert("这是一个警告框"); -
html文件中，使用script src引入
/* .html文件 */ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./html-js.js"></script> </head> <body> <p>html中js的外嵌样式</p> </body> </html>
JavaScript语法
输出语句：
-
alert 警告框（上面已经做了演示）
-
console 控制台
常用于调试，输出对应的结果；也会在控制台中显示错误输出
网页F12检查里 -> 控制台 ->可写入语句输出在控制台里
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> console.log("这是一条控制台语句") </script> </head> <body> </body> </html> -
document.write()
内部默认不能使用html语言，会报错。如果要在html内部使用的话，可以用document.write()方法<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> console.log("这是一条控制台语句") document.write("<p>这是html语言</p>") </script> </head> <body> </body> </html>
函数function
-
变量定义
var abc="123"; //var可自动识别变量类型，可以是字符串、数字等等任意类型 -
关键字function定义函数 函数使用分为两部分：声明、调用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function fun(a,b){ //申明 形参 console.log(a,b) } fun(56,19) //调用 实参 fun("文字1","文字2") //调用 </script> </head> <body> </body> </html>
JavaScript事件
-
JavaScript 中的事件（Event）是指发生在文档或浏览器窗口中，能够被JavaScript 侦测到的交互行为或其他动作。事件可以是用户的操作（如点击按钮、按键、移动鼠标等），也可以是系统行为（如页面加载、滚动、错误发生等）。
-
HTML DOM 事件说明：
https://www.runoob.com/jsref/dom-obj-event.html
-
事件举例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button value="button" onclick="alert('你按了警告按钮')">按钮</button> //注意双引号里面再用引号需要用单引号 </body> </html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
