• UID12369
  • 登录2017-01-10
  • 粉丝0
  • 关注0
  • 发帖15
  • 主页http://dwz.cn/3xmVNS
  • 金币86枚
社区居民
我是柠檬 发布于2016-06-14 16:45
1/399

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

楼层直达


魔兽上映了,有多少看的,下面评论区举举手,发发言!本来首映要去看来着,虽然是一个伪粉丝,但赶赶潮流还是可以的,但由于小编有其他的事情就没看!


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


说完最新电影之后,楼主再和大家聊聊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我就爆照了。”【这是作者自己说的】


今天文章就先到此为止了,今天写着文章,突然发现自己的脑洞已经大的不行不行了。
但是要是能让各位读者呵呵一笑,也就不算白费功夫了。
需要iOS、html5视频、资料、技术文章找我吧

0人打赏
  • UID12369
  • 登录2017-01-10
  • 粉丝0
  • 关注0
  • 发帖15
  • 主页http://dwz.cn/3xmVNS
  • 金币86枚
社区居民
我是柠檬 发布于2016-06-14 16:46
沙发F
沙发!沙发!
需要iOS、html5视频、资料、技术文章找我吧
您需要登录后才可以回帖
发表回复
极贡献
技术问答
专题荟萃
程序人生
视觉设计
Android开发
iOS开发
编程语言
前端开发
后端开发
服务器架构
软件测试
运维方案
创业路上



最热文章墙

  • 60124/343   【精品推荐】200多种Android动画效果的强悍框架,太全了,不看这个,再有动画的问题,不理你了^@^

  • 33298/188   情人节福利,程序员表白的正确姿势:改几行代码就变成自己的表白了

  • 31893/141   省时省力的Android组件群来了,非常棒的原型参考

  • 29036/226   【精品推荐】Android版产品级的音乐播放器源码,功能太强大了,最好的产品原型有木有?

  • 26218/2   超全!整理常用的iOS第三方资源

  • 25788/0   Python爬虫:常用浏览器的useragent

  • 24733/70   原创表白APP,以程序员的姿势备战新年后的7夕,持续完善中!

  • 22954/138   2016抢红包软件及源码

  • 19964/29   麻省理工的一帮疯子,真的实现了随意操控万物!(绝对黑科技)

  • 19806/25   Android工程师面试题大全

  • 19230/27   2016程序员跳槽全攻略

  • 19014/9   GitHub上排名前50的iOS项目:总有一款你用得着

  • 18522/20   码魂:程序员的牛B漫画

  • 16872/3   吐槽那些程序员的搞笑牛逼注释

  • 16851/149   Android版类似UC浏览器:非常赞,产品级的源码

  • 15704/1   iOS 动画总结

  • 15298/10   2016年最全的Android面试考题+答案 精编版

  • 15254/41   一个绚丽的loading动效分析与实现!

  • 14818/73   【持续更新中】Android福利贴(二):资料源码大放送

  • 14762/83   Android小而全的博客源码:非常适合全面掌握开发技巧

  • 14663/10   女程序员的梦,众网友的神回复

  • 14542/44   惊艳的App引导页:背景图片切换加各个页面动画效果

  • 14468/11   年会上现场review代码是怎么样的体验!

  • 14205/23   个人收集的Android 各类功能源代码

  • 14109/5   新一代Android渠道打包工具:1000个渠道包只需要5秒

  • 13288/19   珍藏多年的素材,灵感搜寻网站

  • 13236/53   基于瀑布流的美女图片浏览App,有注释的源代码

  • 12906/17   用JavaScript 来开发iOS和Android 原生应用:React Native开源框架中文版来啦

  • 12777/15   基于Android支付宝支付设计和开发方案

  • 12754/74   仿京东商城客户端Android最新版,不错的原型和学习资料

  • 12513/20   Android福利第三波【Android电子书】

  • 12333/17   什么是真正的黑客:收获12200+Stars,人气远超微软开源VS

  • 12170/18   65条最常用正则表达式,你要的都在这里了

  • 12168/94   Android带弹幕的视频播放器源码,来自大名鼎鼎的Bilibili弹幕网站

  • 12045/70   【精品推荐】类似360安全卫士安Android源码:非常赞的产品原型

  • 11744/7   用程序员的姿势抢过年的火车票

  • 11682/7   一张图搞定iOS学习路线,非常全面

  • 11645/0   iOS中文版资源库,非常全

  • 11631/11   有木有这样一张酷图帮你集齐所有git命令超实用

  • 11158/10   成为Java顶尖程序员 ,看这11本书就够了

  • 10903/18   一张图搞定Android学习路线,非常全面

  • 10835/10   微信支付终于成功了(安卓,iOS),在此分享

  • 10485/44   在线音乐播放器完整版(商用级的源码):非常赞,可听免费高品质专辑

  • 10456/3   基于Node.js的强大爬虫,能直接发布抓取的文章哦

  • 10372/29   【持续更新中】Android福利贴(一):资料源码

  • 10348/0   GitHub iOS 库和框架Top100 

  • 9926/4   46 个非常有用的 PHP 代码片段

  • 9703/3   即时通信第三方库

  • 9606/61   【技巧一】搭配Android Studio,如何实现App远程真机debug?

  • 9507/9   烧了5亿美金,这家神秘的公司即将颠覆人类未来!

  • 9464/8   流媒体视频直播方案

  • 9315/9   B站建开源工作组:APP想支持炫酷弹幕的看过来

  • 9210/18   八个最优秀的Android Studio插件

  • 9162/2   【精品推荐】高质量PHP代码的50个实用技巧:非常值得收藏

  • 9070/9   中国黑客的隐秘江湖:攻守对立,顶尖高手月入千万美元

  • 8636/6   开箱即用!Android四款系统架构工具

  • 8527/3   一张图看清Linux 内核运行原理

  • 8421/10   十大技巧快速提升Android应用开发性能

  • 8399/3   10款GitHub上最火爆的国产开源项目——可以媲美西半球

  • 8090/1   Android性能优化视频,文档以及工具

  • 返回顶部