优秀的编程知识分享平台

网站首页 > 技术文章 正文

七小时带你入门HTML+CSS网页设计，创建自己第一个网页(二)

nanyue 2024-10-21 06:20:46 技术文章 50 ℃

大家好，上一篇文章介绍了HTML+CSS的基础知识和开发工具，接下来就要开始实战编写了

首先在桌面创建一个新文件夹，重命名为网页开发，进入文件夹右键创建一个文本文档，然后重命名为index.html，我们的第一个网页文件就创建好了。注意：有些同学的电脑无法编辑后缀，文件夹头部有个查看，点击进去进入选项，然后再点击查看，下面有个隐藏已知文件类型的扩展名，去掉选择框确定就可以了。

打开notepad++编辑器，把index.html直接拖进去，然后在里面写上如下代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>网页设计</title>
</head>
<body>
<style type="text/css">
body{
 background: #000;
}
</style>
</body>
</html>

直接点击index.html，浏览器会直接打开并解析，就会显示一个全黑的网页，哈哈哈！！！

那么这些标签都代表什么意思呢？首先html网页头部都会有一个版本声明，这里的<!DOCTYPE html>代表HTML5版本，每个网页都需要写上此声明，这样浏览器就能判断用哪个html版本解析当前的页面，而<html lang="zh-CN">则表示网页内容属于中文简体语法。
<head>标签表示网页头部元素的容器，这里可以放网页的标题、关键词、描述等，也可以包含脚本、样式以及其他meta等其他信息。这里我写了一个标题，它就会在浏览器头部显示出来。<meta charset=utf-8"/>标签则是告诉浏览器我这个网页的编码是utf-8编码，这个很重要哦，否则网页容易出现乱码。
<body>标签表示网页主体元素的容器，它包含了网页所有的html标签如：文本、图片、列表等等。以后我们编写的网页标签都需要放在这里面，这些就构成了html网页的基本格式，大家也不需要去背，知道表示什么意思就行，需要的时候直接拿来用。
<style type="text/css">标签表示规定样式表的MIME类型，它告诉浏览器这里面的文本内容text要当css样式表来解析，常用的有两种引用方法（内部和外部引用），外部引用就是用<link>标签引用css文件，后面的文章我会讲解。它以分号(;)开始和结束，每个属性有一个值，属性和值用冒号分开，如：body{background:#000;}表示指定给body标签一个颜色为黑色的背景。

接下来我们就开始编写我们的网页代码，我写一段图文标签，大家把下面一段代码插入到body里面

<!--HTML-->
<div>
<h2>这是我的第一个网页</h2>
<p>BODY标签表示网页主体元素的容器，它包含了网页所有的html标签如：文本、图片、列表等等。以后我们编写的网页标签都需要放在这里面，这里我写了一段文字，它就会在浏览器里显示出来。这些就构成了我们网页的基本格式，大家也不需要去背，知道表示什么意思就行，需要的时候直接拿来用。</p>
<p><img src="https://tpt360.com/tuimg/yan.png"></p>
</div>
<!--CSS-->
<style type="text/css">
div {
	width: 300px;
	padding: 20px;
	margin: 20px;
	border: 1px solid #eee;
}
h2 {
	font-size: 18px;
	color: #000;
	text-align: center;
}
p {
	line-height: 24px;
	font-size: 14px;
	color: #000;
}
img {
	width: 100%;
}
</style>

效果图如下：

大家可以先尝试一下解释这些标签的意义，下一篇我会详细为大家讲解，谢谢观看！！！

Tags：

猜你喜欢

最近发表
标签列表