网站范例
这既是一个测试页面,也是 Boost 网页中各种可用样式元素的指南。为了自我参考,这是一个位于 [class="section"] div 内的 [class="section-body"] div。每个 [class="section"] div 都应该有一个对应的 "id",在本例中,section 的 [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
这些是,希望是全部,标准的文本标记样式。请注意,这些不是结构标记元素。即,这些是用于标记段落内文本部分的样式,例如本段第二句中的 "not"。
- 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.