做帖之常规性梳理复习

马黑黑 · 发表于 2022-7-26 18:15

本帖最后由马黑黑于 2022-7-29 23:44 编辑

九、文本设置常用方法与技巧

帖子通常离不开文本。论坛程序对文本的设置一般不会考虑HTML帖子可能用到的文本样式，需要帖子制作者自己设计。

帖子中的文本，可以直接安放在父盒子之下，但这么做的话，文本块可操作的余地除了基于文本的设置外几乎就没有了，所以还是建议将文本置于合适的盒子中。例如，一个标题性质的文本，可以用一个 div 盒子来装载：

#mytitle {
      position: absolute;
      font: bold 2em / 2.2em '新宋体','楷体',sans-serif;
}

第一句，先将 #mytitle 选择器设定为绝对定位，便于将来对它进行物理位置偏移安置。第二句是重点，用一个 font 简写属性设置了N多个字体方面的设置：bold 是粗体，也可用 normal （正常）值；2em / 2.2em 包含两个方面，前面的 2em 设置字体大小，1em 是常规文字个体的大小，2em 是常规文字个体大小的一倍，也可用 px 等单位，2.2em 表示行高，行高可以等于但不能小于字体的大小；后面是字体名称，当设置多个字体时字体名称之间用小角逗号隔开，第一个字体是优先字体，如果客户端没有安装这个字体，则使用下一个字体，中文名称或有空格的字体名称需要使用小角引号将其包裹起来。

如果不想使用 font 简写属性，则需要一一设置字体相关的属性(符号“|”表示“或者”，实际使用时选其一，不带“|”)：

font-family: '宋体','新宋体','微软雅黑',sans-serif;
font-weight: normal | bold; /* 字体粗细 */
font-size: 20px;  /* 字体大小 px、em、rem 等单位均可使用 */
line-height: 26px;  /* 行高指文本所在行占用的容器高度 */

行高是个很有意思的属性，假设是单行文本，我们希望文本能垂直居中于盒子中，那么，line-height 的值与文本容器高度值一致时就可达成。如果文本容器做了绝对定位，假设没有做容器的高度设置，那么，文本行高的设置会被容器当做自己的高度，而文本容器的长度则与字数有关，单字的宽度，以汉字为例，它的宽度占用和 font-size 所设置的值异常接近（有些字体的实际宽度占用会略大于font-size设定的值），利用此原理，很多情况下我们无需设置文本容器的尺寸。

文本颜色，也叫前景色，在CSS里用 color 属性表示，例如：color: #000000 或者 color: black 或者 color: rgb(0,0,0) 等等。

文本还有诸多细节修饰，这里简单说说几个做帖可能会用到的：

text-shadow: 2px 2px 4px #aaa; /* 文本阴影 */
text-decoration: none | underline | overline | line-through; /* 无 | 下划线 | 上划线 | 删除线 */
text-indent: 2em; /* 行首缩进 */
text-align: left | right | center; /* 文本对齐左对齐 | 右对齐 | 居中对齐 */
letter-spacing: normal | 10px; /* 字间距 */
font-style: normal | italic; /* 字体样式：正常 | 斜体 */

马黑黑 · 发表于 2022-7-28 18:58

本帖最后由马黑黑于 2022-7-29 23:44 编辑

十、关键帧动画@keyframes及其调用方法animation

CSS3可以设置元素的关键帧动画，并通过元素的 animation 属性对关键帧动画进行调用，使得调用关键帧动画的元素具备动画能力。关键帧动画使用 @keyframes 属性进行设置，语法为：

      @keyframes 动画名称 { 动画内容 }

设定关键帧动画有两种方法：

      方法一：from ... to ...

from 是“从”的意思，to 意为“到”，表示动画从一个状态到另一个状态的变化。例如：

@keyframes walk {
      from { left: 0px; }
      to { left: 800px; }
}

这是定义 left 属性的变化，调用了 walk 动画的元素，left 值将从 0px 到 800px 逐步过渡，从而达成元素移动的效果，但需要一个前提：元素的 position 有设定，如绝对、相对定位。如果不想对元素进行 position 设置，可以考虑用 transform 的 translate 或 translateX、 translateY 进行水平或垂直移位：

@keyframes walk {
      from { transform: translate(0px); }
      to { transform: translate(800px); }
}

      方法二：百分比

本法使用百分比表示一个或一系列的属性的变化在某一点（即百分比所表示的时间节点）的形态。例如：

@keyframes walk {
      0% { left: 0px; }
      100% { left: 800px; }
}

同样的，用transform 的 translate 也可以达成相同的效果，且可以不需要调用动画的元素做 position 设置：

@keyframes walk {
      0% { transform: translate(0px); }
      100% { transform: translate(800px); }
}

上面的 walk 关键帧动画，其实等价于使用了 from ... to ... 方法的前例，但是，百分比可以拥有更多的节点，10%、20%、……、95%等等都可以，这时候，from ... to ... 方法就不能替代百分比方法。百分比方法可以设置更为细腻的关键帧动画，动画的状态可以精准到每一个百分比的时间节点，代价是使用更多的代码去具体描述动画的过程。

可用于设置关键帧动画的CSS属性很多，但不是全部的属性都可以使用。一般来说，物理位置（如left、margin）、尺寸（如width、height）、外观（如background、border-radius）、2d和3d动画属性（如transition和transform）等等都可以。

有了关键帧动画设置，使用关键帧动画的元素可以通过 animation 属性来调用，简写的语法为(带中括号的参数可省略)：

      animation: ①动画名称 ②周期时长 ③[运动曲线] ④[播放次数] ⑤[是否反向循环] ⑥[动画停止状态]

例如，#son 选择器要调用 walk 关键帧动画：

#son {
      /* 其它代码 */
      animation: walk 4s linear infinite alternate;
}

id="son" 的元素，调用了 walk 动画，动画运行的周期是4秒，匀速运行，循环运行，反向运行。

infinite 是循环运行的意思，可以用数字替代它；alternate 动画执行完毕再反向运行，用时也是4秒，一个动画过程因为有来回，实际使用的时间是 2 * 4 = 8 秒。

animate 属性还有分步（step）等参数，详情请自己查阅相关资料。

马黑黑 · 发表于 2022-7-29 23:38

本帖最后由马黑黑于 2022-7-29 23:39 编辑

十一、在帖子中使用音频媒体(一）

有做HTML帖子经历的朋友，都知晓简写性的 audio 音频标签，代码并不复杂：

<audio src="音频URL" controls="controls" loop="loop" autoplay="autoplay"></audio>

src 参数给 audio 引入音频媒体；controls 参数是 audio 操控界面，不要时播放器没有播放界面；loop 参数表示循环播放，删掉此属性时表明不重复播放；autoplay 参数表示自动播放，没有此参数时不自动播放。在 HTML 代码里，后面三个参数或称属性，其值就是参数或属性自身的名称，若用 JS 控制，则值可以为 true（真）和 false（假）、也可用参数名称做值但不建议。

和其他标签一样，audio 标签也应当有 id 或类（class）标识，便于CSS对之指定样式、JS对之进行交互操作。所以，上面的 audio 标签，应加入 id="myaud" 或 class="myaud" 之类的标识语句（二选一）。

<audio id="myaud" src="音频URL" controls="controls" loop="loop" autoplay="autoplay"></audio>
<audio class="myaud" src="音频URL" controls="controls" loop="loop" autoplay="autoplay"></audio>

对于 audio 标签，CSS 要做和能做的不多。如果界面可视，定位、简单修饰便可：

#myaud {
      position: absolute;
      left: 20px;
      bottom: 20px;
      outline: none;
}

加载音频除了上面的HTML实体标签方法，还可以使用JS来实现，至少有两种常用的实现方式：

方法一：加载 audio 对象

<script>

let myaud  = new Audio();
myaud.src = '音频地址';
myaud.loop = 'true';
myaud.autoplay = true;

</script>

这里，先建立一个新 audio 对象的实例 myaud，然后针对 myaudo 做必要的属性设置：指定 src，设置循环播放、自动播放。

方法二：追加 audio 元素

追加元素法需要一个宿主，比如 id="papa" 的 div 就可以：

<script>

let myaud  = document.createElement('audio');
myaud.src = '音频地址';
myaud.loop = 'true';
myaud.autoplay = true;
papa.appendChild(myaud);

</script>

此法，需要使用 document 的 createElement 方法创建一个 HTML 元素标签，本例创建的是 audio 标签，并将句柄授权给变量 myaud，myaud 就成为了一个 audio 元素实例。然后和前例一样，设置所需属性，最后令 papa 宿主元素追加 myaud 即 audio 元素。

当 audio 标签的操控界面不可见，JS 对 audio 的管理就显得额外重要且必不可少。JS 总是要通过“代理人”去操纵对象。“代理人”即为元素的操作句柄，或可以理解为原本标签（例如audio）的实例变量（如上两例的 myaud）对象。前面说用 HTML 插入播放器建议加入 id 或 class 语句，就是基于如此用意——JS 操纵 audio 的依据，然后需要声明一下操作句柄：

let myaud = document.querySelector('#myaud'); // 针对 id="myaud"
let myaud = document.querySelector('.myaud'); // 针对 class="myaud"

当标签使用了 id="名称" 这样的身份标识语句，可以不要上面的声明，因为id号是唯一的，在js里可以直接通过名称对之进行操作，现代浏览器不会出现任何异常。而针对 class="名称" 的标签，需要上述对应的声明，该声明仅对第一个出现的标签有效。

无界面时，对 audio 的播放暂停也需要通过JS实现：

myaud.play(); //播放
myaud.pause(); //暂停

以上指令需要依托于某个实体元素，例如 id="btnPlay" 和 id="btnPause" 的按钮，它们单击时播放和暂停播放：

btnPlay.onclick = () => myaud.play();
btnPause.onclick = () => myaud.pause();

本节重点：在帖子中添加音频媒体的HTML方式和两种JS方式。对音频的交互控制，需要使用JS实现。

马黑黑 · 发表于 2022-7-30 12:07

十二、在帖子中使用音频媒体（二）

本节将重点讨论音乐的自动播放问题。

上节我们学习了 JS 对 audio 的控制，JS 是通过“代理人”即 audio 元素的操作句柄 myaud 来达成各类操作，本节延续使用 myaud 操作标识。

我们已经知道，HTML 中的 audio 标签，设置参数 autoplay="autoplay" 即可实现音乐的自动播放，或在 JS 中通过语句 myaud.autoplay = true 来实现相同的功能。但我们应该还知道，现代浏览器出于我们或许不能理解的原因，它们并不支持打开一张 web 页就自动播放音乐或视频媒体。没错，很多朋友的浏览器已经支持媒体的自动播放，但那是私己的设置结果，默认情况下浏览器是不会自动播放音乐（或视频媒体）的。这等于说，autoplay="autoplay" 或 myaud.autoplay = true 并不能保证我们预设的音乐（或视频）是可以自动播放的，换言之，浏览器在默认设置的情况下，我们的 autoplay 设置可能是无效的。

那么，在JS里，可不可以加入 myaud.play() 来播放音乐？可以，这是驱动 myaud 播放的命令，不过遗憾的是，它得有个宿主，比如按钮或窗体甚至是body，它们之上的鼠标单击或鼠标按下事件真实发生了才能驱动音乐的播放，鼠标经过事件都不能触发 audio 的自动播放。

虽然技术上可以绕过浏览器的限制，但要在帖子里实现那是难上加难。所以，面对现实，我们要处理音频媒体不能自动播放的情况。

如果帖子没有用到JS，那么，明智的做法是在 audio 标签中使用 controls="controls" 参数，这样，当 autoplay 失效时，audio 界面上的操作按钮可以提供手动播放音乐的机会。

如果帖子用到JS，则无需令 audio 丑陋的界面污染我们精美的帖子，我们可以通过我们设计的按钮替代 audio 的播放暂停按钮：

html:

<input id="btnPlay" type="button" value="播放" />

js:

btnPlay.onclick = () => myaud.paused ? myaud.play() : myaud.pause();

JS代码里我们使用了三元运算语法糖，通过判断 myaud 的暂停与否来决定 myaud 应执行什么命令，即是播放还是暂停。这行代码能完美工作：如果浏览器阻止了 autoplay，则 audio 处于没有播放的状态，myaud.paused 为真，若不阻止，则音乐播放中，myaud.paused 为假；同理，访问者手动点击过 btnPlay 按钮也产生相同的效果。

但是还有一个问题，按钮的名称（或状态）要具备友好性，能让访问者知道这个按钮下一次点击的作用，不能总是显示“播放”的状态。我们可以监听 audio 的两个状态，playing 和 pause，当它们出现时，分别设定按钮的名称或状态：

myaud.addEventListener('playing', () => btnPlay.value = '暂停');
myaud.addEventListener('pause', () => btnPlay.value = '播放');

这样，音乐暂停时，按钮的名称是播放，反之，按钮的名称是暂停。这个交互也可以通过更换图片、播放CSS关键帧动画与否等方式来展现按钮与音乐播放暂停的对应状态，使得帖子的交互功能更为生动有趣。

马黑黑 · 发表于 2022-8-16 07:29

十三、在帖子中使用视频媒体

随着HTML的发展，Adobe未能从根本上同步解决Flash存在的安全漏洞问题，Flash已不被现代浏览器所支持，彻底退出了web舞台。HTML5则增添一个 video 标签，指定了播放视频的标准规范，用法上它与音频标签 audio 极为相似，其界面同样提供了播放、暂停、音量等交互控制按钮用以控制视频。

HTML5 video 标签缩写性代码语句：

<video id="vid" src="视频地址" control="controls" autoplay="autoplay" loop="loop"></video>

其中，id 为自定义标签标识，src 接受视频文件，controls设定按钮可见，autoplay 为自动播放，loop 规定了循环播放，与 audio 标签的参数基本一模一样。

video控件支持的视频格式不止 MPEG4（即MP4）一种，常见的还有 WebM、ogg 等。

当然，作为视频处理控件，video拥有更多的属性设置，可能会用到的有：

poster - 视频封面，没有播放时显示的图片（poster="图片URL"）
muted - 静音设置（muted="muted"）
preload - 预加载设置（preload="none|metadata|auto"，缺省值 auto 自动全预加载）
width - 宽度（width="800px"）
height - 高度（height="600px"）

CSS3对video的样式制定，除了常规的尺寸设置、定位、边框、阴影等之外，还有一个特殊的设置：

object-fit: cover;

它能保证视频的内容充满其预设的尺寸，除非视频源的制作的怪异的。

当视频用作背景参与修饰帖子，我们需要在CSS里给它设定一个合适的opacity值：

opacity: 0.65;

opacity用于设置可视元素的不透明度，为 0 时完全透明（用于视频是视频内容不可见），为 1 时完全不透明（用于视频时视频完全遮挡其背后的内容）。根据情况，我们可能还需要将视频进行定位，建议使用绝对定位，然后通过设置left和top来进行物理位置的移位。