1
（ ……唠嗑几句）
报哥啊，我是非与姐姐，也就斗胆管你叫声报哥，不然，你就是报老头了。话说看到你又嚎着要把烂尾楼蓬勃壮大起来的事儿，忍不住我也掺几句唠嗑，四海高棚脚架重，五湖烂楼话沧桑，该踩就踩啊。传说你家楼没有最烂只有更烂，楼塌塌楼脆脆楼歪歪见惯不怪，就说没什么是一碗麻辣香锅滚不过去的，一碗不够涮两碗，三碗不到岗，小7小8心慌慌，你可务必要把这恢宏场面，意境悲凄的烂尾楼支棱起来挖，好不易捞着天飞地跑水里漂的碎片揉成一锅大杂烩来个脚本唤醒陈芝麻烂谷子的事儿里滴滴消失的记忆重新归码，情怀迥异的物是人非山长水阔，虽然人才是断层的，局面是苦撑的，但你丫，续个楼，没说是不行的，法无明文规定即自由，没说不行就是行。
唠嗑个小话儿。《茶馆》这出，小8郁闷，楼房是什么时候盖起来的，我回公元前盖的。小7让我猜，茶馆什么时候完工，我呵呵、侬覅打棚。我就知道这建筑诞生的时刻，就代表着这建筑的永恒之道……想到不久将来，你这茶楼肯定必定确定一定又是一座钢筋锈迹斑斑烂在深水潭的烂尾楼，要么千年找柴一场火烧得干干净净，把可能出现的楼歪和楼塌焰个灰飞烟灭，让建筑永恒在那碗麻辣烫中……不然，这肯定必定确定一定又是一座钢筋锈迹斑斑烂在深水潭的烂尾楼，日出日落，日月辉映，茶馆蜃楼，这世界唯一没有时间的地方，没有复工时间，没有停产通知的烂楼界咸鱼……茶馆门口的癞皮狗，也风吹日晒成腊狗，太阳能系统加身，天天日不落，时时十面埋伏矗在那，与骨架楼经历曲折回环的方式被世人扔鸡蛋。茶馆OR标本，复工OR停产，全凭报老头喜好而不是时间来决定。这必定又是烂尾界最受嫉妒的烂尾楼，别家烂尾是一滩烂泥，它烂是一道骨感风景（就怕骨感也有缺钙时）。
八卦记者不信邪，发挥偷拍、窃听、翻查垃圾等隐秘行为以图窥探茶馆建造方的复工续建时间，大老板报上名来以惜墨如金的笔触Sent了份传真回她，为表达对历史和文化的敬畏以及对现存建筑和自然环境的尊重……复工/没有时间就是最好的时间，请继续等待！
<艾玛，笑不活了。。收到传真的小8记者已哭晕在那幢骨感的烂尾楼中嗄嘎>
<……公元……年……>
2
二、草稿本
mark本意是标记，与刻舟求剑中的刻含义相同。mark属于行内标签，它和span一样都是内联级别的，不会因为用了它而产生换行行为。对于需要在文档中高亮显示的重要文本，用它再合适不过，真的简单使用。试看：
mark标签呈现出来的效果，感觉已经非常理想了。
3
三、继续草稿本描述
不久前，我发布过一个极简发图JS脚本程序，图片附带文本说明。当时我就想用figure标签，但不确定这样做是否会增加对脚本的理解难度，所以放弃使用。但不管怎么说，figure是img的好搭档，只是用起来语法结构略显复杂：
<figure>
<img alt="" src="图片地址" />
<figcaption>图片文本说明</figcaption>
</figure>
这将在图片下方出现图片的文本说明。
使用时，figure标签以父元素存在，其下的图片和文本说明作为一对并列子元素出现，文本说明使用的是 figcaption 标签，它不一定放在图片标签之后，可以上提。此外，figure标签并不是只能用于对img的说明，也可以用于其它元素，比如div。
4
四、草稿本进度条
先看以下效果：
上面的进度条代码如下：
<progress max="100" value="50"></progress>
这是块状级（block）的标签，它会独立占用一行。这么复杂的效果代码却是极其简单的：max属性表示其长度，value属性表示当前进度。H5这个progress进度条标签极度简化了做进度条的成本，但是在过去，我们需要用诸如div等盒子加background底色来模拟，设计消耗极大。
当然，要动态驱动这个进度条，H5自身是没有办法的，还是需要JS的参与。不过，它已经很优秀了，极简的参数，JS的编程开销一般也仅主要针对progress的value值，应该很小。
若仅作为静态表示事务的进度，没有JS它也完全可以胜任。
5
五、讨厌的数学老师草稿本
请看下面的样式，是不是可以让我们回到中学的课堂？你还记得数学老师可爱或可恶的样子么？
102
102
不论上面的东东能否勾起对中学课堂的回忆，上下标的实现确实是没有中学数学的难度，语句很简单：
10<sup>2</sup>
10<sub>2</sub>
仅仅需要分清哪个是表示上标、哪个是表示下标。记忆这对双胞胎的技巧是：sup和sub的区别仅仅是最后一个字母，一个是p，一个是b，前者脸朝上，是上标，后者脸朝下，是下标。
记得我此前介绍过这个内容，这里且当复习。
6
六、草稿本标签
fieldset标签主要用于组合表单中的相关元素。我们知道，表单常用来让用户填写信息的，里面的元素众多，为了归拢这些元素，可用fieldset将同类的项目组织起来。
并非说fieldset只能用于表单，很多时候，我们也可以用它来装饰一段文本、给一张图片提供装饰的同时附带一个标题，都是可以的。看下面的效果：
代码如下：
<fieldset>
<legend>漂亮的边框</legend>
<p>这段文本是p标签里的内容</p>
</fieldset>
fieldset其实就是一个框框，把其下的子元素框起来。它如果和子元素legend配合使用，这个框就可以提供一个简短的文本，我们可以称之为标题。legend标签是fieldset的子标签，其他在框内显示内容的标签，如文本、图片、表单元素等等，和legend是并列关系，都归属于fieldset这个父元素。
七、草稿本分割线
hr过去拥有自己的诸多属性，在H5里，它的属性都被剥夺了，不建议再使用，但不等于说它的样式永远只是以下这个默认的样子：
严格来说，上面那条水平分割线它不算难看，实现它只需使用和br标签写起来差不多一样的代码：
<hr />
对，它也和br一样，是一个自闭合标签，标准的H5写法是hr之后是一个空格加一个斜杠。得出的默认样式就是上面那个样子，如果不满意，可以通过CSS来定义它的样式，以下随便给出一个例子：
.myhr {
margin: auto;
background: red;
height: 1px;
width: 300px;
border: none;
}
它默认是有 border 的，所以我把 border 设置为 none，这就得到如下的1像素的红色水平线：
7
八、草稿本引用
blockquote是长段引用其他文本时最常使用的一个标签，包裹在<blockquote>和</blockquote>之间的长文本会头尾自动缩进，试看以下效果：
blockquote是长段引用文本时所使用的标签，包裹在<blockquote>和</blockquote>之间的长文本会头尾缩进……
block是块，quote是引用，合起来的意思是块状引用，就是大段落引用之意。H5还有一个短引用，真的是太短了，语法如下：
<q>效果会肿么样？</q>
效果是酱紫：
效果会肿么样？
这只不过是加上了双引号，不过它可以表明这个是引用的，能避免话语的产权纠纷。与blockquote不同，q标签是内联级别即行内标签，和span标签一样，不会产生分行。
8
草稿本：简单画月牙
css代码：
.moon {
width: 200px;
height: 200px;
box-shadow: 40px 40px 0 0 gold;
border-radius: 50%;
}
html代码：
<div class="moon"></div>
效果：
内封
IP卡
狗仔卡
发表于 2021-8-4 15:55
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
千斤顶
显身卡
楼主
|小黑屋|《唐诗宋词》网站
( 苏ICP备2021032776号 )
。。。
。。。
。。。
。。。
。。。
。。。
。。。
。。。
。。。
。。。
。。。
。。。
。。。
。。。
。。。
。。。
。。。
发表于 2021-8-5 10:27