尚硅谷html5+css3html相关知识

HTML5 是 HTML 的一个新版本，于 2014 年 10 月由万维网联盟（W3C）完成标准化工作。HTML5 的目标是取代 1999 年制定的 HTML 4.01 和 XHTML 1.0 标准，并且提供更好的平台无关性和富媒体支持。

以下是一些基本的 HTML5 元素和属性的示例：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
</head>
<body>
    <header>
        <h1>我的网站</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#home">主页</a></li>
            <li><a href="#news">新闻</a></li>
            <li><a href="#contact">联系我们</a></li>
            <li><a href="#about">关于</a></li>
        </ul>
    </nav>
    <section id="home">
        <h2>欢迎来到主页</h2>
        <p>这是主页的内容。</p>
    </section>
    <section id="news">
        <h2>新闻</h2>
        <p>这里是新闻内容。</p>
    </section>
    <footer>
        <p>版权所有 © 2023 我的网站</p>
    </footer>
</body>
</html>

在这个例子中，我们使用了 <header>、<nav>、<section> 和 <footer> 等 HTML5 语义元素来构建一个简单的页面布局。这有助于搜索引擎理解页面内容的结构，提高搜索排名。

CSS3 是 CSS 的一个扩展，它提供了更强大的特性，比如阴影、渐变、变换等，并且增加了对响应式设计的支持。

以下是一个简单的 CSS3 示例，它使用了圆角、阴影和渐变效果：




/* CSS3 示例 */
body {
    background: linear-gradient(to right, #FFB3A4, #FFDCD8);
    font-family: Arial, sans-serif;
}
header {
    border-radius: 10px;
    box-shadow: 5px 5px 10px #888;
    margin: 20px;
    padding: 20px;
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
nav li {
    display: inline;
    margin-right: 10px;
}
nav a {
    text-decoration: none;
    color: #333;
}
section {
    margin: 20px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 5px 5px 10px #888;
}
footer {
    text-align: center;
    margin-top: 20px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 5px 5px 10px #888;
}

在这个例子中，我们使用了 CSS3 的线性渐变（linear-gradient）、盒阴影（box-shadow）和圆角（border-radius）。这将为页面提供更加生动和现代化的视觉效果。

尚硅谷html5+css3html相关知识

评论已关闭

推荐阅读