大家好，上一篇文章介绍了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://pic.aigexing.nethttps://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>
效果图如下：
这是我的第一个网页
大家可以先尝试一下解释这些标签的意义，下一篇我会详细为大家讲解，谢谢观看！！！
〖特别声明〗：本文内容仅供参考，不做权威认证，如若验证其真实性，请咨询相关权威专业人士。如有侵犯您的原创版权或者图片、等版权权利请告知 wzz#tom.com，我们将尽快删除相关内容。
微信扫一扫