注:学习笔记基于小甲鱼学习视频,官方论坛:https://fishc.com.cn/forum.php
官方资料
鱼C课程案例库:https://ilovefishc.com/html5/
html5速查手册:https://man.ilovefishc.com/html5/
css速查手册:https://man.ilovefishc.com/css3/
学习正文
section标签:https://man.ilovefishc.com/pageHTML5/section.html
article标签:https://man.ilovefishc.com/pageHTML5/article.html
details标签:https://man.ilovefishc.com/pageHTML5/details.html
summary标签:https://man.ilovefishc.com/pageHTML5/summary.html
section 标签用于定义文档中的节(嵌套时可以自动识别):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多个section嵌套</title>
<style>
header {
background-color: #429296;
color: white;
text-align: center;
padding: 5px;
}
aside {
line-height: 30px;
background-color: #eeeeee;
height: 300px;
width: 100px;
float: left;
padding: 15px;
}
section {
width: 600px;
float: left;
padding: 10px;
}
footer {
background-color: #429296;
color: white;
clear: both;
text-align: center;
padding: 5px;
}
</style>
</head>
<body>
<header>
<h1>《零基础入门学习Web开发》(HTML5 & CSS3)</h1>
</header>
<aside>
<p><a href="https://www.bilibili.com/video/av21786264/" target="_blank">在线学习</a></p>
<p><a href="https://fishc.com.cn/forum.php?mod=forumdisplay&fid=354&filter=typeid&typeid=730" target="_blank">课后作业</a></p>
<p><a href="https://ilovefishc.com/html5/" target="_blank">课件案例</a></p>
<p><a href="https://fishc.taobao.com/" target="_blank">资源打包</a></p>
</aside>
<!-- 尝试嵌套多个section元素 -->
<section>
<h1>第一个section的h1</h1>
<p>很多同学可能还不明白,Web开发是什么?</p>
<p>Web开发是一个指代网页或网站编写过程的广义术语。网页使用HTML、CSS和JavaScript编写。这些页面可能是类似于文档的简单文本和图形。页面也可以是交互式的,或显示变化的信息。编写交互式服务器页面略微复杂一些,但却可以实现更丰富的网站。如今的大多数页面都是交互式的,并提供了购物车、动态可视化甚至复杂的社交网络等现代在线服务。</p>
<section>
<h1>第二个section的h1</h1>
<p>很多同学可能还不明白,Web开发是什么?</p>
<p>Web开发是一个指代网页或网站编写过程的广义术语。网页使用HTML、CSS和JavaScript编写。这些页面可能是类似于文档的简单文本和图形。页面也可以是交互式的,或显示变化的信息。编写交互式服务器页面略微复杂一些,但却可以实现更丰富的网站。如今的大多数页面都是交互式的,并提供了购物车、动态可视化甚至复杂的社交网络等现代在线服务。</p>
<section>
<h1>第三个section的h1</h1>
<p>很多同学可能还不明白,Web开发是什么?</p>
<p>Web开发是一个指代网页或网站编写过程的广义术语。网页使用HTML、CSS和JavaScript编写。这些页面可能是类似于文档的简单文本和图形。页面也可以是交互式的,或显示变化的信息。编写交互式服务器页面略微复杂一些,但却可以实现更丰富的网站。如今的大多数页面都是交互式的,并提供了购物车、动态可视化甚至复杂的社交网络等现代在线服务。</p>
</section>
</section>
</section>
<footer>
Copyright © 鱼C工作室
</footer>
</body>
</html>
article 标签用于定义一篇文章,与页面其它部分无关:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多个section嵌套</title>
</head>
<body>
<!-- atricle 定义文章内容 -->
<article>
<h1>使用article标签定义</h1>
<p>很多同学可能还不明白,Web开发是什么?</p>
<p>Web开发是一个指代网页或网站编写过程的广义术语。网页使用HTML、CSS和JavaScript编写。这些页面可能是类似于文档的简单文本和图形。页面也可以是交互式的,或显示变化的信息。编写交互式服务器页面略微复杂一些,但却可以实现更丰富的网站。如今的大多数页面都是交互式的,并提供了购物车、动态可视化甚至复杂的社交网络等现代在线服务。</p>
</article>
</body>
</html>
details 标签用于定义用户可见的或者隐藏的需求的补充细节:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>details和summary元素</title>
<style>
header {
background-color: #429296;
color: white;
text-align: center;
padding: 5px;
}
aside {
line-height: 30px;
background-color: #eeeeee;
height: 300px;
width: 100px;
float: left;
padding: 15px;
}
section {
width: 600px;
float: left;
padding: 10px;
}
footer {
background-color: #429296;
color: white;
clear: both;
text-align: center;
padding: 5px;
}
</style>
</head>
<body>
<header>
<h1>《零基础入门学习Web开发》(HTML5 & CSS3)</h1>
</header>
<aside>
<p><a href="https://www.bilibili.com/video/av21786264/" target="_blank">在线学习</a></p>
<p><a href="https://fishc.com.cn/forum.php?mod=forumdisplay&fid=354&filter=typeid&typeid=730" target="_blank">课后作业</a></p>
<p><a href="https://ilovefishc.com/html5/" target="_blank">课件案例</a></p>
<p><a href="https://fishc.taobao.com/" target="_blank">资源打包</a></p>
</aside>
<section>
<!-- 使用details元素实现隐藏 -->
<!-- <details open> 可实现内容展示 -->
<details>
<summary>Web开发是什么</summary>
<p>很多同学可能还不明白,Web开发是什么?</p>
<p>Web开发是一个指代网页或网站编写过程的广义术语。网页使用HTML、CSS和JavaScript编写。这些页面可能是类似于文档的简单文本和图形。页面也可以是交互式的,或显示变化的信息。编写交互式服务器页面略微复杂一些,但却可以实现更丰富的网站。如今的大多数页面都是交互式的,并提供了购物车、动态可视化甚至复杂的社交网络等现代在线服务。</p>
</details>
</section>
<footer>
Copyright © 鱼C工作室
</footer>
</body>
</html>