拥抱HTML5

阿立聊代码

于 2024-09-12 08:00:00 发布

阅读量216

点赞数 6

分类专栏： HTML实战网页设计文章标签：拥抱HTML5 HTML5

本文链接：https://blog.csdn.net/qq_36324341/article/details/142148507

版权

网页设计同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

HTML实战

7 篇文章 0 订阅

订阅专栏

第1章拥抱HTML5

HTML5草案诞生于2004，在2007年时被W3C采纳。Mozlilla、Microsoft、Google等公司的浏览器不同程度的支持了HTML5新功能。H5将引领Web发展的方向。

1.1 安装浏览器

常用谷歌浏览器和edge浏览器。

新建看是否支持HTML5.

浏览器加载Web页面时会构造一个DOM(Document Object Model)对象。

构建简单页面，打印hello world.

1.2 HTML5页面的特征

1.2.1 应用全新的HTML5特征结构化元素

页面分栏实现

1.功能说明

将页面分为上中下三部分，上部用于显示导航，中部又分为两部分，左边设置菜单，右边显示文本内容，下部显示页面版权信息。

2.实现代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>页面结构</title>
    <style>
        header,
        nav,
        article,
        footer {
            border: 1px solid #666;
            padding: 5px;
        }

        header {
            width: 500px;
        }

        nav {
            float: left;
            width: 60px;
            height: 100px;
        }

        article {
            float: left;
            width: 428px;
            height: 100px;
        }

        footer {
            clear: both;
            width: 500px;
        }
    </style>
</head>

<body>
    <header>导航</header>
    <nav>菜单</nav>
    <article>内容</article>
    <footer>底部说明</footer>
</body>

</html>

3.页面效果

1.2.2 使用CSS文件美化HTML5新元素

样式化页面实现

1.功能说明

设置相关样式，显示一段文章的内容。

2.实现代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>设置新元素的样式</title>
        <style>
            article {
                display: block;
            }
            article header p {
                font-size: 13px;
            }
            article header h1 {
                font-size: 16px;
            }
            .p-date {
                font-size:11px;
            }
            a {
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <header>
            <article>
                <p class="p-date">日期：2024-9-11</p>
                <h1><a href="#">今天天气不错啊</a></h1>
                <p>蓝蓝的天空，洁白的云朵！</p>
            </article>
        </header>
    </body>
</html>