Japanese Vegetarian
Five week course in London
A five week introduction to traditional Japanese vegetable meals
HTML+CSS基础——HTML5（布局）
HMEL5 Layout
Yoko's Kitchen
Bok Choi
Bok Choi
Japanese Vegetarian
Five week course in London
A five week introduction to traditional Japanese vegetable meals
这是一个HTML网页的代码，描述了一个简单的网页布局。该网页包括一个标题（Yoko’s Kitchen）、导航栏（home, classes, catering, about, contact）、主要内容区域（courses）和侧边栏（popular-recipes, contact-details）。页脚显示了版权信息。图像和样式表也包括在代码中。
1. 文档结构和基本设置
: 声明使用HTML5规范。...: HTML文档的根元素。...: 包含了网页的元信息和引用的外部资源。</code>: 设置网页标题。</li> <li><code><style>...</style></code>: 包含了内部的CSS样式信息。</li> <li><code><!--[if lt IE 9]>...<![endif]--></code>: 一个条件注释，用于处理不同版本的IE浏览器对HTML5的支持。</li> </ul> <h4>2. 页面结构和布局</h4> <ul> <li><code><body>...</body></code>: 包含网页的实际内容。</li> <li><code>.wrapper {...}</code>: 定义了一个包裹内容的容器，并设置了其宽度、边距、边框和背景颜色等。</li> <li><code><header>...</header></code>: 包含了页面的页眉部分，设置了页眉的高度和背景图片等样式。</li> <li><code><nav>...</nav></code>: 包含了导航链接，其中的链接标签使用了class为"current"的样式。</li> <li><code><section class="courses">...</section></code>: 包含了主要内容部分，用于展示课程信息。</li> <li><code><article>...</article></code>: 单独的一篇文章内容，包括图片、标题和描述。</li> <li><code><aside>...</aside></code>: 侧边栏内容，包括了"popular-recipes"和"contact-details"两个部分。</li> <li><code><footer>...</footer></code>: 包含了页面的页脚部分，设置了版权信息。</li> </ul> <h4>3. CSS样式细节</h4> <ul> <li>定义了各种元素的显示属性、颜色、背景图像、字体和边距等样式。</li> <li>使用了CSS选择器来针对不同的元素应用样式。</li> </ul> <p> </p> <p> </p> <ol> <li> <p>结构性标签：</p> <ul> <li><code><html></code>: 定义了HTML文档的根元素。</li> <li><code><head></code>: 包含了文档的元信息和引用的外部资源。</li> <li><code><body></code>: 定义了文档的主体内容。</li> </ul></li> <li> <p>标题和样式：</p> <ul> <li><code><title></code>: 定义了网页的标题。</li> <li><code><style></code>: 包含了内部样式表，用于定义文档的样式信息。</li> </ul></li> <li> <p>页面结构和布局：</p> <ul> <li><code><header></code>: 定义了页面的顶部区域，通常包含网站的标题、logo和导航菜单等内容。</li> <li><code><nav></code>: 定义了导航菜单。</li> <li><code><section></code>: 定义了一个文档中的分节，通常表示文档中的一个主题内容区块。</li> <li><code><article></code>: 定义了页面中独立的内容，比如一个新闻、一篇博客文章等。</li> <li><code><figure></code>: 定义了一组媒体内容以及它们的标题。</li> <li><code><figcaption></code>: 为<code><figure></code>元素定义了标题。</li> <li><code><aside></code>: 定义了页面中的侧边栏内容，通常用于放置和主内容相关但不是主要内容的部分。</li> <li><code><footer></code>: 定义了页面的页脚，通常包含版权信息、联系方式等内容。</li> </ul></li> <li> <p>图像和链接：</p> <ul> <li><code><img></code>: 用于在页面中嵌入图片。</li> <li><code><a></code>: 定义了超链接，允许用户点击后跳转到另一个URL。</li> </ul></li> <li> <p>组织和定义内容：</p> <ul> <li><code><h1></code> - <code><h6></code>: 定义了标题的级别，从最高级别到最低级别。</li> <li><code><p></code>: 定义了段落。</li> <li><code><ul></code>: 定义了无序列表，其中的每一项使用 <code><li></code> 标签定义。</li> <li><code><hgroup></code>: 用于组合标题。在这个例子中，它包含了文章的标题和副标题。</li> </ul></li> <li> <p>脚本和媒体：</p> <ul> <li><code><script></code>: 用于在页面中嵌入脚本，或者引入外部脚本文件。</li> <li><code><source></code>: 定义了多媒体资源（比如音频或视频）的来源，通常与 <code><video></code> 和 <code><audio></code> 标签一起使用。：</li> </ul></li> <li> <p>表格：</p> <ul> <li><code><table></code>: 定义了一个表格。</li> <li><code><thead></code>: 定义了表格的头部，通常包含表格的标题或者列的标签。</li> <li><code><tbody></code>: 定义了表格的主体，包含表格的行和列。</li> <li><code><tr></code>: 定义了表格中的一行。</li> <li><code><th></code>: 定义了表头单元格。</li> <li><code><td></code>: 定义了表格中的普通单元格。</li> </ul></li> <li> <p>表单：</p> <ul> <li><code><form></code>: 定义了一个表单。</li> <li><code><input></code>: 定义了一个输入字段，比如文本输入框、复选框、单选框等等。</li> <li><code><label></code>: 定义了一个表单元素的标签。</li> <li><code><textarea></code>: 定义了一个多行文本输入框。</li> <li><code><select></code>: 定义了一个下拉菜单。</li> <li><code><option></code>: 定义了下拉菜单的选项。</li> <li><code><button></code>: 定义了一个按钮。</li> </ul></li> <li> <p>多媒体：</p> <ul> <li><code><video></code>: 用于在网页中嵌入视频内容。</li> <li><code><audio></code>: 用于在网页中嵌入音频内容。</li> <li><code><source></code>: 定义了多媒体资源的来源。</li> </ul></li> <li> <p>框架和嵌入内容：</p> </li> </ol> <ul> <li><code><iframe></code>: 用于在网页中嵌入其他网页或嵌入式内容。</li> <li><code><embed></code>: 用于在网页中嵌入外部应用程序或插件。</li> <li><code><object></code>: 定义了嵌入的对象，比如Flash动画或Java小程序。</li> </ul> <ol> <li>其他辅助标签：</li> </ol> <ul> <li><code><div></code>: 用于组合其他HTML元素，通常用作样式和布局的容器。</li> <li><code><span></code>: 用于对文本中的一部分进行分组或标记。</li> <li><code><br></code>: 插入换行符。</li> <li><code><hr></code>: 插入水平分隔线。</li> </ul> <ol> <li>元数据相关标签：</li> </ol> <ul> <li><code><head></code>: 定义了文档的头部，包含了关于文档的一些元数据信息，例如标题、引用的样式和脚本等。</li> <li><code><meta></code>: 用于定义文档的元数据，比如编码方式、关键词、描述等。</li> <li><code><link></code>: 用于引入外部资源，通常用于关联样式表。</li> </ul> <ol> <li>样式和样式表：</li> </ol> <ul> <li><code><style></code>: 用于在文档内部定义样式规则。</li> <li><code><link></code>: 用于引入外部样式表，通常与<code>rel="stylesheet"</code>一起使用。</li> <li><code><div></code>、<code><span></code>等标签可以通过<code>class</code>或<code>id</code>属性来定义样式的选择器。</li> </ul> <ol> <li>地理位置和地图：</li> </ol> <ul> <li><code><map></code>: 定义了一个图像映射，用于将图像的不同区域链接到不同的URL。</li> <li><code><area></code>: 在图像映射中定义一个可点击区域。</li> </ul> <ol> <li>导航和链接：</li> </ol> <ul> <li><code><nav></code>: 定义了导航链接的区域。</li> <li><code><a></code>: 定义了超链接。</li> <li><code><nav></code>和<code><a></code>标签通常组成网页的导航栏。</li> </ul> <ol> <li>元素组织和语义化：</li> </ol> <ul> <li><code><header></code>: 定义了一个文档或节的头部。</li> <li><code><main></code>: 定义了文档的主要内容。</li> <li><code><footer></code>: 定义了一个文档或节的页脚。</li> <li><code><section></code>: 对文档中的某个区域进行分组。</li> <li><code><article></code>: 定义了一个独立的、完整的内容单元。</li> </ul> <ol> <li>表单和输入：</li> </ol> <ul> <li><code><form></code>: 用于创建表单，实现用户输入和提交功能。</li> <li><code><input></code>: 定义表单中的输入控件，比如文本框、复选框、单选按钮等。</li> <li><code><select></code>: 定义下拉列表框。</li> <li><code><textarea></code>: 定义多行的文本输入控件。</li> <li><code><button></code>: 定义按钮。</li> </ul> <ol> <li>表格：</li> </ol> <ul> <li><code><table></code>: 用于创建表格。</li> <li><code><tr></code>: 表示表格中的行。</li> <li><code><th></code>: 表示表格中的表头单元格。</li> <li><code><td></code>: 表示表格中的数据单元格。</li> <li><code><caption></code>: 用于定义表格的标题。</li> </ul> <ol> <li>日期和时间：</li> </ol> <ul> <li><code><time></code>: 定义日期或时间。</li> </ul> <p> </p> <ol> <li>首先是文档类型的声明：</li> </ol> <pre><code><!DOCTYPE html> </code></pre> <p></p> <p>这声明了这个文档是一个HTML文档。</p> <ol> <li>然后是HTML文档的开始标签和头部部分：</li> </ol> <pre><code><html> <head> <title>HMEL5 Layout 头部包括了标题（HMEL5 Layout）和用于定义网页样式的CSS样式表。
- 然后是网页的内容部分：
... ... 内容部分包含了一个具有类名"wrapper"的div元素，其中包括了头部（header）、课程部分（courses）、侧边栏（aside）和页脚（footer）。
- 最后是HTML文档的结束标签：