HTML 学习笔记记录

这是GitHub的仓库链接：breaking html page

基本性质：

基本单位

rem: root em，是根元素（即html）font-size的多少倍，较为常用。html字体默认为16px
em: em 是父元素font-size的多少倍

单双引号

大部分情况下，二者可以混用。
特例

document.querySelector(".Class").backgroundImage = "url('https://...')";

加减号和字符串

关于具体实例可以在这里找stackoverflow
字符串减去一个数字没有意义，所以JS会先将字符串转为数字再做运算
但是字符串加上数字，就会类似于字符串的连接 "1.1" + 0.1 会等于 "1.10.1" 而不是 1.2

而且数字可以赋值给字符串？！

document.querySelector('.Class').style.opacity = 0.1

编译器警告，数字不能直接赋值给字符串，但是实际效果和"0.1"一样

document.querySelector()和document.getElementId()

• querySelector()的参数可以是id #id ，class .class
  也可以监听 `document.querySelector(‘.id’).addEventListener(‘click’, function);
• getElementId只能选择id，并且不能在后面加上 addEventListener

style

margin-left

margin-left 用于调整元素与左侧的间距
下面想测验一下，父元素使用了margin-left，子元素如果重写margin-left，那么与左侧间距是否会重写呢？

<div style="margin-left: 10rem">
	<h1>hello</h1>
	<h1 style="margin-left: 10rem">hello</h1>
</div>

发现第二行的hello又向右移动了
说明子元素的margin-left是基于父元素margin-left的基础上进行改写，而不是直接重写

null 和 unset 和 initial

对某一性质修改很多次后，想要恢复到CSS文件中定义的style，就用null
而unset就是清除掉这个性质，就像从来没有定义过这个性质一样。即变为系统的默认值
查文档归来，上面的话没有经过资料考证。
html unset 和 initial 是两个概念

<!-- css -->
.Class {
	color: blue;
}

<div class="Class">
	<h1>hello</h1>
	<h1 id="hello">hello</h1>
	<h1 id="world">world</h1>
</div>

<script>
	let hello = document.querySelector("#hello");
	let world = document.querySelector("#world");
	hello.style.color = null;
	world.style.color = "unset";
</script>

可以看到，world 依然是蓝色，因为unset对于有继承性质的元素而言是继承父元素的性质。
但是initial直接就是default value
所以这里我们需要改为initial
而In JavaScript, null is marked as one of the primitive values，即null是原始值，不指向任何对象
多查查文档

br

可以用来换行

<p id="p">hello</p>
<p id="hidden"></p>
<script>
	document.querySelector('#p').addEventListener('mouseenter', funcition() {
		document.querySelector('#hidden').innerHTML="hidden text<br>new line";
	}
</script>

实现了鼠标一放到段落上就能显示出隐藏文字。
隐藏文字中用了<br>，可以实现换行。

hover悬浮

<!-- css -->
.Class:hover {
	text-decoration: underline;
}

实现鼠标悬浮即可给文本加上下划线

span

.Class {
    color: blue;
    background-color: red;
}

.Class span:hover {
    color: green;
}

<div class="Class">
    <span>hello</span>
</div>

背景为红色，鼠标只有悬浮在文字上才能变成绿色。

之前只能实现鼠标放在整块区域会变色，这个是升级版，只悬浮在文字上就能变色了

进一步的，在我的仓库中，实现了只在文字上悬浮才会出现下划线，以及只点击文字才会切换图片。
注意span和header不要混用了。比如cursor innerHTML属于span，backgroundImage属于header

字体font

调整字体大小

.size {
	font-size: 40px;
}

可以直接用像素单位px手动调

颜色

.color {
	color: #000000;
}

图片：

改变图片大小

.hong {
	width: 100px;
	height: auto;
}

<img src="" class="hong" alt="description of image">

• 这里100px加不加双引号都是无所谓的，html会自动帮你转
• height="auto"意味着height跟随width自动变，依据是原图片的长宽比
• alt是指对图片的描述，全称是alternative

在文字两侧插入图片

如果按照正常写法，先插入一张图，再写文字，再插入一张图，那么它们是竖着排列的
即<img> <div>text</div> <img>

但是如果用了图片的 float 性质，就可以很好的解决。float可以使后面的元素跟在它的后面，而不是另起一行
float的另一个性质：
如果对<h1>用背景颜色，就会占满一整行，但是加上float特性就不占满一整行了

<img src="" style="float: left">
<div>hello world</div>
<img src="" style="float: right>

效果图如下（当然这里我对文字进行了margin-left 和 margon-right的处理）

切割图片

这个功能用起来倒挺费劲，因为需要知道具体切割的范围，还不如直接用软件裁剪。

<!-- css -->
.crop {
	// 裁剪后期待的图片大小
	width: 400px;
	height: auto;
	overflow: hidden	<!-- hide overflow image part -->
}

.crop img {
	// 先设一波长宽，再裁剪
	width: 400px;
	height: auto
	margin: -100px 0 0 0;
}

<!-- html -->
<div class="crop">
	<img src=""> 
</div>

margin 其实就是在元素外面添加空格 详情见margin，这个网站强推，有啥不会的去查一下就行。
如果margin-top为负，代表元素向上移了，而margin-bottom为正，元素不动，下面的空格增加了。所以二者不能等价哦！

裁剪图片需要先创建一个元素<div>，并规定好长宽是多少，用作目标图片的长宽。然后将<img>标签包裹进去，在CSS文件中为div创建个class，也为img创个class。注意加上overflow: hidden。
如果 img class有width和height参数，那么先将图片转为对应大小，然后再通过margin调整

这里其实只需要调margin的1、4两个数，因为原图片和<div>元素的左上角是对齐的，只需要向上移和向左移就好了。

opacity

中文名是不透明度，为1时不透明，为0完全消失
document.querySelector('.class').style.opacity 类型为字符串而不是数字，但是可以赋值数字，编译器会将其转为字符串的。但是做加法的时候记得用 parseFloat() 转为float类型，否则就变成字符串的concatenate了

可以利用此性质实现照片的消失和复现

<script>
	let image = document.querySelector('#class');	// 找到图片
	setInterval(function() {
		image.style.opacity = parseFloat(image.style.opacity) - 0.01;
		if (image.style.opcaity <= 0) {
			let increase = setInterval(function() {
				image.style.opacity = parseFloat(image.style.opacity) + 0.001;
				// 需要加0.001，奇怪的是如果是0.01，复现的速度会比消失的速度快
				// 所以觉得setInterval的设置哪里有问题
				if (image.style.opacity >= 1) {
					clearInterval(increase);
				}
			}, 10)
		}
	}, 10)
</script>

视频video

<video>
	<source src="file" controls loop type="video/mp4">
</video>

src 的内容只能是文件夹中的视频，想要贴个网址然后播放的，那有点不切实际。
几个video特性：

• controls: 使用户能控制视频的播放
• autoplay：自动播放，使用的时候需要加muted，不然影响用户体验
• unmuted: 不静音
• loop: 循环播放

按钮

html的默认按钮太丑，要和Bootstrap联动。记得表头link一下

<button type="button" class="btn btn-primary">button</button>
// 实现了一个蓝底白字的按钮

form表头也可以用按钮

<form>
	<label for="input" class="form-label">Enter your favorite star</label>	// 提示符
	<input id="input" class="form-control" type="text" placeholder="e.g.Hong 10">
	// id和label的对应, placeholder就是框框里的提示语

	// class="btn btn-primary"
	<input class="btn btn-primary" value="Submit" type="submit">
</form>

• 补充一波placeholder和文本框对齐（不用bootstrap）

将文本框设置和placeholder一样长

document.querySelector('#input').setAttribute('size',
document.querySelector('#input').getAttribute('placeholder').length);
// 警告第二个参数是数字不用管，编译器会转成string的

无序列表横向排序

都知道无序列表正常是竖着排的，代码如下

<ul>
	<li>list 1</li>
	<li>lsit 2</li>
</ul>

但是正常网站的顶部，列表通常都是横着排的。实现方法如下

<!-- css -->
.Class {
	display: inline
	background-color: blue;
	color: white;
}

<!-- html -->
<ul class="Class">
	<li>list 1</li>
	<li>list 2</li>
</ul>

引入了 display: inline 的特性，就可以实现列表的横向排列了
但是这个特性必须写在css文件中，如果直接写 style="display: inline" 是无效的，依然纵向排列。

Events

鼠标

mouseleave mouseenter click等，可以用作 addEventListener 的参数
html event