首页 > 其他分享 >前端-总

前端-总

时间:2022-08-28 20:22:14浏览次数:47  
标签:浏览器 对象 标签 前端 操作 选择器 属性

目录

前端与后端简介

1.前端:针对用户 展现给用户的界面

2.后端:不与用户打交道 真正的核心逻辑运行层面

注:查看前端01

HTTP超文本传输协议

1.原因:浏览器需要兼容所有的服务器 资源消耗过大 因此规定了所有的服务器都要遵守一些协议 如HTTP协议、HTTPS协议、FTP协议

2.HTTP四大特性:基于请求响应、基于TCP、IP协议之上、无响应、无状态

请求数据:请求体、请求首行、换行、请求体

响应数据:响应体(响应状态码)、响应首行、换行、响应体

3.响应状态码:1xx、2xx、3xx、4xx、5xx

注:查看前端01

HTML-超文本标记语言

1.HTML:所有浏览器都需要的语言

2.页面:浏览器展现的页面

3.注释语法:

4.语法结构:

<html>
     <head>
    </head>
    <body>
    </body>
</html>

5.标签

5.1 布局标签:div  p
5.2 基本标签:h1~h6  标题标签
            p	  段落标签
            span   行内标签
            hr		水平分割线
            br      换行符
            u      下划线
            i		斜体
            s		删除线
            b		加粗
5.3 符号标签:gt     大于号
            lt	   小于号
            &emsp   空格
            &amp	&
            &yen     ¥
            &reg		注册
            &copy   商标
5.3 列表标签
    无序列表:  ul  li
    有序列表:  ol  li
    段落        dl  dt  dd
5.4 表格标签:table thead tbody tr td tfoot 
5.5 form表单标签:input select option 
5.6 按钮标签:button submit reset
5.7 连接标签:a
5.8 图片标签:img
注标签分为:单标签<a>  双标签<p></p>

6.属性

6.1 通用属性:id  class 
6.2 表格属性:align cellpandding bgcolor
6.3 表单属性:onclick action method name target
6.4 表单input标签属性/label:text email password radio checkbox file hidden image button submit reset color date time value name
6.5 下拉框select标签属性:multiple size
6.6 option属性:disabled selected value
6.7 文本框灰色二次提醒属性:placeholder
6.8 radio、checkbox单选、多选默认值属性:selected
6.9 select下拉框默认值属性:selected

CSS-层叠样式表

1.简介:用来展示HTML等文件的样式

2.语法结构:

选择器{
   属性名1:属性值1   p{color:green}
}

3.注释语法

/*注释信息*/

4.编写方式:head标签style标签中、head标签link标签引入文件(需要创建css文件)、直接在标签内使用style属性编写

5.选择器:标签选择器、类选择器、属性选择器、id选择器、组合选择器、分组与嵌套、伪元素选择器、伪类选择器

6.选择器优先级:就近原则(标签内>id>class>标签)

7.字体操作:

7.1 高宽(height、width)
7.2 字体(颜色、粗细、对齐、大小、缩进、其他字体装饰操作)

8.盒子模型

本质:一个盒子

构成:边距margin、边框border、填充padding、内容content

9、背景操作-backgroud:颜色、图片

10.边框操作-border:高宽、样式、颜色(圆形边框:border-radius:50%)

11.元素隐藏-display:元素隐藏且不占任何空间

12.元素浮动:浮动与平面之上(float)

父标签塌陷解决办法:
.clearfix:after{
    content:"";
    display:block;
    clear:both
}

13.溢出属性:内容数据大于元素框

解决办法:hidden-内容被裁减 只剩元素框中的内容
        scroll-滑动元素框可见所有内容 没有超出时显示滚动条
        auto-如果被修剪 滑动元素框可见 没有超出不显示滚动条
        inherit-从父元素继承overflow属性的值

14.定位属性:无定位static、相对定位relative、绝对定位absolute、固定定位fixed

15.对象层叠顺序z-index:z-index值越大 浮与越上(对象需要被确认)

JavaScript编程

1.简介:一门编程语言

html界面引入JS的方式:style标签scrip中直接写入 外部引入js文件
				   script标签对象.src = "文件路径
 注释://  /*多行注释*/
编写JS代码的地方:pycharm 浏览器

2.变量与常量(let/var const)

3.数据类型:数值(number)、字符串(string)、布尔值(Boolean)、对象(数组、自定义对象)(object)

4.运算符:算数运算符(注:++ --位置)、比较运算符(注:=== !==)、逻辑运算符(&& || !)

5.流程控制:分支结构、循环结构、三元运算

6.函数:普通函数、匿名函数、箭头函数

7.名称空间与作用域

查找变量名:内部>局部>全局

8.内置对象:自定义、Date时间对象、JOSN序列化对象、RegExp正则对象、Math对象(内置函数)

BOM浏览器对象模型

1.BOM:通过JS代码与浏览器交互

2.浏览器页面操作

3.弹框操作(警告框-alert 确认框-confirm 提示框-prompt)

4.计时事件:在一定的时间间隔之后执行代码

DOM文档对象模型

1.DOM:是一套对文档的内容进行抽象和概念化的方法 当页面被加载时 浏览器会创建页面的文档对象模型

2.HTML DOM树:所有HTML中的标签形成的状态树 进行标签查找及及节点操作以及JS属性样式 等操作

3.标签查找

4.节点操作:创建节点、添加节点、删除节点、替换节点、属性节点

5.文本操作:添加文本

6.属性操作:删除类、添加类

7.样式操作:通过js对css中的样式操作

事件

1.可以理解为给HTML标签绑定一些额外的功能 能够触发js代码的运行

2.分类:onclick、ondblcick......具体查看前端05

3.绑定方式:在标签内部指定 创建函数(需要定义函数名)

​ 查找标签 点方法=function绑定

4.关键字this:当前操作的标签对象

jQuery类库

1.jQuery:兼容多浏览器的JavaScript编程

2.导入方法:本地导入、网络CDN操作

3.版本:1.x 2.x 3.x 最新版本(3.6.0)

4.对象:jQuery对象:使用$ 并且拥有jQuery所有方法

5.标签查找:选择器

​ id选择器、类选择器、组合选择器、属性选择器

6.标签操作:样式操作、位置操作、尺寸操作、文本操作

标签:浏览器,对象,标签,前端,操作,选择器,属性
From: https://www.cnblogs.com/040714zq/p/16633553.html

相关文章

  • 【前端】周总结
    目录1.前端简介1.1前端与后端1.2前端的学习1.3HTTP超文本传输协议2.HTML2.1HTML简介2.2HTML标签3.CSS3.1CSS选择器3.2CSS相关属性3.3盒子、浮动、溢出、定位、......
  • 前端5JQ
    js获取用户输入JS类属性操作JS样式操作事件JS事件案例JQuery类库JQuery基本使用基本筛选器(了解)表单筛选器Js获取用户输入普通数据(输入,选择)​ 标签对象.valu......
  • 前端周刊第三十三期
    前端周刊发表每周前端技术相关的大事件、文章教程、一些框架的版本更新、以及代码和工具。每周定期发表,欢迎大家关注、转载。如果外链不能访问,关注公众号「前端每周看」,里......
  • 前端Day10
    视口(viewport):浏览器显示页面内容的屏幕区域。分为布局视口、视觉视口、理想视口。布局视口: 视觉视口: 理想视口: meta视口标签:width=device-width:布局视口宽......
  • 前端Day09
     盒子移动方法:定位外边距2D转换2D转换:translate移动 rotate旋转参数为deg即度数设置转换中心点transform-origin:缩放scale  2D转换综合写法:  ......
  • 前端学习-5
    目录JS获取用户输入值JS类属性操作JS样式操作事件JS事件案例jQuery类库jQuery基本使用基本筛选器表单筛选器8.26日小练习JS获取用户输入值普通数据(输入、选择) 标签对......
  • 前端——HTMLbody标签
    body标签:1.存储网页显示的内容 H标签:H1-H6:标题标签1.双闭合标签2.独占一行<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>......
  • x_DAY04(前端知识点)
    一、npm包管理工具 1、NPM全称NodePackageManager,是Node.js包管理工具,是全球最大的模块生态系统,里面所有的模块都是开源免费的;也是Node.js的包管理工具,相当于前端......
  • 前端——HTML编辑器快捷键
    TABLE键补齐:输入标签关键字,再按table键即可补齐<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body>p......
  • 【前端】 第05回 JS操作与jQuery
    目录1.JS操作1.1JS获取用户输入1.2JS类属性操作1.3JS样式操作2.事件2.1事件理解2.2绑定事件的两种方式2.3事件中的关键字this2.4window.onload2.5校验用户输入案......