1、前端攻城獅的自我修養(yǎng)：
1.1 注釋：如無必要，勿增實(shí)體的原則
- 通常寫注釋是為了告訴以后的自己或者和你共同開發(fā)的小伙伴：你的代碼是做什么的，以及你修改了哪些內(nèi)容，在復(fù)雜的邏輯結(jié)構(gòu)前稍微做一下解釋，看代碼的人才不會(huì)像丈二摸不著頭腦。
- HTML的注釋：
<!--在此處寫注釋-->
- CSS的注釋：
/*在此寫注釋*/
- JavaScript的注釋：
//單行的注釋
/*多行的注釋*/
2、相擁和獨(dú)行：（有些元素總喜歡報(bào)團(tuán)取暖，而有些則踽踽獨(dú)行）
- 塊級(jí)元素(block element):塊級(jí)元素總是在新的行上開始，并盡可能地占據(jù)本行全部可用的寬度；
- 塊級(jí)元素有這些：<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>~<h6> <ol> <output> <p> <pre> <section> <table> <tfoot> <ul> <video>
- 行內(nèi)元素：行內(nèi)元素不會(huì)另起一行，它也只占用必要的寬度；
- 行內(nèi)元素有這些：<a> <abbr> <acronym> <b> <bdo> <big>
<button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <q> <samp> <script> <select> <small> <span> <strong> <textarea> <time> <tt> <var>
塊級(jí)元素講究排場，行內(nèi)元素勤儉節(jié)約
- 行內(nèi)元素有這些：<a> <abbr> <acronym> <b> <bdo> <big>
<!--請(qǐng)?jiān)谙旅嫣砑影咐?->
<a >論壇</a>
<a href="htttp://www.itdecent.cn/">簡書</a>
<p>踽踽獨(dú)行</p>
<p>形單影只</p>
image.png
- <span>
<!DOCTYPE html>
<html>
<head>
<title>相擁和獨(dú)行</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="keywords" content="周小雨進(jìn)階前端大神記">
<meta name="description" content="《跟隨小甲魚成為前端大神》">
<meta name="author" content="Belle zhou">
<style>
span {color:red}
</style>
</head>
<body>
<p>黑夜給了我黑色的<span>眼睛</span>,</p>
<p>我卻用它尋找<span>光明</span>。</p>
</body>
</html>
image.png
-
如果想要讓兩個(gè)行內(nèi)元素也能夠獨(dú)占一行，應(yīng)該怎么做呢？(使用br元素?fù)Q行)
image.png - 行內(nèi)元素與塊級(jí)元素對(duì)比：
- 一般情況下，行內(nèi)元素只能包含數(shù)據(jù)和其他行內(nèi)元素。
- 而塊級(jí)元素可以包含行內(nèi)元素和其他塊級(jí)元素；
- 這種結(jié)構(gòu)上的包含繼承區(qū)別可以使塊級(jí)元素創(chuàng)建比行內(nèi)元素更“大型”的結(jié)構(gòu)；
- 為什么要將內(nèi)容分為塊級(jí)和行內(nèi)？
- 因?yàn)镠TML要求瀏覽器將連續(xù)的空白字符合并為一個(gè)空格；
3、所見即所得：
- pre元素：定義預(yù)格式化文本，預(yù)格式化就是保留文本在源代碼中的格式，使得頁面中現(xiàn)實(shí)的和源代碼中的效果完全一致；
- HTML字符實(shí)體(Character Entities)
<!DOCTYPE html>
<html>
<head>
<title>pre元素演示</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="keywords" content="周小雨進(jìn)階前端大神記">
<meta name="description" content="《跟隨小甲魚成為前端大神》">
<meta name="author" content="Belle zhou">
</head>
<body>
<!--演示pre元素的使用-->
<pre>
<!DOCTYPE html>>
<html>>
<head>>
<title>>pre元素演示</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="keywords" content="周小雨進(jìn)階前端大神記">
<meta name="description"content="《跟隨小甲魚成為前端大神》v>
<meta name="author" content="Belle zhou">
</head>
<body>
<!--演示pre元素的使用-->>
</body>
</html>
</pre>
</body>
</html>
在瀏覽器上的顯示
image.png
