第三章
“师傅，我经过昨天的修炼，已经对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我就爆照了。”
今天文章就先到此为止了，今天写着文章，突然发现自己的脑洞已经大的不行不行了。
但是要是能让各位读者呵呵一笑，也就不算白费功夫了。
最后问一下各位读者，魔兽首映有多少人回去看呀？有没有北京的？一起约呀。
HTML，CSS和JavaScript的未來：網絡開發趨勢Apr 19, 2025 am 12:02 AMHTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。
HTML：結構，CSS：樣式，JavaScript：行為Apr 18, 2025 am 12:09 AMHTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。
HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AMHTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。
HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AMHTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。
HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AMHTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。
HTML：建立網頁的結構Apr 14, 2025 am 12:14 AMHTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。
從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AMHTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。
了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AMWebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
ZendStudio 13.5.1 Mac
強大的PHP整合開發環境
記事本++7.3.1
好用且免費的程式碼編輯器
mPDF
mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
Dreamweaver CS6
視覺化網頁開發工具
