我的新尝试-HTML学习日记

字数统计: 3k   |   阅读时长≈ 11 分钟

有时候觉得把自己努力的过程记录下来，后来回望也知道自己是如何走到现在的结果的，是一个很浪漫的事情。

近些天空闲的时间是越来越多了，这样的时间最常见的消耗方式，对我来说有俩

一是在某些开放世界游戏里过剧情，尤其是你又一直期望着这些剧情会更好，结果真的是快看睡了，
或是一天因为自己想抽卡的愿望肝到5-6个小时。
抽卡这件事其实并不是多坏的事情，
毕竟还有一种解释，既然这种努力是艰难的，那也是一种为自己的目标奋斗的过程。

二是睡觉，在不断寻找自己活着是为啥，在找寻可以做的事情时，一本书启发了我，睡觉是健脑的。
因而我肯定不能让闹钟坏了我的好事，尤其是午后时光，一睡就是3个小时。

平常的课程感觉就这样的状态还是可以应付的过去的。就在这舒适的生活中，一位老友联系上我，让我做一个小程序，
咱想着总算有机会可以试试前端开发的水了，我就提出可以试一试，也是给自己一个目标。

第一，想着自己做一个，一看涉及到vue、js开发，完全从0开始搭建。害，别吓我，还有人做过的模板呢，拿来用不就好。
第二，想着找模板，我一看，网上像样的模板搞到了上千块钱，没钱，算了吧.
第三，找官方模板，人家说不合要求。
所以总算这件事没谈成。

不过总算是有收获，这就是这次尝试学习三件套的动机，无论是经济收益还是自学经验都是对以后的收益。

5/14 复习之前的知识

一个模版，所有用html的都熟悉。

1
2
3
4
5
6
7
8
9
10
11
12
<!Doctype html>
<html>
	<head>
	<meta charset="utf-8">
	<title>标题</title>
</head>

<body>
	<h1>你好!</h1>
	<p>这是一个HTML页面。</p>
</body>
</html>

这时我就在想，如何做到在我的博客上能够预览这段代码的结果呢？
将预览的HTML页面做成一个集合页面放到左边的栏里不就行了。
这样我就可以在这里直接引用这个文件了。http://moniwarmth.top/html
初期的网页十分粗糙，这个网页会随着我的学习不断迭代的，满足各位读者姥爷的期待。

期间也学习了网页与图片在html中的表示，不过单独在此列出有些多余，演示都在左边那个栏里。
同时为喜欢学习前端的童鞋们推荐一下编辑器。
Vscode，很早的时候就很喜欢它的主题，只不过配置编译太过复杂一直没用，它在编写HTML时，有一个插件是live preview，可以一边编辑一边看效果，很赞。
写这篇文章使用的sublime text也很推荐。

这就是今天作的简单复习。

5/17 字体整合表示

多的那些，关于咱具体学到了啥就不说了。
首先废话几句，唉，终于到了期待的周末了。
我不得不说，学习HTML是一个十分畅快的过程，看看今晚写的小故事吧
可能小对话写的不怎么样，不过通过字体变化刻画心理真的挺好玩的哈！

总共的字体格式，后面可能会再补充吧，就这些
大的，小的，下标的，上标的，粗的，斜的，带解释的，代码型的。

另外还有感觉上很好用的一行以及换行符，加上以后感觉页面美观度又升了一级！
不过现在也不指望多好看，等到学CSS了必定让它飞跃提升好吧！

Another Happy Day..

5/25 黑塔转圈圈制作心得

原网页＆灵感来源 请见： https://www.suiyil.cn/tool/herta_kuru/

想着实在是学CSS了就得做点不一样的东西嘛，当时恰好翻浏览器的历史记录就找到了这个小网页
实际上人家的实现是比较复杂的，实际的效果与已有网站的效果也有差异之处
一次项目实战有点让我措手不及的感觉，很多地方不会实现需要上网查
当然也有查自己之前写过的html文件，有时看自己之前知道的很多很让自己汗颜。
所以这一次不能再重学了！一定得坚持下去
这次实现一共是有这么几个小问题，通过搜索也解决掉了。
没想到HTML中属性的灵活度这么高，真是觉得越学越有劲头了。

1.HTML中如何加入与播放音频文件

首先是用audio标签声明你要用一个音频文件，然后在标签内嵌套一个source标签来声明引用文件的地址与类型
（此处audio要通过按钮来控制播放，所以必须分开一个一个定义，每一个有单独的id才可以独立控制播放）

代码是这样子的

1
2
3
4
5
6
var x1 = document.getElementById("one");
/* 假如说我们有一个id为one的audio标签，用这个方法来使js变量链接到标签 */
/* 在HTML那里，就是<audio id= "one"><source src="..." type="..."></audio>*/
if(...)
	x1.play();
/*可以使用函数或者if语句来控制播放，播放使用play()函数。*/

另外一说，C语言与JS语言是真的像，我就按C语言写的if语句，到现在没出过啥大的问题。

2.如何使用css做出网页那样的按钮

此处就涉及到对于button标签(也就是按钮)的style属性了，下面列一些昨天学到的。
（注，关于数字的基本上单位都是px，也就是像素）

background-color 就是按钮背景色
border 有无边框
border-radius 圆角力度，越大越圆
padding 按钮中间文字与边框之间的距离
color 文字颜色
font-family 按钮文字字体
font-weight 加不加粗
font-size（关于数字的只有这个例外，单位是em）字体大小
position 一般从（relative、absolute、fixed）里面选
box-shadow 在下面加固定面积的阴影

另外，那个鼠标悬停在按钮上变色的特效是通过修改hover(写法是#id.hover:)中的background-color属性实现的。

3.如何做到文字与图片在一行

把文字与图片放在div容器里统一管理，然后设置div的style如下

1
2
display: flex;
justify-content: center;

4.图片怎么做到半透明的（参考网页中间的黑塔）

实际上并不算实现了，我只是把黑塔图片给弄透明了然后在后面放了个紫色的背景
关于透明的CSS属性，它是opacity，它没有单位，是一个从0到1的值，值越大，越不透明。

5.一个很复杂的问题，描述如下

写动画的时候，我注意到那个图片转完了之后会回到网页的右边，
按照印象来说，正常工作相当于是点一次创建一个黑塔，然后动画完成就没了。
于是我通过这些代码复现了这个过程，解决了这个问题。

1
2
3
4
5
6
7
/*首先添加黑塔，也就是设置好元素的elem*/
document.appendChild(elem);
/*然后加一个计时器，在动画结束时删除黑塔*/
setTimeout(function() {
	document.body.removeChild(elem);
}, 1400)
/*后面这个是毫秒ms*/

6.动画是怎么实现的

还是万能的CSS，使用了其中的两个属性。
一个是图片的animation属性
在图片中加进去就好，后面有一串属性，暂时不清楚所有的意义，只知道和时间与运动方向有关。

第二个是@keyframes
在这个语句中，定义了动画的关键帧，也就是在动画的什么阶段动画的“画”到哪里了。
以下是该网页的例子

1
2
3
4
5
6
7
8
9
10
11
    @keyframes move {
    from {
        top: 100px;
        left: calc(100% + 500px);
    }

    100% {
        top: 100px;
        left: calc(0% - 500px);
    }
}

总之就是这几个问题，
还是觉得独立地解决综合问题收获最多。
开发过程很开心.

6.10 新HTML学习页心得

很多天没有碰HTML了，这些天学习任务紧了起来，加上平时作息需要少有时间能够进行课外学习了。趁着这个端午节假期赶紧给补了起来。

很久以来觉得HTML的intro页布局散乱，不好看，借着之前的知识，给安排成了赛博朋克的风格, 还给加上了背景音乐, 感觉离个性化编辑这个主题又进了一步

改intro页的动机

昨天学了div标签,但是div是一个集合,并没有什么代表性的效果,也就是说,它有用,什么都可以由它做出来,但是它太底层了,于是没有特点,做不成一个单独的项目,看着之前列表项目里改过的起始页,我就想着再改一改,让它好看一点.

本来想要实现当鼠标悬停在某一个项目上会自动出现描述的效果的.
感觉布局上有点太复杂, 而且可能把背景的视频挡住.
就放下了这个想法(实现的话使用a标签+frame)

起初是看着我一直都喜欢的一张像素画，然后想着把网页的背景图改成那张图片。

原画师@PHHHZ，在B站和站酷都可以找到

后来想到米哈游校招页上的背景视频，瞬间就想到可以把主页上夜幕微暖的那个背景改成视频。
奈何主题的ejs文件都是一个复杂的系统，css文件都是存在服务器上的，要是改的话得自己重写一份CSS文件。
于是嫌太麻烦了就没搞，又回到主目标上。

起初参考了必应搜索的第一个，字节跳动的起始页，结果文字和视频老是分开的，而且遮罩也不管用了。

错误情况，大小调不好，文字不在视频上面

然后参考第二个，终于现在做出来像样的了。

步骤

首先是加一个<video>元素

1
<video src="/bgvideo.mp4" preload="auto" loop playsinline autoplay muted="muted"></video>

惯例的，定义视频的地址，自动循环播放。

然后重点就来了，CSS的部分。
首先设置video，宽高都占满网页，
然后设置object-fit填充方式为cover，
它可以保证你视频是尽可能正常显示的，尽管可能会截掉一部分

1
2
3
4
5
6
7
video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	opacity: 30%;
}

这样的话视频就可以在一个固定位置上了。
这里的opacity是和body里的background-color一起用创建遮罩效果的。
（body里的这个属性是什么颜色，遮罩就是什么颜色）

1
2
3
4
5
6
body {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #000; /*这是一个黑色*/
}

现在就是这样的效果了。
https://moniwarmth.top/html

其他的小效果是怎么实现的？

无疑的，三个都是CSS实现的。

  1. 字体发光

使用一个属性，text-shadow，然后设置发光的长宽高是多少，后面是颜色。
下面是拿p标签来示例

1
2
3
4
p{
	text-shadow: 1px 1px 2px aqua;
}
/*这样是发数码蓝的那种颜色（aqua），如果没有就是发文字本来颜色的光*/

更多可以去MDN上搜一搜这个属性
https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-shadow

  1. 字前面有符号（实际上也可以是图片）

设置你需要加符号的标签的before子类。

1
2
3
4
p::before{
	content: →; /*或者可以使用url函数引入图片文件*，但图片尺寸需要小一点*/
	color: red;
}

不废话啦，先push到网页上了。- :)

打赏
  • 版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！
  • Copyrights © 2023-2024 大学生暮暖
  • 访问人数: | 浏览次数:

请我喝杯奶茶吧~

支付宝
微信