html制作网站首页代码及素材(HTML制作网站)
如何用html编写一个简单的网页
简单的html网页可以直接利用文本编写的，无需下载特定编辑器。
1、在我们的windows操作系统中，桌面上鼠标右键新建一个txt文本，并命名为"最简单网页",只是便于标识，实际上并不影响我们的操作。注意我们需要提前在文件属性中把扩展名显示出来。
2、我们打开文件夹属性设置，将文件扩展名显示出来，后面我们需要对文件扩展名进行操作，不同操作系统的设置位置不太一样，我们可以直接搜索"文件夹属性"来进行查找修改。
3、然后输入最简单的HTML文本语言。
代码如下：
html
body
最简单的网页
/body
/html
4、保存并关闭txt文本，然后修改我们txt文本的扩展名为html，此时会弹出警告框，提示我们修改后可能会导致文件不能使用，这是操作系统的一个处理逻辑，为了防止无意或恶意的损坏文件的行为。
5、无需担心，因为这在我们自己的掌控之下，确认警告，点击"是"，然后双击打开我们自己的第一个html网页，就可以看到一个最简单的html网页了。
怎么用html制作简单得网页代码？
用html制作简单的网页的步骤：
1、整体形象设计：企业确定要搭建网站，那么首先就需要确定企业的整体形象，这个形象包括企业的logo设计，整个站点的色彩搭配，网页流程设计，版面设计，甚至包括哪些地方本使用动态效果，哪些地方搭配文字信息，又或者需要布局哪些模块等等，这个都需要纳入到整体形象设计当中。
2、页面风格设计：网站整体设计完成之后，需要落实到每个小的页面，每个页面风格设计可以不同，但大的方向却需要一致，这样才能保证整个站点是整洁有序的，千万不能是一个页面一个页面设计，这样让用户感觉到非常突兀，甚至会不适应。
3、代码设计：代码设计其实也就是功能设计，一个网站不可能只是展示，还需要有一些其他功能，最少有联系版块的功能，留言功能等等，如果是电子商务网站还需要一些支付功能等等。此外，代码设计也涵盖了整个网站的框架布局，这个需要站长结合SEO优化元素去设计。
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
怎样制作html网页
怎样制作html网页?制作网页的整体思路有：
在进行网页制作的时候，要明白网页的类型以及所需要的材料，并做好一个框架构想，这样利于网页的效果形成，对后期的建设有相应的链接作用和奠基作用。
先布局，再用CSS进行控制。
骨架搭好了，初始化样式。
注意：将CSS的样式导入到外部样式表时，要注意图片的位置，以及对外部样式表的引入。这点可以参照HTML文件和LINGMAODIANSHANG等
1、头部的背景图片的高度128px来自素材的图片高，容器的宽度大小也来自图片宽
2、图片的位置：当你在编写index.html页面代码时，出现一些图片路径时，那么先分清楚哪些是同级目录文件
!DOCTYPE
html
html
head
/head
body
/body
/html
关于html页面制作
制作的网页：
整体思路：
先布局再CSS控制
骨架搭好了，初始化样式，
后再弄CSS样式。注意：将CSS的样式导入到外部样式表时，要注意图片的位置，以及
对外部样式表的引入
1、头部的背景图片的高度128px来自素材的图片高，容器的宽度大小也来自图片
的宽，那么这里背景图片设置的有意思吗？不设置效果一样呀！！
2、图片的位置：当你在编写index.html页面代码时，出现一些图片路径时，那么
先分清楚哪些是同级目录文件
我现在在操作首页实战.html，里面有图片1的路径，从上面可以看出首页实战.html和img文件夹为同级的目录，则路径应该写为:img/1.jpg
效果图
!DOCTYPEhtml
html
head
metacharset="UTF-8"
title/title
styletype="text/css"
#container{
width:1002px;
background-color:gray;
}
#header{
height:120px;
background-color:?aquamarine;
}
#main{
height:?600px;
background:?darkgoldenrod;
}
#footer{
height:?120px;
background:?yellowgreen;
}
#main-left{
float:?left;
background:?yellow;
width:?700px;
height:?100%;
}
#main-right{
float:?right;
background:?pink;
width:?302px;
height:100%?;
}
/style
/head
body
divid="container"
divid="header"/div
divid="main"
divid="main-left"/div
divid="main-right"/div
/div
divid="footer"/div
/div
/body
/html
注意：这里对id为main的div里面的子div
main-left和main-right设置浮动样式时，要设置宽和高不然不起作用(起单独一个宽或者高也不起作用，这里的背景颜色只是父div的背景颜色)。可能的原因是div里面没内容，没长和宽，自然不会显示背景颜色
3、当一个div包含两个左右浮动的div并且后面接个普通的div时
div id="main"
div id="lside"
/div
div id="rside"
/div
/div
div id=”footer”?
/div
因为两个浮动的div浮在水面上，但是父div(即id为main的div)没有高度所以没把父div撑开。Footer的div会在水平面上，所以加背景颜色和height后可以看到此div在这两个浮动div下面，要使footer的div呈现在下面并且不被覆盖，
第一种方法：给main的div加height：800px；让他撑开
第二种方法：在两个浮动div后面加上一个class为cl的div，样式为clear：both；
网页制作的初步完成：
Html代码：
!DOCTYPEhtml
html
head
metacharset="UTF-8"
title/title
linkrel="stylesheet"type="text/css"href="css/reset.css"/
linkrel="stylesheet"href="css/首页实战-2.css"/
/head
body
divid="container" ??????????????!--div#container--
divid="header" ?????????????!--div#header+div#main+div#footer--
imgsrc="img/logo.jpg"alt=""id="logo"/
ulid="nav"
liahref="#"导航1/a/li
????!--li*7a{导航$}--
liahref="#"导航2/a/li
liahref="#"导航3/a/li
liahref="#"导航4/a/li
liahref="#"导航5/a/li
liahref="#"导航6/a/li
liahref="#"导航7/a/li
/ul
/div
imgsrc="img/about_banner.jpg"alt=""id="banner"/
divid="main"
divid="lside"
divclass="subtitle"
imgsrc="img/circle.gif"/
h1核心业务/h1
ahref=""MORE/a
/div
divclass="four"
h2电子商务类网站建设/h2
imgsrc="img/eshop_service.jpg"alt=""/
ul ????????????????????????????!--ulli*5{方便的货物管理$}--
liahref="#"方便的货物管理/a/li
liahref="#"自定义会员类型/a/li
liahref="#"在线支付功能/a/li
liahref="#"丰富的订单统计/a/li
liahref="#"财务报表生成/a/li
/ul
/div
divclass="four"
h2电子商务类网站建设/h2
imgsrc="img/eshop_service.jpg"alt=""/
ul ????????????????????????????!--ulli*5{方便的货物管理$}--
liahref="#"方便的货物管理/a/li
liahref="#"自定义会员类型/a/li
liahref="#"在线支付功能/a/li
liahref="#"丰富的订单统计/a/li
liahref="#"财务报表生成/a/li
/ul
/div
divclass="four"
h2电子商务类网站建设/h2
imgsrc="img/eshop_service.jpg"alt=""/
ul ????????????????????????????!--ulli*5{方便的货物管理$}--
liahref="#"方便的货物管理/a/li
liahref="#"自定义会员类型/a/li
liahref="#"在线支付功能/a/li
liahref="#"丰富的订单统计/a/li
liahref="#"财务报表生成/a/li
/ul
/div
divclass="four"
h2电子商务类网站建设/h2
imgsrc="img/eshop_service.jpg"alt=""/
ul ????????????????????????????!--ulli*5{方便的货物管理$}--
liahref="#"方便的货物管理/a/li
liahref="#"自定义会员类型/a/li
liahref="#"在线支付功能/a/li
liahref="#"丰富的订单统计/a/li
liahref="#"财务报表生成/a/li
/ul
/div
/div
divid="rside"
divclass="subtitle"
imgsrc="img/circle.gif"/
h1文章观点/h1
ahref=""MORE/a
/div
ulid="art" ??????????????!--ul#navli*7{文章$}--
liahref="#"这是一篇好文章1/a/li
???!--li*5a{这是一篇好文章$}--
liahref="#"这是一篇好文章2/a/li
liahref="#"这是一篇好文章3/a/li
liahref="#"这是一篇好文章4/a/li
liahref="#"这是一篇好文章5/a/li
/ul
divclass="subtitle"
imgsrc="img/circle.gif"/
h1联系我们/h1
ahref=""MORE/a
/div
divid="contact"
/div
/div
/div
divid="footer"
ul ??????????????????????????????????!--ulli*7a{联系我们} --
liahref="#"联系我们/a/li
liahref="#"联系我们/a/li
liahref="#"联系我们/a/li
liahref="#"联系我们/a/li
liahref="#"联系我们/a/li
liahref="#"联系我们/a/li
liahref="#"联系我们/a/li
/ul
address?2006-2009 北京市灵犀慧通科技有限公司版权所有
京ICP备07020337号 W3C Valid CSS W3C Valid XHTML 1.0 Strict/address
/div
/div
/body
/html
样式代码：
#container?{
margin:?0?auto;
width:?1002px;
}
#header?{
height:?128px;
background:?gray url(../img/top_bg.jpg)no-repeat;
}
#nav?li?{
float:?left;
/*1、让导航横向*/
/*background: purple; ???*/
/*2、将导航撑开*/
width:?90px;
margin-right:?1px;
}
#nav?a?{
font-size:?16px;
font-family:?"微软雅黑";
color:?#363636;
/*8、文字颜色*/
display:?block;
/*5、鼠标移动上去后背景颜色局限在a标签内容中*/
height:?37px;
/*6、这些高度都有规定的*/
width:?90px;
text-align:?center;
/*7 、让文字居中*/
}
#nav?a:hover?{
/*3、鼠标放上来后变的样式*/
color:?white;
background:?url(../img/nav_on.gif);
/*4、鼠标移动后的背景颜色*/
}
#banner{
margin:?10px?0;
}
#main{
/*height: 800px; */??????????????????/* ?9、撑开*/
}
.subtitle{
height:?37px;
background:?url(../img/index_main_top_bg.gif); ??/*14对原先设置的背景颜色进行更改*/
}
.subtitle?img{
float:?left;
????????????????????????/*10将初始化的图片左浮动*/
margin:?5px?0?0?10px;
????????????????/*11对图片进行微调*/
}
.subtitle?h1{
float:left;
font-size:?16px;
??????????????????????????/*12对标题中字体进行设置*/
font-family:?"微软雅黑",simhei,sans-serif;
margin-left:10px;
}
.subtitle?a{
float:?right;
font-size:?12px;
???????????????????????????/*13对超链接进行微调*/
color:?gray;
}
.four{
width:?326px;
height:?200px;
background:?#EEE; ????????????????????/*这里将原先的背景改成其他的颜色(用QQ截图下面有显示RGB的颜色,这里只是转换成16进制)*/
float:?left;
margin:?10px;
}
.four?h2{
font-size:?16px;
font-family:?"微软雅黑";
margin:?6px?0?6px?10px;
????????????????????/*16将h2标题做做修改*/
}
.four?img{
float:?left; ??????????????????????????/*11、让class为four标签的img左浮动*/
margin-left:?10px;
???????????????????????????/*15图片背后有背景颜色为白色*/
padding:?6px;
background:?white;
}
.four?ul{
float:?left;
margin-left:?10px;
}
.four?li{
background:?url(../img/service_intro_bg.gif)no-repeat; ?????/*16标签前面的小黑点*/
padding-left:?10px;
?????????????????????????????/*17小黑点在字的下面*/
height:?20px;
}
.four?a{
color:?gray; ??????????????????????????????????/*18a标签的颜色*/
}
#lside{
height:?480px;
width:?694px;
border:?1px?solid?#EEE;
float:?left; ???????????????????????????/*8、让左右两个div并列一起*/
/*background: cornflowerblue;*/??????????????/*这里设置是来区分9*/??/*19删除背景图*/
border-top:?none;
}
#rside{
/*height: 600px;*/
width:?294px;
/*border:1px solid gray;*/
float:?right; ???????????????????????????/*让左右两个div并列一起*/
/*background: greenyellow; */????????????????/*这是一整个大的div到后面设置的话这个要去掉了*/
}
#art{
background:?#EEE;
margin-top:?1px;
padding-top:10px;
}
#art?a{
display:?block;
background:?url(../img/article_head.gif)no-repeat;
height:?29px;
padding-left:?30px;
}
#art?a:hover{
background:?url(../img/article_on_bg.gif); ??/*鼠标移动到文章标题后的背景*/
}
#contact{
margin-top:?1px;
height:?250px;
background:?#EEE;
}
#footer{
height:?120px;
/*background: gray;*/
clear:both; ????????????????????????/* 9、撑开*/
margin-top:?20px;
}
#footer?ul{
height:?40px;
background:?#EEE;
}
#footer?li{
float:?left;
margin-top:?15px;
margin-right:?10px;
}
#footer?address{
font-family:?"微软雅黑",sans-serif;
font-size:10px;
margin-top:?15px;
}
html如何制作网站
1，可以直接新建一个.html结尾的文件，也可以打开编辑器之后，在里面新建一个文件，然后保存为 .html结尾的，结果都一样。
2，然后选择使用某种编辑器来打开它，如使用Notepad++编辑器来编辑它。
3，然后在这个文件中写入网页所需的基本代码。
4，写好之后，根据需要设置编码格式，一般是utf-8格式，格式设置不对，会出现乱码的情况；设置好格式之后，点击左上角的图标来保存或者是直接按下 ctrl+s快捷键来保存。
5，保存好之后，然后点击‘运行’菜单，在出现的菜单中根据需要选择不同的浏览器来查看刚才编辑好的网页，当然也可以按下快捷键，如 谷歌的是 shift+Ctrl+alt+R 来看看效果如何，这就是简单的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