Q:浏览器页面有哪三层构成,分别是什么,作用是什么?

A:由三部分构成:

  • 网页结构层(Structural Layer)——由(X)HTML等标记语言负责创建,实现页面结构。
  • 网页表示层(Presentation Layer)——由CSS完成页面的风格。
  • 网页行为层(Behavior Layer)——有javascript实现一些客户端的功能与业务。

Q:HTML5的优点与缺点:

A:

  • 优点:
  1. HTML5由W3C推荐推荐,网络标准统一;
  2. 多设备,跨平台;
  3. 自适应网页设计;
  4. 即使更新;
  5. 提高可用性和改进用户友好体验;
  6. 新的标签有助于开发人员定义重要内容;
  7. 给站点带来例如音频和视频等更多多媒体元素;
  8. 可以很好代替flash和Sliverlight;
  9. 涉及网站的抓取和索引的时候,对于搜索引擎优化(SEO)很友好;
  10. 被大量应用于移动应用程序和游戏。
  • 缺点:
  1. 安全性:webstorage、web socket这样的功能用以被黑客攻击;
  2. 完善性:各大浏览器支持程度不一;
  3. 技术门槛:HTML5有很多新的属性和API需要开发者去学习;
  4. 性能:某些平台的引擎问题导致HTML5性能低下;
  5. 浏览器兼容性:不支持IE9以下浏览器。

Q:doctype的作用,严格模式与混杂模式如何区别?各有什么意义?

A:doctype声明指出阅读程序应该用什么规则集来解释文档中的标记,即告诉浏览器以何种标准解析页面。在web文档的情况下,“阅读程序”的通常是浏览器或者校验器,“规则”是W3C所发布的一个文档类型定义(DTD)中包含的规则。

  1. doctype声明位于文档的最前面,处于标签之前。此标签可告知浏览器使用哪种HTML或者XHTML规范。该标签可声明三种DTD类型:严格版本、过渡版本和基于框架的HTML文档。

    严格模式  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    过渡模式 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    框架模式 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"
  2. 严格模式是浏览器根据web标准去解析页面,是一种要求严格的DTD,不允许使用任何表现层语法。严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。混杂模式则是一种向后兼容的解析方法。
  3. 标准模式是指浏览器按照W3C标准解析执行代码;
    ① 如果XHTML文档包含完整的DOCTYPE,那么它一般以标准模式呈现;
    ② 包含严格dtd的doctype和包含过渡dtd和URI的doctype常常导致页面以标准模式呈现

    怪异模式则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式。

    ① 不存在doctype或形式不正确会导致怪异模式;
    ② 有过渡/框架dtd没有URI会导致页面以怪异模式呈现;
    ③ IE中,如果doctype声明在xml之后,会导致怪异模式。
  4. 标准模式和怪异模式的区别
    ) 盒模型: IE下标准模式为标准w3c盒模型【content+padding+border+margin】,怪异模式为IE盒模型【content+margin:padding与border包含在content宽高中】
    2) 行内元素的垂直对齐:基于 Gecko 的浏览器【Mozilla Firefox、HotBrowser、Mozilla Suite、Camino】标准模式对齐至基线,怪异模式对齐至底部
    3) 怪异模式中,IE6/7/8都不认识!important声明
    4) 设置行内元素的高宽: 在Standards模式下,给等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效。
    5) 使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下却会失效。
  5. 总之,浏览器解析时到底使用标准模式还是怪异模式,与网页中的DTD声明直接相关,DTD声明定义了标准文档的类型,会使浏览器使用响应的方式加载网页并显示,忽略DTD声明将使网页进入怪异模式。

HTML/CSS基础知识(一)的更多相关文章

  1. 前端开发:css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  2. CSS基础知识之float

    前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...

  3. (转)第一天 XHTML CSS基础知识 文章出处:标准之路(http://www.aa25.cn/div_css/902.shtml)

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...

  4. CSS基础知识之position

    最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...

  5. 【CSS】 CSS基础知识 属性和选择

    css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...

  6. CSS基础知识01

    一.CSS基础知识介绍 1.css是cascading style sheet层叠式样式表的简写 2.css小用法 加粗:font-weight:bold;             正常用:norma ...

  7. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

  8. Web学习篇之---css基础知识(一)

    css基础知识(一) 1.css样式: 载入css样式有下面四种: 1).外部样式 2).内部样式 3).行内样式 4).导入样式 <link href="layout.css&quo ...

  9. DIV+CSS专题:第一天 XHTML CSS基础知识

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准.   学习本系列教程需有一定html和css基础 ...

  10. HTML+CSS基础知识(2)选择器的使用、盒子模型的讲解、列表的使用

    文章目录 1.CSS基础知识 2.css样式 2.1.代码: 2.2 测试结果 3.CSS的语法 3.1 代码 4.块元素和行内元素 4.1 代码 4.2 测试结果 5.常用的选择器 5.1 代码块 ...

随机推荐

  1. zabbix3.4.7使用过程中常见错误

    ================================================================================================ 1.Z ...

  2. private、public、protected和默认

    类中的域最好标记为private: 方法最好标记为public: private:仅对本类可见 public:对所有类可见 protected:对本包和对所有子类可见 默认(什么都不写):对本包可见 ...

  3. ubuntu1604使用之旅——启动ssh系列

    ---恢复内容开始--- 1.安装ssh的client和server: sudo apt-get install openssh-server openssh-client 2.然后就要安装key: ...

  4. Redis在Linux系统下的安装和启动

    详情可参见:https://blog.csdn.net/q1035331653/article/details/79077260 开机自启脚本参见:https://www.cnblogs.com/si ...

  5. A Network-based End-to-End Trainable Task-oriented Dialogue System

    abstract 让机器去和人类自然的交谈是具有挑战性的.最近的任务型对话系统需要创造几个部分并且通常这需要大量的人工干预,或者需要标注数据去解决各部分训练的问题.在这里我们提出了一种端到端的任务型对 ...

  6. 最短路,dijstra算法

    #include<iostream> #include<stdio.h> #include<math.h> #include<vector> using ...

  7. 使用POI读取xlsx文件,包含对excel中自定义时间格式的处理

    package poi; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundExcepti ...

  8. 印象笔记无法连服务器(internet explore的问题)

    https://www.zhihu.com/question/20214497?sort=created

  9. Python全栈之路----进制运算

    1.进制拾遗 二进制:01 八进制:01234567 十进制:0123456789 十六进制:0123456789ABCDEF  (a是10,b是11,c是12,d是13,e是14,f是15) 2.进 ...

  10. java_lambda表达式

    lambda表达式1    由来    概念        是通过策略模式来曲线实现的    lambda表达式2    语法详解    lambda表达式3    目标类型的概念    目标类型推断 ...