day2
理解CSS| 青训营笔记这是我参与「第五届青训营 」笔记创作活动的第2天
一、本堂课重点内容:
CSS代码构成、使用方法
CSS流程之选择器、文本渲染
CSS选择器的特异性、继承
CSS求值过程、调试方法
CSS布局方式及相关技术
CSS行级、块级盒模型
二、详细知识点介绍:1. CSS是什么
Cascading Style Sheets
用来定义页面元素的样式
设置字体和颜色
设置位置和大小
添加动画效果
2. 基本构成1234选择器 { 属性名: 属性值: /*属性名与属性值组成的语句是一个声明*/}
3. 在页面中使用CSS1. 外链式
引入同一文件夹下的CSS文件,需要在头部写入即可引入CSS文件
2. 嵌入式
在头部将CSS样式内容写入标签中,一般适用于长沙市样式较少时
3. 内联式
直接在标签内引入style,并将CSS样式写入
4. 选择器
找出页面中的元素,以便给他们设置样式
使用多种方式选择元素
按照标签名、类名或者id(#)
按照属性
按照DOM树中的位置
1. 类选择器
123456789<li class=& ...
day1
前端与 HTML | 青训营笔记这是我参与「第五届青训营 」笔记创作活动的第1天。
一、本节课重点内容:
前端工作的定义
前端技术栈拆解与分析
HTML作用分析
HTML语义化
二、详细知识点介绍:1. 什么是前端
解决GUI人机交互问题
跨终端
PC/移动浏览器
客户端/小程序
VR/AR等
Web技术栈
前端由和HTML、CSS、JavaScript三部分构成,分别负责网页的内容、样式和行为,在网络协议的联系下,上传至服务器端
2. 前端要关注的方面包括但不限于功能、安全、无障碍、体验、性能、美观、兼容等方面
3. 前端的边界node、Electron、React Nation、WebRTC、WebGL、WebASSEMBLY等
4. 开发环境
浏览器:IE/Edge、Chrome、Firefox、Safari等
编辑器:VSCode、Vim、WebStorm等
5. HTML是什么HTML包括
HyperText(包括图片、标题、链接、表格等多种形式)
Markup Language(一种专门用来标记的语言)
6. D ...
发现的一些宝藏脚本
在使用edge浏览器时,发现的一些宝藏脚本
配置环境在浏览器右上角有一个扩展按钮,点击后选择管理扩展,打开后点击“获取扩展”的按钮,然后搜索Tampermonkey,获取油猴脚本,当扩展中有油猴脚本时,配置环境就准备好了,接下来就可以放大招啦
User scripts (greasyfork.org)这个网址一定要保存好哦
当安装好扩展之后,在想要应用的页面刷新,点击扩展应用后才生效哦
1. 汉化Notion
相信有很多人想用Notion却被全英文界面劝退,这次,汉化版Notion来啦
安装好油猴之后,打开上面的网址,输入notion选择图片中的安装插件
打开notion官网,然后点击扩展应用,当看到页面变为中文时,就说明汉化成功了
点击左上角的省略号按钮,选择应用,选择“将此站点作为应用安装”
然后在桌面上就会出现刚刚安装的notion,就汉化完成了
2. 免费看视频
打开刚才的网址,找到名为[timerd][The Eight Hundred] VIP Video tencent, iqiyi, mgtv, youku, Blibili, s ...
BOM总结
BOM总结BOM概述BOM(Browser Object Model)即浏览器对象模型,它提供了==独立于内容==而与==浏览器窗口==进行交互的对象,其核心对象是 window
BOM 由一系列相关的==对象==构成,并且每个对象都提供了很多方法与属性。BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape 浏览器标准的一部分
1. DOM与BOM的区别DOM
文档对象模型
DOM是把文档当做一个对象来看待
DOM的顶级对象是document
DOM主要学习的是操作页面元素
DOM是W3C标准
BOM
浏览器对象模型
把浏览器当做一个对象来看待
BOM的顶级对象是window
BOM学习的是浏览器窗口交互的一些对象
BOM是浏览器厂商在各自浏览器上定义的,兼容性较差
2. BOM构成BOM比DOM更大,包含了DOM
window对象是浏览器的顶级对象,具有双重角色
是JS访问浏 ...
DOM总结
DOM知识总结DOM简介文档对象模型(简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或XML)的标准==编程接口==,通过这些DOM接口可以改变网页的内容、结构、样式。
包括内容:
文档:一个页面就是一个文档,DOM中使用document表示
元素:页面中的==所有标签==都是元素,DOM中使用element表示
节点:页面中的所有内容都是节点(标签、属性、文本、注释等),DOM中使用node表示
DOM把以上内容都看做是==对象==
获取页面元素DOM在实际开发中主要用来操作元素
获取页面中元素可以使用以下几种方式:
1. 获取ID获取getElementById()
1234567<body> <div id="box"></div> <script> var box = document.getElementById('box'); ...
正则表达式
正则表达式测试正则表达式test()正则对象方法,用于检测字符串是否符合该规则
12regexObj.test(str)//用来检测str文本是否符合正则表达式规范
边界符用来提示字符所处的位置,主要有两个字符
^ 表示匹配行首的文本(以谁开始)
$ 表示匹配行尾的文本(以谁结束)
12345678910111213let rg = /abc/; //正则表达式里面不需要加引号,不管是数字型还是字符串型// /abc/ 只要包含abc这个字符串返回的都是trueconsole.log(rg.test('abcd'));console.log(rg.test('aabcd'));let reg = /^abc/;// /^abc/必须以abc字符串开头console.log(reg.test('abcd')); //trueconsole.log(reg.test('aabcd')); //falselet reg1 = /^abc$/;// 精准匹配,要求必须是abc字符串才符合规范 ...
新年快乐
file:///C:/Users/www/Desktop/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9%20(2)/index.html
搭建个人博客
这几天,通过从网上寻找各种搭建教程,不断尝试,再删除,再尝试,我终于战战兢兢的搭建了自己简陋的博客系统,这里放上网址,欢迎大家的访问哦
https://cat711.github.io/
环境与工作准备需要安装的程序(相信大家都有)
Node
下载地址:https://nodejs.org/en/download/
打开CMD窗口,运行如下命令,修改npm源
1npm config set registry https://registry.npm.taobao.org
Git
Hexo
新建一个文件夹,在git bash执行命令安装hexo
1npm install -g hexo-cli
安装完后输入hexo -v验证是否安装成功,若出现版本号则表明安装成功
github配置
点击右上角的+按钮,选择New repository,创建一个<用户名>.github.io的仓库,选项同之前创建仓库相同
在git bash窗口ssh-keygen -t rsa -C "你的邮箱"在C盘的用户文件夹下的.ssh文件夹,会看到id_r ...