1.如何居中显示页面内容
放置此代码div style=’width:50%;margin:auto;’在body 标签下。
将/div 放在/body 上方。
将该div 中的所有内容包裹起来，使整个页面居中。
内容显示宽度为浏览器窗口宽度的50%。
边距（margin）是CSS布局中经常使用的一个属性。它指定div 元素与其周围元素之间的距离。使用“auto”值，可以实现居中。
2.如何悬浮导航栏顶部
将四个a 标签放入一个div 中。
添加div style=’position:fixed;顶部：0px;’样式=’margin: 0px 30px 0px 10px;’上面的试飞过程/a.href=’#chapter1′
在style=’margin: 0px 30px 0px 0px;’href=’#chapter4’总体评分/a 下面添加/div。
position是指定css布局中位置的属性，“fixed”值使div悬停在固定位置。
默认情况下，div 距视口顶部约10px，因此要将其与视口顶部对齐，请添加top:0px。
3.更改鼠标滑过导航标题或链接时的背景颜色提示
这是介绍如何编写css。
简单来说就是添加到head/head标签中
风格
a:悬停
{
背景颜色：#ffff00;
}
/风格
HTML页面中的head标签有什么用？ —— 从零开始学习网页制作的朋友应该知道，head元素中可以添加CSS脚本。
其中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;高度：530px；’。
这样，视口就不会消失。但写完代码后发现并不是这样的，如图：
多余的文字内容超出了div的范围，右侧的滚动条依然存在。
这需要添加另一个语句“overflow-y:scroll;”到div的样式。
这句话的意思是“overflow-y”（超过最大高度）就会显示滚动条（scroll）。而不是让内容超出div的边界。
div样式=’width:610px;高度：530px；溢出-y:scroll；’
如图所示：
由于图片宽度的原因，下面的x轴的滚动也出现了。我们不想看到它，影响美观。
只需添加“overflow-x:hidden”，隐藏（隐藏）。
div样式=’width:610px;高度：530px；溢出-y:滚动；溢出-x:隐藏；’
如图：隐藏后，屏幕无法滚动、拖动。
最后，我们需要隐藏右侧的滚动条，因为只需点击鼠标并滚动滚轮就足够了，而滚动条确实很烦人。
从前面的例子我们可以看出隐藏是不可能的。还有其他办法吗？
也就是在封面div外面再添加一个div，让这个div的宽度比内层div的宽度稍小，小到刚好挡住滚动条。如图所示：
这个div可以这样写
div style=’margin:30px 0px 0px 0px;width:600px;overflow:hidden;’
/div
同时给里面的div添加margin，使其对齐。
div style=’margin:30px 0px 0px 0px;width:600px;overflow:hidden;’
div style=’margin:0px 0px 0px 8px;width:610px;高度：530px；溢出-y:滚动；溢出-x:隐藏；’
!–p img图省略，请自行判断或参考源码–
/div
/div
完整代码：使用HTML创建一个简单的页面（代码阅读练习）—— 零基础自学网页制作
4.图片区链接
查看详情
HTML —— 零基础自学网页制作中图像区域链接方法详解
HTML图像区链接注意事项及Gimp —— 零基础自学网页制作基本用法
具体流程请参考演示视频：
视频加载中.
HTML部分结语
几经周折，我还是坚持完成了HTML部分。
经过这段时间的实践，我确定的原则是：
首先，如果有用的话，一切都应该用简单的英语解释。
其次，不要太琐碎，尽量把内容堆砌起来。全部看完后，你就能了解常用的页面代码，具备一定的开发能力。
三是利用多媒体手段，清晰展示操作过程。当你忘记的时候，你可以打开它来观看。
第四，控制长度，做好碎片化学习。
HTML部分就结束了。
下一步是准备CSS 部分。
感谢大家的支持与陪伴！也感谢自媒体平台提供的免费服务。
内容如有遗漏或错误，敬请指正！我对你感激不尽。
利用碎片时间学习完整的知识！跟着大宇哥一起学习他的技艺。
目录
HTML序言（学习目标、对象、基本概念） —— 零基础自学网页制作
什么是HTML？ —— 零基础自学网页制作
如何编写第一个HTML 页面？ —— 零基础自学网页制作
HTML页面中的head标签有什么用？ —— 零基础自学网页制作
初识meta标签和SEO——零基础自学网页制作
HTML中元素的使用方法1—— 零基础自学网页制作
HTML中元素的使用方法2—— 零基础自学网页制作
HTML元素中的属性1—— 零基础自学网页制作
HTML元素中的属性2（详细路径解释） —— 零基础自学网页制作
使用HTML添加表格1（基本元素） —— 零基础自学网页制作
使用HTML添加表格2（表头表脚） —— 零基础自学网页制作
使用HTML添加表格3（间距和颜色） —— 零基础自学网页制作
使用HTML添加表格4（行颜色和表格嵌套）—— 零基础自学网页制作
十六进制颜色表示及RGB颜色模型—— 零基础自学网页制作
HTML中的块级元素和内联元素—— 零基础自学网页制作
初识HTML中的div块元素—— 零基础自学网页制作
HTML页面中嵌入其他页面的方法—— 零基础自学网页制作
封闭式在家上学网页制作！将PDF文件嵌入页面—— 零基础自学网页制作
初识HTML表单元素1—— 零基础自学网页制作
初识HTML表单元素2——零基础自学网页制作
HTML Form 3(下拉列表、多行文本输入) —— 零基础自学网页制作
HTML表单4（表单的action和method属性）—— 零基础自学网页制作
HTML列表制作讲解—— 零基础自学网页制作
如何在HTML页面中添加视频和音频—— 零基础自学网页制作
音视频格式转换神器及html视频元素及字幕—— 零基础自学网页制作
利用HTML中的a标签实现文本内链接—— 零基础自学网页制作
HTML —— 零基础自学网页制作中图像区域链接方法详解
用户评论
一纸愁肠。
哇，这个标题对我来说简直是福音！我一直想自学网页制作，但是觉得入门太难了。这篇详解应该能帮我解决大问题。
有18位网友表示赞同！
人心叵测i
终于找到一篇适合零基础的教程了，太感谢作者了！希望能从这篇详解中学会制作简单页面。
有9位网友表示赞同！
苍白的笑〃
我一直想尝试网页制作，但是看不懂那些复杂的代码。这篇详解看起来很基础，应该适合我。
有8位网友表示赞同！
﹎℡默默的爱
看了这篇详解，我觉得自己离成为网页设计师又近了一步。希望作者能出更多类似的教程。
有9位网友表示赞同！
鹿叹
制作简单页面原来这么简单啊！感谢作者详细的步骤，我已经迫不及待想动手试试了。
有19位网友表示赞同！
水波映月
这篇详解真的太实用了，我之前看过的教程都不如这篇详细。一定要分享给更多朋友。
有19位网友表示赞同！
青山暮雪
我一直觉得网页制作很难，但是这篇详解让我看到了希望。我要努力学，争取早日能制作出满意的页面。
有20位网友表示赞同！
各自安好ぃ
作者的这个教程太棒了，我之前试过很多方法都失败了，这篇详解让我找到了方向。
有18位网友表示赞同！
熏染
这篇详解让我对网页制作有了全新的认识，原来简单页面也可以这么有趣。
有13位网友表示赞同！
在哪跌倒こ就在哪躺下
我是个编程小白，但是这篇详解让我对网页制作产生了兴趣。希望能一步步跟下来。
有9位网友表示赞同！
?娘子汉
这篇详解让我对HTML有了更深的理解，感谢作者的耐心讲解。
有8位网友表示赞同！
怅惘
看了这篇详解，我觉得自己之前的努力都白费了。以后要跟着这篇教程好好学。
有9位网友表示赞同！
蹂躏少女
制作简单页面真的这么简单吗？我有些不敢相信，但是作者的讲解让我有了信心。
有6位网友表示赞同！
仅有的余温
这篇详解让我对网页制作有了全新的认识，我觉得自己可以尝试一下。
有13位网友表示赞同！
麝香味
作者这个教程太贴心了，不仅有详细的步骤，还有代码示例，非常适合新手。
有17位网友表示赞同！
入骨相思
这篇详解让我对网页制作产生了浓厚的兴趣，我要从这篇开始，一步一步学习。
有20位网友表示赞同！
不忘初心
感谢作者这么用心地写这篇详解，让我对网页制作有了更深的了解。
有6位网友表示赞同！
安好如初
这篇详解让我明白了网页制作的精髓，我一定要好好学习，做出自己的作品。
有9位网友表示赞同！
颓废人士
制作简单页面原来这么容易，我要把这个教程分享给更多的人。
有10位网友表示赞同！