大家好,上一篇文章介绍了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="http://img.studyofnet.comhttps://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>

效果图如下:

使用html和css技术创建网页(七小时带你入门HTML)(1)

这是我的第一个网页

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

,