HTML+CSS基础——HTML5（布局）
发布时间：2023年12月31日
<!DOCTYPE html>
<html>
<head>
<title>HMEL5 Layout</title>
<style type="text/css">
header, section, footer, aside, nav, article, figure, figcaption {
display: block;
}
body {
color: #666666;
background-color: #f9f8f6;
background-image: url("img/13.jpg");
background-position: center;
font-family: Georgia, times, serif;
line-height: 1.4em;
margin: 0px;
}
.wrapper {
width: 940px;
margin: 20px auto 20px auto;
border: 2px solid #000000;
background-color: #ffffff;
}
header {
height: 160px;
background-image: url(img/14.jpg);
}
h1 {
text-indent: -9999px;
width: 940px;
height: 130px;
margin: 0px;
}
nav, footer {
clear: both;
color: #ffffff;
background-color: #aeaca8;
height: 30px;
}
nav ul {
margin: 0px;
padding: 5px 0px 5px 30px;
}
nav li {
display: inline;
margin-right: 40px;
}
nav li a {
color: #ffffff;
}
nav li a:hover, nav li a.current {
color: #000000;
}
section.courses {
float: left;
width: 659px;
border-right: 1px solid #eeeeee;
}
article {
clear: both;
overflow: auto;
width: 100%;
}
hgroup {
margin-top: 40px;
}
figure {
float: left;
width: 290px;
height: 220px;
padding: 5px;
margin: 20px;
border: 1px solid #eeeeee;
}
figcaption {
font-size: 90%;
text-align: left;
}
aside {
width: 230px;
float: left;
padding: 0px 0px 0px 20px;
}
aside section a {
display: block;
padding: 10px;
border-bottom: 1px solid #eeeeee;
}
aside section a:hover {
color: #985d6a;
background-color: #efefef;
}
a {
color: #de6581;
text-decoration: none;
}
h1, h2, h3 {
font-weight: normal;
}
h2 {
margin: 10px 0px 5px 0px;
padding: 0px;
}
h3 {
margin: 0px 0px 10px 0px;
color: #de6581;
}
aside h2 {
padding: 30px 0px 10px 0px;
color: #de6581;
}
footer {
font-size: 80%;
padding: 7px 0px 0px 20px;
}
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<header>
<h1>Yoko's Kitchen</h1>
<nav>
<ul>
<li><a href="" class="current">home</a></li>
<li><a href="">classes</a></li>
<li><a href="">catering</a></li>
<li><a href="">about</a></li>
<li><a href="">contact</a></li>
</ul>
</nav>
</header>
<section class="courses">
<article>
<figure>
<img src="img/15.jpg" alt="Bok Choi" />
<figcaption>Bok Choi</figcaption>
</figure>
<hgroup>
<h2>Japanese Vegetarian</h2>
<h3>Five week course in London</h3>
</hgroup>
<p>A five week introduction to traditional Japanese vegetable meals</p>
</article>
<article>
<figure>
<img src="img/16.jpg" alt="Bok Choi" />
<figcaption>Bok Choi</figcaption>
</figure>
<hgroup>
<h2>Japanese Vegetarian</h2>
<h3>Five week course in London</h3>
</hgroup>
<p>A five week introduction to traditional Japanese vegetable meals</p>
</article>
</section>
<aside>
<section class="popular-recipes">
<h2>Popular Recipes</h2>
<a href="">Yakitori (grilled chicken)</a>
<a href="">Yakitori (grilled chicken)</a>
<a href="">Yakitori (grilled chicken)</a>
<a href="">Yakitori (grilled chicken)</a>
</section>
<section class="contact-details">
<h2>Contact</h2>
<p>Yoko's Kitchen<br />
27 Redchurch Street<br />
Shoreditch<br />
London E2 7DP</p>
</section>
</aside>
<footer>
© 2011 Yoko's Kitchen
</footer>
</div><!-- .wrapper -->
</body>
</html>这是一个HTML网页的代码，描述了一个简单的网页布局。该网页包括一个标题（Yoko’s Kitchen）、导航栏（home, classes, catering, about, contact）、主要内容区域（courses）和侧边栏（popular-recipes, contact-details）。页脚显示了版权信息。图像和样式表也包括在代码中。?
1. 文档结构和基本设置
<!DOCTYPE html>: 声明使用HTML5规范。<html>...</html>: HTML文档的根元素。<head>...</head>: 包含了网页的元信息和引用的外部资源。<title>: 设置网页标题。<style>...</style>: 包含了内部的CSS样式信息。<!--[if lt IE 9]>...<![endif]-->: 一个条件注释，用于处理不同版本的IE浏览器对HTML5的支持。
2. 页面结构和布局
<body>...</body>: 包含网页的实际内容。.wrapper {...}: 定义了一个包裹内容的容器，并设置了其宽度、边距、边框和背景颜色等。<header>...</header>: 包含了页面的页眉部分，设置了页眉的高度和背景图片等样式。<nav>...</nav>: 包含了导航链接，其中的链接标签使用了class为"current"的样式。<section class="courses">...</section>: 包含了主要内容部分，用于展示课程信息。<article>...</article>: 单独的一篇文章内容，包括图片、标题和描述。<aside>...</aside>: 侧边栏内容，包括了"popular-recipes"和"contact-details"两个部分。<footer>...</footer>: 包含了页面的页脚部分，设置了版权信息。
3. CSS样式细节
- 定义了各种元素的显示属性、颜色、背景图像、字体和边距等样式。
- 使用了CSS选择器来针对不同的元素应用样式。
?
?
-
结构性标签：
<html>: 定义了HTML文档的根元素。<head>: 包含了文档的元信息和引用的外部资源。<body>: 定义了文档的主体内容。
-
标题和样式：
<title>: 定义了网页的标题。<style>: 包含了内部样式表，用于定义文档的样式信息。
-
页面结构和布局：
<header>: 定义了页面的顶部区域，通常包含网站的标题、logo和导航菜单等内容。<nav>: 定义了导航菜单。<section>: 定义了一个文档中的分节，通常表示文档中的一个主题内容区块。<article>: 定义了页面中独立的内容，比如一个新闻、一篇博客文章等。<figure>: 定义了一组媒体内容以及它们的标题。<figcaption>: 为<figure>元素定义了标题。<aside>: 定义了页面中的侧边栏内容，通常用于放置和主内容相关但不是主要内容的部分。<footer>: 定义了页面的页脚，通常包含版权信息、联系方式等内容。
-
图像和链接：
<img>: 用于在页面中嵌入图片。<a>: 定义了超链接，允许用户点击后跳转到另一个URL。
-
组织和定义内容：
<h1>?-?<h6>: 定义了标题的级别，从最高级别到最低级别。<p>: 定义了段落。<ul>: 定义了无序列表，其中的每一项使用?<li>?标签定义。<hgroup>: 用于组合标题。在这个例子中，它包含了文章的标题和副标题。
-
脚本和媒体：
<script>: 用于在页面中嵌入脚本，或者引入外部脚本文件。<source>: 定义了多媒体资源（比如音频或视频）的来源，通常与?<video>?和?<audio>?标签一起使用。：
-
表格：
<table>: 定义了一个表格。<thead>: 定义了表格的头部，通常包含表格的标题或者列的标签。<tbody>: 定义了表格的主体，包含表格的行和列。<tr>: 定义了表格中的一行。<th>: 定义了表头单元格。<td>: 定义了表格中的普通单元格。
-
表单：
<form>: 定义了一个表单。<input>: 定义了一个输入字段，比如文本输入框、复选框、单选框等等。<label>: 定义了一个表单元素的标签。<textarea>: 定义了一个多行文本输入框。<select>: 定义了一个下拉菜单。<option>: 定义了下拉菜单的选项。<button>: 定义了一个按钮。
-
多媒体：
<video>: 用于在网页中嵌入视频内容。<audio>: 用于在网页中嵌入音频内容。<source>: 定义了多媒体资源的来源。
-
框架和嵌入内容：
<iframe>: 用于在网页中嵌入其他网页或嵌入式内容。<embed>: 用于在网页中嵌入外部应用程序或插件。<object>: 定义了嵌入的对象，比如Flash动画或Java小程序。
- 其他辅助标签：
<div>: 用于组合其他HTML元素，通常用作样式和布局的容器。<span>: 用于对文本中的一部分进行分组或标记。<br>: 插入换行符。<hr>: 插入水平分隔线。
- 元数据相关标签：
<head>: 定义了文档的头部，包含了关于文档的一些元数据信息，例如标题、引用的样式和脚本等。<meta>: 用于定义文档的元数据，比如编码方式、关键词、描述等。<link>: 用于引入外部资源，通常用于关联样式表。
- 样式和样式表：
<style>: 用于在文档内部定义样式规则。<link>: 用于引入外部样式表，通常与rel="stylesheet"一起使用。<div>、<span>等标签可以通过class或id属性来定义样式的选择器。
- 地理位置和地图：
<map>: 定义了一个图像映射，用于将图像的不同区域链接到不同的URL。<area>: 在图像映射中定义一个可点击区域。
- 导航和链接：
<nav>: 定义了导航链接的区域。<a>: 定义了超链接。<nav>和<a>标签通常组成网页的导航栏。
- 元素组织和语义化：
<header>: 定义了一个文档或节的头部。<main>: 定义了文档的主要内容。<footer>: 定义了一个文档或节的页脚。<section>: 对文档中的某个区域进行分组。<article>: 定义了一个独立的、完整的内容单元。
- 表单和输入：
<form>: 用于创建表单，实现用户输入和提交功能。<input>: 定义表单中的输入控件，比如文本框、复选框、单选按钮等。<select>: 定义下拉列表框。<textarea>: 定义多行的文本输入控件。<button>: 定义按钮。
- 表格：
<table>: 用于创建表格。<tr>: 表示表格中的行。<th>: 表示表格中的表头单元格。<td>: 表示表格中的数据单元格。<caption>: 用于定义表格的标题。
- 日期和时间：
<time>: 定义日期或时间。
?
- 首先是文档类型的声明：
<!DOCTYPE html>
这声明了这个文档是一个HTML文档。
- 然后是HTML文档的开始标签和头部部分：
<html>
<head>
<title>HMEL5 Layout</title>
<style type="text/css">
...
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
头部包括了标题（HMEL5 Layout）和用于定义网页样式的CSS样式表。
- 然后是网页的内容部分：
<div class="wrapper">
<header>
...
</header>
<section class="courses">
...
</section>
<aside>
...
</aside>
<footer>
...
</footer>
</div><!-- .wrapper -->
内容部分包含了一个具有类名"wrapper"的div元素，其中包括了头部（header）、课程部分（courses）、侧边栏（aside）和页脚（footer）。
- 最后是HTML文档的结束标签：
</body>
</html>
这个标签表示HTML文档的结束。
- 头部部分，样式表（CSS）包括以下内容：
<style type="text/css">
header, section, footer, aside, nav, article, figure, figcaption {
display: block;
}
body {
...
}
.wrapper {
...
}
header {
...
}
...
</style>
这部分定义了网页的样式，例如各个元素的显示属性、颜色、背景图像、尺寸等。
- 还有一个条件注释部分：
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
这部分用于向旧版本的Internet Explorer浏览器（小于IE 9）提供HTML5元素的支持。
文章来源:https://blog.csdn.net/weixin_66547608/article/details/135308223
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！