从0到1开启web前端学习之旅二

老渡司机天天见,欢迎来到Coding Time! 上会书说到每个标签都有其特殊的含义,整个页面中最最基础的标签是结构化标签,除此之外还有很多自带其他功能的标签比如p标签可以使文本按照段落的方式进行展示,address标签可以让文本按照标准地址的写法进行展示(成段并且斜体展示),html中标签有多种,我们这个阶段只是学习html4.0规范中的部分标签,但就是这些部分标签我们基本上已经够用了,为什么这么说?因为每个标签都具有一些特定的功能,比如p标签和i标签一个让文字成段展示一个让文字斜体展示,那address呢?

对她基本上可以看成两个标签的功能的叠加这种功能的叠加我们是可以通过标签的组合使用来实现。

 

代码实现:

图1

样式展示:

图二

总结一下就是某些标签的功能其实是可以通过其他功能更基础的标签组合使用而达成的,那就是说虽然语法给你提供了这么多标签但是我们没有必要全部学习,只要掌握其中常用的标签就好,剩下需要的功能我们可以通过组合搭配来完成。

 

接下来我们要说一说另外一类标签<div></div>、<span></span>,这类标签看似没有什么实际的功能,但其容器性却在我们静态页面的构建过程中起着重中之中的作用,这样我们来抽象的举个例子!

 

我们把写一个网页比作搭建一栋房子

图三

(网页)

 

 图4

(房子-apple park)

 

搭建房子的时候尤其是这种高科技的房子我们需要做几步,首先需要搭建钢筋混凝土把房屋结构弄好,其次我们开始给房屋添加样式也就是装修,该贴瓷砖的就贴起来,再把铺毛毯铺上去等等,最后我们为房子加上一些智能的设备,让房屋和人有交互的感觉。

 

我们完成一个网页也需要这几步,首先用html的标签写出页面的基本结构,之后用我们后续要讲的css语法来给页面添加样式,最后让页面赋予灵动的与人交互的功能需要用javascript来完成。那这里你还会发现一天3门语言各有分工,那我们编程的工业化标准就是这几种语言再功能上不能互相越界。这也就是说<del></del>标签虽然能实现文本中间带横线的效果,但是我们不用它,因为这种效果是css语法负责的html做了css的事情,那就不好意思了,它越界了。

代码:

图5

效果展示:

图6

 

接下来回到重点那就是用html搭建页面结构,这里搭建结构的重要的标签就是div,span这种具有容器性能的标签,有了他们可以把整个页面格局分割的非常到位,其余的细节可以使用其他的标签作为辅助,可想而知div、span这两个标签的地位的重要性。

 

由于此知识点内容稍多,这里我把看家视频拿出来给大家看看,视频内部还有额外的吃指点如html编码等等,看的时候注意留心,视频是真实上课现场的视频,录制时有部分时间时课堂休息时间,请看的童鞋自动跳过此时间。

废话不多说上视频:

http://v.youku.com/v_show/id_XMTYzMDI2MDcxNg==.html

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值