在显示教师列表的网页中,显示当前的HTML代码:
<div id="tutors">
<h1>Tutors</h1>
<div class="tutor">
<h2>John</h2>
<p>...</p>
</div>
<div class="tutor">
<h2>Mary</h2>
<p>...</p>
</div>
<div class="tutor">
<h2>David</h2>
<p>...</p>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
现在,出于某些原因,需要在页面中删除当前由h1包装的单词Tutors.我可以想到3个选择:
哪一个更合适?
即使是HTML,我也是HTML5的新手。我的困惑是关于HTML代码使用的标题,这是我的代码片段:
<body>
<header>
<h1>Text A</h1>
</header>
<section>
<h1>Text B</h1>
<article>
<header>
<hgroup>
<h1>Text C</h1>
<h2>Text C2</h2>
</hgroup>
</header>
Run Code Online (Sandbox Code Playgroud)
好吧,让我们开始讨论这个话题,我的问题是;
<body>部分的<header>内部的<h1>标题比<section>部分内部的<h1>大得多,而<h1>比<section>部分的<article>内部的<h1>大得多。换句话说:文本A>文本B>文本C,即使它们使用相同的标题。
为什么文本C2比文本C大得多,尽管使用<h2>的文本C2而使用<h1>的文本C却在同一位置?
是某种错误吗?顺便说一下,我使用Firefox浏览器。提前致谢。
我面临一个奇怪的问题,风格没有应用于H1元素.
码:
p h1 {
color: red;
}Run Code Online (Sandbox Code Playgroud)
<p>
<h1>This is a header</h1>
</p>Run Code Online (Sandbox Code Playgroud)
如何选择h*DOM中存在的第一个最高元素?
就像是
(h1, h2, h3, h4, h5, h6):first-of-ordered-set
Run Code Online (Sandbox Code Playgroud)
也就是说,如果一个DOM树有,在这个顺序h2,h3,h1,h2,h1,它会选择第一个h1;
如果DOM有h3,h3,h2,h2,h4,它会选择第一个h2.
我们假设h*元素不是嵌套的.
我怀疑CSS没有这种能力,对吧?
可能有用的思考:https://css-tricks.com/extremely-handy-nth-child-recipes-sass-mixins/
编辑:为什么我需要它:CMS系统将此"第一个顶部标题"作为文档的标题(帖子,页面,...).但它将它留在页面中.然后它显示标题两次 - 一次作为帖子标题,一次在体内.JavaScript已删除.最高h*级别可能不同.
我想弄清楚这是否是好的编码风格。我知道它是有效的,至少在 HTML5 下,但我想知道它的语义是否符合我的意图。
<ol>
<li>
<h2>The First Item</h2>
<p>a descriptive paragraph</p>
</li>
<li>
<h2>The Second Item</h2>
<p>a descriptive paragraph</p>
</li>
<li>
<h2>The Third Item</h2>
<p>a descriptive paragraph</p>
</li>
</ol>
Run Code Online (Sandbox Code Playgroud)
我正在使用有序列表,因为项目在逻辑上是按顺序排列的,但每个项目似乎都应该有一个标题。从语义上讲,这段代码有意义吗?我应该使用其他类型的标签来表示列表项的标题吗?我应该完全丢弃列表而只使用标题标签吗?这里的最佳做法是什么?
好的就是这个.我的<h1>标题中需要2种不同的字体大小.<br>之后的文本需要大于之前的文本.
<h1>Welcome text from<br>Name</h1>
Run Code Online (Sandbox Code Playgroud)
所以我尝试了
h1 {
color: #c3c2c2;
font-size: 35px;
}
h1 br:after {
font-size: 50px;
}
Run Code Online (Sandbox Code Playgroud)
但这不起作用,任何想法或建议?
我对使用h1-h6标题和sectionhtml5 感到困惑.这两个例子中哪一个是正确的?
<body>
<article>
<header>
<h1>Article heading</h1>
<p><time>0/0/00</time></p>
<div id="article-tags"></div>
</header>
<section>
<h2>Introduction</h2>
<p> ... text ... </p>
</section>
<section>
<h2>The problem itself</h2>
<p> ... text ... </p>
</section>
</article>
</body>
Run Code Online (Sandbox Code Playgroud)
这对我来说很自然,将文章分成几个部分,并根据整篇文章标题层次给它们标题,但是
<body>
<article>
<header>
<h1>Article heading</h1>
<p><time>0/0/00</time></p>
<div id="article-tags"></div>
</header>
<section>
<h1>Introduction</h1>
<p> ... text ... </p>
</section>
<section>
<h1>The problem itself</h1>
<p> ... text ... </p>
</section>
</article>
</body>
Run Code Online (Sandbox Code Playgroud)
我已经看到这花了很多时间并且读到每个部分都应该拥有它自己的标题层次结构.
如果第二个例子是正确的,什么是从具有标题的目的h2来h6?如果每个h2都可以在new中分开section并且应该h1再次使用它自己的标题层次结构,那么是否应该使用比标题更低的标题h1(因为它们都可以拥有标题的自己的部分)?
我有一个用于居中标题的css类,并在两侧添加垂直居中的线条.问题是,它使用css3背景属性,而不是每个浏览器都支持这些属性.所以我想简化这个以实现跨浏览器兼容性,但我不知道该怎么做.
有没有更简单的方法来实现这一点,没有css3背景(并且没有添加任何额外的元素或静态高度/宽度)?
.section-heading {
display: table;
white-space: nowrap;
}
.section-heading:before {
background: linear-gradient(to bottom, black, black) no-repeat left center / 95% 1px;
content: "";
display: table-cell;
width: 50%;
}
.section-heading:after {
background: linear-gradient(to bottom, black, black) no-repeat right center / 95% 1px;
content: "";
display: table-cell;
width: 50%;
}
Run Code Online (Sandbox Code Playgroud) 我无法理解 HTML 标题的正确用法。我正在使用书籍和在线资源进行自学,但在如何使用它们方面存在细微差异。
h1标签仅使用一次,作为页面的主标题。h2到h6,但是,可以任意经常地使用,但应始终按顺序使用,因为他们的目的。例如,anh4应该是an的子标题,而 anh3应该是an的子标题h2。所以问题是:
我是按顺序使用它们,其中h4必须是子标题,子标题h3应该是h2等等,还是根据其相对于主要内容的重要性使用标题级别?
虽然,我已经看到两种方法都在使用。但是,第二种方法会弄乱文档大纲。只是想就此获得一些其他意见。