HTML 修真录------深渊三君王
第三章
“师傅，我经过昨天的修炼，已经对HTML 此门神功有了基础的了解，但是学生有一事不明。”
“何事？但说无妨。”
“这便是那‘盒模型’，都说‘盒模型’是继佛怒火连之后，另一件超神器，但是徒儿却始终不能掌握其原理。”
“此事无碍，且看此图。”
我们把这个盒子，类比成我们中秋节的时候包装月饼的月饼盒子。
其中两个月饼盒子之间的距离就是咱们要介绍的–>margin（外边距）.
而咱们每个月饼都要有最外层的包装盒，
这个包装盒的厚度，就是咱们的–> border（边框）.
那咱们的月饼不可能都是直接挨在一起的，对吧，
那每个月饼之间的间距，咱们就叫做–> padding（内边距）.
那咱们介绍了月饼盒，咱们的月饼总应该有吧。
对的，咱们月饼的宽度就是 –> width.
高度就是 –> height.
而咱们的月饼就叫做 –> element（元素）.
“那我们的盒模型的距离又该怎么去计算呢？”
“汝可识得此图？”
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。
增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。
如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素。
“现在懂了么？”
“徒儿明白了。可是昨天最后学习了太多的方法，难度增加的太快呀。”
“无碍，这些都是你以后每日的必修课程，熟能生巧。”
“也可以用卖油翁里面那句‘无他，唯手熟尔’来描述吧。”
“哼哼，不要以为为师不懂你在干什么，把手从裤裆里拿出来。年轻人不要总撸管，不知道强撸灰飞烟灭么？”
“呃，师傅高明。”
“可是师傅，我们昨天学习了 HTML 的入门心法，接下来应该开始学习招式了吧。就像昨天学习的历史上最常用的标签 div，它都能做什么呀？”
“div 可是号称 HTML 界的千面郎君，他早年凭借一门‘无相神功’，在 HTML 界混得是风生水起。只是后来，因为一个女人… 唉，不说也罢。你现在只要知道，div 凭借此门神功，在网页中会独占一行就可以了。”
“他能独占一行？这是为什么呀？是他武功的特性么？”
“你这么说也没有错，除了 div ， 其他标签也都分别有它对应的语义，就像昨日为师给你讲的，我们通过给标记里面加上特殊的英文单词，从未形成了标签一样，每一个标签都有他自己存在的意义，这样的好处就是能够顺应‘SEO’。”
“SEO?那又是什么东西？”
“SEO 是这个宇宙中的核心规则之一，我们在编写网页的过程中，对应的内容应该去使用对应的标签，就是为了配合 SEO。否则，凭借‘千面郎君div’ 的能力，他自己就能组成一个网页，称霸宇宙了。”
“那SEO 具体是什么意思呢？”
SEO是由英文Search Engline Optimization缩写而来， 中文意译为“搜索引擎优化”，指通过对网站内部调整优化及站外优化，使网站满足搜索引擎收录排名需求，在搜索引擎中提高关键词排名，从而把精准用户带到网站，获得免费流量，产生直接销售或品牌推广。
“您刚才说很多标签都对 SEO 有效，那是不是书写每一个标签都应该注意呀？”
“非也非也，掌握特殊的方法，办事自然能事半功倍。”
“您是指‘九浅一深’，‘调情为先’么？”
“给老子滚，你脑袋里都想的是啥玩应？(ノ｀Д)ノ”
“咳咳，被发现了。”
“哼。”
对seo有用的标签
1.title
2.meta:keywords,description
3.h1(只能出现一次)-h2(不能太多)
4.strong(语气加重)
5.img-alt(替换文本，在图片没有正常显示的时候出现)
6.外链
7.a
“只要掌握了这七个常用的标签的正确用法之后，其他的只要稍微注意即可。”
“唉，师傅。您不是说今天要来介绍‘深渊三君王’ 的么？”
“你还好意思说，成天就知道翻墙去看 PornHub，能不能干点实事？”
“卧槽，师傅，你偷窥我。”
“老夫从来不近女色。”
“师傅，我是男的，而且，而且我是直的。”
“给老子滚，老子不搞基。”
“咳咳咳咳，师傅，你还是快跟我说说‘深渊三君王’的故事吧。”
“哼！~”
第四章
“天地玄黄，宇宙洪荒。 日月盈昃， 辰宿列张 。在这个宇宙初始的时候，原始的世界神心划分成了三大块，其中一块大部分包含了清气，也就是‘神界’的初始状态，浊者则坠至宇宙深处，形成了现在的无尽深渊，第三块就不用多说了吧。”
“师傅，第三块可是现在的人界？”
“不错，正所谓 ‘形而上者谓之道，形而下者谓之器’。深渊中有三个恶魔分的了较多的浊气，力量大涨，从而形成了现在的‘深渊三君王’。”
“那这三个君王的名号都是什么呀？”
“‘狂暴大帝’块元素，‘蚀骨魔水’内联元素 和 ‘白君王’ 内联块元素。”
“听起来都好厉害，那他们都是什么样子的？”
“那为师先来跟你说说，‘狂暴大帝’块元素。”
特征
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。
block元素支持所有的 CSS 样式
“他手下能兵强将众多，但是基本可以划分为下面几类。”
基本元素
div
无意义，主要是配合界面布局(双标签)p
语义：段落(双标签)h1~h6
定义一级标题至六级标题注意
h1 权重非常高，一般一个页面只有一个H1
h2 权重非常高，一般一个页面不要超过10个，大型网站除外
h3 随便用
都是双标签
“但是需要注意一点，假如使用 p 标签的时候，里面嵌套了 div 标签，这样会导致 p 标签里面的样式被分割掉，这点需要注意。”
“徒儿明白，那‘千面郎君’div 也是块级元素里的咯。”
“对，除此之外，狂暴大帝手下还有两对孪生兄弟非常厉害。他们分别是 有序列表 ol，无序列表 ul 还有列表三兄弟，dl，dt，dd。”
“但是假如你以后遇到不要害怕，为师教你应对之法。”
“怎么应对？难道要用传说中的 PY 交易么？”
“。。。”
所有的标签全部有特定的样式，我们可以通过 CSS 去清掉所有的样式
建立属于自己的 reset.css 文件
/*margin的样式初始化*/
body,h1,h2,h3,h4,h5,h6,p,ol,ul {margin:0;
}
/*padding的样式初始化*/
ol,ul {padding:0;
}
/*列表点点的样式初始化*/
ul,ol {list-style: none;
}“这样就可以随心应对，你想把他摆成什么姿势，就是什么姿势了。”
“那岂不是，嘿嘿嘿，我最喜欢可爱的男孩子了。”
“。。。”
“为师再给你说一说，三君王中的 ‘蚀骨魔水’内联元素。”
特征
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行
内容撑开宽度
inline元素设置width,height属性无效。
inline元素不支持上下的margin和padding，只支持左右的margin和padding
代码换行被解析
“ ‘蚀骨魔水’内联元素的军队中，有一个修为不弱于她的存在，就是 超链接 a 标签。她是深渊中号称‘空间权杖’的存在，她能从一个页面中跳转到另外一个界面，同时也可以在同一个页面之中设置空间‘锚点’，实现特定位置的跳转，深渊现在这么强大，她功不可没。（注意：a 标签中一定不能嵌套 a 标签）”
“这么厉害？她的锚点是如何设置的呀？”
可以通过设置 href = “# + 锚点名称” 的方式进行跳转，注意，一定要加 #
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><span id=“top”></span><p>asdnajsd</p><br><br><br><br><br><br><br><a href=“#top”>回到顶部</a>
</body>
</html>“那我遇到她们该如何防范？”
“你只需要记住，他强任他强，清风抚山岗。。”
“师傅，你明明心里想的是能不能收几个进后宫吧。”
“孽徒，看剑！~”
标签的初始化
下划线的样式初始化/*下划线的样式初始化*/
a {text-decoration: none;
}
/*字体样式初始化*/
em {font-style:normal;
}（你已经被揍得鼻青脸肿了）
“呼呼，师傅，用得着下死手么，还有，你身为一个正道中人，怎么能练‘下剑’，用猴子偷桃呢。”
“为师这叫策略，出其不意攻其不备。”
“师傅高明。那师傅，深渊三君王中为什么有一个叫‘白君王’呀，这个名字感觉一点都不厉害呀。”
“不厉害？他当初为了某样神器，蹲点等了万年不世出的天才‘东伯雪鹰’近3千万年。”
“师傅，你不要以为我没看过《雪鹰领主》。”
“哈哈哈哈，不要在意这些细节。为师来给你说说‘白君王’内联块元素吧。”
特性
1.支持所有css的样式
2.除块属性的标签以外，同属性以及行属性标签排在一排
3.代码换行被解析
“‘白君王’内联块元素同时具有了宽元素可以设置宽度和高度的特点，同时又像内联元素一样，可以和其他行属性标签处于同一行，因为这个特点，他隐隐有超过其他两大君王的趋势。”
“那他岂不是无敌了？他这么厉害，既能设置宽高，又能处于同一行。”
“然而之所以现在还是三足鼎立，第一点是很多时候，在页面中还是要使用不同标签对应的特性。其次就是，内联块也并不是完美无缺的。”
“哦？他是去过泰国变性了么？”
“咳咳，并不是，而是因为设置内联块的时候，它的换行会被解析。”
可以看见，img 的边上，并没有 margin，但是实际展示的时候，会存在一条白的间隙。
而当我们把两个 img 标签连在一起写的时候，就正常了，如第一个 img 和第二个 img。
具体解决方法请参考下一篇文章，具体题目还没想好，大家记得看就好。
“哦哦，那我该如何去解决呢？”
标签的初始化
图片样式img {border:none;
}“但是，徒儿，你要记得一件事，你在网页中看到块元素，不一定就是块元素，他有可能已经是一个内联块元素了。”
“什么？难道他们还能变性？”
“虽不中，亦不差远已。他们在每次使用之前，可以使用深渊的一件超神器。”
“超神器？那是什么呀。”
“是传说中的 display。传说中在使用之前，可以使用 display 来对它原本的特性进行一个修改，可以让原本是块属性的元素变成行属性元素，同时内联属性也同样可以转化为块属性。”
“啊，这么厉害？那内联块也可以进行转化么？”
“嗯，当然可以。”
“徒儿，你要注意，在深渊中还存在一些隐藏的深渊强者，你要注意。”
“谢谢师傅关心，唉，这么长时间，还从来没见过师娘呀。”
“哼哼，等着吧，点赞数到100我就爆照了。”
今天文章就先到此为止了，今天写着文章，突然发现自己的脑洞已经大的不行不行了。
但是要是能让各位读者呵呵一笑，也就不算白费功夫了。
最后问一下各位读者，魔兽首映有多少人回去看呀？有没有北京的？一起约呀。
HTML 修真录------深渊三君王相关推荐
- 鸿蒙系统发红包,鸿蒙修真录红包版
鸿蒙修真录红包版,新手玩家登陆注册就能领取红包奖励,超多福利等着你前来感受,各种神装神翼都是非常炫酷的,你可以自由的选择,去各个副本中战斗,获得装备自由交易,一夜暴富不是梦!这里的红包玩法很多,你可以 ...
- RxJava 沉思录（三）：时间维度
本文是 "RxJava 沉思录" 系列的第三篇分享.本系列所有分享: RxJava 沉思录(一):你认为 RxJava 真的好用吗? RxJava 沉思录(二):空间维度 RxJa ...
- 【JAVA今法修真】 第三章 关系非关系 redis法器
您好,我是南橘,万法仙门的掌门,刚刚从九州世界穿越到地球,因为时空乱流的影响导致我的法力全失,现在不得不通过这个平台向广大修真天才们借去力量.你们的每一个点赞,每一个关注都是让我回到九州世界的助力,兄 ...
- PHP沉思录-第三篇-Smarty-左轻侯-《程序员》2007年10月号
为什么80%的码农都做不了架构师?>>> 创建时间:2007-10-31 21:23:11 最后修改时间:2007-10-31 21:23:11 PHP沉思录之三:Smar ...
- 学拳录 第三金刚捣锥，庇身锤（含背折靠） 05.27 更新
16第三金刚捣锥 跨臀胸裆的重心 脚膝腿臂肘手 眼 劲道 动作一 腰左转:再右转 偏右 左脚尖里转 先前棚,双逆缠斜向展开:左手顺缠外转,右手逆缠领住劲 看右手再看左手 双肘斜挂分挒 动作二 腰右转 ...
- iOS 12+ ReplayKit 系统录屏(三) 丢帧压缩
视频录制后需要上传,但是录制视频要想压缩,有几个可以压缩的点:比特率.帧率.分辨率 比特率:单位像素所占的比特值 帧率:单位时间内的视频帧数 分辨率:图片所占的像素点的一个度量 w * h 这里我们在 ...
- 魔兽版前端-大家好，我叫逗你玩！
魔兽上映了,有多少看的,下面评论区举举手,发发言!本来首映要去看来着,虽然是一个伪粉丝,但赶赶潮流还是可以的,但由于小编有其他的事情就没看! 今天中午吃饭问了一位教学部的老师,他说:就算不是一个游戏玩 ...
- 怎么解释三线圈直流电机工作原理更好？
简 介: 针对网络上小型直流电机原理说明视频存在的问题,通过CSDN视频制作系统进行阐释.进一步把TEASOFT中的文稿-视频转换功能进行完善,实现快速零后期视频制作. 经过这次测试,为今后MOOC课 ...
- 合并报表调整、抵销分录的编制顺序
在编制合并财务报表调整.抵销分录时,在题目没有要求的情况下,首先应对子公司的个别财务报表进行调整,其次编制内部交易抵销分录.债权债务抵销分录.债券投资业务抵销分录,然后编制按照权益法调整长期股权投资的 ...
- vs中实现声音录制并保存到指定文件_别人直播怎么录制视频？这三种方法你可以不知道...
在网络科技发展迅速的今天,直播成为了当前最为火热的娱乐方式.不管您是上班族还是自由职业者,在闲暇时除了打游戏以外,直播或许也是最好的选择了.所以,这之中就会产生一些需求,例如:需要将一些自己喜欢的一些 ...
最新文章
- 7-11 分段计算居民水费 （C语言)
- linux下常用FTP命令 1. 连接ftp服务器
- 如何自学python数据分析-『』python数据分析该怎么入门呢？
- Python基础教程：连接列表的八种方法，你都知道吗？
- 在html语言中frame,html Frame、Iframe、Frameset 的区别
- print writer保留原有信息写文件_Python读写EXCEL文件常用方法大全 - pythonputao
- mysql如果数据不存在，则插入新数据，否则更新
- Nginx平滑升级到最新版本
- Linux 12.10 ISO下载地址
- sqlexception: default 和 null 不允许作为显式标识值_我都把MySql啃得这么透彻了，你还不进来看一下吗？...
- 语音情感识别研究进展综述
- 编译器在构造函数里都做了些什么？
- Introduction to Computer Networking学习笔记（二十九）：DHCP
- Citespace、vosviewer 文献信息可视化分析
- 虚拟机16.2去虚拟化教程 超详细全面讲解
- win10 任务栏 网络 图标 消失 空白 network location awareness 错误1068
- 启动Kylin出现的问题
- DSPE-PEG-TPP；磷脂-聚乙二醇-磷酸三苯酯；（阻燃剂TPP）是种含磷元素的化合物，可用作无卤环保型阻燃剂
- 为什么一个盘里的文件夹都不见了，里面一片空白，但那些文件所占的内存却还在的，但好像没被删除
- TiDB 在特来电的实践