欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

HTML 修真录"深渊三君王"_html/css_WEB-ITnose

程序员文章站 2022-05-16 12:07:43
...

第三章

“师傅,我经过昨天的修炼,已经对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 = “# + 锚点名称” 的方式进行跳转,注意,一定要加 #

Document 

asdnajsd








回到顶部

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

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

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

“孽徒,看剑!~”

标签的初始化下划线的样式初始化/*下划线的样式初始化*/a { text-decoration: none;}/*字体样式初始化*/em { font-style:normal;}

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

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

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

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

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

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

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

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

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

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

“然而之所以现在还是三足鼎立,第一点是很多时候,在页面中还是要使用不同标签对应的特性。其次就是,内联块也并不是完美无缺的。”

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

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

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

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

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

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

标签的初始化图片样式img { border:none;}

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

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

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

“超神器?那是什么呀。”

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

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

“嗯,当然可以。”

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

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

“哼哼,等着吧,点赞数到100我就爆照了。”

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