HTML5与HTML4的区别-----通用的排版结构

一个网页通常分为:头部,主体内容和脚部三个部分,当然也有其他更细的划分方法。

以移动端为例,

当给一个设计图,我通常使用一下结构;

<div  class="container">

  <header class="header">

    <img src="./logo.png" />

    <a href="#">返回首页</a>

    <span class="menu_btn">分类菜单</span>

  </header>

  <section class="mainbody"></section>

  <footer class="footer">

    <a href="#">提意见<br><small>手机网易</small></a>

    <span class="menu_btn">分类菜单</span>

  </footer>

</div>

对于header section footer等新增的元素,在低版本浏览器IE8及以下不识别,会转成 div元素。不考虑到兼容可以不加类名。

在编写html时,结构越简单越好。

样式相同的地方,提取出相同的类名。

img元素,当在网页中具有实际意思的使用img,而不是背景图片。 网站的logo具有实际意义,使用img元素插入

使用背景图?在网页中没有实际意义,只起到样式或者修饰作用。例如 按钮的背景

 

在移动端常用到布局:  弹性盒布局  和 响应式布局

 

转载于:https://www.cnblogs.com/baota/p/8502558.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值