6月17号笔记

最新推荐文章于 2023-08-14 21:41:15 发布

Dashen__Daiwo

最新推荐文章于 2023-08-14 21:41:15 发布

阅读量167

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/Dashen__Daiwo/article/details/106816773

版权

笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

新增主体元素
1.header元素
（1）header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的- -个内
容区块的标题，但也可以包含其他的内容，比如在header里面放置logo图片、搜索表单等等。
（2）注意:一个页面内并没有限制header的出现次数，也就是说我们可以在同- -页面内，不同的内容
区块上分别加上一个header元素。
（3）在HTML5中，一个header元素至少可以包含一个heading元素(h1-h6) ，也可以包括我们下
节课将要学习的hgroup元素，还可以包括其他的元素，在新的W3C HTML5标准，我们还可以把
NAV元素包括进去。
例如：

<!DOCTYPE html>
<html> 
<head lang=" en' >
<meta charset=" UTF-8 >
<title></ title>
<style>
*{
margin: 0;
padding: 0;
}
body {
font-family:微软雅和;
text -align: center ;
}
a{
color:#f60;
text-decoration:none;
}
hgroup{
margin-bottom:10px;
}
nav{
background:#f60;
}
nav li{
float:left;
border-radius:5px;
padding:5px 10px;
margin:10px;
li-style:none;
background:black;
}
</style>

</ head>
<body>
<header>
<hgroup>
<h1>HTML5视频教程</h1>
<a href=" /">[手机版]</a>
<a href=" /" >[HTML5论坛]</a>
</ hgroup>
<nav>
<ul>
<li> 
<a href="/" >首页</a>
</li>
<1 i>
<a href=" /">手机版</a>
</1i> 
<li >
<a href=" /">论坛</a>
</1i>
</ul>
</nav>
</ header>
</ body>
</ html>

效果图：

2.hgroup元素
（1）hgroup元素是将标题和他的子标题进行分组的元素
（2）hgroup元素-般会把h1-h6的元素进行分组，比如在-个内容区块的标题和他的子标题算是- -组。
（3）通常情况下，文章只有一个主标题时，是不需要hgroup元素的。
对比：
一个标题时：

<article>
<header>
<h1>文章标题</h1> 
<p><time datetime=' 2014- 10 08 >2014年10月8日</time></p>
</ header> 
<p>文章正文</p>
</article>

需要子标题时：

article> 
<header>
<hgroup
<h1>文章主标题</h1>
<h2>文章子标题</h2>
</ hgroup
<p><time datetime=" 2014- 10 08 >2014年 10月8日</time> </p>
</ header>
<p>文章正文</p>
</article>

如图：
在这里插入图片描述
3.footer元素
（1）footer元素可以作为他的上层父级内容区块或是一个根区块的注脚。footer元素一般情况
下包括与它相关的区块的注脚信息，比如作者、版权信息等。

（2）注意: footer元素和我们前面所讲的header元素-样，并没有限制他的个数。并且
footer元素可以为article元素或者section元素添加footer元素。
例子：

< !DOCTYPE html>
;<html>
<head lang=" en" >
<meta charset=" UTF-8" >
<title></title>
<style> 
*{
margin: 0;
padding: 0;
}
body {
font -family:微软雅黑;
text align: center;
}
#footer, #footer{
color: #555
}
footer, footer{
color: #555
}
</style>
</ head>
<body>
<div id=" footer" ><!--以前的方法-->
<p>
<a href=" /">版权信息</a>|
<a href=" /">关于我们</a> I
<a href=" /">联系我们</a> |
<a href=" /">站点地图</a> |
</p> 
<p>麦子学院版权所有</p>
</div>
< footer>
<p>
<a href=" /">版权信息</a> |
<a href=" /">关于我们</a>|
<a href=" /">联系我们</a>|
<a href=" /">站点地图</a>|
</p> 
<p>麦子学院版权所有</p>
</ footer>
</ body>
</html>
<!--除了以上两种外，《footer》还可以加在《article》元素中-->

4.address元素
（1）address元素用来在页面中呈现联系信息，包括文档的作者、邮箱、地址、电话信息等。
（2）address元素还用来展示和文章中的相关的联系人的所有联系信息。
代码例子：

<!DOCTYPE html>
<html>
<head lang=" en' >
<meta charset=" UTF-8" >
<title></title>
</ head>
<body>
<header>
<h1>HTML5+CSS3视频教程</h1>
</ header>
<p>
这里是文章正文部分
</p>
< footer>
< address>
<a href="/" title="朱朝兵">朱朝兵</a>
<a href=' /”title="麦子学院">麦子学院</a>
成都市高新区天府软件园D区D5栋504室
</ address>
时间: <time datetime=" 2014-10- 11" >2014年10月11日</ time>
</ footer>
</ body>
</ html>

last

Dashen__Daiwo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6月17号笔记

新增主体元素1.header元素（1）header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的- -个内容区块的标题，但也可以包含其他的内容，比如在header里面放置logo图片、搜索表单等等。（2）注意:一个页面内并没有限制header的出现次数，也就是说我们可以在同- -页面内，不同的内容区块上分别加上一个header元素。（3）在HTML5中，一个header元素至少可以包含一个heading元素(h1-h6) ，也可以包括我们下节课将要学习的hgroup元
复制链接

扫一扫