Java程序员知道的前端知识粗略总结

最新推荐文章于 2023-11-24 08:56:05 发布

我的老Java

最新推荐文章于 2023-11-24 08:56:05 发布

阅读量338

点赞数 1

分类专栏： Java学习笔记

本文链接：https://blog.csdn.net/qq_41415742/article/details/108181318

版权

Java学习笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

前端基础总结

HTML
1. 什么是HTML：
HTML：超文本标记语言（Hyper Text Markup Language），标准通用标记语言的下一个应用，“超文本”指页面可以包含图片、连接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分（head）和“主体”部分（body），头部分提供关于网页的信息，主题提供网页的具体内容
1. 浏览器的内核
渲染器：负责取得网页的内容（XML、图像等）、整理讯息（加入css等）、计算网页的显示方式，然后输出至显示器或打印机

js引擎：解析js语言，执行js语言来实现网页的动态效果（浏览器的内核不同，所渲染的效果不同）
1. HTML网页基本结构
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
```
1. HTML元素分类
块状元素：<div>、<p>、<h1>…<h6>、<ol>、<ul>、<dl>、<table>、<form>

宽高可设置，不与其他元素在同一行（独占一行）

内联元素：<a><span><br><i><em><b><strong><label>

宽高不可设置，可与其他元素在一行显示

内联块状元素：<a><img>

宽高可设置，可与其他元素在一行显示

有序列表、无序列表和自定义列表的区别：

有序列表前面由序号，默认从1开始到n；无序列表默认前面以一个小黑点来表示项目符号；自定义列表可以定义出树形结构，其中dt表示父节点，dt之后的dd表示其子节点，在dd下还可以包含dl子节点（可以定义多层结构）

超链接<a>：

href属性：指示连接的目标

target属性：_blank(在新窗口打开目标连接)、__parent(在父级框架集中打开连接目标)、_top（在整个窗口的顶层框架中打开连接目标）、_self(在当前框架下打开连接目标【默认】)、framename(在指定框架中打开连接目标【target目标和框架的name属性一致】)

锚链接：快速连接到指定本页面的指定位置。写法：#位置的元素ID。常见用法：回到网页顶部位置
CSS
1. CSS简介
  
  CSS（Cascade Style Sheet）层叠样式表；对网页进行美化、修饰
2. CSS基本语法
```
选择器{
	属性1：属性值1；
	属性2：属性值2；
	属性3：属性值3；
	。。。
	属性N：属性值N；
}
```
3. CSS的三种引入方式：
  1. 内联样式表：卸载标签内部，以标签的style属性出现
  2. 内部样式表：
```
<style rel="stylesheet">
	选择器{
		属性1：属性值1；
		属性2：属性值2；
		属性3：属性值3；
		。。。
		属性N：属性值N；
	}
</style>
```
  3. 外部样式表：创建一个css文件，在文件中写css样式，在HTML中按如下方式引入：
```
<link rel="stylesheet" href="../css/css文件名.css">
```
  1. CSS选择器
    1. 基本选择器：id选择器、class选择器、标签选择器、属性选择器
    2. 组合选择器：后代选择器（选择指定元素的后代元素）、子代选择器、相邻兄弟选择器
    3. 伪类选择器：<selector>:first-child{…}(当选择器为某一个元素的第一个子元素时应用样式)；<selector>:focus{…}（当选择器拥有键盘输入焦点时应用样式）；<a>:link{…}（当a未被访问过时应用样式）；visited(当a已被访问时应用)；hover（当鼠标悬浮在a上时应用）；active（当a被鼠标按下但未松开时应用样式）
    4. 选择器的优先级：！import>id>class>标签
  2. CSS的布局
    1. 流动布局模型（flow）：默认的网页布局方式；元素按自上而下、从左到右的方式布局
    2. 浮动布局模型（float）：把一个HTML网页看成两层，高层时浮动层（存放浮动元素），低层时一般层（存放一般元素）；如果浮动层元素与一般层元素重叠，则浮动层元素覆盖一般层元素（注：浮动，就是将元素脱离文档流）
    3. 层模型（layer）：
      1. 绝对定位（absolute）：将元素从文档流中拖出来；相对于上一级具有定位属性的父级元素；拖出来后原位置可被占用
      2. 相对定位（relative）：将元素从文档流中拖出来，相对上一级具有定位属性的元素；拖出来后原位置不可被占用
      3. 固定定位（fixed）：与absolute定位类似，当它的相对移动坐标时视图（屏幕内的网页窗口）；由于视图本身时固定的，它不会随浏览器窗口的滚动而变化，除非改变浏览器的大小和移动浏览器的位置。
  3. 元素类型转化：display属性【block（将元素以块状元素的方式进行显示）、inline（将元素以内联元素的方式进行显示）、inline-block（将元素以内联块状元素的方式进行显示）、none（隐藏元素）】
  4. 盒模型：内外边距、边框、内容
JS（是执行在浏览器上的一种脚本语言）
1. js的特点：
  1. 是一种解释型的脚本语言，在程序执行的过程中进行解释
  2. 基于对象，不仅可以创建对象，也能使用现有的对象
  3. 简单，弱类型的语言，对使用的数据类型未作出严格的要求
  4. 动态性，js是一种采用事件驱动的脚本语言，不需要经过web服务器就可以对用户的输入做出响应
  5. 跨平台，js脚本不依赖操作系统，仅需要浏览器的支持
2. js编写的位置
  1. 可以嵌入到HTML文件中，并写在<script></script>标签内
  2. 创建一个js文件进行编写，然后再HTML中引用
3. js的数据类型
  1. undefined：未定义的数据类型，即只是创建了变量名单时并未进行赋值操作
  2. Number：数值型，js中不分浮点数等，任何数值都是number类型
  3. String：字符串型，js中没有字符型
  4. Boolean：布尔型
  5. Object：除了上方的数据类型，其他的都是Object类型
4. 运算符：
  1. ±*/=、==、===
5. 数组（定义、初始化、常用方法）
6. 流程控制
7. 函数
8. JSON对象
9. js的面向对象
10. 内置对象
  1. 字符串对象
  2. 日期对象
  3. 正则表达式
  4. 异常处理
11. 浏览器对象
  1. window对象
  2. screen对象
  3. location对象
    
    常用功能：
    
    location.href=’’：转向到其他的页面
    
    获取URL参数
    
    刷新页面：location.reload()
  4. history对象
  5. 消息框对象
    1. 警告框（alert）：常用于确保用户可以得到某些信息
    2. 确认框（confirm）：常用于使用户验证或者接受某些信息
    3. 提示框（prompt）：常用于提示用户进入某个页面前输入某个值
  6. Navigator对象
  7. 计时器对象
    1. setTimeout()方法：用于在指定的毫秒数后调用函数或计算表达式
    2. setInterval()方法：按照指定的周期来调用函数或计算表达式
  8. cookie对象
12. document对象
  1. 操作document对象
    1. 每个载入到浏览器的HTML文档，都会成为document对象
    2. 作用：可以通过document对象对页面上的所有元素进行操作
    3. 使用步骤：
      1. 找到需要操作的元素
      2. 对找到的元素进行需要的操作
  2. 事件

我的老Java

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java程序员知道的前端知识粗略总结

前端基础总结HTML什么是HTML： HTML：超文本标记语言（Hyper Text Markup Language），标准通用标记语言的下一个应用，“超文本”指页面可以包含图片、连接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分（head）和“主体”部分（body），头部分提供关于网页的信息，主题提供网页的具体内容浏览器的内核渲染器：负责取得网页的内容（XML、图像等）、整理讯息（加入css等）、计算网页的显示方式，然后输出至显示器或打印机 js引擎：解析
复制链接

扫一扫