//xia仔k：某讯2023全面升级WEB前端线上系统K
WEB前端之HTML与CSS代码示例
当我们议论WEB前端时，HTML和CSS是不可防止的两个中心组成局部。HTML担任页面的构造，而CSS则为这些构造提供款式。下面，我们将经过一个简单的例子来理解它们是如何协同工作的。
- HTML局部：
HTML (HyperText Markup Language) 是网页的骨架。以下是一个简单的HTML页面构造：
html复制代码html><html lang="zh-CN"><head><meta charset="UTF-8"><title>我的第一个网页</title><link rel="stylesheet" href="styles.css"></head><body><header><h1>欢送来到我的网站！</h1></header><nav><ul><li><a href="#">首页</a></li><li><a href="#">关于我们</a></li><li><a href="#">联络我们</a></li></ul></nav><section><h2>关于我们</h2><p>这是一个简单的引见...</p></section><footer><p>版权一切 ©2023</p></footer></body></html>
- CSS局部：
CSS (Cascading Style Sheets) 担任页面的外观和款式。以下是与上述HTML相匹配的CSS款式：
css复制代码/* styles.css */body {font-family: Arial, sans-serif;margin: 0;padding: 0;}header {background-color: #4CAF50;color: white;text-align: center;padding: 1em;}nav ul {list-style-type: none;margin: 0;padding: 0;background-color: #333;}nav ul li {display: inline;}nav ul li a {color: white;display: inline-block;padding: 10px 20px;text-decoration: none;}section {padding: 2em;}footer {background-color: #333;color: white;text-align: center;padding: 1em;}
将上述HTML保管为index.html，CSS保管为styles.css，并确保它们在同一个文件夹中。翻开index.html，你就能够在阅读器中看到带有款式的页面了。这只是一个十分根底的示例，但足以让你开端探究WEB前端的魅力。
