HTML+CSS基础——HTML5(布局)

2023-12-31 05:03:28
<!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>
				&copy; 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选择器来针对不同的元素应用样式。

?

?

  1. 结构性标签:

    • <html>: 定义了HTML文档的根元素。
    • <head>: 包含了文档的元信息和引用的外部资源。
    • <body>: 定义了文档的主体内容。
  2. 标题和样式:

    • <title>: 定义了网页的标题。
    • <style>: 包含了内部样式表,用于定义文档的样式信息。
  3. 页面结构和布局:

    • <header>: 定义了页面的顶部区域,通常包含网站的标题、logo和导航菜单等内容。
    • <nav>: 定义了导航菜单。
    • <section>: 定义了一个文档中的分节,通常表示文档中的一个主题内容区块。
    • <article>: 定义了页面中独立的内容,比如一个新闻、一篇博客文章等。
    • <figure>: 定义了一组媒体内容以及它们的标题。
    • <figcaption>: 为<figure>元素定义了标题。
    • <aside>: 定义了页面中的侧边栏内容,通常用于放置和主内容相关但不是主要内容的部分。
    • <footer>: 定义了页面的页脚,通常包含版权信息、联系方式等内容。
  4. 图像和链接:

    • <img>: 用于在页面中嵌入图片。
    • <a>: 定义了超链接,允许用户点击后跳转到另一个URL。
  5. 组织和定义内容:

    • <h1>?-?<h6>: 定义了标题的级别,从最高级别到最低级别。
    • <p>: 定义了段落。
    • <ul>: 定义了无序列表,其中的每一项使用?<li>?标签定义。
    • <hgroup>: 用于组合标题。在这个例子中,它包含了文章的标题和副标题。
  6. 脚本和媒体:

    • <script>: 用于在页面中嵌入脚本,或者引入外部脚本文件。
    • <source>: 定义了多媒体资源(比如音频或视频)的来源,通常与?<video>?和?<audio>?标签一起使用。:
  7. 表格:

    • <table>: 定义了一个表格。
    • <thead>: 定义了表格的头部,通常包含表格的标题或者列的标签。
    • <tbody>: 定义了表格的主体,包含表格的行和列。
    • <tr>: 定义了表格中的一行。
    • <th>: 定义了表头单元格。
    • <td>: 定义了表格中的普通单元格。
  8. 表单:

    • <form>: 定义了一个表单。
    • <input>: 定义了一个输入字段,比如文本输入框、复选框、单选框等等。
    • <label>: 定义了一个表单元素的标签。
    • <textarea>: 定义了一个多行文本输入框。
    • <select>: 定义了一个下拉菜单。
    • <option>: 定义了下拉菜单的选项。
    • <button>: 定义了一个按钮。
  9. 多媒体:

    • <video>: 用于在网页中嵌入视频内容。
    • <audio>: 用于在网页中嵌入音频内容。
    • <source>: 定义了多媒体资源的来源。
  10. 框架和嵌入内容:

  • <iframe>: 用于在网页中嵌入其他网页或嵌入式内容。
  • <embed>: 用于在网页中嵌入外部应用程序或插件。
  • <object>: 定义了嵌入的对象,比如Flash动画或Java小程序。
  1. 其他辅助标签:
  • <div>: 用于组合其他HTML元素,通常用作样式和布局的容器。
  • <span>: 用于对文本中的一部分进行分组或标记。
  • <br>: 插入换行符。
  • <hr>: 插入水平分隔线。
  1. 元数据相关标签:
  • <head>: 定义了文档的头部,包含了关于文档的一些元数据信息,例如标题、引用的样式和脚本等。
  • <meta>: 用于定义文档的元数据,比如编码方式、关键词、描述等。
  • <link>: 用于引入外部资源,通常用于关联样式表。
  1. 样式和样式表:
  • <style>: 用于在文档内部定义样式规则。
  • <link>: 用于引入外部样式表,通常与rel="stylesheet"一起使用。
  • <div><span>等标签可以通过classid属性来定义样式的选择器。
  1. 地理位置和地图:
  • <map>: 定义了一个图像映射,用于将图像的不同区域链接到不同的URL。
  • <area>: 在图像映射中定义一个可点击区域。
  1. 导航和链接:
  • <nav>: 定义了导航链接的区域。
  • <a>: 定义了超链接。
  • <nav><a>标签通常组成网页的导航栏。
  1. 元素组织和语义化:
  • <header>: 定义了一个文档或节的头部。
  • <main>: 定义了文档的主要内容。
  • <footer>: 定义了一个文档或节的页脚。
  • <section>: 对文档中的某个区域进行分组。
  • <article>: 定义了一个独立的、完整的内容单元。
  1. 表单和输入:
  • <form>: 用于创建表单,实现用户输入和提交功能。
  • <input>: 定义表单中的输入控件,比如文本框、复选框、单选按钮等。
  • <select>: 定义下拉列表框。
  • <textarea>: 定义多行的文本输入控件。
  • <button>: 定义按钮。
  1. 表格:
  • <table>: 用于创建表格。
  • <tr>: 表示表格中的行。
  • <th>: 表示表格中的表头单元格。
  • <td>: 表示表格中的数据单元格。
  • <caption>: 用于定义表格的标题。
  1. 日期和时间:
  • <time>: 定义日期或时间。

?

  1. 首先是文档类型的声明:
<!DOCTYPE html>

这声明了这个文档是一个HTML文档。

  1. 然后是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样式表。

  1. 然后是网页的内容部分:
<div class="wrapper">
    <header>
        ...
    </header>
    <section class="courses">
        ...
    </section>
    <aside>
        ...
    </aside>
    <footer>
        ...
    </footer>
</div><!-- .wrapper -->

内容部分包含了一个具有类名"wrapper"的div元素,其中包括了头部(header)、课程部分(courses)、侧边栏(aside)和页脚(footer)。

  1. 最后是HTML文档的结束标签:
</body>
</html>

这个标签表示HTML文档的结束。

  1. 头部部分,样式表(CSS)包括以下内容:
<style type="text/css">
    header, section, footer, aside, nav, article, figure, figcaption {
        display: block;
    }
    body {
        ...
    }
    .wrapper {
        ...
    }
    header {
        ...
    }
    ...
</style>

这部分定义了网页的样式,例如各个元素的显示属性、颜色、背景图像、尺寸等。

  1. 还有一个条件注释部分:
<!--[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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。