<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>head</title>

</head>

<body>

<header>

    <h1>网页标题</h1>

</header>

<article>

    <header>

        <h1>文章的标题</h1>

    </header>

    <p>文章的内容</p>

</article>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        body{

            font-family:微软雅黑；

            text-align:center;

        }

        a{

            color:orange;

            text-decoration: none;

        }

        hgroup{

            margin-bottom: 10px;;

        }

        nav{

            background: orange;

            height:48px;

        }

        nav li{

            float:left;

            background-color: #000000;

            border-radius: 5px;

            padding:5px 10px;

            margin:10px;

            list-style: none;

        }

    </style>

</head>

<body>

<header>

    <hgroup>

        <h1>html5视频教程</h1>

        <a href="#">[手机版]</a>

        <a href="#">[网站论坛]</a>

    </hgroup>

    <nav>

        <ul>

            <li>

                <a href="#">首页</a>

            </li>

            <li>

                <a href="#">手机版</a>

            </li>

            <li>

                <a href="#">网站论坛</a>

            </li>

        </ul>

    </nav>

</header>

</body>

header元素的更多相关文章

  1. 九、非主体机构元素——header元素、footer元素、address元素、网页编排

    header元素 一般用来放置整个页面的标题,比如说一个新闻页面,header一般放新闻的标题,如果是一个官方网址,一般header用来放logo和网站导航. <!DOCTYPE html> ...

  2. header元素 footer元素 hgroup元素

    header元素 header元素是一种具有引航和导航作用的结构元素, 通常用来放置整个页面或页面内的一个内容区块的标题, 但是也可以包含其他内容, 例如数据表格,搜索表单, 或相关的logo图片 h ...

  3. HTML5<header>元素

    HTML5<header>元素 1.header元素描述了文档的头部区域,主要用于定义内容的介绍展示区域. 2.实例: <header> <h2>heder元素描述 ...

  4. HTML5新增的非主体元素header元素、footer元素、hgroup元素、adress元素

    ---恢复内容开始--- header header元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但是也可以包含其他内容,例如数据表格.搜索表单或相关的lo ...

  5. html5--2.1新的布局元素(1)-header/footer

    html5--2.1新的布局元素(1)-header/footer 学习要点 了解header/footer的语义和用法 使用header/footer进行一个简单的布局 header元素(标签) 用 ...

  6. html5新特性-header,nav,footer,aside,article,section等各元素的详解

    Html5新增了27个元素,废弃了16个元素,根据现有的标准规范,把HTML5的元素按优先级定义为结构性属性.级块性元素.行内语义性元素和交互性元素四大类. 下面是对各标签的详解,section.he ...

  7. h5中的结构元素header、nav、article、aside、section、footer介绍

    结构元素不具有任何样式,只是使页面元素的的语义更加明确. header元素 header元素是一种具有引导和导航作用的的结构元素,该元素可以包含所有通常放在页面头部的内容.header元素通常用来放置 ...

  8. 读书笔记：《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  9. HTML5结构元素

    前面的话 几年前,用于网页布局的一般都用div元素,但语义化并不好.HTML5引入了大量新的块级元素来帮助提升网页的语义,使页面具有逻辑性的结构.容易维护,并且对数据挖掘服务更加友好.本文将详细介绍H ...

随机推荐

  1. ios滑动手势全屏(这段代码实现了下一级控制器滑到上一级控制器)

    在自定义导航控制器里面加以下代码就增加全屏滑动手势 >推向前一个控制器 //  HBNavigationController.m // #import "HBNavigationCon ...

  2. main方法并发测试

    public static void main(String[] args) throws Exception{ RequestModel r = new RequestModel(); r.setT ...

  3. MVC下HtmlHelper自带BeginForm表单提交与异步Ajax请求

    假如有一个数据表格UserInfo: public class UserInfo { public int Id { get; set; } public string Name { get; set ...

  4. linux vi 中按了ctrl+s后没法退出

    linux vi 中按了ctrl+s后无法退出 Linux 中使用vi编辑文件 不小心按了Ctrl + S (习惯了) 结果终端就跟死了一样, 解决办法: Ctrl+Q

  5. 谈谈我的编程之路---WAMP(四)

    WAMP的一些配置与使用心得(windows)W-windows,说到windows,其实大家都最熟悉不过了,GUI(graphic user interface)图形界面就没有什么可说的了,基本会用 ...

  6. 与你相遇好幸运，The Moe Node.js Code Style Guide

    The Moe Node.js Code Style Guide  By 一个最萌的开发者 @2016.9.21 >>代码是人来阅读的,格式规范的代码是对编程人员最好的礼物 :) > ...

  7. SQL SERVER 统计信息概述(Statistics)

    前言 查询优化器使用统计信息来创建可提高查询性能的查询计划,对于大多数查询,查询优化器已经为高质量查询计划生成必要的统计信息,但是在少数情况下,您需要创建附加的统计信息或者修改查询设计以得到最佳结果. ...

  8. 湘潭邀请赛 Hamiltonian Path

    湘潭邀请赛的C题,哈密顿路径,边为有向且给定的所有边起点小于终点,怎么感觉是脑筋急转弯? 以后一定要牢记思维活跃一点,把复杂的事情尽量简单化而不是简单的事情复杂化. #include<cstdi ...

  9. VS2015上又一必备免费插件：Refactoring Essentials

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:Refactoring Essentials是一款用于代码分析和重构的开源免费VS20 ...

  10. Windows+Git+TortoiseGit+COPSSH 安装图文教程

    转自:http://blog.csdn.net/aaron_luchen/article/details/10498181 准备工作: 1. Git-1.8.1.2-preview20130201.e ...