Web前端开发入门，HTML一张图学会，还在看数小时视频浪费时间？

样的地方，同样的时间，又跟大家见面了。

很多人问我，前端开发入门怎么开始？这里呢，先看下我之前发的文章有大体的概括思路跟流程在里面。今天主要分享入门第一篇： HTML。

由于时间有限，空间有限，关于HTML历史我就不唠叨了，大家去w3c，菜鸟教程都可以查看的到，我主要是跟大家讲讲怎么快速理解并且掌握HTML。在文章最后我会给出总体轮廓图，让大家看完能够清晰的带着思路收藏起来。

一样的老规矩，列出熟悉的流程：

1.HTML是什么

2.它跟浏览器有着什么样的关系

3.HTML在工作中常用的东西是哪些

这四个流程讲下来，你就知道我们打开的网页原来就是这个样子。

继续，长篇大论我就不讲了，感觉有点虚，直接进入主题关键是“懂”。那么首先第一步，HTML是什么？

这样理解吧，我们可以把浏览器，屏幕当成一张A4纸，你在纸上面写个人奖励，有头有尾，还有中心，那么网页也是一样，它也有头，有尾，组合在一起的。我们只不过换了个地方，换了种方法在写东西而已。这样在你的大脑里，HTML就相当于是A4纸了，正如HTML的定义也是相当如此，即：它是超文本标记语言（相当于可以理解为很高级的A4纸）。带着这种理解去开HTML的定义，你肯定收获很大，比起你脑袋一片空白去看代码要事半功倍的多。

第二点，这个HTML跟浏览器是怎么配合的？我们可以简单理解为，你的A4纸，写出来的东西，得让人看的懂吧，别人在看的时候是不是在分析你的文字或者图片。那么同样的，浏览器它作用于帮助大家把代买看懂，然后用大家看的懂得形式展现出来。起到一个解析你的HTML作用。那么总结下来就是你写的HTML，浏览器帮助你解析展现给大家。

到这里，说了这么多，一个代买没见着？笑话，这怎么分享啊！不，我觉得大家先大脑有个概念，这样下面的代码就几分钟理解透彻。

好了，小二，来份HTML！。。。好嘞客观稍等片刻。。。热腾腾的HTML上来了

菜名：HTML

这是一个标准的HTML5文档（不要怕，其实还是HTML，只是版本不同而已，不要想的太复杂），我们来用A4纸的例子解释下。首先第一行，文本类型HTML的意思，直接翻译就好，因为浏览器不只会读懂HTML，还会有其他的。第二行是这个文档解析标准英文。第三行head的意思就是头咯，那么这就是文档的头，相当于A4纸的title，里面有meta告诉浏览器用的，说我是中文，不要给我解析成什么俄罗斯语言。。。继续下面body，身子的意思，A4纸正文的意思。

为什么我不跟大家先说这些是标签呢？--因为，个人认为，先知道这些代表什么，然后再知道怎么组装他们更适合理解。

那么看完上面现在跟大家讲：标签是什么，其实理解简单点就是组合HTML的规则，比如这个标准的HTML文档，你要组合它，你的按规则来，不能乱写。那么组合方法是什么，其实呀，用HTML规定的东西拼接起来，HTML规定标签有两种，单标签跟双标签，单的就是上面的meta，双的就是head，成双成对出现的就是双的，单个出现的就是单的。这还不好理解呀，那么问题来了，有多少标签？网上搜索你就知道了，带着这样的理解思路，一看就懂咯。

现在回到流程第三步，最常用的在开发过程中的有哪些除了上面标准的格式。

以上就是最常用的了，仔细看可以看到有单标签，有双标签。这些标签组合上HTML标准格式，就是我们看到的网页了。

那么，有人就问了，我该怎么写呢？不急，继续往下看。

仔细重回上面看，可以看到body里面什么也没有，这里就是你可以写常用标签的地方，网页标签组合的规则是：由外到内。也就是说它们存在包含关系，比如：一个框框里面有文字

div就是框，就是拼接的砖块，它包含着你想表达的东西。那么，整个网页外层就是一个大大的div框，里面包含了文字，图片，选择框等等我们看到的东西。

理解方法思路大概就是这个样子，这些里面还有数多标签，大家可以去网上查查，然后这样去理解，基本一看就懂了。哦？原来网页就是这个样子。。。下面是我画的一张大体图片。

用HTML解释下上图（基本简单的网站模型），这个外面粉色的框是个大的DIV，包含了里面的头部，轮播图，还有三块内容．头部也是一个DIV块，里面包含了我们可以选择进入的导航。轮播图也是一个DIV，包含了我们看到的图片。下面三块内容也是一个DIV，包含了三块内容，三块内容分别又有DIV包含着。这下明白了，从最外层包含到最内层，就是前面讲的：由外到内。这样整个的结构清晰了，大家再去看些资料，就OK了。HTML文档其实就这么简单，没有逻辑成分，只要找到理解技巧，看下就会了，比起看几个小时的视频而且还很多的专业名词去理解要来的轻松些。

那么这些砖砖瓦瓦都砌上了，怎么把它们放到理想的位置上呢？其实呀，就是下一篇将要分享的CSS在搞的鬼！

看最终效果：

制作思路：

在timeline里每一行使用dl标签布局；每行(dl)左侧的边框使用border-left绘制。左侧圆形使用dt布局，我们可以使用border给dt加边框，使用border-radius绘制圆形效果，右侧文字使用dd排列。

html布局代码如下：

<dl>

<dd>

<h3>管家接单中</h3>

</dd>

</dl>

<dl>

<dd>

<p></p>

</dd>

</dl>

<dl>

<dd>

<p></p>

</dd>

</dl>

</div>

css样式代码：

.timeline{ padding: 1rem 0;}

.timeline dl{border-left:1px solid #eee; position:relative; margin:0 0 0 .5rem; height: 5rem;}

.timeline dl dt{ position: absolute; left: -.5rem; top:0rem; width:.5rem; height: .5rem; border-radius: .5rem; border:2px solid #eee; background-color: #fff;}

.timeline dl dt.on{border:2px solid #FF8800;}

.timeline dl dd{ position: absolute; left: 1rem; top:0rem;}

.timeline dl dd h3{font-size:1.1rem; font-weight:600; padding:0 0 .5rem 0; color: #333333;}

.timeline dl dd p{ color: #949494;}

.timeline dl:last-child{border-left:none; }

说明：定义dl样式的时候position一定要使用relative。因为后面我们需要给里面的dt和dd使用绝对定位。

dt标签里，position：absolute代表使用绝对定位。left位置为-.5rem代表向左负的0.5rem（这里我使用的rem单位，你们使用px的话，就写具体的px 值）。宽和高也同时是.5rem。然后为了绘制圆形设置border-radius也是.5rem。边框使用border属性设置宽度为2px。

dd标签里，同样设置position:absolute使用绝对定位。设置left为1rem（代表距离左边界1rem）。

然后我们看到最后一个dl左边是没有边框的，如下图箭头所示：

这个是通过：.timeline dl:last-child{border-left:none; }设定的。

如果没有这行，效果就是这边的样子了：

好了，介绍就这些，代码不多，实现了效果：）

面效果展示

页面完整代码

<!DOCTYPE HTML>
<html>
<head> 
<title>文内链接</title>
<style>
a:hover
{
background-color:yellow;
}
</style>
</head> 
<body >
<div style="width:50%;margin:auto;"><!--使页面居中显示，并展视窗50%宽度-->
<div style="position:fixed; top:0px;"><!--使导航菜单悬停在顶端-->
<a style="margin: 0px 30px 0px 10px;" href="#chapter1">试飞进程</a>
<a style="margin: 0px 30px 0px 0px;" href="#chapter2">研制情况</a>
<a style="margin: 0px 30px 0px 0px;" href="#chapter3">服役动态</a>
<a style="margin: 0px 30px 0px 0px;"href="#chapter4">总体评价</a>
</div><!--使导航菜单悬停在顶端（结尾）-->
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;"><!--小div套大div隐藏滚动条-->
<div style="margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;" >
<p><!--小div-->
<h2><a id="chapter1" >试飞进程</a></h2>
歼-20隐形战斗机首架技术验证机于2011年1月11日中午12时50分左右进行首次升空飞行测试，13时08分成功着陆，历时18分钟。<br>
整个首飞过程在歼-10S战斗教练机陪伴下完成 。
2016年10月28日，首次发布“空军试飞员将驾歼-20飞机亮相中国航展”后，还陆续发布了“歼-20战机列装空军作战部队”“空军歼-20战机首次开展海上方向实战化训练”等。
<h2><a id="chapter2">研制情况</a></h2>
在2016年11月1日，第十一届珠海航展，歼-20首次进行空中飞行展示。两架歼-20做了公开飞行，不仅在现场引起轰动，也立刻被西方媒体大量报道。歼-20是中国现代空中力量的代表作，也进入了世界最先进的第五代战斗机行列，它是中国国防能力高速发展的一个象征。<br>
2018年11月11日，第十二届中国航展在珠海迎来“高光时刻”：歼-20战机在公开飞行展示中挂弹开仓，震撼献礼人民空军成立69周年纪念日。 <br>
2019年10月13日，庆祝人民空军成立70周年航空开放活动新闻发布上，空军新闻发言人申进科大校介绍歼-20战机列阵人民空军“王牌部队”
<h2><a id="chapter3" >服役动态</a></h2>
2017年3月9日，中央电视台报道歼-20战斗机正式进入空军序列。<br>
2017年3月13日，《中国日报》发布消息称，中国自主研制的歼-20近期将装配国产发动机。<br>
2017年7月30日，歼-20三机编队参加在朱日和举行的庆祝中国人民解放军成立90周年阅兵。歼击机梯队飞来，3架歼-20隐形战斗机以楔形编队的形式在天空中飞过。<br>
2017年9月28日，在中国国防部行记者会上，国防部新闻发言人吴谦大校介绍歼-20飞机已经列装部队。<br>
2017年11月10日上午，中国空军发言人申进科大校表示，歼-20 列装部队后，已经开展编队训练。<br>
2018年2月9日，中国空军新闻发言人申进科大校发布消息，歼-20开始列装空军作战部队。<br>
2018年10月30日，中国空军4架歼-20隐形战斗机现身珠海金湾机场上空。<br>
2019年10月1日，歼-20现身庆祝中华人民共和国成立70周年阅兵式；阅兵中，歼-20与歼-16、歼-10C三型飞机分别以5机楔队组成战斗队形接受检阅；该三款歼击机被誉为中国空军歼击机家族的“三剑客”，是未来联合作战的骨干力量
<h2><a id="chapter4" >总体评价</a></h2>
歼-20是眼下亚洲区域最先进的战机，这让中国空军在面对日本、韩国与印度等国家的空军时占有显著优势。外媒将歼-20与其他国家战机进行了对比。俄罗斯苏霍伊苏-57战斗机由于研制进度几度推迟，尚未正式交付入役；美国F-35战斗机也多次出现飞机供氧不足的问题，大面积停飞，出口受阻；韩国KF-X隐形战机先是被爆出因掌握不了关键技术而被迫降成四代半战机的情况，后又传出了合作方印尼打算撤资并已告知韩国的消息。因此，中国歼-20战机成为亚太区域领跑的优势战机。<br>
中国空军正向全疆域作战的现代化战略性军种迈进，成为有效塑造态势、管控危机、遏制战争、打赢战争的重要力量。歼-20战机列装空军作战部队，将进一步提升空军综合作战能力，有助于空军更好的肩负起维护国家主权、安全和领土完整的神圣使命。<br>
歼20是我国自主研制的第五代战斗机，它的研制实现了既定的四大目标——打造跨代新机、引领技术发展、创新研发体系、建设卓越团队。打造跨代新机，是按照性能、技术和进度要求，研制开发我国自己的新一代隐身战斗机。引领技术发展，指通过自主创新实现强军兴军的目标。歼20在态势感知、信息对抗、协同作战等多方面取得了突破，这是中国航空工业从跟跑到并跑，再到领跑的必由之路。创新研发体系，是指建设最先进的飞机研制条件和研制流程。通过一大批大国重器的研制，我们建立了具有我国特色的数字化研发体系。建设卓越团队，是指通过型号研制，锤炼一支爱党爱国的研制队伍，这些拥有报国情怀、创新精神的优秀青年是航空事业未来发展的生力军。未来，我们将在战斗机的机械化、信息化、智能化发展征程上不断前行。
</p>
<img border="0" src="img/image1.jpg" usemap="#map" / >
<map name="map" id="map">
<area shape="poly"  coords="142,62,186,175,246,236,243,298,263,323,396,338,478,313,516,246,496,224,320,158,348,142,336,129,232,108" href="https://www.zhihu.com/question/284642168" / title="歼20气动外形分析"><!--必须保证画面尺寸与页面显示尺寸一致！-->
</map>
</div><!--小div(结尾)-->
</div><!--小div套大div隐藏滚动条（结尾）-->
</div><!--使页面居中显示，并展视窗50%宽度（结尾）-->
</body> 
</html>

页面制作技术解析

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

2.导航栏悬停顶端方法

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

3.隐藏滚动条方法

4.图片区域链接

大家结合代码和技术解析，先自行分析一下每段代码的作用，以及它们之间的前后关系。这一步练习对培养代码阅读能力很有好处，希望大家可以先自行阅读分析。

下一次，我会逐步演示“页面制作技术解析”中的五个步骤以及一些注意事项。

使用碎片时间，学习完整知识！关注大鱼师兄，一起精研技艺。

整合营销服务商

Web前端开发入门，HTML一张图学会，还在看数小时视频浪费时间？

面效果展示

页面完整代码

页面制作技术解析

目录

您的项目需求