html网页制作案例及素材(网页设计素材下载html)
html求制作一个简单网页代码，只需要一些文字加张图片
具体步骤如下：
静态网页现阶段主要采用DIV+CSS+Javascript来实现,
第一步:在桌面上创建一个文本文件;
第二步:将文本名改为"test.html"(扩展名为.html或者.htm即可,看不见扩展名可以到);
第三步:文件名改好后,右击打开方式,选择记事本;
第四步:写代码。
html代码写成下图这样即可:
2.css代码写在下图区域内:
3.javascript代码写在下图区域内:
第五步:在这些代码区域内写上你的代码;
第六步:保存该文本文件;然后右击打开选择一个浏览器打开;如果出现“已限制网页运行脚本。。。”点击允许。
代码如下：
!doctype html
html
head
meta charset="UTF-8"
meta name="Generator" content="EditPlus?"
meta name="Author" content=""
meta name="Keywords" content=""
meta name="Description" content=""
titleDocument/title
/head
body
img src="这里填你的图片名字，例如1.jpg，图片跟html放在同一个文件夹下面就行"
img src="2.jpg"
img src="3.jpg"
p这里输入你想要输入的文字/p
/body
/html
HTML制作简单网页
!DOCTYPE html
html
head
title东风破/title
meta charset="utf-8"
/head
body
center
p去底部 去指定位置/p
/html
如何用html编写一个简单的网页
简单的html网页可以直接利用文本编写的，无需下载特定编辑器。
1、在我们的windows操作系统中，桌面上鼠标右键新建一个txt文本，并命名为"最简单网页",只是便于标识，实际上并不影响我们的操作。注意我们需要提前在文件属性中把扩展名显示出来。
2、我们打开文件夹属性设置，将文件扩展名显示出来，后面我们需要对文件扩展名进行操作，不同操作系统的设置位置不太一样，我们可以直接搜索"文件夹属性"来进行查找修改。
3、然后输入最简单的HTML文本语言。
代码如下：
html
body
最简单的网页
/body
/html
4、保存并关闭txt文本，然后修改我们txt文本的扩展名为html，此时会弹出警告框，提示我们修改后可能会导致文件不能使用，这是操作系统的一个处理逻辑，为了防止无意或恶意的损坏文件的行为。
5、无需担心，因为这在我们自己的掌控之下，确认警告，点击"是"，然后双击打开我们自己的第一个html网页，就可以看到一个最简单的html网页了。
用html制作一个个人网页要求有五个链接，每页都有css格式
方法/步骤
1
CSS是由选择器加声明组成的。
比如：
h1{color:red;}
h1就是选择器，意思是只要遇到h1，就使用该CSS的规则
color：red; :这个事声明
color:这个是属性
red:这个是值
2
OK，我们先来分析选择器。
END
一.选择器
1
选择器的种类很多，各有各的作用。我们来一一讲解。
标签选择器
class选择器
id选择器
全局选择器
组合选择器
伪类选择器
2
标签选择器
顾名思义，HTML中有许多标签，而标签选择器就是用来给标签直接申明样式的，简单、实用、常用。
举例：
p{color:red;}
只要是p标签，其P标签内部的颜色，都是红色。
如图代码
headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /title无标题文档/titlestylep{ color:red;}/style/headbodyp嘿嘿哦嘿嘿呀哦嘿嘿哦/p/body
其中，style标签是样式标签，请将CSS放在其中
（这部分内容后续会介绍，这里只是先提一下）
3
看网页效果
4
class选择器
也叫做类选择器，直接说概念估计你也不明白，直接上例子吧。
举例：
.alsp{color:red;}
这就是一个class选择器，意思是有一种CSS的样式，其名字是alsp，谁想用谁用。
看代码：
headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /title无标题文档/titlestyle type="text/css".alsp{color:red;}/style/headbodyp class="alsp"嘿嘿哦嘿嘿呀哦嘿嘿哦/pol class="alsp"li嘿啥嘿/lili我想嘿嘿/lili专制各种不服/li/olp世界为亡，死不投降/p/body
5
看网页效果
通过.alsp定义一个class选择器。
在后面的代码中，哪个标签想用，就用class="alsp"去调用，就可以使用这件“衣服”来修饰自己了
6
ID选择器
ID和class很像，但是和class有一个区别。class像姓名，两个人是可以同名的，但是id像身份证，只有一个人可以使用。
例如：
#alsp{color:red;}
OK，上代码：
#alsp{color:red;}/style/headbodyp id="alsp"嘿嘿哦嘿嘿呀哦嘿嘿哦/polli嘿啥嘿/lili我想嘿嘿/lili专制各种不服/li/olp世界为亡，死不投降/p/body
7
看网页效果
只能有一个标签使用该id，或者说该标签专属ID
8
全局选择器
*{margin:0; padding:0;}
这个很简单，前面用个*来表示，整个网页都会使用。这句话也是网页基本都要添加的，什么意思呢？自己试试看吧。
9
组合选择器
组合选择，小编是非常喜欢使用的，原因无他，懒而已。他可以减少代码量，并且方便、易读。
不过组合选择器的组合方式比较多，但也多很好理解。
1）群模式
比如：
h1{color:red; font-size:14px;}
p{color:red; font-size:14px;}
a{color:red; font-size:14px;}
这三个虽然标签不同，但是样式是一模一样的，所以，可以这样写：
h1,p,a,{color:red; font-size:14px;}
2）继承模式
比如：
.alsp li{color:red;}
ul class=".alsp"
lifdf/li
/ul
li是在ul之中的，算是ul的后代。通过.alsp li确定li是属于调用alsp类选择器里的li标签，其他的li标签并不会使用该样式。
3）群模式（多元素并列选择器）
其实也是一种特殊的群模式
p.alsp{color:red;}
p class="alsp"p.alsp/p
a class="alsp"a.alsp/p
alsp仍然是一种class选择器，但是他只有在p的标签下被使用才生效。
所以，第一行生效，p.alsp字样变红，第二行不生效
10
伪类选择器
“伪”字暴露了他的本质，伪类选择器并不像其他选择器直接做用在标签上，但是他偏偏又是在标签上进行使用，所以称为“伪类选择器”。
伪类的作用，是作用在状态上。
一般情况正常运行，只有当达成条件的时候触发，才会执行伪类选择器所代表是css样式。
伪类选择器很多，但许多都是我们这辈子估计都用不到的。
OK，伪类选择器后续我会专门写一篇经验介绍，有点小多，这里也就不多说了。
END
二.在HTML中调用CSS
调用CSS的常用方法有3中
内样式
外样式
行间样式
内样式
直接看代码，如图所示
在head/head中，加入style/style,并将相关的CSS样式放在其中
外样式
直接看代码，如图所示：
link rel="stylesheet" type="text/css" href="index.css"
这里，href为css的路径。
意思是，你专门创建一个index.css的文件，里面放上CSS样式，和内样式的语法一模一样，只是专门找了一个文件存放而已。
4
行间样式
行间样式直接写在元素里面
例如：p style="color:#900"嘿嘿哦嘿嘿呀哦嘿嘿哦/p
直接在标签后面加上style
一般不要用，不过可以用来调试使用
怎样制作html网页
怎样制作html网页?制作网页的整体思路有：
在进行网页制作的时候，要明白网页的类型以及所需要的材料，并做好一个框架构想，这样利于网页的效果形成，对后期的建设有相应的链接作用和奠基作用。
先布局，再用CSS进行控制。
骨架搭好了，初始化样式。
注意：将CSS的样式导入到外部样式表时，要注意图片的位置，以及对外部样式表的引入。这点可以参照HTML文件和LINGMAODIANSHANG等
1、头部的背景图片的高度128px来自素材的图片高，容器的宽度大小也来自图片宽
2、图片的位置：当你在编写index.html页面代码时，出现一些图片路径时，那么先分清楚哪些是同级目录文件
!DOCTYPE
html
html
head
/head
body
/body
/html
html求制作一个简单网页代码，只需要一些文字加几张图片
!doctype?html
html?lang="en"
?head
??meta?charset="UTF-8"
??meta?name="Generator"?content="EditPlus?"
??meta?name="Author"?content=""
??meta?name="Keywords"?content=""
??meta?name="Description"?content=""
??titleDocument/title
?/head
?body
??
??img?src="这里填你的图片名字，例如1.jpg，图片跟html放在同一个文件夹下面就行"
??img?src="2.jpg"
??img?src="3.jpg"
??p这里输入你想要输入的文字/p
??
?/body
/html