css背景
通过CSS 背景属性,可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
123456background-color: 颜色值; /*背景颜色*/background-image: url(); /*背景图片*/background-repeat: repeat |no-repeat |repeat-x |repeat-y ; /*背景平铺*/background-position: x y; /*背景位置*/background-attachment: fixed|scroll; /*背景附着*/background: rgba(0,0,0,0.3) /*背景色半透明*/
背景图片位置
参数是方位名词
如果指定的两个值都是方位名词,则两个值前后顺序无关,比如left top和top left效果一致
如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐
参数是精确单位
如果参数值是精确坐标,那么第一个肯定是x 坐标,第二个一定是y坐标
如果只指定一个数值,那该数值 ...
元素显示模式及转换
元素显示模式就是元素(标签)以什么方式进行显示。比如<div>自己占一行,比如一行可以放多个<span>。HTML元素一般分为块元素和行内元素两种类型
块元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素。
特点:
自己独占一行。
高度,宽度、外边距以及内边距都可以控制。
宽度默认是容器(父级宽度)的100%。
是一个容器及盒子,里面可以放行内或者块级元素。
注意:
文字类的元素内不能使用块级元素
<p>标签主要用于存放文字,因此<p>里面不能放块级元素,特别是不能放<div>
<h1>~<h6>等都是文字类块级标签,里面也不能放其他块级元素
行内元素
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、&l ...
css伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,伪类选择器有链接伪类、结构伪类等。
链接伪类
1234a: link /*未访问的链接*/a: visited /*已访问的链接*/a: hover /*鼠标悬停的链接*/a: active /*已选择的链接*/
12345678910111213141516171819202122232425262728293031323334<!DOCTYPE html><html><head><style>/* unvisited link */a:link { color: red;}/* visited link */a:visited { color: green;}/* mouse over link */a:hover { color: hotpink;}/* selected link */a:active { color: blue;}</style></head&g ...
emmet语法
Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。
快速生成HTML结构语法
标签
div 然后tab 键
1<div></div>
多个相同标签
div*3
123<div></div><div></div><div></div>
父子级标签
可以用 > ,比如 ul > li
123<ul> <li></li></ul>
兄弟标签
用 + ,比如 div+p
12<div></div><p></p>
有类名或者id名字
直接写 .demo 或者 #two, tab 键
12<div class="demo"></div><div id="demo"></div>
有顺序的div类名
自增符号 ‘div
`div‘d ...
html表单元素
HTML 表单用于搜集不同类型的用户输入。
input元素
<input type=" ">
radio 单选按钮
text 单行文本输入
submit 提交按钮
checkbox 多选按钮
password 定义密码字段
select元素
下拉列表, option 元素定义待选择的选项,selected 属性定义预定义选项。
12345<select name="language"><option value="Chinese" selected>Chinese</option><option value="English">Saab</option><option value="Japanese">Fiat</option></select>
textarea元素
多行文本输入
综合实例
123456789101112131415161718192021222324252627 ...
css基础选择器和组合选择器
CSS 选择器用于“查找”(或选取)要设置样式的 HTML 元素。css选择器分为简单选择器(根据名称、id、类来选取元素)、组合器选择器(根据它们之间的特定关系来选取元素)、伪类选择器(根据特定状态选取元素)、伪元素选择器(选取元素的一部分并设置其样式)、属性选择器(根据属性或属性值来选取元素)
罗翔老师打动人心的句子
一直很喜欢张三(不是),张三的塑造者,罗翔老师,罗翔老师风趣幽默又严肃谦逊,不卖弄学识,不好为人师,学识渊博却无时不在强调自己的无知。
在罗祥老师身上总能看到两代人:年轻一代的理想与正义,老去一代慈祥与释怀。引用B站的一个评论:
听罗老师的课,总能感受到一种年少才有的那种激进正义感,和年长了才会有的那种温暖的慈悲
下面是转自B站的视频,与君共勉。
所有的天资聪颖都需要艰苦的训练。
我们登上并非我们所选择的舞台,演出并非我们所选择的剧本。
你的剧本不是你选择的,你只有努力的吧你的剧本给演好。只要努力演好你的剧本,痛苦中也有精彩。
越能体现人性尊严的快乐,越是更高级的快乐。
当你觉得这个世界有大量的不正义,说明世上存在正义。如果这个世界上没有正义,那么不正义就毫无意义。
一个开放的社会就像一张张开的口,合下来的时候一定要咬住某种坚实的东西。天变地变,道义不变。
一次犯罪不过是污染了水源,而一次不公正的司法却是污染了水源。
HTML速查手册
HTML 是超文本标记语言 (Hyper Text Markup Language),标记语言是一套标记标签 (markup tag),HTML 使用标记标签来描述网页。本篇是HTML速查手册,主要列举的是HTML一些常用的标签。
yaml基础语法
yaml简介
YAML 是 “YAML Ain’t a Markup Language”(YAML 不是一种标记语言)的递归缩写。在开发的这种语言时,YAML 的意思其实是:“Yet Another Markup Language”(仍是一种标记语言)。yaml是能够被电脑识别的数据序列化格式。
基本语法
大小写敏感
使用缩进表示层级关系
缩进禁止用Tab,只允许用空格
空格数不重要,只要相同层级元素左对齐即可
用#表示注释
数据类型
对象:键值对的集合,又称为映射(mapping)/ 哈希(hashes) / 字典(dictionary)
数组:一组按次序排列的值,又称为序列(sequence) / 列表(list)
纯量(scalars):单个的、不可再分的值
对象
对象键值对用冒号表示,冒号后加一个空格
key: value,也可以使用key: {key1: value1, key2: value2, ...}
数组
以 - 开头的行表示构成一个数组:
123- A- B- C
多维数组的行内表示:
1key: [value1, value2, ... ...
新学期,新博客,新开始!
前言
新学期要开始了,把旧站关了,建个新站。本站用Hexo搭建,部署在github和vercel。
改用Hexo缘起幼稚园园长的博客,陷进去了(沈腾语气)。搭建博客出了些问题,感谢小茗同学的教程和小T同学的帮助。
博客内容
博客主要记录我的学习笔记、日常生活和想要分享的内容。
一直对编程感兴趣,尤其是前端。我想学的是计算机相关专业,憧憬的职业是程序员👨💻,无奈被调剂到了应用物理学。没关系,兴趣在,希望就在。我建该站的目的之一是记录自己的学习编程之路,所以博客的大部分内容是我的学习笔记。
时光稍纵即逝,记忆也会随时间冲淡。记录想要留存的记忆,1个月后,1年后,10年后回看,会有不同的感受。多年之后,我是否变成了自己讨厌的样子,曾经的豪言壮志是否都已实现,曾经的百思不解是否有的答案。年长的自己能够坐着时光机重识年轻的自己,这是件有趣的事。
万物皆有圈,生物圈、朋友圈、电竞圈……博客也有圈,博客圈的博主们遍布世界各地,从事各种领域,有着相同或不同的兴趣,认真地运营着自己的博客。世上的人遍地都是,说的着的千里难寻。浏览不同的博客,发现不同的世界,结交不同的朋友。
博客事件
2021.03 ...