零基础html+css网页设计之页面布局类36个常用标签

HTML网页设计常用的标签经过总结其实不会超过20个,其实大部分的标签我们几乎很少用或者根本不会用到,现在HTML5标签简化了之前的代码写法,所以更加便捷,本文所列出的标签均支持主流的浏览器和IE9(包含ie9)以上的IE浏览器。因为HTML5已经是必然的选择,而IE8及以下的IE浏览器已在淘汰中,所以我们不再兼容IE8及以下的IE版本,这些标签均是常用的对所有主流浏览器均支持的常用标签,有必要熟悉并记住他们都用在什么地方,什么情况下使用。

一、常用的内容布局标签。

有如下15个,这些标签我做了相应的简单说明,前面8个是经常用的,后面的几乎很少用到,了解即可。

需要特别说明的是如

标签后面的一个/“斜杠”结束,有没有斜杠效果都是一样的,区别是有斜杠的写法才是规范的,符合w3c标准的写法,没有斜杆则属于不规范的写法。特别注意上面7和8的加粗与斜体标签均有2个标签输出的效果都一样,但是我们推荐使用具有表示强调的一个,上面有说明。

二、引用文件类标签有如下2个,这是常用的2个标签。

:常用于引用外部js文件

:用于引用外部或单独的css文件

三、页面区块布局类标签5个

常用div、ul这2个标签来实现布局,div通常用于各种区块布局,支持多层嵌套。

1.

:区块布局

2.

:有序排列。默认纵向显示,可用css控制其横线显示,需和

标签一起使用

3.:无序排列,类似ul标签,需和

标签一起使用。

4.:列表标签。需和与标签配合使用

5.:表格。通常用于布局,但目前流行div+css布局,一般都不使用table来布局了

四、导航及按钮类标签11个,说不常用,但是也会总用,所以了解就可以。

五、使用较广泛的标签2个

:布局,可用于任何需要的地方。

:HTML注释。对某段代码或某行代码写注释,如

关于标签详解:

1)、在DIV+CSS切图布局重构技术中,除了常常使用div标签外也常常使用span标签布局

2)、span本身没有什么特别之处,通常然后布局都可以使用此标签布局。

3)、他们也可以通过对span标签对象设置不同样式实现我们要的美化效果。

4)、特性,通常一对未设置任何样式的span,高宽是自适应内容,多容多少,此标签就占用多少距离空间。

span在html中常用的布局标签,与div标签区别在于,span随内容而占用高宽空间(紧贴内容),而一对div标签却占用一行。

六、CSS常用单位4个,重点记住rem和px这2个单位即可。

1、rem:相对长度单位。相对于根元素(即html元素)font-size计算值的倍数;流行的使用广泛的HTML5单位

2、em:相对长度单位。相对于当前对象内文本的字体尺寸。几乎不用

3、px:相对长度单位。像素(Pixels)。正在被淘汰的常用单位

4、pt:点(Points)。绝对长度单位。几乎不用

在HTML5以前,常用px来设置字体或容器(如div)的大小,现在也还有很多网站依然使用px(像素)作为单位。由于px的一些弊端,目前已逐渐弃用这一单位而改用rem。自适应网页、APP及手机网站几乎都使用rem作为单位,而现在的PC端网页设计,尤其是HTML5+css3的结合,rem更是成为主流。所以只要记住我们使用rem作为单位,偶尔需要的时候会用一下px来辅助,其他的几乎不用,不必去管。

其实我们设计网页的时候几乎都是div+css布局,在加上span、p、ul、a及img,配合少量的其他标签,一个网页就搞定了,一点都不复杂,超级简单,搞定上面的标签随便也能写个漂亮的网页来。

上面总计40个标签,除去几个没用的剩余36个,而这36个中,我上面都做了重点说明需要记住的总计就是15个!够少了吧,其实网页设计超级简单,主要是要弄清原理,搞清楚这点,其他都是依样画葫芦了,一通百通。现在看不懂没关系,先把我们后面需要用到的标签列出来,后面我们在使用中你会心领神会的~我不建议一个标签一个标签去学习,那样难以入门,最好的办法就是先全部走一遍,接下来直接写网页,在实战中学懂他们真正的含义,当您完成一两个网页的设计你也许比我做的还要好!

后面的教程部分采用录制视频的方式,因为录制的视频上传以后清晰度大大降低,所以尽量写图文,也尽量把源码贴出来。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181229A02QBX00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券