Maison >interface Web >tutoriel HTML >HTML 修真录"深渊三君王"_html/css_WEB-ITnose
HTML 修真录"深渊三君王"_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:16:07822parcourir
第三章
“师傅，我经过昨天的修炼，已经对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我就爆照了。”
今天文章就先到此为止了，今天写着文章，突然发现自己的脑洞已经大的不行不行了。
但是要是能让各位读者呵呵一笑，也就不算白费功夫了。
最后问一下各位读者，魔兽首映有多少人回去看呀？有没有北京的？一起约呀。