静态网页制作编辑环境
网页制作不需要安装任何程序语言编辑器， 很简单，你只需要打开电脑系统自带的记事本或是自己新建一个TXT文本文档（右键点击鼠标新建文本文档）。在记事本、TXT文本文档中写入网页的标签代码，然后将这个 TXT 文档另存为后缀名为.html 的文件。
双击打开你保存的这个 HTML 文件，你就可以在浏览器看见自己亲手制作的静态网页啦。
HTML与CSS关系
学习制作一个静态网页需要掌握 HTML、CSS 语言。下面我们就来了解一下这两个语言是分别用来实现什么的。1. HTML 是网页内容的载体，可以说利用HTML语言组成了网站建设的框架，内容就是网页制作者放在页面上想要让别人浏览的信息，包含文字、图片、链接等。
2. CSS 是样式表现，就像是网页的外衣，它可以表现出网页想要展现给用户的各种样式。比如，字体的选择、大小和颜色变化，或插入图片、边框等，这些用来改变网页外观的元素称之为css样式。
如果将静态网页比做一个人的话，HTML 就是人的四肢、眼睛和骨头这种实质性的东西，CSS 就是衣服、配饰和妆容等把人打扮得漂漂亮亮的表现。
HTML
HTML 是 HyperText Markup Language（超文本标记语言）的缩写，是一种用于创建网页的标准标记语言，使用标记标签描述网页中的文字、图片、链接等，标记标签由开始标签< >和结束标签</ >组成，两者中间填入内容。不明白没关系，我们接着看下面：HTML 的基本结构
打开你电脑的记事本，把下面这段代码复制到记事本中吧，我们开始一步一步来制作网页。<!DOCTYPE html>
<html>
<head>
<title> 自我介绍</title>
</head>
<body>
<h1>名字：< /h1>
<h2>性别：</h2>
<h2>生日：</h2>
<h2>班级：< /h2>
<p>兴趣爱好：</p>
</body>
</html>
我先介绍一下HTML 的基本结构：
<!DOCTYPE html>定义这个网页是用 HTML 语言制作的。
<html></html>称为根标签，所有的网页标签都要嵌套在<html></html>中，标记着HTML 的开始和结束。
<head></head>表示 HTML 的头部，描述 HTML 文档的各种属性和信息，包括网页的标题、CSS 样式通过<style>标签嵌套在头部等。绝大多数 HTML 文档头部放置的内容都不会显示出来给网页浏览者看到。
<body></body>表示 HTML 的主体，展示给网页浏览者看的文字、图片和链接等都要放在<body>标签里面。
<title>自我介绍</title>标记整个网页的标题，出现在浏览器窗口顶部的标题栏。
<h1> </h1>和<h2> </h2>分别标记网页的一级标题、二级标题，HTML一共 有<h1>、<h2>、<h3>、<h4>、<h5>和<h6>六级标题，h 后面的数字数字越大，标题字号越小。
<p> </p>标记一个段落，如果想在网页上显示文章，就需要<p>标签了，把文章的段落放到<p>标签中。
添加图片和超链接
一个网页不可能只有文字，还应该会包含一些图片和超链接等。定义图片的标签是<img src="图片地址">。<img>是一个空标签，空标签的意思就是只有开始标签，没有结束标签。src 指向图片的地址，地址要放在双引号内，图片地址可以是电脑的本地文件也可以是网上的在线图片，我推荐使用在线图片的地址。
我们在浏览网页时，点击蓝色带下划线的字体时可以链接到另一个网页，这是用<a>标签实现的：<a href="目标网址"target="_blank" >文本</a>，target=”_blank”表示在新的空白页打开链接的网页。
CSS
用HTML做好页面后你会发现页面很不美观，总有些地方看着不舒服，不符合视觉审美。这是因为HTML只表示网页的内容和语义，并不会帮你把网页打扮得漂漂亮亮的。所以我们还需要学习用CSS装饰网页的内容。CSS全称为“层叠样式表 (Cascading Style Sheets)”，用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、对齐方式、字体加粗等。
CSS代码语法
CSS样式通过<style></style>标签嵌套在ＨＴＭＬ的头部控制网页内容的样式。<!DOCTYPE html><html><head><metacharset="utf-8"><title> xx</title><styletype="text/css"></style></head& gt;
CSS样式由选择符和声明组成，而声明又由属性和值组成。
选择符又称选择器，指明网页中要应用样式规则的标签。
在英文大括号“｛｝”中的就是声明，属性是指字体大小、颜色、对齐方式等，值是指字体具体有多大。颜色具体是哪个等。属性和值之间用英文冒号“：”分隔，当有多条声明时，中间可以英文分号“;”分隔。
CSS的常用属性
在这里我们主要讲几种CSS常用的属性。网页的字体属性是font-family，常用的值有ＳｉｍＳｕｎ（宋体） ＳｉｍＨｅｉ（黑体） Microsoft Yahei（微软雅黑） ＫａｉＴｉ（楷体）
字体大小的属性是font-size，它的值常用的单位是px（像素），px的值越大字号越大；
字体颜色的属性是color，你可以将它的值设置为你喜欢的颜色。
我们还可以给网页中的某部分增加一个边框。
边框样式的属性是border-style，常用的值有solid（实线）和dotted（虚线）
边框宽度的属性是border-width，它的值常用单位也是px（像素）
边框颜色属性是border-color，你可以设置成自己喜欢的颜色。
CSS属性有很多种类，小编就不一一说明了。
怎么样，赶快建一个文本文档，利用HTML和CSS学习制作一个静态网页吧，为你加油！青锋建站，提供专业的高品质网站制作服务，包括网站建设，SEO，网络营销，PHP开发，网站建设知名品牌，全国接单，为企业构建强有力的营销平台。
转载请注明来源网址：青锋建站-http://www.sjzphp.com/webdis/wyzz424.html
