1、前端攻城狮的自我修养：

1.1 注释：如无必要，勿增实体的原则

通常写注释是为了告诉以后的自己或者和你共同开发的小伙伴：你的代码是做什么的，以及你修改了哪些内容，在复杂的逻辑结构前稍微做一下解释，看代码的人才不会像丈二摸不着头脑。
HTML的注释：

  <!--在此处写注释-->

CSS的注释：

/*在此写注释*/

JavaScript的注释：

//单行的注释
/*多行的注释*/

2、相拥和独行：（有些元素总喜欢报团取暖，而有些则踽踽独行）

块级元素(block element):块级元素总是在新的行上开始，并尽可能地占据本行全部可用的宽度；
- 块级元素有这些：<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>
行内元素：行内元素不会另起一行，它也只占用必要的宽度；
- 行内元素有这些：<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>
  
  块级元素讲究排场，行内元素勤俭节约}}

<!--请在下面添加案例-->
    <a href="http://bbs.fishc.com">论坛</a>
    <a href="htttp://www.jianshu.com/">简书</a>
    <p>踽踽独行</p>
    <p>形单影只</p>

image.png

<span>

<!DOCTYPE html>
<html>
<head>
    <title>相拥和独行</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="keywords" content="周小雨进阶前端大神记">
    <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

如果想要让两个行内元素也能够独占一行，应该怎么做呢？(使用br元素换行)

image.png
行内元素与块级元素对比：
- 一般情况下，行内元素只能包含数据和其他行内元素。
- 而块级元素可以包含行内元素和其他块级元素；
- 这种结构上的包含继承区别可以使块级元素创建比行内元素更“大型”的结构；
为什么要将内容分为块级和行内？
- 因为HTML要求浏览器将连续的空白字符合并为一个空格；

3、所见即所得：

pre元素：定义预格式化文本，预格式化就是保留文本在源代码中的格式，使得页面中现实的和源代码中的效果完全一致；
HTML字符实体(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="周小雨进阶前端大神记">
    <meta name="description" content="《跟随小甲鱼成为前端大神》">
    <meta name="author" content="Belle zhou">
</head>
<body>
    <!--演示pre元素的使用-->
    <pre>
        &#60;!DOCTYPE html>&#62;
        &#60;html>&#62;
        &#60;head>&#62;
            &#60;title>&#62;pre元素演示&#60;/title&#62;
            &#60;meta charset=&#34;utf-8&#34;&#62;
            &#60;meta name=&#34;viewport&#34; content=&#34;width=device-width,initial-scale=1.0&#34;&#62;
            &#60;meta name=&#34;keywords&#34; content=&#34;周小雨进阶前端大神记&#34;&#62;
            &#60;meta name=&#34;description&#34;content=&#34;《跟随小甲鱼成为前端大神》v&#62;
            &#60;meta name=&#34;author&#34; content=&#34;Belle zhou&#34;&#62;
        &#60;/head&#62;
        &#60;body&#62;
            &#60;!--演示pre元素的使用-->&#62;
        &#60;/body&#62;
        &#60;/html&#62;
    </pre>
</body>
</html>

在浏览器上的显示

image.png