两招教会你制作属于自己的静态网页

• 编写自然环境

  　　

　　制做网页不用安裝一切编程语言在线编辑器，因此不必担心由于天时常、地不好、网不速，在线编辑器安裝大半天还没有安裝取得成功，你也就早已没热情学了。

　　制做网页只必须开启电脑操作系统内置的记事本，对的你没看错，就是那个转化成TXT纯文本文件的小小的记事本。

　　在记事本中载入网页的标签编码，随后将这一TXT文本文档另存文件后缀名为.html的文档。

　　噔！噔！噔！双击鼠标开启下边这一HTML文档，你也就能够在电脑浏览器看见自己亲自制做的网页啦。（要留意的是，文件图标会伴随着电脑上默认浏览器的不一样而更改）

• HTML与CSS关联

  　　

　　学习培训制做一个静态数据网页必须把握HTML、CSS語言。下边大家就来了解一下这两个語言是各自用于完成哪些的。

　　1.HTML是网页內容的媒介。內容便是网页创作者放到网页页面上要想让他人访问的信息内容，

　　包括文本、图片、连接等。

　　2.CSS是款式主要表现，就好像网页的外套。例如，字体样式的挑选、尺寸和色调转变，或图片、外框等，这种用于更改网页外型的东西称作主要表现。

　　假如将静态数据网页比成一个人得话，HTML便是人的四肢、双眼和骨骼这类实际性的东西，CSS便是衣服裤子、饰品和妆面等把人穿着打扮得花枝招展的主要表现。

• HTML

  　　

　　HTML是HyperTextMarkupLanguage（HTML文件标记语言）的简称，是一种用以建立网页的规范标记语言，应用标识标签叙述网页中的文本、图片、连接等，标识标签由刚开始标签和完毕标签/构成，二者正中间填写內容。

　　很官方网？不明白？没事儿，我举一个事例你也就能够get来到。下边是知乎问答的一个登陆页面。

　　我们可以见到，这一登陆页面关键包含主题目“知乎问答”、小标题“与全球共享你的专业知识、工作经验和看法”、2个文本框和“登陆”按键。HTML是表明內容和词义的，它不但明确网页有什么文字內容，并且还用标识标签告知电脑浏览器什么文字是题目，什么文字是按键，哪儿置放文本框，乃至哪儿必须置放图片。例如，“知乎问答”这两字的词义是主题目，因此它在网页页面中字体样式较大。HTML中主题目（一级标题）的标识标签是h1/h1，因此要将“知乎问答”两字授予主题目的词义，能够在记事本中那样写：h1知乎问答/h1。

• HTML的基础构造

  　　

　　开启你电脑上的记事本，把下边这一段编码拷贝到记事本中吧，大家刚开始一步一步来制做网页。

　　！DOCTYPEhtmlhtmlheadmetacharset="utf-8"title简单自我介绍/title/headbodyh1姓名：/h1h2性別：/h2h2生辰：/h2h2班集体：/h2p个人爱好：/p/body/html

　　我先介绍一下HTML的基础构造：

　　！DOCTYPEhtml界定这一网页是用HTML語言制做的。

　　html/html称之为根标签，全部的网页标签必须嵌套循环在html/html中，标识着HTML的开始与结束。

　　head/head表明HTML的头顶部，叙述HTML文本文档的各种各样特性和信息内容，包含网页的题目、CSS款式根据style标签嵌套循环在头顶部等。绝大部分HTML文本文档头顶部置放的內容都不容易显示信息出去给网页访问者见到。

　　body/body表明HTML的行为主体，展现给网页访问者看的文本、图片和连接等必须放到body标签里边。

　　metacharset="utf-8"界定网页的字符集，无需太担心代表什么意思，它的功效便是使网页不容易错码。但要留意的是，你一直在将记事本文本文档另存.html文档时，还要把文档的字符集设成utf-8。

　　title简单自我介绍/title标识全部网页的题目，出現在电脑浏览器对话框顶端的标题栏。

　　h1/h1和h2/h2各自标识网页的一级标题、二级标题，HTML一共有h

　　1、h

　　2、h

　　3、h

　　4、h5和h6六级题目，h后边的数据数据越大，题目字体大小越小。

　　标签编码：

　　在电脑浏览器中显示信息：

　　p/p标识一个文章段落，假如想在网页上显示信息文章内容，就必须p标签了，把文章内容的文章段落放进p标签中。

　　标签编码：

　　在电脑浏览器中显示信息：

　　还记住你不久拷贝在记事本的编码吗？如今轮到你来动手能力啦。在编码的相对标签中载入自身的信息内容，随后另存.html文档，用打开浏览器看一下你的简单自我介绍网页吧。

• 加上图片和网页链接

  　　

　　一个网页不太可能仅有文本，还应当会包括一些图片和网页链接等。

　　界定图片的标签是imgsrc="图片详细地址"。img是一个空标签，空标签的含意便是仅有刚开始标签，沒有完毕标签。src偏向图片的详细地址，详细地址要放到双引号内，图片详细地址能够是电脑上的本地文件还可以是在网上的线上图片，推存应用线上图片的详细地址。

　　在一张图片上右键，挑选“拷贝图片详细地址”。

　　如今来试着一下吧，在你的简单自我介绍网页放一张你自己的相片。这时要再度编写.html文档得话，右键文档挑选“打开”为“记事本”，就可以再度编写标签编码了。

　　我觉得在网页中加上一张编玩边学的图片，看一下我怎么做的吧。

　　标签编码：

　　在电脑浏览器中显示信息：

　　我们在访问网页时，点一下深蓝色带下横线的字体样式时能够连接到另一个网页，它是用a标签完成的：

　　ahref="总体目标网站地址"target="_blank"文字/a，target=”_blank”表明在新的空白开启连接的网页。

　　大家来试着一下，在网页中加上一个“点一下这儿掌握大量”的文字连接到编玩边学的官方网站首页，你也能够挑选连接到自身喜爱的网页。

　　标签编码：

　　在电脑浏览器中显示信息：

　　点一下以后：

　　快试一下在你自己的简单自我介绍网页中添加连接到喜爱的网页通道吧，例如你自己的QQ空间首页或是部族首页。

　　学得这儿，相信你早已可以用HTML語言制做一个简易的静态数据网页了。

• CSS

  　　

　　但，如果你开启用HTML制做的网页时，你能禁不住心里ｏｓ：emmmmmm，这网页页面也太初始了吧，不符当代人的审美观啊。

　　前边提及的知乎登录网页页面，假如仅用ＨＴＭＬ語言撰写，沒有ＣＳＳ款式，它是长那样的。

　　这是由于HTML只表明网页的內容和词义，并不会帮你将网页穿着打扮得花枝招展的。因此大家还必须学习培训用CSS装饰设计网页的內容。

　　CSS全称之为“堆叠css样式表(CascadingStyleSheets)”，用以界定HTML內容在电脑浏览器内的显示信息款式，如字体大小、色调、两端对齐方法、字体加粗等。

• CSS编码英语的语法

  　　

　　CSS款式根据style/style标签嵌套循环在ＨＴＭＬ的头顶部操纵网页內容的款式。

　　！DOCTYPEhtmlhtmlheadmetacharset="utf-8"title简单自我介绍/titlestyletype="text/css"/style/head

　　CSS款式由选择符和申明构成，而申明又由特性合值构成。

　　选择符又被称为选择符，指出网页时要运用款式标准的标签，如圖的事例便是把网页中全部文章段落（p）的文本色调变为深蓝色，而别的标签不容易遭受危害。

　　在英文大括号“｛｝”中的便是申明，特性就是指文字大小、色调、两端对齐方法等，值就是指字体样式实际有多大。色调实际是哪个等。特性合值中间用英文冒号“：”隔开，当有好几条申明时，正中间可以英文分号“;”隔开。

• CSS的常见特性

  　　

　　在这儿大家关键讲几类ＣＳＳ常见的特性。

　　网页的字体样式特性是font-family，常见的值有ＳｉｍＳｕｎ（宋体字）　ＳｉｍＨｅｉ（黑体字）　MicrosoftYahei（微软雅黑）　ＫａｉＴｉ（楷体）

　　大家来试着一下，将前边做的简单自我介绍网页的字体设置为常见的微软公司雅黑字体。全部网页的字体样式包括在body标签中，因此选择符为body.

　　标签编码：

　　在电脑浏览器中显示信息：

　　文字大小的特性是font-size，它的值常见的企业是px（清晰度），px的值越大字体大小越大；

　　字体样式的特性是color，你能将它的值设定给你喜爱的色调。

　　用编码将简单自我介绍网页中文章段落p的字体大小变大一点，并将全部网页body的字体样式设定为与编玩边学图片类似的深蓝色。文章段落的选择符为p，全部网页的选择符为body。

　　标签编码：

　　在电脑浏览器中显示信息：

　　大家还能够给网页中的某一部分提升一个外框。

　　外框款式的特性是border-style，常见的值有solid（实线）和

　　dotted（虚线）

　　外框总宽的特性是border-width，它的值常见企业也是px（清晰度）

　　外框色调特性是border-color，你能设成自身喜爱的色调。

　　我觉得给姓名的一部分加一个鲜红色的实线外框，因此选择符是h1。

　　标签编码：

　　在电脑浏览器中显示信息：

　　清理网页的CSS特性有很多类型，并且方式都不只一种，在这儿没法一一详细描述。快开启记事本给你不久制做的简单自我介绍网页加上一些漂亮的CSS款式吧。

　　双击鼠标开启html文档你能发觉以前惨不忍睹的网页越来越漂亮了哦。为自己点个赞吧！

　　以上内容转自编程少年青少年儿童编程爱好者交流学习小区-编程少年