浅析HTML5中header标签的用法
建站知识 2021-07-02 23:00www.168986.cn长沙网站建设
<header>标签定义文档的页眉,通常是一些引导和导航信息。它不局限于写在网页头部,也可以写在网页内容里面。
在新的标准中header标签定义如下
"A group of introductory or navigational aids.”
基本意思是“一组介绍性的护着导航相关的辅助内容”。字面上理解header标签不单单只是定义页头内容,也可以定义页头以下其它内容的介绍。这和我们传统的页面header定义并不完全一致。
通常<header>标签至少包含(但不局限于)一个标题标记(<h1>-<h6>),还可以包括<hgroup>标签,还可以包括表格内容、标识、搜索表单、<nav>导航等。
XML/HTML Code复制内容到剪贴板
- <header>
- <h1>雨打浮萍</h1>
- <p>专注于web前端开发</p>
- </header>
- <article>
- <header>
- <h1>html5语义化标签之结构标签</h1>
- <p>article、section、hgroup、aside、nav...</p>
- </header>
- <p>...这里面包含很多东西...</p>
- </article>
在上面的结构中,我们可以看到使用header我们定义了一篇文章的标题和内容。这里header标签的使用并不是页面的页头,而是文章的页头。
所以在HTML5中,header的使用更加灵活,你可以根据你的需要来定义和组织document结构。
同样,在架构页面时,header标签一般都放在页面的顶部,如果你想把他放在左侧,右侧甚至底部都没有关系,标签只定义了本身在页面的角色,而不是位置。更具搜索引擎优化原则,重要内容在架构页面的时候提前。
由于在HTML5中header属于块元素,如果我们要在大多数主流浏览器使用的话最好定义CSS,如下。
CSS Code复制内容到剪贴板
- header { display:block;}
长沙网站设计
- 如何自己建一个网站 自己想建个网站,怎么建
- 如何制作网站免费建站 创建网站免费注册
- html简单网页代码 html简单网页代码超链接
- dreamweaver网页制作 dreamweaver网页制作模板
- 上海网站建设 上海网站建设制作微信
- 如何制作网站和网页 如何制作一个网页
- html网页制作代码大全 端午节html网页制作代码大
- app开发公司 app开发公司前十名
- html网页制作 html网页制作文字居中
- app制作一个需要多少钱 请人制作一个app多少钱
- 成都网站制作 成都网站制作维护
- 百度建一个网站多少钱 百度做个公司网站要多少
- html+css网页制作成品 web网页制作成品css+javascrip
- html网页制作案例 html网页设计案例
- html+css网页制作成品 web网页制作成品css+javascrip
- 个人网站模板 个人网站模板HTML