每日思考（2020/08/17）

题目概览

• 如何原样输出HTML代码，不被浏览器解析
• 写出几个初始化CSS的样式
• 写一个sleep（暂停）函数

题目解答

如何原样输出HTML代码，不被浏览器解析

• 如果是有空格和回车这样的特殊字符的简单文本， 在文本外加<pre></pre>标签

  <pre>
      HTML       代码
  </pre>
  

• 用<textarea></textarea>标签：标签会完整输出

  <textarea>
      <div>HTML代码</div> 
  </textarea>
  

• 把html的<>转换成特殊字符](例：< div > 内容</div >)

  <div> HTML代码</div>
  

• 如果是html内容、javascript、xml或其他特殊内容，使用<xmp></xmp>标签

  <xmp>
      <div>html标签</div>
      <script>
          let a = 2,b = 3;
          console.log(a + b);
      </script>
  </xmp>
  

• 如果是在代码中执行时要显示或打印等可以使用<![cdata[]]>

  <sript>
          < ![CDATA[ 
              function matchwo(a, b) { 
                  if (a < b && a < 0) then { return 1; } else { return 0; } } 
          ]]>
  </script>
  

写出几个初始化CSS的样式

• 举例：

  /* 取消边距在不同浏览器显示不一致问题 */
          body {
              padding: 0;
              margin: 0;
          }
  
          /* 取消列表的标识符 */
          li {
              list-style: none
          }
  
          /* 自适应高度 */
          html,
          body {
               100%;
              height: 100%;
          }
  
          /* 清除浮动 */
          .clearfix {
              zoom: 1;
          }
  
          .clearfix::before,
          .clearfix::after {
              display: table;
              content: '';
          }
  
          .clearfix::after {
              clear: both;
          }
  

• css初始化库：normalize.css

写一个sleep（暂停）函数

//不要写同步的暂停函数。它会让你的程序卡死
//写一个异步的暂停函数，这样可以在任何 async function 中暂停，且只暂停这一部分代码
function sleep(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms);
  });
}
async function test() {
  console.log('start');
  await sleep(1000);
  console.log('end');
}
test();