跳至主要內容

学习笔记（2025暑假）

Minecraftbucuo2026/2/2大约 5 分钟

学习笔记（2025暑假）

前言：本笔记将记录我暑假所学的内容。 ——2025.7.27

HTML常见标签（2025.7.27）

  1. <audio>标签

    HTML <audio> 元素用于在文档中嵌入音频内容。 <audio> 元素可以包含一个或多个音频资源， 这些音频资源可以使用 src 属性或者<source> 元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。

    • 使用src属性播放

    示例：

    	<audio controls src="/audios/bgm.mp3">
		Your browser does not support the
		<code>audio</code> element.
	</audio>
    • <audio> 与多个 <source> 元素

    这个例子包含了多个 <source> 元素。如果能够播放的话，浏览器就会试图去加载第一个 source 元素；如果不行，那就退而求其次去加载第二个。

    	<audio controls>
    	<source src="/audios/sound1" type="audio/mpeg"/>
    	<source src="/audios/sound2" type="audio/mpeg"/>
	</audio>

  2. <video>标签

    HTML <video> 元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 <video> 标签用于音频内容，但是 <audio> 元素可能在用户体验上更合适。

    示例：

    	<video controls width="800">
		<source src="/videos/video1.mp4" type="video/mp4">
		<source src="/videos/video2.mp4" type="video/mp4">
		Sorry, your browser doesn't support embedded videos.
	</video>

  3. <form>标签

    	<form>
		<label for="username">用户名</label>
		<input type="text" id="username" name="username"></input>
		<label for="age">年龄</label>
		<input type="number" id="age" name="age"></input>
		<button type="submit">提交</button>
	</form>

  4. <a>标签

        <a href="http://8.134.12.212:8000/">进入游戏(在本页面)</a>
    <a target="_blank" href="http://8.134.12.212:8000/">进入游戏(跳转页面)</a>

太多了。用到的时候网上查吧。。。哈哈哈哈哈哈

CSS 选择器：没做笔记。

CSS属性（2025.8.5）

  1. text-align

    text-align属性：用于设置文本对齐方式，如居中、左对齐、右对齐等。对齐类型：左对齐(left)、居中对齐(center)、右对齐(right)、两端对齐(justify)

  2. line-height

    长度单位介绍：

    • px单位:绝对长度单位，表示屏幕上一个像素点的长度，如20px表示20个像素点。
    • %单位:相对长度单位，表示相对于父元素尺寸的百分比，如200%会使字体放大两倍。
    • em单位:相对长度单位，表示相对于当前元素字体大小的倍数，如2em是当前字体大小的两倍。
    • rem单位:相对长度单位，表示相对于根元素(HTML)字体大小的倍数，不受嵌套层级影响。
    • vw/vh单位:视窗单位，1vw等于视窗宽度的1%，1vh等于视窗高度的1%，如50vw表示视窗宽度的50%。
    • 单位特性对比:px是固定值，em/rem是相对值，vw/vh是视窗比例，百分比是父元素比例。
    • 响应式优势:相对单位(em/rem/vw/vh)能实现页面元素随基准值等比例缩放，适合响应式设计。
    • 单位应用场景:字体常用rem，布局常用百分比/vw/vh，固定尺寸可用px。

    行高定义：CSS属性line-height用于设置文本行间距

  3. letter-spacing

    字间距定义：字与字之间的水平距离

  4. text-indent

    缩进定义：通过text-indent属性实现段落首行缩进。

    em单位：1em等于当前字体大小宽度，2em缩进两个字符。

  5. text-decoration

    text-decoration定义:文本修饰属性，用于添加下划线或波浪线等效果

    常见修饰类型:下划线(underline)、波浪线(wavy underline)

  6. text-shadow

    text-shadow定义: CSS属性用于为文本添加阴影效果

    参数结构: 包含四个参数 - X偏移量、Y偏移量、模糊半径、颜色

  7. font-size

    字体大小单位：像素(px)、em、rem

    默认字体大小：16像素

  8. font-style

    斜体定义：字体样式中的斜体（italic）是一种倾斜的字体形式。

    斜体应用：通过设置font-style: italic可将文本变为斜体。

    默认样式：font-style: normal表示正常（非斜体）的字体样式。

  9. font-weight

    加粗效果定义：通过font-weight属性实现文字加粗效果。

    font-weight取值：可设置1-1000之间的数值，数值越大字体越粗。

  10. font-family

    字体类型分类:带衬线字体、不带衬线字体、等宽字体、艺术字体

  11. background-color

    背景定义:标签的底色设置，通过background-color属性实现

  12. background-image

    背景图片设置方法：使用background-image属性替代background-color

    图片尺寸调整：使用background-size属性设置

    重复控制属性：background-repeat: no-repeat可禁止图片平铺重复

  13. background-position

    background-position定义:背景图片的偏移量控制参数

  14. background-attachment

    background-attachment属性：控制背景图片是固定(fixed)还是随内容滚动(scroll)。

  15. opacity

    控制元素整体透明度

  16. border-style

    边框样式类型：支持dotted（点状）等多种显示模式

  17. border-width

  18. border-color

  19. border-radius

  20. border-collapes

  21. display

    1. inline
    2. block
    3. inline-block
    4. flex

  22. white-space

    • white space属性:控制文本是否保留空格和回车
    • pre标签特性:保留原始格式的空格和回车
    • p标签特性:自动忽略多余空 格和回车
    • div自动换行机制:当内容超出容器宽度时自动换行
    • no wrap设置:通过white-space:nowrap实现强制不换行
    • pre效果实现:通过white-space:pre模拟pre标签效果
    • div与pre关系:pre是在div基础上扩展的等宽字体块级元素
    • white-space常用值:normal(默认换行)、nowrap(不换行)、pre(保留格式)

  23. text-overflow

    • 文本溢出处理：使用CSS属性text-overflow: ellipsis实现超出部分显示省略号。
    • overflow属性：控制内容超出容器时的显示方式，常用值包括auto（自动添加滚动条）和hidden（隐藏超出部分）。

太多了不想记了。。。还是要多实战，学这种东西。

最近更新:
贡献者: 杨必胜