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

以移动端为例,

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

<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元素插入

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

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

HTML5与HTML4的区别-----通用的排版结构的更多相关文章

  1. 面试中的一些小问题之html5和html4的区别?

    HTML5建立的一些新规则: 新特性应该基于HTML.CSS.DOM.JavaScript: 减少对外部插件的需求,如flash将会用video标签和audio标签代替: 更加优秀的错误处理: 更多取 ...

  2. Html5 与 Html4 的区别

    HTML5是HTML标准的下一个版本.虽然HTML5没有完全颠覆HTML4,但是它们也有一些不同.最新最全的HTML5-HTML4对比信息 请看http://dev.w3.org/html5/html ...

  3. WEB前端之HTML5~HTML5与HTML4的区别

    推出的理由及目标 WEB浏览器存在的问题包括以下三点 世界知名浏览器厂商对HTML5的支持 语法的改变 DOCTYPE的声明 XHTML的DOCTYPE声明方式 HTML4的DOCTYPE声明方式 H ...

  4. HTML5与HTML4的区别-----文档结构

    HTML5在结构和语法上做了大量的简化.当然,也提供了语义化的标签 结构上区别: 1.简化了文档声明语句     HTML5仅规定了一种:       <!DOCTYPE html> 2. ...

  5. 翻译:HTML5与HTML4的区别

    本文选译自:W3C Working Group Note: HTML5 Differences from HTML4. 解释一下W3C Working Group Note,作为"工作组笔记 ...

  6. HTML5系列:HTML5与HTML4的区别

    1. 语法的改变 1.1 DOCTYPE声明 DOCTYPE声明在HTML文件中必不可少,位于文件第一行. HTML4中声明方法: <!DOCTYPE html PUBLIC "-// ...

  7. html5与html4的区别,如何一眼区分

    还是在面试过程中遇到的这个问题,但是当时感觉回答的不是很全面,回来以后自己做的总结: 以上这个问题如果教大家看源码,可能一眼很直观的就能认出,那个是html4,那个是html5,但是面试的时候问道这个 ...

  8. HTML5与HTML4的区别-----新增的常用标签

    做前端工程师这么长时间了, 对HTML5的一些标签的用法还不是很熟悉.这篇随笔算是对学过的知识的梳理.常言道,温故而知新  ~哈哈.里面有不正确的地方还望各位大牛们指正,评论. 在做网页时习惯把网页分 ...

  9. HTML5 和HTML4的区别

    1.推出理由和目标 HTml5的出现,对于web来说意义是非常重大的,因为它的意图是想要把目前web 上存在的各种问题一并解决掉. (1)web之间的兼容性很低 (2)文档结构不明确 (3)web应用 ...

随机推荐

  1. vPlayer 模块Demo

    本文出自APICloud官方论坛 vPlayer iOS封装了AVPlayer视频播放功能(支持音频播放).iOS 平台上支持的视频文件格式有:WMV,AVI,MKV,RMVB,RM,XVID,MP4 ...

  2. 深夜话题boot2docker还有那些隐藏MENU

    马克思的博士论文:自由意识的集中表达 --字体我设为5(18pt),你们懂的 总有人埋汰,终于我想起一个负负得正的话题 为什么放在深夜,因为希望看到的人越少越好,深夜是时差党的乐园 本篇作为之前几篇围 ...

  3. 网络流 - 最大流构图入门 bzoj 1305

    一次舞会有n个男孩和n个女孩.每首曲子开始时,所有男孩和女孩恰好配成n对跳交谊舞.每个男孩都不会和同一个女孩跳两首(或更多)舞曲.有一些男孩女孩相互喜欢,而其他相互不喜欢(不会“单向喜欢”).每个男孩 ...

  4. ThreadLocal终极篇

    前言 在面试环节中,考察"ThreadLocal"也是面试官的家常便饭,所以对它理解透彻,是非常有必要的. 有些面试官会开门见山的提问: “知道ThreadLocal吗?” “讲讲 ...

  5. Python思维导图(二)—— 数据类型

    ============================================== =========可点击图片, 放大查看更清晰哦!========= ===========有任何错误请及 ...

  6. 关于爬虫的日常复习(10)—— 实战:使用selenium模拟浏览器爬取淘宝美食

  7. vue拦截器

    1.在路由添加 meta:{ requireAuth:true } 完整 { path: '/xx', name: 'xx', component: xx, meta:{ requireAuth:tr ...

  8. ORM批量添加

    # ########### Book是模型类 ############ 建一个空列表,盛放obj对象lst_obj=[]# 用for循环控制添加信息条数for i in range(100):# 创建 ...

  9. W3C 带来了一个新的语言

    2019年12月5日,W3C 宣布: WebAssembly 核心规范 正式成为 Web 官方标准. 继 HTML, CSS, JavaScript 之后,WebAssembly 成为了第4个 Web ...

  10. Qt Installer Framework翻译(5-3)

    推广更新 创建在线安装程序,以便能够向安装产品的用户推广更新. 为了推广更新,需要执行以下步骤: 将待更新内容复制到package文件夹. 在package.xml文件中增加待更新组件的元素的值. 使 ...