Question

我正在开发一个网页，并且刚刚开始处理内容/ css。我过去构建了很多网页，并使用两个不同的CSS文件（reset.css和styles.css）来设置我将要创建的页面的样式。

但是，当我创建此最新页面时，我在测试时会在网页中显示<title>标记。有什么方法可以解决这个问题吗？

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<title>HOME _ JWD</title>
</head>

<body>
    <div class="container">
        <div class="header">
            <div class="header-logo"></div>
            <div class="header-navbar">

            </div>
        </div>
    </div>
</body>
</html>

重置CSS html { font-family：＆＃39; Open sans＆＃39;，sans-serif; }

body {
    margin: 0px;
}
* {
    display: block;
    text-decoration: none;
}

STYLES CSS

.container {
    width: 100%;
}
.header {
    width: 100%;
    height: 75px;
    background-color: #666666;
    display: block;
    line-height: 75px;
}
.header-logo {
    background-image: url(../images/logo_fullwidth.png);
    background-repeat: no-repeat;
    height: 75px;
}
@media screen and (max-width: 480px) {
    .header-logo {
    background-image:url(../images/logo_mobile.png)
    }
}

Answer 1

你有：

* { display: block; }

<head>
  <title>HOME _ JWD</title>
</head>

你的css也暗含了这个：

head, title { display: block; }

你看到你做了什么？ :) 如果你真的想要阻止一切，你可以通过写：

来解决它

body * { display: block; }

Answer 2

标题标签默认为display: none;

通过为所有内容添加选择器*，将它们设置为block，您无意中要求浏览器显示它。选择标题标记并将其重新设置为none或将现有选择器更改为更具体。

然而，将所有内容设置为阻止并不是一个好主意。有很多标签，例如跨度，您可能不希望在以后的开发过程中成为块元素。因此，我会使现有的选择器更具体。

Answer 3

这是你的罪魁祸首

* {
    display: block;
    text-decoration: none;
}

title是*（所有内容）的一部分

您可能希望更具体地显示为块

我怀疑你只需要在body标签内部显示这样的内容

body * {
        display: block;
        text-decoration: none;
    }

此外，我想指出<div>元素默认显示为块，因此您不需要显式声明display:block属性，除非您要覆盖之前声明的显示属性

HTML <title>标签出现在页面</title>上

3 个答案: