html在线时间统计图,Web前端开发入门,HTML一张图学会,还在看数小时视频浪费时间?...

同样的地方,同样的时间,又跟大家见面了。想学习前端朋友可以加我们的前端学习群:617327703

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

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

361df175f373

一样的老规矩,列出熟悉的流程:

1.HTML是什么

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

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

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

361df175f373

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

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

361df175f373

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

361df175f373

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

好了,小二,来份HTML! 。。。好嘞客观稍等片刻。。。热腾腾的HTML上来了想学习前端朋友可以加我们的前端学习群:617327703

361df175f373

菜名:HTML

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

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

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

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

361df175f373

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

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

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

361df175f373

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

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

361df175f373

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

那么这些砖砖瓦瓦都砌上了,怎么把它们放到理想的位置上呢?其实呀,就是下一篇将要分享的CSS在搞的鬼!想学习前端朋友可以加我们的前端学习群:617327703

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值