零基础学习HTML(23)——section标签、article标签、details标签、summary标签
注:学习笔记基于小甲鱼学习视频,官方论坛: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>
零基础学习HTML(23)——section标签、article标签、details标签、summary标签相关推荐
- salesforce零基础学习(八十九)使用 input type=file 以及RemoteAction方式上传附件
在classic环境中,salesforce提供了<apex:inputFile>标签用来实现附件的上传以及内容获取.salesforce 零基础学习(二十四)解析csv格式内容中有类似的 ...
- [转载] Python Web开发—进阶提升 490集超强Python视频教程 真正零基础学习Python视频教程
参考链接: 在Python中创建代理Web服务器 2 Python Web开发-进阶提升 490集超强Python视频教程 真正零基础学习Python视频教程 [课程简介] 这是一门Python We ...
- 零基础学习深度学习_深度学习的基础!!!
零基础学习深度学习 The ability to learn from experience and perform better when confronted with similar chall ...
- Java零基础学习全套视频笔记
Java零基础学习全套视频笔记 一.Java基础 1.注释 注释并不会被执行,是给我们写代码的人看的,防止项目结构代码太多忘记代码相关功能. 书写注释是一个非常好的习惯,平时写代码也一定要注意规范. ...
- 零基础学python 视频_全网最全Python视频教程真正零基础学习Python视频教程 490集...
Python Web开发-进阶提升 490集超强Python视频教程 真正零基础学习Python视频教程 [课程简介] 这是一门Python Web开发进阶课程,手把手教你用Python开发完整的商业 ...
- ue5新手零基础学习教程 Unreal Engine 5 Beginner Tutorial - UE5 Starter Course
ue5新手零基础学习教程 Unreal Engine 5 Beginner Tutorial - UE5 Starter Course! 教程大小解压后:4.96G 语言:英语+中英文字幕(机译)时长 ...
- 零基础学python需要多久-零基础学习Python大概要多久,感悟分享?
在互联网时代编程无处不在,它存在于我们生活和工作之中,可以说哪里有通讯,哪里有互联网就一定会有编程.由于Python软件比较简便,因而Python已经成为,编程人员乐于选择的一款软件,这款软件的语言比 ...
- python零基础实例-零基础学习Python开发练习100题实例(1)
零基础学习Python开发练习100题实例(1) 2018-02-25 09:37:59 2864浏览 1.题目:有四个数字:1.2.3.4,能组成多少个互不相同且无重复数字的三位数?各是多少? 程序 ...
- python基础代码事例-零基础学习Python开发练习100题实例(2)
零基础学习Python开发练习100题实例(2) 2018-02-26 13:11:39 1934浏览 11.题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个 ...
最新文章
- ubuntu 系统设置bugzilla制
- jsp定义一个变量在html,jsp中变量及方法的声明与使用说明
- 【Luogu】P3950部落冲突(树链剖分)
- MySQL用户与权限管理
- POJ 1936 字符匹配(水题)
- 《Python数据可视化之matplotlib实践》配套代码
- Python返回多个值
- ourdev 学习arm先看看,工具和软件分析
- 手机b站封面提取网站_手机b站封面自定义图片大全及获取bilibili视频封面提取网站网址...
- D16:Exchange Rates(汇率,翻译)
- VMware Workstation 15 Pro 激活密钥
- 计算机毕业设计Java爱馨敬老院网站(源码+系统+mysql数据库+lw文档)
- UISearchControllerUISearchDisplayController
- ARCore:ARCore开发的起步
- OJ每日一练——不高兴的津津
- 源码安装mysql,详细
- 根据车辆品牌获取品牌所属公司,车标logo,创建年份等基本信息
- 一看就懂的字符串匹配算法 之 BM算法
- 文献管理软件//Zotero的下载安装、注册及基本使用设置(一)
- 计算机基础知识做网页,专业知识—计算机基础知识之网页制作 .doc