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我就爆照了。”

今天文章就先到此为止了，今天写着文章，突然发现自己的脑洞已经大的不行不行了。
但是要是能让各位读者呵呵一笑，也就不算白费功夫了。
最后问一下各位读者，魔兽首映有多少人回去看呀？有没有北京的？一起约呀。