黑书：HTML几个实用的小标签
本帖最后由 马黑黑 于 2022-5-4 23:12 编辑 <br /><br /><style>.book { left: -214px; margin-top: 50px; display: flex; align-items: center; font: normal 1em sans-serif; width: 1024px; height: 700px; perspective: 2000px; cursor: pointer; padding: 10px; position: relative; }
.page { padding: 20px; width: 478px; height: 670px; left: 50%; transform-origin: left; background-color: rgba(243,226,199,1); background: linear-gradient(to right, rgba(193,158,103,1) 0%, rgba(182,141,76,1) 1%, rgba(233,212,179,1) 100%); box-shadow: inset -3px -3px 6px rgba(243,226,199,1), 1px 1px 20px rgba(0,0,0,.15); transform-style: preserve-3d; position: absolute; }
.page div { width: 100%; height: 100%; }
.page div:nth-child(1) { display: block; }
.page div:nth-child(2) { display: none; }
@keyframes rot1{ from { transform: rotateY(0deg); } to { transform: rotateY(-180deg); } }
@keyframes rot2{ from { transform: rotateY(-180deg); } to { transform: rotateY(0deg); } }
.page p { margin: 0; padding: 6px 0; }
h2 { font: bold 1.3em sans-serif; padding: 8px 0; margin: 0; }
.rnum { position: absolute; bottom: 6px; right: 10px; color: #000; font-size: 10px; }
.lnum { position: absolute; bottom: -12px; left: -6px; color: #000; font-size: 10px; }
.tit { font: bold 3em / 10em sans-serif; color:#e6e6e6; text-shadow: 1px 1px 2px gray; }
.vtc { writing-mode: vertical-rl; text-align: center; }
.mid { text-align: center; }
.right { text-align: right; }
.red { color: red; }
</style>
<div class="book">
<div class="page">
<div>
<p class="rnum">All in here</p>
<p>H5</p>
<p class="tit vtc">几个实用标签</p>
</div>
<div>
<h2>目录</h2>
<p> 一、details 查看详情</p>
<p> 二、mark 高亮文本</p>
<p> 三、figure 图像文本描述</p>
<p> 四、progress 进度条</p>
<p> 五、sup和sub 上下标</p>
<p> 六、fieldset 标签</p>
<p> 七、hr 水平分割线</p>
<p> 八、blockquote 长引用</p>
<p class="lnum">Never settle</p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">1</p>
<h2>一、details 查看详情</h2>
<p>details是detail的复数形式，作为标签只能用复数。该标签不能单独使用，需与sumary子标签相配合，否则属语法不规范，h5验证不通过。举例如下：</p>
<pre>
<<span style='color:darkred'>details</span>>
<<span style='color:darkred'>summary</span>>查看详情<<span style='color: darkred'>/summary</span>>
<<span style='color:darkred'>p</span>>此处为详情描述文本或图片<<span style='color: darkred'>/p</span>>
<<span style='color: darkred'>/details</span>>
</pre>
<p>details标签是H5中难得的一个交互标签，它产生的效果是详情部分的内容默认情况下处于隐藏状态，用户想了解的话需要点击三角形图标后方能查看。这项工作，过去，H5以前，只能由JS完成。</p>
<p>下图是details标签运行前后的状态：<br><br></p>
<p class="mid"><img alt="" src="/data/attachment/forum/202205/04/231158uo0ymndozunpp0zz.png" /></p>
</div>
<div>
<p class="lnum">2</p>
<h2>二、mark 高亮文本</h2>
<p>mark本意是标记，与刻舟求剑中的刻含义相同。mark属于行内标签，它和span一样都是内联级别的，不会因为用了它而产生换行行为。对于需要在文档中高亮显示的重要文本，用它再合适不过，真的简单使用。试看：</p>
<pre>
<<span style='color:darkred'>p</span>>mark是<<span style='color:darkred'>mark</span>>高亮文本<<span style='color: darkred'>/mark</span>>标签，它是一个行内标签。<<span style='color: darkred'>/p</span>>
</pre>
<p>运行效果如下：</p>
<p>mark是<mark>高亮文本</mark>标签，它是一个行内标签。</p>
<p>有一种非常流行的标记性语言就叫 Markdown，现在广泛使用于类似于blog性质的社交平台，从道理上讲，它和H5一样，都大量使用语义化的标签，学习语言，还是需要懂得一些基本的英文单词。</p>
<p>mark标签呈现出来的效果实际上相当于在一个span标签里设置了<mark>background-color</mark>，但它的简洁性实在令人惊叹的。在此，我仅使用了它的默认样式，感觉已经非常理想了。</p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">3</p>
<h2>三、figure 图像文本描述</h2>
<p>不久前，我发布过一个极简发图JS脚本程序，图片附带文本说明。当时我就想用figure标签，但不确定这样做是否会增加对脚本的理解难度，所以放弃使用。但不管怎么说，figure是img的好搭档，只是用起来语法结构略显复杂：</p>
<pre>
<<span style='color:darkred'>figure</span>>
<<span style='color:darkred'>img</span> alt="" <span style='color: red'>src</span><span style='color: blue'>=</span><span style='color: magenta'>"图片地址"</span> />
<<span style='color:darkred'>figcaption</span>>图片文本说明<<span style='color: darkred'>/figcaption</span>>
<<span style='color: darkred'>/figure</span>>
</pre>
<p>这将在图片下方出现图片的文本说明。</p>
<p>使用时，figure标签以父元素存在，其下的图片和文本说明作为一对并列子元素出现，文本说明使用的是 figcaption 标签，它不一定放在图片标签之后，可以上提。此外，figure标签并不是只能用于对img的说明，也可以用于其它元素，比如div。</p>
</div>
<div>
<p class="lnum">4</p>
<h2>四、progress 进度条</h2>
<p>先看以下效果：</p>
<progressmax="100" value="50"></progress>
<p>上面的进度条代码如下：</p>
<pre>
<<span style='color:darkred'>progress</span><span style='color: red'>max</span><span style='color: blue'>=</span><span style='color: magenta'>"100"</span> <span style='color: red'>value</span><span style='color: blue'>=</span><span style='color: magenta'>"50"</span>><<span style='color: darkred'>/progress</span>>
</pre>
<p>这是块状级（block）的标签，它会独立占用一行。这么复杂的效果代码却是极其简单的：max属性表示其长度，value属性表示当前进度。H5这个progress进度条标签极度简化了做进度条的成本，但是在过去，我们需要用诸如div等盒子加background底色来模拟，设计消耗极大。</p>
<p>当然，要动态驱动这个进度条，H5自身是没有办法的，还是需要JS的参与。不过，它已经很优秀了，极简的参数，JS的编程开销一般也仅主要针对progress的value值，应该很小。</p>
<p>若仅作为静态表示事务的进度，没有JS它也完全可以胜任。</p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">5</p>
<h2>五、sup和sub上下标</h2>
<p>请看下面的样式，是不是可以让我们回到中学的课堂？你还记得数学老师可爱或可恶的样子么？</p>
<p>10<sup>2</sup></p>
<p>10<sub>2</sub></p>
<p>不论上面的东东能否勾起对中学课堂的回忆，上下标的实现确实是没有中学数学的难度，语句很简单：</p>
<p>10<<span style='color:darkred'>sup</span>>2<<span style='color: darkred'>/sup</span>></p>
<p>10<<span style='color:darkred'>sub</span>>2<<span style='color: darkred'>/sub</span>></p>
<p>仅仅需要分清哪个是表示上标、哪个是表示下标。记忆这对双胞胎的技巧是：sup和sub的区别仅仅是最后一个字母，一个是p，一个是b，前者脸朝上，是上标，后者脸朝下，是下标。</p>
<p>记得我此前介绍过这个内容，这里且当复习。</p>
</div>
<div>
<p class="lnum">6</p>
<h2>六、fieldset 标签</h2>
<p>fieldset标签主要用于组合表单中的相关元素。我们知道，表单常用来让用户填写信息的，里面的元素众多，为了归拢这些元素，可用fieldset将同类的项目组织起来。</p>
<p>并非说fieldset只能用于表单，很多时候，我们也可以用它来装饰一段文本、给一张图片提供装饰的同时附带一个标题，都是可以的。看下面的效果：</p>
<fieldset>
<legend>漂亮的边框</legend>
<p>这段文本是p标签里的内容</p>
</fieldset>
<pre>
代码如下：
<<span style='color:darkred'>fieldset</span>>
<<span style='color:darkred'>legend</span>>漂亮的边框<<span style='color: darkred'>/legend</span>>
<<span style='color:darkred'>p</span>>这段文本是p标签里的内容<<span style='color: darkred'>/p</span>>
<<span style='color: darkred'>/fieldset</span>>
</pre>
<p>fieldset其实就是一个框框，把其下的子元素框起来。它如果和子元素legend配合使用，这个框就可以提供一个简短的文本，我们可以称之为标题。legend标签是fieldset的子标签，其他在框内显示内容的标签，如文本、图片、表单元素等等，和legend是并列关系，都归属于fieldset这个父元素。</p>
</div>
</div>
<div class="page">
<div>
<h2>七、hr 水平分割线</h2>
<p>hr过去拥有自己的诸多属性，在H5里，它的属性都被剥夺了，不建议再使用，但不等于说它的样式永远只是以下这个默认的样子：</p>
<hr />
<p>严格来说，上面那条水平分割线它不算难看，实现它只需使用和br标签写起来差不多一样的代码：<br><br><<span style='color:darkred'>hr</span> /></p>
<p>对，它也和br一样，是一个自闭合标签，标准的H5写法是hr之后是一个空格加一个斜杠。得出的默认样式就是上面那个样子，如果不满意，可以通过CSS来定义它的样式，以下随便给出一个例子：</p>
<pre>
<span style='color: red;'>.myhr </span>{
<span style='color: blue;'>margin</span>: auto;
<span style='color: blue;'>background</span>: red;
<span style='color: blue;'>height</span>: 1px;
<span style='color: blue;'>width</span>: 300px;
<span style='color: blue;'>border</span>: none;
}
</pre>
<p>它默认是有 border 的，所以我把 border 设置为 none，这就得到如下的1像素的红色水平线：<br><br></p>
<hrstyle="margin: auto; background: red; height: 1px; width: 300px; border: none;" />
<p class="rnum">7</p>
</div>
<div>
<h2>八、blockquote 长引用</h2>
<p>blockquote是长段引用其他文本时最常使用的一个标签，包裹在<blockquote>和</blockquote>之间的长文本会头尾自动缩进，试看以下效果：</p>
<blockquote>blockquote是长段引用文本时所使用的标签，包裹在<blockquote>和</blockquote>之间的长文本会头尾缩进……</blockquote>
<p>block是块，quote是引用，合起来的意思是块状引用，就是大段落引用之意。H5还有一个短引用，真的是太短了，语法如下：</p>
<p><q>效果会肿么样？</q></p>
<p>效果是酱紫：</p>
<p><q>效果会肿么样？</q></p>
<p>这只不过是加上了双引号，不过它可以表明这个是引用的，能避免话语的产权纠纷。与blockquote不同，q标签是内联级别即行内标签，和span标签一样，不会产生分行。</p>
<p class="lnum">8</p>
</div>
</div>
<div class="page">
<div>
<h2>小小福利：教你简单画月牙</h2>
<p>css代码：</p>
<pre>
<span style='color: red;'>.moon </span>{
<span style='color: blue;'>width</span>: 200px;
<span style='color: blue;'>height</span>: 200px;
<span style='color: blue;'>box-shadow</span>: 40px 40px 0 0 gold;
<span style='color: blue;'>border-radius</span>: 50%;
}
</pre>
<p>html代码：<br><br><<span style='color:darkred'>div</span> <span style='color: red'>class</span><span style='color: blue'>=</span><span style='color: magenta'>"moon"</span>><<span style='color: darkred'>/div</span>></p>
<p>效果：</p>
<div style="width: 200px; height: 200px; box-shadow: 40px 40px 0 0 gold;border-radius: 50%;"></div>
<p class="rnum">内封</p>
</div>
<div>
<p class="rnum">花潮出版社出版<br>统一價 ￥54.00</p>
</div>
</div>
</div>
<script>
let book = document.querySelector(".book");
let page = document.querySelectorAll(".page");
let idx = 1;
let all = page.length;
let currentPage = 0;
setzIdx();
book.onclick = function(){
if(idx == 1) { //左翻
if(currentPage == all) return false;
if(currentPage != all){
page.style.animation = "rot1 .5s linear forwards";
page.children.style.display = "none";
page.children.style.display = "block";
page.children.style.transform = "rotateY(-180deg)";
}
} else { //右翻
if(currentPage == 0) return false;
if(currentPage > 0) {
page.style.animation = "rot2 .5s linear forwards";
page.children.style.display = "none";
page.children.style.display = "block";
page.children.style.transform = "rotateY(0deg)";
}
}
if(currentPage < 0) currentPage = 0;
if(currentPage >= all) currentPage = all;
currentPage += idx;
setzIdx();
}
book.onmousemove = function(e){
e = e || event;
let x = e.clientX - this.offsetLeft;
let y = this.clientWidth;
this.style.cursor =`url('https://638183.freep.cn/638183/qd/${x > y/2 ? "pre.cur" : "next.cur"}'), auto`;
idx = x > y/2 ? 1 : -1;
}
function setzIdx(){
if( currentPage < 0 || currentPage > all -1) return false;
for(j=0; j<all; j++){
page.style.zIndex = j >= currentPage ? page.style.zIndex = all - j : page.style.zIndex = j + 1;
}
if(currentPage <= all - 1) page.style.zIndex = all;
}
</script>
太喜欢这种模式了 猫现在看有点困难 抓紧学习 谢谢老黑真棒！{:4_187:}{:4_179:} 大猫咪 发表于 2022-5-4 21:16
太喜欢这种模式了 猫现在看有点困难 抓紧学习 谢谢老黑真棒！
这些标签用的人都不太多，但的确高效、使用 马黑黑 发表于 2022-5-4 21:21
这些标签用的人都不太多，但的确高效、使用
嗯嗯 谢谢老黑 {:4_191:}{:4_179:} 黑黑老师又出精致美观的新书了，翻页看了几遍：专业性很强的技术书籍……{:4_187:} 千羽 发表于 2022-5-4 21:40
黑黑老师又出精致美观的新书了，翻页看了几遍：专业性很强的技术书籍……
看看价格公道不{:4_170:} 面对代码，俺就是一文盲，心悲凉……{:4_201:} 千羽 发表于 2022-5-4 21:42
面对代码，俺就是一文盲，心悲凉……
大学时学过点英语吧？听说你还过了六级 马黑黑 发表于 2022-5-4 21:41
看看价格公道不
嗯，物超所值，俺来一本{:4_189:} 大猫咪 发表于 2022-5-4 21:28
嗯嗯 谢谢老黑
{:4_190:} 马黑黑 发表于 2022-5-4 21:42
大学时学过点英语吧？听说你还过了六级
黑黑老师，你听谁说的啊？{:4_203:} 千羽 发表于 2022-5-4 21:43
嗯，物超所值，俺来一本
请用支付宝或微信付款，云闪付拒收 千羽 发表于 2022-5-4 21:44
黑黑老师，你听谁说的啊？
狗仔队查到的{:4_170:} 马黑黑 发表于 2022-5-4 21:44
请用支付宝或微信付款，云闪付拒收
好的，那就用微信付款{:4_173:} 千羽 发表于 2022-5-4 21:46
好的，那就用微信付款
这个可以的 马黑黑 发表于 2022-5-4 21:45
狗仔队查到的
哈哈，俺也不是明星……{:4_173:} 马黑黑 发表于 2022-5-4 21:46
这个可以的
俺要多来几本，请尽快发货哈{:4_189:} 千羽 发表于 2022-5-4 21:49
俺要多来几本，请尽快发货哈
批发可以优惠 千羽 发表于 2022-5-4 21:47
哈哈，俺也不是明星……
查到了就是明星 马黑黑 发表于 2022-5-4 22:01
批发可以优惠
哈哈，开始砍价{:6_211:}