让前端飞：形象理解 Hbuilder、文本标记、超链接、列表、图片、表格

最新推荐文章于 2024-10-10 09:56:08 发布

一个魁梧的中年男人

最新推荐文章于 2024-10-10 09:56:08 发布

阅读量1.4k

点赞数

分类专栏：前端H5 文章标签： html html5 css

本文链接：https://blog.csdn.net/qq_44710986/article/details/120262765

版权

前端H5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

**Day19 web前端主持人探访H大楼
主持人19看到一栋在建的H型大楼**（Hbuilder），他非常好奇这是用来做什么的？所以他拿起话筒走进了这一个神秘的地方。原来这个大楼是用来控制大屏幕显示的。这栋大楼里面个工作人员都穿着双层夹，大部分是两个双胞胎一起工作，哥哥什么也不拿，弟弟左手拿一个盾牌（双标记，头尾<html></html>）。也有的单独一个人出来工作的，像头戴bra的就是一个人出来工作，因为他跑到别人身后，向后面拿个盾牌，后面的人就不敢再排队了（<br/>换行符）。
大楼的楼顶各有一个身穿甲壳的大脑袋武士，右边的武士左手还拿着一个盾牌（<head></head>），他们俩扯着一块大红布，大红布左右两边是两只乌龟，中间是这家公司的名字（<title>网页信息显示页面</title>）。这栋大楼中间连接的部分是一个类似于阶梯状拾级而上的电梯，阿九拿着话筒首先来到了第一个电梯，里面是对大屏幕的文本格式进行控制的部门，简称排版标记部。这个部门能控制大屏幕最上面的标题名字（<title>欢迎19主持人</title>）。这时一个长着四节尾巴的不倒翁跑了过来，称它是这个大楼的导游，他可以给记者介绍这所大楼里的人的职能（）。这时阿九看到有两个穿着甲壳的小凳子经过，小凳子后面还带了个小数字。不倒翁告诉阿九，这是给大客户标题标签用的（<h1></h1>属于块级元素/结构/标记：特点：单独占用一行显示。范围：h1~h6：默认加粗、换行、字体从大到小(递减)进行显示）。还有个反向拿个盾牌的hr经理跟着经过，它能用一条线将大客户和普通群众分开的（<hr/>水平线标签）。这是两个穿着甲壳的小红旗一前一后经过（<p>段落内容</p>），他们中间还有很多大客户公司分组派来参观的人员。有些客户员工会提一些要求，这时就会有两个满脸堆笑头上写着喜欢你的方行片会来为他们服务（<fond>字</fond>）。第一个方的有三个兄弟（<font size="5" color="blue"> face="楷体"），有的客户想变大或者变小，方的就会把他的小弟size找来，让他满足客户需求，客户想变个颜色，方的的小弟color就会过来满足客户要求，还有的客户想变个连，方的的兄弟face机会过来。当然有的客户想变胖，会有个大肚子蜜蜂过来蜇他帮他实现愿望（<b>字体加粗</b>），有的客户突然想斜躺一下，这时会有个类似于nba奥布莱恩杯的大奖杯过来撑住他（<i>字体倾斜</i>），总之这个楼层间主要是接待大客户以及其公司的员工的。
穿过该楼层楼顶，向前一步走就到达了第二个楼层，这里是客户穿梭门的地方，客户可以到达他想去的任何地方。有两只大肚子的小恐龙看守（<a>超链接标签</a>），左边的小恐龙身后跟着一个会英语英语的人事，客户把地址告诉这个人事，他就懂了（<a href="http://www.baidu.com" >点我有惊喜</a>）。当然，如果客户没想好，给他一个华夫饼，他就能记得你的请求。有的客户想在外地体验想去的地方的感觉的话，人事会拿出一个标靶，客户要是在标靶上画一个玩滑板鞋的大白，那么他就会去一个新地方（<a href="http://www.baidu.com" target="_blank">点我有惊喜</a>）。如果客户画一个玩滑板的自己的话，表示他还是想在本地体验（（<a href="http://www.baidu.com" target="_self">点我有惊喜</a>））。
继续穿过楼顶，向右一步走，来到了列表部。这里有两个负责人，一个踢足球的瘦高个俩兄弟，一个是刷桶的兄弟俩。踢足球的兄弟俩，中间还站着两个李莲英，他能给前来分组的客户方法编号牌，他们有五种牌，分别是1，a，A，i，I，还可以根据客户要求进行正序倒序排列，还可以决定首先发哪一张牌（<ol reversed="reversed" type="a" start = ” f ”><li>内容</li></ol>）。而刷桶的俩兄弟只能给可以相同的一个标志牌（<ul><li>内容</li></ul>）。
来到第4个楼层，迎接阿九的是两个各拿一个玫瑰的奖杯兄弟（<img>图片标签</img>）。他们是对照片进行处理的。第一个奖杯后面跟着5样东西，分别是一个双人床（src(必须)：关联需要被加载的图片位置），它是用来放照片的地方。后面是一个平放的尺子（width：设置图片的宽度(单位：像素(px))），它是用来控制照片的宽度的。还有个直立放置的尺子（height：设置图片的高度(单位：像素(px))），它是用来控制照片的高度的。后面还有一只小海龟（title：光标移入提示一些信息内容），当有人问照片是啥的时候，这海龟能告诉你。最后是一个阿勒泰产地玉玺（alt：图片加载失败给出其定义的错误信息），它能在照片躺着的身后印上内容，当照片不在家时就能看到提示信息了（<img src="../img/logo2.png" width="350px" height="120px" title="logo图片" alt="图片加载失败"/>）。有时照片想挪个地方，这时就会有美人鱼带领牛逼算盘给照片挪一个格（&nbsp）。有的照片想表示他大于另一个，美人鱼就会领一个高铁满足他的愿望（&gt），有的比较低调的照片想表示自己小于其他照片，美人鱼就会领过来一个轮胎，表示自己跑不过你（%lt）。
阿九穿过第四个楼层，来到第五个楼层。这里是设计客户框架的地方。开门就是两张桌子（<table>表格标签</table>），用来画图纸用的。第一张桌子上摆放着7样东西。第一个是个金属框，它是控制框架的粗细的（border：添加边框线单位：px）。第二个东西是个横放的尺子，用来设计框架的宽度（width：设置表格的宽度单位：px）。第三个东西是个竖放的尺子，用来设计框架的高度的（height：设置表格的高度单位：px）。第四个是个阿里巴巴的公牛，它能控制框架的位置（align：取值：left(左侧)、right(右侧)、center(居中)）。第五个是个穿宇航服的贝壳，它能控制单元格与单元格之间的间隔（cellspacing：设置单元格和单元格或者单元格和边框之间的间隔单位：px）。第六个是躺在垫子上的贝壳，它能控制客户与单元格之间的距离（cellpadding：设置内容(centent)和单元格之间的间隔单位：px）。最后一个是一盒彩笔，它能控制框架的内的颜色（bgcolor：设置背景颜色）。（<table border="1px" align="center" width="600px" height="350px" cellspacing="0px" cellpadding="0px" bgcolor="pink">）。俩桌子中间是两个糖人（<tr> 行标签</tr>），用来控制表格的行列。糖人中间是两个土豆（<td>列标签</td>），用来表格的纵列。有时候土豆子后面还会站个很抠的死胖子（colspan合并列），肉肉的死胖子（rowspan合并行）。