TPTCMS

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

HTMLCSS网页设计脚本语言2018-10-01 00:21:56

大家好,上一篇文章介绍了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>

效果图如下:

image

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