渗透之前端基础

00phpstudy安装使用

环境：win10 x64位虚拟机，phpstudy2018版本

功能1：

允许目录列表

配置文件删除index.php、l.php

访问打开

01HTML文档结构

项目有前后端分离的和前后端不分离的，不分离的就是前端代码和后端代码放到一起了，前后端分离的就是前端代码和后端代码都单独存放了。前后端不分离的这种项目，是后端语言代码会对前端html文件进行一些动态数据的渲染操作，而前后端分离开的项目，后端不会对前端html文件进行动态渲染，而是将数据给到前端js代码，js代码来自己完成数据的动态渲染。流行的前端后分离的前端框架，比如vue、react等等。

超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言，网页文件的扩展名：.html或.htm

最基本的文档结构

bash 复制代码

<!DOCTYPE html> 
<html lang="zh-CN">   <!--这个lang表示语言，zh-CN是中文的意思，就是说，整个文档的内容以中文为主，如果以英文为主，就写成lang='en'-->
<head> 
  <meta charset="UTF-8">
  <title>Krystal小站</title>
</head>
<body> 
 唯有学习
  <h1>使我快乐</h1>
</body>
</html>

文档结构介绍

bash 复制代码

<!DOCTYPE html> 声明文档类型为HTML文档。
<html>、</html>是文档的开始标记和结束的标记。
<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据，配置信息等，是给浏览器看的，你看到的是在body标签里面写的。
<title>、</title>定义了网页标题，在浏览器标题栏显示。（修改一下title中的内容，然后看一下浏览器，你就会发现title是什么了）
<body>、</body>之间的文本是可见的网页主体内容。
<meta charset="utf-8"/>网页编码
<meta name="Keywords" content="关键字" />   搜索引擎关键字：
<meta name="Description" content="简介、描述" /> 网站的简介和描述

标签语法

bash 复制代码

<标签名 属性1="属性值1" 属性2="属性值2"......>内容部分</标签名>   # 全封闭  
<标签名 属性1="属性值1" 属性2="属性值2"...... /> # 自封闭
语法说明：
   HTML标签是由尖括号包围的关键字，如<html>, <div>等
   HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。
   也有一部分标签是单独呈现的，比如：<br>、<hr>、<img src="1.jpg" />等。
   标签里面可以有若干属性，也可以不带属性。

02常用标签

文本标签

bash 复制代码

<br/> 换行
 <hr> 分割线
 <p>...</p> 换段
 <i>...</i> 斜体
 <em>...</em> 强调斜体，和i标签效果一样
 <b>...</b> 加粗
 <strong>...</strong> 强调加粗，和b标签效果一样
 <hn>...</hn> 其中n为1--6的值。 标题标签（加粗、独占一行）
 <sub>... </sub>  <sup>...</sup> 下标 上标
 <del></del> 删除线

演示：

bash 复制代码

<br/> 换行

bash 复制代码

<hr> 分割线

bash 复制代码

 <p>...</p> 换段

bash 复制代码

<i>...</i> 斜体，不换行

bash 复制代码

<b>...</b> 加粗

bash 复制代码

<strong>...</strong> 强调加粗，和b标签效果一样

bash 复制代码

<sub>... </sub>  <sup>...</sup> 下标 上标

bash 复制代码

<del></del> 删除线

特殊符号

bash 复制代码

&lt;
&gt;
# https://www.runoob.com/html/html-entities.html

HTML注释符号

bash 复制代码

<!-- 注释内容 -->

列表标签

bash 复制代码

<ul> 无序列表 type类型值：circle、disc、square
<ol> 有序列表 其中type类型值：A a I i 1   start属性表示起始值
<li> 列表项

超链接标签

bash 复制代码

<a href=""></a> 超级链接标签
 属性：href必须，指的是链接跳转地址(外部链接地址、内部链接地址)，外部链接地址就写完整网址，内部链接地址可以写相对路径地址
 target: 表示链接的打开方式：
 _blank 新窗口
 _self   本窗口（默认）
 title：文字提示属性（详情）
 锚点链接：当前网页不同位置的跳转的
 设置锚点：   <p id='a1'>我在这儿</p>
 使用锚点： <a href="#a1">跳到id属性为a1的标签位置</a>
 <a href=''>哈哈</a> # 刷新页面
 <a>哈哈</a> # 普通文本效果
 <a href='#'>哈哈3</a>
 <a href='javascript: void(0);'>哈哈3</a> <!-- javascript: void(0);是一段js代码 
-->

外部链接地址写完整网址

内部链接地址可以写相对路径地址

bash 复制代码

 锚点链接：当前网页不同位置的跳转的
 设置锚点：   <p id='a'>锚点a</p>
 使用锚点： <a href="#a">跳到id属性为a的标签位置</a>

img图片标签

bash 复制代码

<img /> 在网页中插入一张图片
 属性：src： 图片名及url地址
 alt: 图片加载失败时的提示信息
 title：文字提示属性
 width：图片宽度  
 height：图片高度
 #高度和宽度的单位可以是px，叫做像素，和屏幕的分辨率有关系：1080p = 1920*1080px，同
样大小像素的图片，像素越大的显示器显示出来的图片看上去越小。 图片像素越大、屏幕分辨率越大，看上去就越逼真
 border：边框线粗细

多媒体标签(仅限于在html5)

bash 复制代码

# html4  
# html5 -- h5
<audio controls="controls">
  <source src="bgm.mp3" type="audio/mpeg" />
你的浏览器不支持播放mp3
</audio> 
 autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。 
 controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。 
 preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 
"autoplay"，则忽略该属性。
<video controls="controls" width="400" height="400" loop 
poster="./images/linux.jpg">
    <source src="./mus/back.mp4" type="video/mp4" />
   你的浏览器不支持视频播放
</video>

div和span

bash 复制代码

div   #独占一行，此外没有其他效果
span #不独占一行，此外没有其他效果
内敛标签：不独占一行的标签叫做内敛标签，内敛标签不能嵌套块级标签
块级标签：独占一行的标签叫做块级标签

table表格标签

bash 复制代码

<table border='1'>
    <thead> 
        <tr> 
            <th>序号</th> 
            <th>姓名</th>
            <th>爱好</th>
        </tr>
    </thead>
    <tbody> 
        <tr> 
            <td>1</td> 
            <td>jaden</td>
            <td>杠娘</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Yuan</td>
            <td>日天</td>
        </tr>
    </tbody>
</table>

input标签

bash 复制代码

type属性值：
   # 下面三类input标签必须有一个name属性
       text   #单行输入文本
       password #密码输入框（不显示明文）
       date #日期输入框 
   # 下面两个选择框必须有name属性和value属性
       checkbox #复选框
       radio #单选框
   # 提交按钮
       submit： <input type="submit" value="提交" /> 
   # 文件选择框
       file： <input type="file"  />

select标签

bash 复制代码

<select name="city" id="city" >
    <option value="1">北京</option>  
    <option value="2">上海</option>
    <option value="3">广州</option>
    <option value="4">深圳</option>
</select>
multiple：布尔属性，设置后为多选下拉框，否则默认单选

textarea多行文本标签

bash 复制代码

<textarea name="memo" id="memo" cols="30" rows="10"></textarea>
name="memo" id="memo" cols="30" rows="10"

form表单标签

通过form表单标签，能够让我们完成前端与后台的数据交互，比如：能够将用户输入或者选择或者上传的文件等内容发送到后台，后代程序再将数据保存到数据库中。

bash 复制代码

<form action="http://www.baidu.com" method="get">
   用户名：<input type="text" name="username">
   密码：<input type="password" name="password">
    <input type="submit">
</form>

bash 复制代码

type='hidden'

隐藏数据,用户填写完成后，提交到后台

03CSS

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，给HTML设置样式，让它更加美观。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

语法

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

bash 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        div{
            color:red;
       }
    </style>
</head>
<body>
<div>
   你好呀！
</div>
</body>
</html>

css引入方式

方式1：行内样式优先级最高

bash 复制代码

 <div style='color:blue'>
   你好呀！
</div>

方式2：内部样式优先级s

写到head标签中的style标签的就叫做内部样式

方式3：外部样式

bash 复制代码

 <link href="tt.css" rel="stylesheet" type="text/css"/>

tt.css文件

bash 复制代码

div{
	color:yellow;
}

css选择器 -基础选择器

标签选择器：标签名称来找标签

bash 复制代码

 div{
        color:red;
 }

id选择器：标签的id属性值来找标签

bash 复制代码

<div id="d1">你好呀</div>
    #d1{
        color:yellow;
 }

class选择器：标签class属性值来找标签

bash 复制代码

   <div class="c1">你好呀</div>
    .c1{
        color:blue;
 }

css属性

color颜色属性：

bash 复制代码

2. RGB颜色: 红(R)、绿(G)、蓝(B)三个颜色通道的变化
 background-color: #CCCCCC;
 2. RGBA颜色: 红(R)、绿(G)、蓝(B)、透明度(A)
 background-color: rgba(0,0,0,0.5);

字体属性： font

bash 复制代码

 font
   *font-size: 字体大小：20px，60%基于父对象的百分比取值
   *font-family： 字体：宋体，Arial font-family: "Microsoft Yahei";
 font-style： normal正常；italic斜体； oblique倾斜的字体 
   *font-weight： 字体加粗 ：bold。

文本属性：

bash 复制代码

text-indent: 首行缩进：text-indent:30px;
 text-overflow： 文本的溢出是否使用省略标记（...）。clip|ellipsis（显示省略标记）
 white-space:nowrap; /* 强制在同一行内显示所有文本*/
 overflow:hidden;white-space: nowrap;text-overflow:ellipsis;
 
 多行溢出显示省略号:
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3;
 overflow: hidden;
 
 *text-align: 文本的位置：left center right
 *text-decoration: 字体画线：none无、underline下画线，line-through贯穿线 a
 *text-shadow: 文本的文字是否有阴影及模糊效果
 text-shadow:1px 1px rgba(0,0,0,0.3);
 *letter-spacing: 文字或字母的间距
 *line-height：行高
 *color： 字体颜色

边框：

bash 复制代码

border:宽度 样式 颜色;
 border-color;
 border-style; 边框样式：solid实x，dotted点状线，dashed虚线
 border-width:
 border-left-color;
 border-left-style;
 border-left-width: 
 ...
 CSS3的样式
 border-radius：圆角处理
 box-shadow: 设置或检索对象阴影

背景属性：background

bash 复制代码

*background-color: 背景颜色
 *background-image: 背景图片
 *background-repeat：是否重复，如何重复?(平铺)              
 *background-size: 背景大小，如 background-size:100px 140px;

内补白（内补丁）

bash 复制代码

padding： 检索或设置对象四边的内部边距,如padding:10px; padding:5px 
10px;
 padding-top： 检索或设置对象顶边的内部边距
 padding-right： 检索或设置对象右边的内部边距
 padding-bottom：检索或设置对象下边的内部边距
 padding-left： 检索或设置对象左边的内部边距

7.*外补白（外补丁）

bash 复制代码

margin： 检索或设置对象四边的外延边距,如 margin:10px; margin:5px auto;
 margin-top： 检索或设置对象顶边的外延边距
 margin-right： 检索或设置对象右边的外延边距
 margin-bottom： 检索或设置对象下边的外延边距
 margin-left： 检索或设置对象左边的外延边距

04Javascript

JavaScript 是脚本语言，JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

js代码引入方式

方式1： script标签内写代码

bash 复制代码

  <script>
      //alert('hello，my girl') #这个是浏览器窗口一打开咱们这个文件，就弹出一个窗口
    </script>

方式2：外部文件引入

bash 复制代码

 <script src="myscript.js"></script>

方式3：外部网址引入

bash 复制代码

 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

js三大功能

bash 复制代码

js编程     #实现一些代码逻辑，数据处理，发送请求接受响应等
js操作BOM #通过js控制浏览器来帮你做一些效果，比如alert   BOM：浏览器对象模型
js操作DOM #通过js控制所有的html标签，实现动态样式效果   DOM：文档对象模型

基础知识

bash 复制代码

变量声明
 var a = 1;
 var a = 3;
 var b = 2;
 c = a + b

js操作BOM

js操作浏览器对象模型

bash 复制代码

alert('123')

js操作DOM

js操作文档对象模型

基础内容

bash 复制代码

查找标签
   document.getElementById           根据ID获取一个标签 这个了解一下就行了。
    
   document.getElementsByClassName   根据class属性获取（可以获取多个元素，所以返回的是
一个数组）
   document.getElementsByTagName     根据标签名获取标签合集

重点内容：

a标签特殊性,能够运行js代码

bash 复制代码

<a href="javascript:alert(123);">百度</a>

2.绑定事件：比如点击div标签，弹出一个alert的窗口

bash 复制代码

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <style>
                div{
                    height: 100px;
                    width: 100px;
                    background-color: green;
               }
            </style>
        </head>
        <body>
        <!--<div onclick="alert(123)"></div>-->
        <div id="div1" onclick="show();"></div>
        </body>
        <script>
            var divEle = document.getElementById('div1');
            divEle.onclick = function (){
                alert('222');
           }
        </script>
    </html>

重点注意：src能够获取外部地址的js文件，也就是主动发送请求获取数据

bash 复制代码

<script 
src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

常用事件

bash 复制代码

常用事件
   onclick       当用户点击某个对象时调用的事件句柄。
   ondblclick     当用户双击某个对象时调用的事件句柄。
   onfocus       元素获得焦点。               // 练习：输入框
   onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框
时,代表已经输入完了,我们可以对它进行验证.
   onkeydown     某个键盘按键被按下。         应用场景: 当用户在最后一个输入框按下回车按
键时,表单提交.
   onkeypress     某个键盘按键被按下并松开。
   onkeyup       某个键盘按键被松开。
   onload         一张页面或一幅图像完成加载。
   onmousedown   鼠标按钮被按下。
   onmousemove   鼠标被移动。
   onmouseout     鼠标从某元素移开。
   onmouseover   鼠标移到某元素之上。
   onselect     在文本框中的文本被选中时发生。
   onsubmit     确认按钮被点击，使用的对象是form。

js框架

jquery\nodejs\vue\react\angularjs等等

jquery和ajax

bash 复制代码

https://www.bootcdn.cn/
https://jquery.com

可以远程网址引入、可以下载下来本地引入

bash 复制代码

<button id='btn'>查看天气</button>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js'></script>
<script>
 $('#btn').click(function(){
 console.log(123);
 $.ajax({
    type:'get',
            // api数据接口
 //url:'https://www.toutiao.com/stream/widget/local_weather/data/?
city=%E5%8C%97%E4%BA%AC',
            url:'https://www.toutiao.com/stream/widget/local_weather/data/',
            data:{'city': '北京'},
 dataType: "json",
 success: function(ret){
 //console.log(ret);
 alert(JSON.stringify(ret));
 }
 
 
 });
 
 })
</script>

ajax可以发送网络请求，获得响应数据

bootstrap

快速开发网站页面的框架。

https://www.bootcss.com/