网站范例
这是一个测试页面,同时也是 Boost 网页中可用各种样式元素的指南。为了便于自查,这是一个位于 [class="section"] div 内部的 [class="section-body"] div。每个 [class="section"] div 应该有一个对应的 "id",在本例中,该部分是 [id="intro"]。请随意从此处复制元素到其他页面,以快速获得所需的结构。**更重要的是,如果您添加了新的内容样式,请更新此页面,这有助于每个人了解网站文档。**
部分 [class="section-title"]
位于部分主体 [class="section-body"] 内部的简单段落。
标题 2
左侧的图像使用 [class="left-inset"] 作为任何浮动内嵌元素的简写,该元素在顶部和左侧边缘对齐。— Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.
标题 3
此图像使用 [class="right-inset"] 作为上一节的镜像,用于浮动内嵌元素,该元素在顶部和右侧边缘对齐。— Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.
标题 4
这些(希望全部都是)标准的文本标记样式。请注意,这些**不是**结构化标记元素。也就是说,这些是用于标记段落内文本部分的样式,例如本段第二句中的“不是”。
- EM
- 表示强调。
- STRONG
- 表示更强的强调。
- CITE
- 包含对其他来源的引用或参考。
- DFN
- 表示这是所包含术语的定义实例。
- CODE
- 指定
计算机代码
片段。 - SAMP
- 指定程序、脚本等的示例输出。
- KBD
- 表示用户需要输入的文本。
- VAR
- 表示变量或程序参数的实例。
- ABBR
- 表示缩写形式(例如,WWW、HTTP、URI、Mass.等)。
- ACRONYM
- 表示首字母缩略词(例如,WAC, 雷达等)。
- Q
- 表示
引用,可能包含
。子引用
- SUB 和 SUP
- 表示下标或上标。
- INS 和 DEL
- 用于标记相对于文档的不同版本已插入或
删除的文档部分。
标题 5
HTML 有各种结构元素。这意味着它们通常不会以文本流的方式显示。而是显示为单独的块元素。本段就是一个例子。还有被过度使用的 BLOCKQUOTE 也是另一个例子。
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.
Boost 页面避免使用表格作为布局机制。这在各种方面都有利有弊。最重要的益处是内容的更广泛的语义访问。这意味着大多数浏览器都会将表格解释为它们的本质:表格内容。以下便捷示例来自有帮助的HTML4 W3 标准
代码页 ID | 名称 | ACP | OEMCP | Windows NT 3.1 | Windows NT 3.51 | Windows 95 |
---|---|---|---|---|---|---|
1200 | Unicode(ISO/IEC-10646 的 BMP) | X | X | * | ||
1250 | Windows 3.1 东欧语 | X | X | X | X | |
1251 | Windows 3.1 西里尔语 | X | X | X | X | |
1252 | Windows 3.1 美国英语(ANSI) | X | X | X | X | |
1253 | Windows 3.1 希腊语 | X | X | X | X | |
1254 | Windows 3.1 土耳其语 | X | X | X | X | |
1255 | 希伯来语 | X | X | |||
1256 | 阿拉伯语 | X | X | |||
1257 | 波罗的海语 | X | X | |||
1361 | 韩语(Johab) | X | ** | X | ||
437 | MS-DOS 美国英语 | X | X | X | X | |
708 | 阿拉伯语(ASMO 708) | X | X | |||
709 | 阿拉伯语(ASMO 449+,BCON V4) | X | X | |||
710 | 阿拉伯语(透明阿拉伯语) | X | X | |||
720 | 阿拉伯语(透明 ASMO) | X | X |
标题 6
HTML 中最重要的元素之一是超文本链接。在 Boost 页面中,所有链接都尽可能以类似、一致的方式处理,而不管上下文如何。样式变化存在是为了考虑上下文中的颜色对比差异。例如,标题和页脚中的链接使用不同的颜色,以尽可能匹配文本颜色并与各自的背景形成对比。在部分内容中,例如此处,链接还根据它们的目标是Boost 网站还是某些外部网站 [class="external"]提供不同的外观和感觉。由于大多数时候链接都是内部链接,因此这是默认的语义。外部链接需要用 [class="external"] 装饰。
-
一
这是一个“目录”无序列表 [ul class="directory"]。它的样式设置为以尽可能紧凑的形式显示一系列简短的项目。目前,这意味着项目以两列排列,并且项目按从左到右、从上到下的顺序排列。
-
二
即使这是一个无序列表,也可以以这种方式排列任何块元素。顶部容器需要是 [class="directory"],内部项目需要是 [class="directory-item"]。
无序列表 [ul]
这种类型的列表是最常用的结构化元素之一。它用于目录列表、历史列表、目录表等等。目标是根据类型对各种列表进行分类,在列表 [ul] 上使用 [class="type-here"] 属性。请抵制使用分类的冲动,仅仅因为它具有您想要的特定外观。因为在未来的某个时间点,外观将会发生变化,并且您对特定上下文中效果的影响将没有任何发言权。
默认 [ul]
- 项目 1
- 子项目 1a
- 子项目 1a1
- 子项目 1a2
- 子项目 1b
- 子项目 1a
- 项目 2
- 子项目 2a
- 子项目 2b
目录 [ul class="directory"]
- 项目 1
- 子项目 1a
- 子项目 1a1
- 子项目 1a2
- 子项目 1b
- 子项目 1a
- 项目 2
- 子项目 2a
- 子项目 2b
目录表 [ul class="toc"]
历史 [ul class="history"]
- 项目 1
- 子项目 1a
- 子项目 1b
- 项目 2
- 子项目 2a
- 子项目 2b
菜单 [ul class="menu"]
树 [ul class="tree"]
- 项目 1
- 子项目 1a
- 子项目 1a1
- 子项目 1a2
- 子项目 1b
- 子项目 1a
- 项目 2
- 子项目 2a
- 子项目 2b
预格式化 [pre]
这通常用于显示代码示例,或更准确地说,是固定的示例。例如Boost 软件许可证
Boost Software License - Version 1.0 - August 17th, 2003 Permission is hereby granted, free of charge, to any person or organization obtaining a copy of the software and accompanying documentation covered by this license (the "Software") to use, reproduce, display, distribute, execute, and transmit the Software, and to prepare derivative works of the Software, and to permit third-parties to whom the Software is furnished to do so, all subject to the following: The copyright notices in the Software and this entire statement, including the above license grant, this restriction and the following disclaimer, must be included in all copies of the Software, in whole or in part, and all derivative works of the Software, unless such copies or derivative works are solely in the form of machine-executable object code generated by a source language processor. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, TITLE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE COPYRIGHT HOLDERS OR ANYONE DISTRIBUTING THE SOFTWARE BE LIABLE FOR ANY DAMAGES OR OTHER LIABILITY, WHETHER IN CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.