html标签为空时通过css3 empty伪类(:empty)来隐藏标签

通过css伪类来隐藏算是最简单的方法了,但是需要注意的是,标签中必须是什么都没有才可以隐藏,哪怕是有个空格都不行,更不支持嵌套,里面不可以有子标签。

demo实例(题外话我养了一只猫,我给他起名叫demo,哈哈哈~~~)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <style>
    div {
      width: 500px;
      height: 100px;
      background-color:#666;
      margin: 100px auto;
    }
    /* 如果div是空的则隐藏div。(有空格不算为空) */
    div:empty {
      display:none;
    }
  </style>
</head>
<body>
  <!-- 此div会隐藏 -->
  <div></div>
  <!-- 有空格不算为空 -->
  <div> </div>
  <!-- 有子标签span也不算为空 -->
  <div>
    <span>子标签</span>
  </div>
</body>

html网页中头部标签的优化总结

写网页时,对于<head>标签,每次都需要重新写,有时候总是丢掉一些该有的标签。
今日总结一下<head>标签中的元素,做个记录,会持续更新。
如果你还知道这里面没有的,评论区留个言,大家一起进步

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>
            网站标题
        </title>
        <meta name="keywords" content="网页关键字">
        <meta name="description" content="网页描述">
        <link rel="stylesheet" href="layui/css/layui.css" type="text/css"><!-- 引用font-awesome 字体图标(资源需要到官网下载到本地才能预览到效果) -->
        <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css"><!-- 网站的ico图标 -->
        <link rel="shortcut icon" href="/images/favicon.ico"><!-- ios用户添加到主屏幕上显示的图片,一下尺寸兼容各种移动设备 -->
        <link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png">
        <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png">
        <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png">
        <link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png">
        <link rel="canonical" href="%E7%BD%91%E7%AB%99%E7%BB%9D%E5%AF%B9%E5%9C%B0%E5%9D%80"><!-- 告诉搜索引擎站点作者 -->
        <meta name="Author" contect="qinshoushou"><!--用以说明生成工具(如Microsoft,FrontPage 4.0,typecho)等-->
        <meta name="generator" content="Typecho 1.1/17.10.30"><!-- 告诉搜索引擎站点模版的作者 -->
        <meta name="template" content="molerose">
        <meta http-equiv="Page-Exit" contect="revealTrans(duration=20,transtion=6)"><!-- H5手Q分享通用接口代码片段 -->
        <meta itemprop="name" content="网页标题">
        <meta itemprop="description" content="网页描述">
        <meta itemprop="image" content="缩略图200*200最佳">
    </head>
    <body>
    </body>
</html>