HTML 标签出现在页面上

I am working on a webpage right now and have JUST started working on the content/css. I've built many webpages in the past and am using two different CSS files (reset.css and styles.css) to style the pages that I will be creating.

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

However, when I created this most recent page, the <title> tag is displaying in the webpage when I test it. Is there any way I can get around this?

但是,当我创建这个最近的页面时,我测试时会在网页中显示

标签。有什么方法可以解决这个问题吗?</p>

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>

RESET CSS html { font-family: 'Open sans', sans-serif; }

重置CSS html {font-family:'Open sans',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)
    }
}

3 个解决方案

#1

You have:

* { display: block; }

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

Your css implicitly contains this too:

你的css也暗含了这个:

head, title { display: block; }

Do you see what you did? :) If you really want to blockify everything, you could fix it by writing:

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

body * { display: block; }

#2

Title tags by default are display: none;

标题标签默认为display:none;

By adding a selector for everything, *, to set them to block you've inadvertently asked the browser to display it. Either select the title tag and set it back to none or change your existing selector to be more specific.

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

However, setting everything to block is not a good idea. There are plenty of tags, such as spans, which you likely would not like to be block elements during later development. As such I would go with making the existing selector more specific.

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

#3

This is your culprit

这是你的罪魁祸首

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

title is part of * (everything)

标题是*(一切)的一部分

You may want to be more specific with what displays as a block

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

I suspect you only need things inside the body tag to display as such

我怀疑你只需要身体标签内的东西来显示

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

Furthermore, I would like to point out that <div> elements do display as blocks by default so you don't need to explicitly declare the display:block property unless you want to override a previously declared display property

此外,我想指出

元素默认显示为块,因此您不需要显式声明display:block属性,除非您要覆盖先前声明的显示属性

#1