HTML（Hypertext Markup Language）和CSS（Cascading Style Sheets）是构建网页的两个基本技术。HTML用于定义网页的结构和内容，而CSS用于样式化和布局这些内容。以下是HTML和CSS的基本用法：

HTML 示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <header>
        <h1>Welcome to My Website</h1>
    </header>

    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>

    <section id="home">
        <h2>Home Section</h2>
        <p>This is the home section of my website.</p>
    </section>

    <section id="about">
        <h2>About Section</h2>
        <p>Learn more about me and my interests.</p>
    </section>

    <section id="contact">
        <h2>Contact Section</h2>
        <p>Feel free to reach out to me.</p>
    </section>

    <footer>
        <p>&copy; 2023 My Website</p>
    </footer>

</body>
</html>

CSS 示例（styles.css）：
/* Reset some default browser styles */
body, h1, h2, ul, p {
    margin: 0;
    padding: 0;
}

/* Apply styles to the body */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

/* Style the header */
header {
    background-color: #333;
    color: #fff;
    padding: 1em;
    text-align: center;
}

/* Style the navigation */
nav {
    background-color: #555;
    color: #fff;
    padding: 0.5em;
}

nav ul {
    list-style-type: none;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

nav a {
    color: #fff;
    text-decoration: none;
}

/* Style the sections */
section {
    margin: 20px;
}

/* Style the footer */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1em;
    position: fixed;
    bottom: 0;
    width: 100%;
}

在上述示例中：

  •  HTML文件定义了文档的结构，包含标题、导航、内容区域和页脚。

  •  CSS文件定义了样式，包括颜色、字体、布局等。

  •  通过 <link> 元素将CSS文件链接到HTML文件中。


这只是一个简单的例子，实际的网页可能包含更多的内容和更复杂的样式。CSS的强大之处在于它能够使网页更具吸引力、可读性和可访问性。


转载请注明出处：http://www.zyzy.cn/article/detail/12476/HTML5