YPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> YPE html> 怎么做网页制作编辑环境制作网页不需要安装任何程序语言编辑器, 所以不用担心因为天不时、地不利、网不速,编辑器安装半天还没安装成功,你就已经没热情学习了。"/>
Home
>
南京seo学习
>
南京怎么做网页制作
南京怎么做网页制作

time:2020-04-05 02:20:54

author:石家庄众宣网络科技有限公司

【Font size: big medium smail

本文由石家庄众宣网络科技有限公司提供,重点介绍了怎么做网页制作相关内容。石家庄众宣网络科技有限公司专业提供seo学习,seo学习网,关键词seo培训等多项产品服务。公司产品内容市场占有率逐年提升,深受赞扬,虏获了一大批忠实客户。

YPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

YPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

YPE html>

怎么做网页制作编辑环境制作网页不需要安装任何程序语言编辑器, 所以不用担心因为天不时、地不利、网不速,编辑器安装半天还没安装成功,你就已经没热情学习了。

制作网页只需要打开电脑系统自带的记事本,对的你没听错,就是那个生成TXT 纯文本文档的小小记事本。怎么做网页制作

在记事本中写入网页的标签代码,然后将这个 TXT 文档另存为后缀名为.html 的文件。

噔! 噔! 噔!双击打开下面这个 HTML 文件,你就可以在浏览器看见自己亲手制作的网页啦。(要注意的是,文件图标会随着电脑默认浏览器的不同而改变)

HTML与CSS关系

学习制作一个静态网页需要掌握 HTML、CSS 语言。下面我们就来了解一下这两个语言是分别用来实现什么的。

1. HTML 是网页内容的载体。内容就是网页制作者放在页面上想要让别人浏览的信息,

包含文字、图片、链接等。

2. CSS 是样式表现,就像是网页的外衣。比如,字体的选择、大小和颜色变化,或插入图片、边框等,这些用来改变网页外观的东西称之为表现。

如果将静态网页比做一个人的话,HTML 就是人的四肢、眼睛和骨头这种实质性的东西,CSS 就是衣服、配饰和妆容等把人打扮得漂漂亮亮的表现。

HTML

HTML 是 HyperText Markup Language(超文本标记语言)的缩写,是一种用于创建网页的标准标记语言,使用标记标签描述网页中的文字、图片、链接等,标记标签由开始标签和结束标签 >组成,两者中间填入内容。

很官方?看不懂?没关系,我举一个例子你就可以 get 到了。下面是知乎的一个登录页面。

我们可以看到,这个登录页面主要包括主标题“知乎”、副标题“与世界分享你的知识、经验和见解”、两个输入框和“登录”按钮。HTML 是表示内容和语义的,它不仅确定网页有哪些文本内容,而且还用标记标签告诉浏览器哪些文本是标题,哪些文本是按钮,哪里放置输入框,甚至哪里需要放置图片。比如,“知乎”这两个字的语义是主标题,所以它在页面中字体最大。HTML中主标题(一级标题)的标记标签是

,所以要将“知乎”两个字赋予主标题的语义,可以在记事本中这样写:

知乎

HTML 的基本结构打开你电脑的记事本,把下面这段代码复制到记事本中吧,我们开始一步一步来制作网页。

自我介绍

名字:

性别:

生日:

班级:

兴趣爱好:

我先介绍一下HTML 的基本结构:

定义这个网页是用 HTML 语言制作的。

称为根标签,所有的网页标签都要嵌套在中,标记着HTML 的开始和结束。

表示 HTML 的头部,描述 HTML 文档的各种属性和信息,包括网页的标题、CSS 样式通过

表示 HTML 的主体,展示给网页浏览者看的文字、图片和链接等都要放在

标签里面。

定义网页的字符集,不用太纠结是什么意思,它的作用就是使网页不会乱码。但要注意的是,你在将记事本文档另存为.html文件时,也要把文件的字符集设为utf-8。

自我介绍标记整个网页的标题,出现在浏览器窗口顶部的标题栏。

分别标记网页的一级标题、二级标题,HTML一共有

六级标题,h后面的数字数字越大,标题字号越小。

标签代码:

在浏览器中显示:

标记一个段落,如果想在网页上显示文章,就需要

标签了,把文章的段落放到

标签中。

标签代码:

在浏览器中显示:

还记得你刚刚复制粘贴在记事本的代码吗?现在轮到你来动手啦。在代码的相应标签中写入自己的信息,然后另存为.html文件,用浏览器打开看一下你的自我介绍网页吧。

添加图片和超链接一个网页不可能只有文字,还应该会包含一些图片和超链接等。

定义图片的标签是怎么做网页制作怎么做网页制作是一个空标签,空标签的意思就是只有开始标签,没有结束标签。src 指向图片的地址,地址要放在双引号内,图片地址可以是电脑的本地文件也可以是网上的在线图片,我推荐使用在线图片的地址。

在一张图片上右击,选择“复制图片地址”。怎么做网页制作

现在来尝试一下吧,在你的自我介绍网页放一张你自己的照片。此时要再次编辑.html文件的话,右击文件选择“打开方式”为“记事本”,就可以再次编辑标签代码了。

我想在网页中添加一张编玩边学的图片,看一下我怎么做的吧。

标签代码:

在浏览器中显示:

我们在浏览网页时,点击蓝色带下划线的字体时可以链接到另一个网页,这是用标签实现的:

文本,target=”_blank”表示在新的空白页打开链接的网页。

我们来尝试一下,在网页中添加一个“点击这里了解更多”的文本链接到编玩边学的官网主页,你也可以选择链接到自己喜欢的网页。

标签代码:

在浏览器中显示:

点击之后:

快试一下在你自己的自我介绍网页中加入链接到喜欢的网页入口吧,比如你自己的QQ空间主页或者部落主页。

学到这里,相信你已经可以用HTML语言制作一个简单的静态网页了。

CSS但,当你打开用HTML制作的网页时,你会忍不住内心os:emmmmmm,这页面也太原始了吧,不符合现代人的审美啊。

前面提到的知乎登录页面,如果只用HTML语言编写,没有CSS样式,它是长这样的。

这是因为HTML只表示网页的内容和语义,并不会帮你把网页打扮得漂漂亮亮的。所以我们还需要学习用CSS装饰网页的内容。

CSS全称为“层叠样式表 (Cascading Style Sheets)”,用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、对齐方式、字体加粗等。

CSS代码语法

CSS样式通过标签嵌套在HTML的头部控制网页内容的样式。

自我介绍

CSS样式由选择符和声明组成,而声明又由属性和值组成。

选择符又称选择器,指明网页中要应用样式规则的标签,如上图的例子就是把网页中所有段落(p)的文字颜色变成蓝色,而其他标签不会受到影响。

在英文大括号“{}”中的就是声明,属性是指字体大小、颜色、对齐方式等,值是指字体具体有多大。颜色具体是哪个等。属性和值之间用英文冒号“:”分隔,当有多条声明时,中间可以英文分号“;”分隔。

CSS的常用属性在这里我们主要讲几种CSS常用的属性。

网页的字体属性是font-family,常用的值有SimSun(宋体) SimHei(黑体) Microsoft Yahei(微软雅黑) KaiTi(楷体)

我们来尝试一下,将前面做的自我介绍网页的字体设置为常用的微软雅黑字体。整个网页的字体包含在

标签中,所以选择符为body.

标签代码:

在浏览器中显示:

字体大小的属性是font-size,它的值常用的单位是px(像素),px的值越大字号越大;

字体颜色的属性是color,你可以将它的值设置为你喜欢的颜色。

用代码将自我介绍网页中段落

的字号放大一点,并将整个网页

的字体颜色设置为与编玩边学图片相似的蓝色。段落的选择符为p,整个网页的选择符为body。

标签代码:

在浏览器中显示:

我们还可以给网页中的某部分增加一个边框。

边框样式的属性是border-style,常用的值有solid(实线)和

dotted(虚线)

边框宽度的属性是border-width,它的值常用单位也是px(像素)

边框颜色属性是border-color,你可以设置成自己喜欢的颜色。

我想给名字的部分加一个红色的实线边框,所以选择符是h1。

标签代码:

在浏览器中显示:

美化网页的CSS属性有很多种类,而且方法也不只一种,在这里无法一一详述。快打开记事本为你刚刚制作的自我介绍网页添加一些好看的CSS样式吧。

双击打开html文件你会发现之前不忍直视的网页变得好看了哦。给自己点个赞吧!

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

Reprint please indicate:http://tuks.zhongxuan360.top/seo-1083.html