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. 关于c#连接数据库的代码

    using System;using System.Collections.Generic;using System.Data;using System.Data.SQLite;using Syste ...

  2. python 三

    通过程序打印中文,二进制 name="张三" for i in name: print(i) bytes_list=bytes(i,encoding='utf-8') print( ...

  3. C#Mvc地址栏传值

    A页面 location.href = "/Home/Bpage?names=" +names; B页面 var loc = location.href;var n1 = loc. ...

  4. Full permutation

    Full Permutation 全排列问题, 将1~n这n个整数按字典序排放 划分: 输出1开头的全排列 输出2开头的全排列 ...... 输出n开头的全排列 递归边界:当下标1 ~ n 位都已经填 ...

  5. python 安装scrapy need vistual c++ 14.0 的正面解法

    为什么一堆教程里面,都是侧面的. 因为需要你自己去正面刚 正题: 这个问题要的是 build tools 人(控制台)说的很清楚了, 给的链接不是直接解决问题的链接(我安装了 vs_redis.exe ...

  6. C#磁性窗体设计

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  7. python爬虫出现的状态码

    1.200 --- 一切正常访问 2.301 --- 重定向新的url,永久性的 3.302 --- 重定向到临时url 4.304 --- 请求的资源未更新 5.400 --- 非法请求 6.401 ...

  8. 自动化测试-18.selenium之bugFree代码注释

    #encoding=utf-8 import xlrd,time,os from xlutils.copy import copy from selenium import webdriver def ...

  9. Windows 应用商店无法下载---启动更新

    今天想在应用商店下载东西,但是以直没成功,查看原因结果是因为我的Windows自动更新关了. 百度,如何打开自动更新,要打开本地组策略编辑器,但是我是Windows家庭版,,,没有这个东西,, 最后, ...

  10. mount: mounting proc on /proc failed: Device or resource busy

    /********************************************************************** * mount: mounting proc on /p ...