我一直在阅读Dive Into HTML5,Mark提到:
"您可以在HTML5大纲视图中测试自己的页面, 以确保正确使用标题元素."
我已经尝试过这个HTML5大纲,我知道它在功能上概述了我在互联网上找到的其他HTML5页面.
它的问题在于它不适用于所有页面(主要是我为Wordpress主题编写的页面),并且错误消息含糊不清; 它们似乎引用了问题中的问题元素(<section>例如),但是没有做太多工作来指定它在页面上讨论的元素; 即指定行号,就像验证器一样.
我发现一些其他的方案是能够读取HTML5的轮廓,但我担心他们可能是早期的实现,可能是过时的当前HTML5规范.
所以我想知道是否有其他程序,网站等,更简洁的错误消息,我可以测试我的页面,以确保我(HTML5的初学者)正在创建一个文档大纲,可以通过能够阅读的工具正确阅读HTML5文档概述.
问题:
为什么<h1>和<h2>标签font-size放在一起<article>?
输出:
然后我想也许只是我的眼睛愚弄我所以我测量了它.
我原来是相同的大小.
我看了看下面的链接(http://w3c.github.io/html/rendering.html#sections-and-headings)我才知道,那是基于层次结构,但<h1>和<h2>上层次的同一级别.
因此,<h1>应该是2em,<h2>应该是1.5em.
码:
<!DOCTYPE html>
<html>
<head>
<title>Headings</title>
<meta charset="utf-8">
</head>
<body>
<article>
<h1>This is h1.</h1>
<h2>This is h2.</h2>
<h3>This is h3.</h3>
<h4>This is h4.</h4>
<h5>This is h5.</h5>
<h6>This is h6.</h6>
</article>
</body>
</html>
Run Code Online (Sandbox Code Playgroud) 我阅读了相关的帖子,但没有找到IE的解决方案,所以我要求一个jQuery解决方案来解决这个问题:
我有一些像这样嵌套的层次标题
<h1> heading 1</h1>
<h2> subheading 1</h2>
<h1> heading 2</h1>
<h2> subheading 1</h2>
<h2> subheading 2</h2>
Run Code Online (Sandbox Code Playgroud)
我需要一些像这样的自动标题输出:
1. heading 1
1.2 subheading 1
2. heading 2
2.1. subheading 1
2.2. subheading 2
Run Code Online (Sandbox Code Playgroud)
有没有办法在IE6 +中使用jQuery或类似方法实现这一点?
我试图使用与页面其余部分的标题不同的字体系列来标记标题中的所有标题,但是我无法将样式仅应用于特定的标题ID.
这是我尝试过的:
#header h1,h2,h3,h4 {
font-family:'Helvetica';
}
Run Code Online (Sandbox Code Playgroud)
但这会导致所有h1/2/3/4标签都使用Helvetica字体,无论它们是否在标头div中.我确定我错过了一些简单的东西,有人可以帮忙吗?谢谢!
我有一个显示"产品"名称的网页,在同一行旁边有编辑/删除链接.例:
产品1(编辑|删除)
我希望产品名称具有较大的字体大小,并且编辑/删除按钮具有常规字体大小(即与段落等等相同).而且我希望它们显示为内联,就像上面的例子一样.我只是想知道我应该使用什么HTML/CSS才能实现这一目标.
如果我使用h1元素作为产品名称,它会将编辑/删除链接推送到下一行,因为h1是一个块元素.所以我可以在我的CSS中覆盖h1并制作display: inline,但是弄乱h1的自然外观似乎是违反最佳实践的东西(?).
另一种选择是根本不使用h1元素并使用几个内联div或spans.但是,对于网页的顶级标题,不使用h1元素似乎也会违反最佳做法......这也需要我明确设置字体大小,这意味着我无法使用默认字体大小h1和p元素,我在网站的其余部分使用.
在这种情况下,最好的方法是什么?我知道这是一个简单/琐碎的问题,但无论如何都要知道.
我需要替换所有:
<p class="someClass someOtherClass">content</p>
Run Code Online (Sandbox Code Playgroud)
同
<h2 class="someClass someOtherClass">content</h2>
Run Code Online (Sandbox Code Playgroud)
在一串内容中.基本上我只是想替换"p"一个"h2".
这是我到目前为止:
/<p(.*?)class="(.*?)pageTitle(.*?)">(.*?)<\/p>/
Run Code Online (Sandbox Code Playgroud)
整个匹配<p>的标签,但我不知道我怎么会去更换<p>同<h2>
我该怎么做呢?
而不是编写CSS代码,
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
}
Run Code Online (Sandbox Code Playgroud)
有没有像[class*="blah"]这样的简短方法?
问候.
问题是TH标签,但我找不到TD标签.
我可以将标题放在<td>标签内吗?
使用css重置后,我的所有标题标签都被重置(当然).像平常一样对它们进行造型的最佳方法是什么.
当然有更好的方法吗?
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.3em; }
h4 { font-size: 1em; }
h5 { font-size: 0.8em; }
h6 { font-size: 0.7em; }
Run Code Online (Sandbox Code Playgroud) 包括 WordPress 官方模板,有很多资源解释了如何使用“header”标签对“h1”和“h2”进行编码,以将副标题包含为“p”标签。
例如,
<main>
<header>
<h1>The Title For The Site</h1>
<p>The subtitle goes here</p>
</header>
...
</main>
Run Code Online (Sandbox Code Playgroud)
或者对于存档页面:
<main>
<header>
<h1>The Title For The Site</h1>
<p>The subtitle goes here</p>
</header>
<article>
<header>
<h1>The Title Of An Article</h1>
<p>The subtitle for the article</p>
</header>
...
</article>
...
</main>
Run Code Online (Sandbox Code Playgroud)
所以问题是: 如果我也需要这些级别的字幕,那么其他级别的 h3 到 h6 标题是什么?
在语义上是否可以进行如下标记:
<main>
<header>
<h1>The Title For The Site</h1>
<p>The subtitle goes here</p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur ... dignissim.</p>
<header>
<h3>Fusce rutrum</h3>
<p>Vestibulum commodo …Run Code Online (Sandbox Code Playgroud) html-heading ×10
html ×7
css ×5
html5 ×3
automation ×1
block ×1
css-reset ×1
html-table ×1
jquery ×1
paragraph ×1
php ×1
regex ×1
replace ×1
stylesheet ×1