用HTML怎么制作网页呢？

　用HTML怎么制作网页呢?静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计 ‍ ,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的。

　　一、网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

　　二、网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

　　三、网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

　　四、网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;

　　五、网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件(如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。其中： (1) html文件包含：其中index.html是首页、其他html为二级页面; (2) css文件包含：css全部页面样式,文字滚动, 图片放大等; (3) js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。

面制作技术详解

演示视频在文章底部

1.页面内容居中显示方法

将这段代码<div style="width:50%;margin:auto;">放置在<body>标签之下。

将</div>放置在</body>之上。

将全部内容包裹在这个div中，就可以实现整个页面居中。

内容显示宽度为浏览器视窗宽度的50%。

margin（外边距）是在CSS布局中经常用到的属性，它指定了该div元素距离四周的距离。使用“auto”值，可以实现居中。

2.导航栏悬停顶端方法

把四个a标签装到一个div中。

将<div style="position:fixed; top:0px;">添加到<a style="margin: 0px 30px 0px 10px;" href="#chapter1">试飞进程</a>之上。

将</div>添加到<a style="margin: 0px 30px 0px 0px;"href="#chapter4">总体评价</a>之下。

position是css布局中指定位置的属性，“fixed”值是让该div悬停于固定位置。

默认下，该div距离视窗顶端有10px左右的距离，因此为了让它与视窗顶部对齐，添加top：0px。

3.鼠标滑过导航标题或链接时改变背景色提示

这就要介绍关于css的写法了。

简单来说，就是在<head></head>标签中添加

<style>

a:hover

{

background-color:#ffff00;

}

</style>

学过HTML页面中head标签有啥用？——零基础自学网页制作的小伙伴应该知道，CSS脚本是可以添加在head元素中的。

其中，a:hover中的a指的是所有<a></a>标签。

hover指的是：当鼠标悬停在a上面时的状态。

使用：连接。

这个状态下要执行的内容在{}中。

background-color:#ffff00;即背景色为黄色。

3.隐藏滚动条方法

首先，我们要明确一点，就是，滚动条是在内容长度超过视窗高度时产生的。

如果要取消视窗最右侧滚动条，就要控制内容高度。

把<p></p>和<img/><map></map>全部装进<div></div>中，控制该div的高度可以实现。

在<p>标签色上面添加<div>。

在</map>标签下面添加</div>。

下面，为div规定尺寸，添加style="width:610px; height:530px;"。

这样，就不会超出视窗。但是代码写完后发现并不是，如图：

多出的文字内容超出div范围，右侧滚动条依然存在。

这就要在div的style中再增加一条语句"overflow-y:scroll;"

这句话的意思是“overflow-y”（超出最大高度）就显示滚动条（scroll）。而不是让内容超出div的边框。

如图：

因为图片宽度的问题，下方的x轴的scroll也出现了，我们不想看到它，影响美观。

添加“overflow-x：hidden”即可，hidden（隐藏）。

如图：hidden之后，将无法滚动或拖动画面。

最后，我们要把右侧的scroll也隐藏掉，因为点击鼠标，滚动滚轮就够了，滚动条实在碍眼。

从前面的例子可知，hidden是不行的，有没有别的办法？

那就是在盖div的外部再添加一个div，让这个div的宽度略小于里面div的宽度，小到刚刚挡住滚动条既可以。如图：

这个div这样写即可

</div>

同时还要给里面的div添加margin来让它们对齐

</div>

完整代码：用HTML制作一个简单页面（代码阅读练习）——零基础自学网页制作

多朋友想学一下网页制作，上网一看，只要涉及到网页制作，都离不开HTML这个词语，HTML是HyperText Markup Language的简称，想学习HTML语言，先得了解一些基本知识，今天这边内容可以作为学习HTML的菜鸟教程第一课。

HTML是什么？

一般我们说HTML是指超文本标记语言，英文名称为HyperText Markup Language，简称HTML，它是目前互联网上应用最广泛的语言。

如何查看HTML？

拿最常见的网页为例，如果用大家熟悉的IE浏览器的话，直接在网页上点右键，选择“查看源”即可查看当前网页的HTML源码；如果是其他浏览器的话，多数情况下点击右键，选择“查看源码”或者类似“查看网页源代码”这样的选项即可查看。

当然也可以通过专业的网页制作软件以及各种文本编辑器来查看。

HTML有什么用？

HTML语言可以方便地将网络上存储于不同位置的文字、图片、声音、视频等内容组织起来，方便用户浏览。对于我们来说，HTML是学习网页制作的基本功，熟练掌握HTML这项基本功，可以为以后的学习和工作打下良好的基础。

HTML如何入门？

要学习任何编程语言，都不好好高骛远，HTML的入门很简单，但是也要遵循学习的基本步骤，选择一本入门书籍，循序渐进地去学习每一张的内容。一边学习，一边查看网页代码对照来学，提升入门速度。

HTML案例

下面就是最基本的HTML案例，在这个案例中，用的是HTML5，

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 描述了网页的标题
<body> 元素包含了可见的页面内容，因为下面是最简单的案例，所以只有几行，实际网页一般都有很多行。
<h1> 定义一个大标题
<p> 元素定义一个段落，也就是大家常说的分段。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML菜鸟教程(runoob.com)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

如何编辑HTML?

这个就很多了，比如最出名的Dreamweaver，当然如果熟练之后，可以选择任意自己喜欢的编辑器，一些小的改动或者一小段代码的话，也可以用各种常见的文本编辑器来处理，比如我们在wodows系统上常见的记事本，总之只要自己觉得方便就好。

总结

以上是学习HTML菜鸟教程的第一课，首先保持一个良好的心态来学习，有好的心态，知识方面只要循序渐进，学会就是水到渠成的事情了。

在线咨询

上一篇：HTML简介：想成为前端开发者？先从掌握HTML开始！
下一篇：HTML页面基本结构和加载过程

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

用HTML怎么制作网页呢？

面制作技术详解

您的项目需求