HTML 网站开发笔记

基本性质：
style
字体font
- 调整字体大小
- 颜色
图片：
视频video
按钮
无序列表横向排序
Events
- 鼠标

这是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

原文链接：https://blog.csdn.net/hush_quiet/article/details/126187057