HTML 修真录------"深渊三君王"

qq_35247699 2016-06-14 09:46:06
加精
[size=16px]魔兽上映了,有多少看的,下面评论区举举手,发发言!本来首映要去看来着,虽然是一个伪粉丝,但赶赶潮流还是可以的,但由于小编有其他的事情就没看!

今天中午吃饭问了一位教学部的老师,他说:就算不是一个游戏玩家,看了也是很精彩的。首映那天,很多专业游戏玩家都去看了,就好像有志同道合的人再看一部电影似的!说的小编也挺想去看啦,改天把魔兽的电影票补上!

说完最新电影之后,柠檬再和大家聊聊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。”



“但是需要注意一点,假如使用 p 标签的时候,里面嵌套了 div 标签,这样会导致 p 标签里面的样式被分割掉,这点需要注意。”

“徒儿明白,那‘千面郎君’div 也是块级元素里的咯。”

“对,除此之外,狂暴大帝手下还有两对孪生兄弟非常厉害。

他们分别是有序列表 ol,无序列表 ul 还有列表三兄弟,dl,dt,dd。”


“但是假如你以后遇到不要害怕,为师教你应对之法。”

“怎么应对?难道要用传说中的 PY 交易么?”

“。。。”

所有的标签全部有特定的样式,我们可以通过 CSS 去清掉所有的样式
建立属于自己的 reset.css 文件

“这样就可以随心应对,你想把他摆成什么姿势,就是什么姿势了。”

“那岂不是,嘿嘿嘿,我最喜欢可爱的男孩子了。”

“。。。”

“为师再给你说一说,三君王中的 ‘蚀骨魔水’内联元素。”

特征
inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行

内容撑开宽度
inline元素设置width,height属性无效。

inline元素不支持上下的margin和padding,只支持左右的margin和padding
代码换行被解析


“ ‘蚀骨魔水’内联元素的军队中,有一个修为不弱于她的存在,就是 超链接 a 标签。

她是深渊中号称‘空间权杖’的存在,她能从一个页面中跳转到另外一个界面,同时也可以在同一个页面之中设置空间‘锚点’,实现特定位置的跳转,深渊现在这么强大,她功不可没。(注意:a 标签中一定不能嵌套 a 标签)

“这么厉害?她的锚点是如何设置的呀?”

可以通过设置 href = “# + 锚点名称” 的方式进行跳转,注意,一定要加 #

“那我遇到她们该如何防范?”

“你只需要记住,他强任他强,清风抚山岗。。”

“师傅,你明明心里想的是能不能收几个进后宫吧。”

“孽徒,看剑!~”

(你已经被揍得鼻青脸肿了)

“呼呼,师傅,用得着下死手么,还有,你身为一个正道中人,怎么能练‘下剑’,用猴子偷桃呢。”

“为师这叫策略,出其不意攻其不备。”

“师傅高明。那师傅,深渊三君王中为什么有一个叫‘白君王’呀,这个名字感觉一点都不厉害呀。”

“不厉害?他当初为了某样神器,蹲点等了万年不世出的天才‘东伯雪鹰’近3千万年。”

“师傅,你不要以为我没看过《雪鹰领主》。”

“哈哈哈哈,不要在意这些细节。为师来给你说说‘白君王’内联块元素吧。”

特性
1.支持所有css的样式
2.除块属性的标签以外,同属性以及行属性标签排在一排
3.代码换行被解析

“‘白君王’内联块元素同时具有了宽元素可以设置宽度和高度的特点,同时又像内联元素一样,可以和其他行属性标签处于同一行,因为这个特点,他隐隐有超过其他两大君王的趋势。”

“那他岂不是无敌了?他这么厉害,既能设置宽高,又能处于同一行。”

“然而之所以现在还是三足鼎立,第一点是很多时候,在页面中还是要使用不同标签对应的特性。

其次就是,内联块也并不是完美无缺的。”

“哦?他是去过泰国变性了么?”

“咳咳,并不是,而是因为设置内联块的时候,它的换行会被解析。”

可以看见,img 的边上,并没有 margin,但是实际展示的时候,会存在一条白的间隙。

而当我们把两个 img 标签连在一起写的时候,就正常了,如第一个 img 和第二个 img。


具体解决方法请参考下一篇文章,具体题目还没想好,大家记得看就好。

“哦哦,那我该如何去解决呢?”

“但是,徒儿,你要记得一件事,你在网页中看到块元素,不一定就是块元素,他有可能已经是一个内联块元素了。”

“什么?难道他们还能变性?”

“虽不中,亦不差远已。他们在每次使用之前,可以使用深渊的一件超神器。”
“超神器?那是什么呀。”

是传说中的 display。传说中在使用之前,可以使用 display 来对它原本的特性进行一个修改,可以让原本是块属性的元素变成行属性元素,同时内联属性也同样可以转化为块属性。”

“啊,这么厉害?那内联块也可以进行转化么?”

“嗯,当然可以。”

“徒儿,你要注意,在深渊中还存在一些隐藏的深渊强者,你要注意。”

“谢谢师傅关心,唉,这么长时间,还从来没见过师娘呀。”

“哼哼,等着吧,点赞数到100我就爆照了。”【这是作者自己说的】

今天文章就先到此为止了,今天写着文章,突然发现自己的脑洞已经大的不行不行了。
但是要是能让各位读者呵呵一笑,也就不算白费功夫了。

...全文
3637 40 打赏 收藏 转发到动态 举报
写回复
用AI写文章
40 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复
我觉得像我这样才是挖坟- -2019年5月11日13:59:20
小戏精 2018-06-13
  • 打赏
  • 举报
回复
时隔两年楼主又来挖坟了
hookee 2016-09-06
  • 打赏
  • 举报
回复
latheknox 2016-09-05
  • 打赏
  • 举报
回复
多谢楼主学习了
hxq2012jiayou 2016-09-03
  • 打赏
  • 举报
回复
11111111111
细水长流- 2016-09-03
  • 打赏
  • 举报
回复
哇塞,不错呀!!哈哈哈
业余草 2016-06-30
  • 打赏
  • 举报
回复
meta:keywords,description 现在对搜索引擎的作用可以说不那么重要了,目前来说,也就微软的bing在使用meta。谷歌在很早以前就不根据meta来索引了
  • 打赏
  • 举报
回复
这个帖子分享得确实不错!~谢谢楼主
  • 打赏
  • 举报
回复
不错,很有创意
hookee 2016-06-23
  • 打赏
  • 举报
回复
FlyingDrip 2016-06-23
  • 打赏
  • 举报
回复
这种形式很新颖啊,不错不错~
一叶怀沙 2016-06-22
  • 打赏
  • 举报
回复
有意思有意思,对于初学者应该会比较有用。早N年给我看就好了
  • 打赏
  • 举报
回复
不管原创还是转载的,分享才是最终目的!谢楼主
玉石麟 2016-06-21
  • 打赏
  • 举报
回复
66666666,就是也挺wu的!!!哈哈哈哈
nettman 2016-06-18
  • 打赏
  • 举报
回复
非魔兽迷,不看
joyhen 2016-06-17
  • 打赏
  • 举报
回复
撸主,有机会一起吃小龙虾探讨探讨人生
  • 打赏
  • 举报
回复
  • 打赏
  • 举报
回复
小龙虾很脏哦,吃淤泥、动物死尸、水中悬浮物为生的,很多小龙虾的鳃和肚子都是黑的,根本洗不干净。参考:http://he.people.com.cn/n/2014/0613/c192235-21419338.html
qq_1021540607 2016-06-16
  • 打赏
  • 举报
回复
恋恋西风 2016-06-16
  • 打赏
  • 举报
回复
可以学习学习;
加载更多回复(20)

39,083

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧