前端三件套

2021/12/6 23:18:24

编程Tag： 前端选择器属性标签 id ... XXX 三件套

本文主要是介绍前端三件套，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

HTML(Hyper Text Markup Language)

概述

什么是超文本：文字，图片，动画，视频，动画

目前是HTML5和CSS3；

W3C联盟制定的标准：

结构化标准：HTML

行为标准：JavaScript

表现标准：CSS

常见IDE

IntelliJ

模板标签和网页基本信息

自闭和标签：单个标签

闭合标签：成对出现

如何写注释

<!DOCTYPE html>
<html lang = "EN">
<head>
<meta charset = "UTF-8">
<title>标题</title>
<head>
<body>

</body>
</html>

DOCTYPE标签:规定规范；

html标签：总标签

head标签：头部

body标签：网页主体

title：just title

meta标签：描述性的标签，用来描述信息，搜索引擎优化SEO

网页基本标签

<h1>一级标签</h1>
<h2>二级标签</h2>


<p>第一段</p>
<p>第二段</p>
<p>第三段</p>


There must be something!<br/>Then they're gone!


<hr/>


<b>粗体标签1</b>
<i>斜体标签1</i>
<strong>粗体标签2</strong>
<em>斜体标签2</em>
<br/>

空格：     这么多空格！<br/>
大于号：><br/>
小于号：<<br/>
版权符号：©<br/>

图像和链接标签

图像标签：

        绝对路径：从盘符开始
        相对路径:../
        Note:src和alt是必填的！

        <img src = "path" alt = "加载失败会返回此段" title ="悬停文字" width = "300" height = "300">

链接标签：

   href为必填！
   target ="_blank" => 新窗口打开
   target ="_self" => 默认，在当前窗口打开

    <a href = "https://www.google.com" target ="_blank">猛击这里（也可嵌套图片标签）</a>

锚链接：

   eg:

   <a id = "top">top<a> （在body顶部）
   <p>...内容...</p>

   <a href = "#top">回到顶部</a>

功能性链接：

        <a href = "mailto: 邮箱地址">点击发送邮箱</a>

列表和表格

列表标签：

无序：

   <ul>
       <li>C</li>
       <li>Java</li>
       <li>Python</li>
       <li>PHP</li>
       <li>C++</li>
   </ul>



有序（ordered list -> ol）：

    <ol>
       <li>C</li>
       <li>Java</li>
       <li>Python</li>
       <li>PHP</li>
       <li>C++</li>
   </ol>

自定义：

    <dl>
       <dt>语言</dt>
       <dd>Java</dd>
       <dd>C</dd>
       <dd>C++</dd>
       <dd>Python</dd>
       <dd>PHP</dd>
   </dl>

表格标签：

    <table border = "2px">

       <tr>

           <td colspan = "3">1.1</td>
           <td>1.2</td>
           <td>1.3</td>
           <td>1.4</td>

       </tr>

       <tr>

           <td>2.1</td>
           <td>2.2</td>
           <td>2.3</td>
           <td>2.4</td>

       </tr>

   </table>

视频和音频：

视频
<video src="../resources/video/soemthing.mp4" controls autoplay></video>

音频
<audio src="../something.mp3" controls autoplay></audio>

autoplay：自动播放属性

controls：控制条显示属性

页面的结构：

header：头部

footer：脚部

section：主体块

article：文章

aside：边块

nav：导航

内联框架iframe：

<iframe src = "https://www.baidu.com" name = "id" width = "300px" height = "200px"></iframe>

<a href = "https://www.baidu.com" target = "id">Click to transfer!</a>

Note:可用<a>标签中的target属性标明iframe的name标识，即可在iframe下生成打开<a>里的链接。

表单！！

<form method = "post" action = result>表单起始标签

用户名输入：<input type = "text" name = "user" maxlength = "8" value = "默认初始值" readonly>

密码输入：<input type = "password" name = "password">

性别：<input type = "radio" value = "boy" name = "gender" checked disabled>男


<input type = "radio" value = "boy" name = "gender">女；


爱好：
   <input type = "checkbox" value = "slp" name = "hby">睡觉
   <input type = "checkbox" value = "cd" name = "hby">编程
   <input type = "checkbox" value = "rap" name = "hby">说唱
   <input type = "checkbox" value = "fk" name = "hby" checked>操逼

普通按钮：<input type = "button" value = "按钮中的文字" name = "btn1">

图片按钮：<input type = "image" src = "../image/1.png">

下拉框：

<select name = "列表名称">
   <option value = "A">西瓜</option>
   <option value = "B">龙眼</option>
   <option value = "C">橙子</option>
   <option value = "D" selected>苹果</option> 
</select>

文本域：<textarea name = "txtbx" cols = "7" rows = "7">默认内容</textarea>

文件域：<input type = "file" name = "f">

input简单验证：

邮箱：<input type = "email" name = "email">

数字：<input type = "number" name = "num" max = "9999" min = "0" step = "100"> 

网址：<input type = "url" name " url">

滑块：<input type = "range" min = "0" max = "100" name = "voice" step = "10">

搜索框：<input type = "search" name = "search">

   <input type = "submit">
   <input type = "reset">
</form>

CSS

What is CSS？（Cascading Style Sheet）

布局、选择器、网页属性美化、盒子模型、浮动，选择器为重点其他可做了解？

发展史：1.0 = 啥也不是只有简单标签 2.0 = div块标志着结构分离的思想，SEO出现

2.1 = 浮动定位布局等大规模改进 3.0= 圆角、阴影等细节优化，浏览器兼容。

CSS三种导入方式：

1.分离样式：外部文件，在head引用<link rel = "stylesheet" href = "../style.css">导入css文件；

2.表内样式：写在head里的style标签

3.行内样式（那就不是结构分离了）：直接在修饰对象属性栏里写

作用优先级3>2?1,其中2和1看谁的代码最后执行覆盖原代码。

三种基本选择器

标签选择器：选择并应用到页面所有此标签的元素！
类选择器：先对标签声明class属性名，之后在style里用 .class{}来对相同标签产生不同效果
id选择器：id全局唯一的标注一个标签，在style标签内用 #id{}方式

其中优先级3>2>1

层次选择器：

！！后括选择器：body空格p{} body标签后的p 全部{。。。}

下面的好像不太好使。。

子级选择器：body>p{} body标签后非嵌套的
毗邻选择器：.class + p{} 先定义class再对下一个同级标签生效（note：是所有class的下一个，仅一个！）
通用选择器： .class ~ p{}下面的所有同级！

结构伪类选择器（任何对象都有伪类）

ul li:first-child{...}

ul li:last-child{...}

p : nth-of-type(2){...}第二个为p类型的元素

属性选择器（id和class的结合，对属性栏的条件应用）

标签[属性条件]{...}

属性其实就代表着对于所有此类标签符合此类属性条件的；

eg：a[id]{} = 带id的，a[id = first]{} = id选择器，

！！a[class = "style"]{} = 带有style class的，其中 = 是指绝对等于（.equals()）

而 *= 是包含；

a[href ^= http]{} 以http为开头的href的a标签，

a[href $= pdf]{} 以pdf为结尾的href的a标签。

网页美化

span标签：约定成俗地用其凸显内容。

eg：<span> 内容</span>,然后加选择器对其进行加工

字体样式

body{ font-family: 字体; font-size: 50px; font-weight: bolder;

文本样式

color:#FFFFFF , RGB各两位十六进制

text-align: 排版（居中center）

text-indent:2em(em等于一个单位字，px等于一个像素点）

line-height:每一行的高度

height：总共标签的高度，like p标签

text-decoration：underline/line-through/overline;

a{ text-decoration: none;} a标签去下划线

vertical-align: middle，两个标签对象相互垂直居中

a:hover{color:#123456;font-size：50px;}链接悬停背景色,字体变大

a：active{color：#123456；}点击链接背景色

a:visited{color:#123456;}访问后的颜色

text-shadow:颜色，水平偏移（左负右正），垂直偏移（上负下正），阴影半径（粗细）；（后三个为px）

列表

ui li = 后代层次选择器

{

list-style:none; 去掉圆点或者数字（ol）

circle：空心圆

decimal：数字

square：方形

}

note：一般不会写nav标签，都是div（单位标签）加nav的id

背景

！！！{background-image: url("path.jpg")} 在选择标签域内填充背景图片，默认平铺。

通过{background-repeat:repeat-x/repeat-y/no-repeat}对图片进行水平复制，垂直复制，单一

！！！其实可以在background：___ ___ ___...直接把一溜属性全写好

=> 颜色图片路径水平增量垂直增量 repeat属性

渐变

直接在grabient.com上调制diy渐变然后copy代码。。。

background:角度初始色最终色

盒子模型

！body存在一个8px的默认margin

input{border：_px dashed white};

！margin：上，右，下，左（顺时针）（也可写上下，左右两个变量）

其中auto代表居中，

圆角

div{border-redius：↖↗↘↙}；

！！搞清楚width、height与radius的差距，width与height代表着矩形，而radius代表着角到中心点的距离

浮动

display:block（块元素化）：inline（行内元素化）：inline-block（使之成为一行），仍然是块元素，行块（一大段元素堆积）排列必备，很少用。

float-right、left。。。浮动，朝指定方向冒顶直到碰到一个外边框或者另一个浮动盒子为止；

对于浮动很多时候会突破父界，这时候就需要clear来限制浮动；

clear：方向：不允许此方向的浮动；

eg：A在左边浮着，B在右边浮着，对夹在中间的C添加{clear：both}属性它就会在下一行找地方浮。

！还可以通过增加父界高度解决出界问题

！或者在父界下方添加clear：both的块元素禁止上方块元素越界漂浮

！还能在父界中增加{overflow：hidden}屏蔽越界元素

！常用父类after伪类选择器在css中增加clear：both的div兜块

overflow属性：对越界元素的控制：scroll保持原尺寸，增加滚动条

定位

相对定位：

{position：relative；}

然后就可以用top bottom left right：+-xx 来对原位置进行位移

！原位置也被保留

绝对定位：

{position：absolute；}

用left right top bottom时候是相对浏览器进行定位，

条件：父元素没有定位，若有则转换成对父元素的定位。

粘性定位（常用于网站导航栏，广告）：

{position：fixed；}

{z-index：层级（0~999）}涉及多个元素相互覆盖，标志此标签的优先级覆盖次级优先级标签。

！只有用了定位才会堆叠

！{opacity：透明度；}

动画

transform:....（不常用，还是多用JS做。。。）

JavaScript（世界上最流行的脚本语言）

！！！！！！

必须给他妈的我精通

概述

JavaScript是属于网络的脚本语言！
JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。
JavaScript 是因特网上最流行的脚本语言。

预处理器：CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。

几大框架：：

JQuery：封装了各种方法，但DOM操作太频繁影响前端特性。。。没啥人用了
Angular：Java程序员s开发的，特点是模块化开发；
React：Facebook的，提出新概念“虚拟DOM”，用于减少DOM操作。
Vue：取上两者之精华，去其糟粕。

ECMAScript：为JavaScript的一个标准。。。JavaScript为其一种实现。。。

导入

依然是可以在HTML里面写（<script></script>），

也可以独立导入（<script src="path.js"></script>）

基本语法

var 为变量声明，弱类型语言（听说现在都用let，为局部变量，类似for（int i；；）里面的int）

若直接写 i = 666；则默认为全局变量

同样严格区分大小写；

可以在网页inspect里的console键入alert输出变量也可以console.log(变量）来输出。

可以在inspect的source（源码）里面设置断点刷新然后调试。。

不同的数据类型

number：（js不区分小数、整数）、5e3（科学计数法），NaN（非数，与所有值（包括NaN）都不相等）

字符串："xxx"

boolean：false、true

等于号“==”只看值是否一样，即使类型不一样，所以一般都用“===”绝对等于；

数组：var = array[1,"x",null,true];下标越界的话会输出undefined；

对象：var person = {name:"xxx",age:"_",array:[xxx,xxx,xxx]},console里就用person.name,person.age等等调用。

严格检查模式

“use strict” 加在script标签里面就行了，须为第一行，不然在console不会报错。

类型详解

字符串输出：‘’或者“”用反斜杠转义，\u#### 为Unicode（#为16进制），\xx(ASCII码)；

多行字符串：反引号` `直接包括换行原样输出；

模板输出："${var名字} str...";

tips: var名[index]直接输出index的元素，不可再赋值，.length等属性，.indexOf() .toUpperCase()等方法；JS不区分字符与字符串，字符视为长度为1的字符串；.substring(0开始，1开始);(和java一样；

数组：长度依然是属性 .length；元素可再赋值，也可延长（从新对.length赋值），多余的为empty（即为undefined），缩小（丢失元素）；

indexOf（具有多个相同值）只返回第一个元素位置；.slice(依然是[,) 这样的左闭右开)；

.pop() 和 .push(vars)；类似栈操作（尾部），同时shift()和unshift()表示头部的pop和push；

.reverse()、.sort()、.concat(另一个数组)，并没有修改数组；.join(字符串）返回字符串其中美国元素夹一个参数字符串。

多维数组：array[[xxx,xxx,xxx],[yyy,yyy,yyy],...,[...]];

对象类型（若干个键（键都为字符串）值（值才是各类对象）对）

定义时候若干属性名：属性值间以逗号间隔，最后一个没有逗号；

动态更删属性

delete关键字删除对象属性，.属性名 = 属性值添加属性；

判断属性是否是自身拥有的（即是否继承来的）：.hasOwnProperty（自身键）

数组遍历：for(var x in/of array){in为一个个下标，of为一个个元素值}；

ES6新数据类型MAP、SET

map: var map = new Map([ [key,value],[key,value],...,[] ]; 通过set、get调出值键入键值对；

set：（无重复元素）set名.has（属性值） = contains

iterator: ... var itr = Iterator(对象); const itr = map[Symbol.iterator](); for(let x of itr){console.log(x)}...

函数

定义： function name(x,y,z){return x;} ,若没有执行return，依然会返回undefined；

前端定义方式： var abs = function(x,y,z){return x;}, 可以传任意个参数；

关于传进来的参数内部处理，可以用typeOf 形参进行是否传空值的判断，其次用arguments关键字，代表实参数组；

ES6新特性：rest关键字，若形参只有一个x，rest会获取除了x之外的多余实参。格式：function(x,y,...rest){}，rest代表的也是数组。

变量作用域

const PI = 3.1415925354; 只读变量，不许修改。（ES6引入）

函数嵌套情况下，外部函数不可访问内部函数的变量；反之当然可以，假如当下要调用的变量声明定义都在顺序下方，js会默认提前执行定义声明语句。

以及定义在函数之外的称之为全局变量，js存在默认全局对象window，因会出现同名的问题，因此建议自定义全局对象变量域。

方法（对象内部的函数）

var object =

{

方法名：function（）{}，

}

！也可以在外面写好，对象内部直接方法名：函数名，

！对于this关键字，在方法内部使用的话，注意若是上述第二种方法的定义，则无法调用外部函数名，因为this代表着是外部全局window的相关变量，而window并没有。

！！apply方法，存在所以方法函数的上一层，用来修改this的指向 .apply(对象，参数列表）；

特殊内部对象

Data：var date = new Data（）；（打印date是当下时间）,

一些方法：get年月日星期时分秒（date是日，day是星期），！getTime（）；1970年1月1日 00:00:00起始至今的毫秒数。。。

JSON:(数据交换格式，类似XML的功能）提升网络传输效率，后端生成然后前端解析；

JSON.stringify(任何对象）把任何对象字符串化，

JSON.parse(字符串）解析字符串编程对象

面向对象编程

原型：对象.__proto__ = 想继承的对象；（任何对象都继承Object的proto）

到了ES6时候，就引入了Java的class写法简化上调怪异的原型；

class Student

{

constructor(形参列表）//直接把传过来的实参变成对象的属性

{

this.xxx = xxx;

}

方法（）

{

}
}

继承：

class PupilStudent extends Student

{

constructor(父类形参列表，子类形参列表）

{

super（父类形参列表）；

this.xxx = xxx;

}

方法（）

{

}
}

！本质其实还是原型对象，class其实也是对象；继承存在原型链，链到object时候就和prototype往返互链了。。。

BOM（浏览器对象模型）

几个重要对象

window（全局对象）获取窗口属性

screen：屏幕尺寸

location：当前页面的url

document：当前的页面（文档资源）

history：浏览记录

DOM：以树形网页为基础的若干文档资源操作模型，更新，获取，删除，添加 => Dom节点（标签块）

第一步：得先获取到节点！

通过document.getElementBy(Id,Class,TagName)获取节点内容 == 对应CSS选择器

若存在嵌套标签，在父标签id下的children方法可返回所有子节点(数组）。（或者lastChind、firstChild）

！以上都是原生代码，以后都会用现成的框架（JQuery）

第二步：更新节点。

id.innerText("text");插入文本。。

id.innerHTML('标签块')；插入HTML 格式的元素。。

id.style.xxx = xxx;样式的修改。。

在网页上抓取到id存入变量就可以利用上述方法修改DOM对象

第三步：删除节点

（通过获取父节点对象来删除当前节点）

id.parentElement().removeChild(子节点）；

（也可以通过子节点数组下标遍历删除）

！注意由于数组对象时刻动态删除，下标指向的对象会改变，建议逆向遍历删除。

父节点ID.removeChild(父节点ID.children[index])；

第四步：插入节点

append（）：目标节点.appendChild(追加节点）；（适用于已存在的节点）

创建新节点：document.creatElement(各种标签），然后对这个新建节点进行编辑：新节点.id = 'xxx'; .innerText = 'xxx';

很复杂，做了解，清楚调用机理，增删添改的大概函数就行。。。还是以后的JQuery占据主流！

验证表单

.getElementById('xxx')获取文本框输入值；

.value 让其输出或对其改变；

对于复选单选框等固定参数input，对每个选项.checked返回是否被选，也可赋值改变选项

高级验证：

首先在script代码内有个验证函数（函数内还需上面的获取输入值）根据想验证的内容是否符合规范返回布尔值，其次在form头标签属性有个onSubmit属性，赋予其“return 函数（）”可在验证不通过时阻止表单的提交。

隐藏域接受密码：比形式密码框多了hidden属性，和name属性（没有name属性不会提交？？！！）；形式密码框只有type属性。。。

然后在验证方法里用方法加密或者验证。。。

jQuery（大量方法库）

获取：在线CDN（网络引入）或者下载jQuery本地导入；；

统一调用方法：$(选择器).方法().

eg： $('#id').click(function(){方法体})；点击触发方法; $('p') = 标签选择器， $('.class') = 类选择器

$(function(){}); 是对$(document).ready(function(){});的简写，意为加载页面完成后执行的操作（通常为事件最外层的嵌套），加上其他mouse，key的方法（一般会在function内传参数）组成了事件发生监听器。。。

操作DOM：$(...).text()获取标签内容，用$(...).text('修改后的值')修改内容; 。html（）同理。

CSS操作：$('...').css({“属性1”，“值1”,"属性2“，“值2”。。。});

这篇关于前端三件套的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！