学习笔记
主要内容包括html,css,html5,css3,JavaScript,正则表达式,函数,BOM,DOM,jQuery,AJAX,vue等等
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
HTML/CSS
**HTML:**HTML基本结构,标签属性,事件属性,文本标签,多媒体标签,列表 / 表格 / 表单标签,其他语义化标签,网页结构,模块划分
**CSS:**CSS代码语法,CSS 放置位置,CSS的继承,选择器的种类/优先级,背景样式,字体样式,文本属性,基本样式,样式重置,盒模型样式,浮动float,定位position,浏览器默认样式
HTML5 /CSS3
**HTML5:**HTML5 的优势,HTML5 废弃元素,HTML5 新增元素,HTML5 表单相关元素和属性
**CSS3:**CSS3 新增选择器,CSS3 新增属性,新增变形动画属性,3D变形属性,CSS3 的过渡属性,CSS3 的动画属性,CSS3 新增多列属性,CSS3新增单位,弹性盒模型
JavaScript
**JavaScript:**JavaScript基础,JavaScript数据类型,算术运算,强制转换,赋值运算,关系运算,逻辑运算,三元运算,分支循环,switch,while,do-while,for,break,continue,数组,数组方法,二维数组,字符串
<script setup>
// m3u8格式视频使用变量
const player = ref(null)
const video = ref(null)
// flv格式视频使用
const videoRef = ref(null)
let flvPlayer = null
// 这个变量用来判断是哪个格式视频就进入哪个(默认m3u8)
let flag = ref(true)
onUnmounted(() => {
// 在页面刚加载就显示视频
// 这个是视频链接
// m3u8地址:https://gc2ksc.v.kcdnvip.com/gc/zsslsjjfsd\_1/index.m3u8?BR=md®ion=shanghai
// flv地址:http://video.epaper.pybtv.cn:8080/live/rtmp\_live\_demo.flv
// 固定链接
let videosrc = ref("http://video.epaper.pybtv.cn:8080/live/rtmp\_live\_demo.flv")
// 下面是通过请求获得的链接(动态显示)
// let videosrc = ref(gameScreenList.gameInfo.live\_event)
// 截取链接,判断是什么格式的视频(判断格式让对应显示)
flag.value = videosrc.value.includes(".m3u8")// 只能返回true或者false
gameScreenList.gameLivePlayFlag = false
if (flag.value) {
if (Hls.isSupported()) {
var hls = new Hls()
hls.loadSource(videosrc.value)
hls.attachMedia(video.value)
hls.on(Hls.Events.MANIFEST\_PARSED, function () {
video.value.play()
})
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.value.src = videosrc.value
video.addEventListener('loadedmetadata', function () {
video.value.play()
})
}
} else {
// 创建 FLV 播放器实例
flvPlayer = flvjs.createPlayer({
type: 'flv',
url: videosrc.value, // 替换为实际的 FLV 视频 URL
})
console.log('flvPlayer', flvPlayer)
// 绑定 FLV 播放器到 <video> 标签
flvPlayer.attachMediaElement(videoRef.value)
// 初始化 FLV 播放器
flvPlayer.load()
flvPlayer.play()
}
})
<script>
<template>
<!-- m3u8格式视频展示 -->
<video
ref="video"
class="videoElement"
autoplay
controls
muted
v-show="flag === true"
></video>
<!-- flv格式视频展示 -->
<video
ref="videoRef"
打开全栈工匠技能包-1小时轻松掌握SSR
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi00NWMyNWY5NmI2YTQzOWU5N2UzNGJjNjdjNzIyZDFiYl9oZC5qcGc?x-oss-process=image/format,png)
两小时精通jq+bs插件开发
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMzLnpoaW1nLmNvbS84MC92Mi01ZGU5MTQ1ZDI0OWJmZDliNTFiZjMyOTVmMTg2ZGFlZV9oZC5qcGc?x-oss-process=image/format,png)
生产环境下如歌部署Node.js
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi01NjcyZjU2ZTg1NTcwMDM3ZTg1ZmJlODI0MDA3MDJiYl9oZC5qcGc?x-oss-process=image/format,png)
网易内部VUE自定义插件库NPM集成
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMzLnpoaW1nLmNvbS84MC92Mi1kN2M3ZWVjOWJiZGVmYjJiMjNjNzExNzgzZWM4MzIwZV9oZC5qcGc?x-oss-process=image/format,png)
谁说前端不用懂安全,XSS跨站脚本的危害
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi0yNDAwODRhMGFlNzQwNmUzMWI4NjM0NTk3ZTFjOWQwN19oZC5qcGc?x-oss-process=image/format,png)
webpack的loader到底是什么样的?两小时带你写一个自己loader
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMxLnpoaW1nLmNvbS84MC92Mi0xOWQ2YTQ4MTJmZmQzZjZmYzdlYjJmMjJlMjUwZTM2Y19oZC5qcGc?x-oss-process=image/format,png)
g.cn/aHR0cHM6Ly9waWMxLnpoaW1nLmNvbS84MC92Mi0xOWQ2YTQ4MTJmZmQzZjZmYzdlYjJmMjJlMjUwZTM2Y19oZC5qcGc?x-oss-process=image/format,png)