我们需要创建一个HTML文件,打开一个文本编辑器,如Notepad或Sublime Text,然后输入以下代码:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>我的网页</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>欢迎来到我的网页!</h1> <p>这是一个简单的网页示例,我们将使用HTML和CSS来构建它。</p> </body> </html>
接下来,我们需要创建一个CSS文件,在同一个文件夹中,创建一个名为styles.css
的文件,并输入以下代码:
body { font-family: Arial, sans-serif; line-height: 1.6; } h1 { color: #333; text-align: center; } p { color: #666; text-align: justify; margin: 0 auto; width: 50%; }
现在,我们已经创建了一个简单的HTML和CSS结构,让我们分析一下这些代码:
1、<!DOCTYPE html>
声明了文档类型为HTML5。
2、<html lang="zh">
定义了网页的语言为中文。
3、<head>
标签包含了网页的元数据,如字符集、标题和链接到外部CSS文件。
4、<title>
标签定义了网页的标题,它将显示在浏览器的标签页上。
5、<link rel="stylesheet" href="styles.css">
链接到我们刚刚创建的CSS文件。
6、<body>
标签包含了网页的所有内容。
7、<h1>
标签定义了一个一级标题,它将显示为较大的字体。
8、<p>
标签定义了一个段落,它将显示为较小的字体。
9、在CSS文件中,我们为body
、h1
和p
元素设置了不同的样式,如字体、颜色和对齐方式。
保存这两个文件,然后用浏览器打开HTML文件,你应该能看到一个简单的网页,其中包含一个标题和一个段落,这就是使用HTML和CSS编写网页的基本方法,当然,你可以根据需要添加更多的HTML元素和CSS样式来创建更复杂的网页。
还没有评论,来说两句吧...