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

【问题标题】：HTML <title> tag appearing on pageHTML <title> 标签出现在页面上
【发布时间】：2015-02-27 00:53:38
【问题描述】：

我现在正在制作网页，刚刚开始制作内容/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: 'Open sans', sans-serif; }

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

样式 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)
    }
}

【问题讨论】：

听起来需要对页面代码进行一些验证。
100% 是你的 reset.css
盲目地将每个元素设置为块级是一个糟糕的主意。

标签： html css title

【解决方案1】：

你有：

* { display: block; }

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

你的 css 也隐含地包含这个：

head, title { display: block; }

你看到你做了什么吗？ :) 如果您真的想阻止所有内容，可以通过以下方式修复它：

body * { display: block; }

【讨论】：

绝对是这样......我现在感觉自己像个傻瓜哈哈。谢谢！无法弄清楚我的生活出了什么问题。

【解决方案2】：

标题标签默认为display: none;

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

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

【讨论】：

【解决方案3】：

这是你的罪魁祸首

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

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

您可能希望更具体地说明显示为块的内容

我怀疑你只需要 body 标签内的东西就可以这样显示

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

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

【讨论】：