一、HTML

1.HTML5有哪些新特性？新增的标签有哪些？

　　新特性：

  1. 语义标签——语义化标签使得页面的内容结构化，见名知义
  2. 增强型表单——拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证（包括取色器控件、日期时间控件等）
  3. 视频和音频——HTML5 提供了播放音频文件的标准，即使用 <audio> 、<video>元素
  4. Canvas绘图——标签只是图形容器，必须使用脚本来绘制图形
  5. SVG绘图——SVG是指可伸缩的矢量图形
  6. 地理定位——HTML5 Geolocation（地理定位）用于定位用户的位置
  7. 拖放API——拖放是一种常见的特性，即抓取对象以后拖到另一个位置
  8. Web Worker——web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行
  9. Web Storage——对本地离线存储有更好的支持， 提供了两种在客户端存储数据的新方法：localStorage - 没有时间限制的数据存储；sessionStorage - 针对一个 session 的数据存储
  10. WebSocket——是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议，实现了更有效的服务器推送技术。

　　新增标签：

  1. 多媒体：<audio>、<video>、<source>为媒介元素定义媒介资源、<embed>、<track>外部文本轨道[有字幕的视频]
  2. 新表单元素：<datalist>、<output>、<keygen>、<color>、<date>、<datetime>、<email>......
  3. 新文档节段和纲要：<header>页面头部、<section>章节、<aside>侧边栏、<article>文档内容、<footer>页面底部

2.HTML5语义化的好处？

  1. 易于用户阅读，提高了用户体验，比如：title、alt用于解释名词和图片信息，样式丢失的时候能让页面呈现清晰的结构。
  2. 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重，和搜索引擎简历良好的关系，有利于爬虫抓取更多的有效信息（爬虫依赖于标签来确定上下文和各个关键字的权重）
  3. 方便其他设备解析，如屏幕阅读器、盲人阅读器、移动设备，根据语义渲染网页
  4. 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐，如果遵循W3C标准的团队都遵循这个标准，可以减少差异化，有利于规范

3.浏览器标准模式和怪异模式？

　　在标准模式页面按照HTML,CSS的定义渲染，而在怪异模式就是浏览器为了兼容很早之前针对旧版本浏览器设计，并未严格遵循W3C标准而产生的一种页面渲染模式。浏览器基于页面中文件类型描述的存在以决定采用哪种渲染模式，如果存在一个完整的DOCTYPE则浏览器将会采用标准模式，如果缺失就会采用怪异模式。以下是几点区别：

  • 盒模型：

　　在怪异模式下，盒模型为IE盒模型　　　　　　　　　　　　　　　　　　　　　　　　　　而在W3C标准的盒模型中为

　　             　　　　　       

  • 图片元素的垂直对齐方式：

对于inline元素和table-cell元素，标准模式下vertical-align属性默认取值为baseline，在怪异模式下，table单元格中的图片的vertical-align属性默认取值为bottom，因此在图片底部会有及像素的空间。

  • <table>元素中的字体：

　　CSS中，对于font的属性都是可以继承的，怪异模式下，对于table元素，字体的某些元素将不会从body等其他封装元素中继承得到，特别是font-size属性。

  • 内联元素的尺寸：

　　标准模式下，non-replaced inline元素无法自定义大小，怪异模式下，定义这些元素的width，height属性可以影响这些元素显示的尺寸。

  • 元素的百分比高度：

　　a：CSS中对于元素的百分比高度规定如下：百分比为元素包含块的高度，不可为负值，如果包含块的高度没有显示给出，该值等同于auto，所以百分比的高度必须在父元素有高度声明的情况下使用。

　　b：当一个元素使用百分比高度时，标准模式下，高度取决于内容变化，怪异模式下，百分比高度被正确应用。

  • 元素溢出的处理：

　　标准模式下，overflow取默认值visible，在怪异模式下，该溢出会被当做扩展box来对待，即元素的大小由其内容决定，溢出不会裁减，元素框自动调整，包含溢出内容。

4.CSS\JS引入的位置一般在哪里？为什么？

　　要解释放置位置就要依据网站加载的整个完整过程：

  1. 首先浏览器从服务器接收到html代码，然后开始解析html
  2. 构建DOM树（根据html代码自顶向下进行构建），并且在同时构建渲染树
  3. 遇到js文件加载执行，将阻塞DOM树的构建；遇到css文件，将阻塞渲染树的构建
  • script标签中的defer属性：构建DOM树的过程和js文件的加载异步（并行）进行，但是js文件执行需要在DOM树构建完成之后
  • script标签中的async属性：构建DOM树、渲染树的过程和js文件的加载和执行异步（并行）进行

综上所述，script标签最好放在</body>标签的前面，因为放在所有body中的标签后面就不会出现网页加载时出现空白的情况，可以持续的给用户提供视觉反馈，同时在有些情况下，会降低错误的发生。而css标签应该放在<head></head>标签之间，因为如果放在</body>标签的前面，那么当DOM树构建完成了，渲染树才构建，那么当渲染树构建完成，浏览器不得不再重新渲染整个页面，这样造成了资源的浪费。效率也不高。如果放在<head></head>之间，浏览器边构建边渲染，效率要高的多。

　　下面是BS标准模板：

<!DOCTYPE html>

<html>

  <head>

     <!--网页页面字符集-->

    <meta charset="utf-8">

    <!--让IE使用最新的渲染模式-->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!--针对移动设备,网站显示宽度等于设备屏幕显示宽度,内容缩放比例为1:1-->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--将下面的 <meta> 标签加入到页面中，可以让部分国产浏览器默认采用高速模式渲染页面：-->

    <meta name="renderer" content="webkit">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap Basic Template</title>

    <!-- Bootstrap -->

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!--下面这一大块的注释是说:"为了让IE9以下的浏览器支持响应式和HTML5标签.需要引入下面两个JS文件"-->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

    <!-- 英:jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <!--中:必须在JS文件引入之前引入JQ文件,这里src引用的是本地.线上建议使用CDN引用)

    <script src="js/jquery-2.1.3.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

  </body>

</html> 　　 

5.link和@inport引入CSS的区别？

  • 适用范围不同

    • @import可以在网页页面中使用，也可以在css文件中使用，用来将多个CSS文件引入到一个CSS文件中
    • link只能将CSS文件引入到网页页面中
  • 功能范围不同
    • @import是CSS提供的一种方式，只能用于加载CSS
    • link属于XHTML标签，除了可以加载CSS外，还可以定义RSS，定义rel连接属性等
  • 加载顺序不同
    • 当一个页面被加载的时候，@import引用的CSS会等到页面全部被下载完再被加载，所以有时候在浏览@import加载CSS的页面时开始会没有样式（闪烁），这种情况在网速慢的时候比较明显。
    • Link引用的CSS会同时被加载
  • 兼容性的差别
    • @import是有CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上才能识别
    • link标签没有这个问题
  • 控制样式的差别
    • 使用link方式可以让用户切换CSS样式

随机推荐

  1. dp（多重背包）

    有 NN 种物品和一个容量是 VV 的背包. 第 ii 种物品最多有 sisi 件,每件体积是 vivi ,价值是 wiwi . 求解将哪些物品装入背包,可使物品体积总和不超过背包容量,且价值总和最大 ...

  2. HDU 2063 过山车（二分图 && 匈牙利 && 最小点覆盖）

    嗯... 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2063 这是一道很经典的匈牙利问题: 把男同学看成左边点,女同学看成右边点,如果两个同学愿意同 ...

  3. UIDocumentPickerViewController和UIDocumentInteractionController

    UIDocumentPickerViewController和UIDocumentInteractionController UIDocumentPickerViewController 补充一下,U ...

  4. 《Web安全攻防 渗透测试实战指南》 学习笔记 （四）

    Web安全攻防 渗透测试实战指南   学习笔记 (四) Nmap                                       Network  Mapper    是一款开放源代码的网 ...

  5. 【代码学习】PYTHON 面向对象

    一.方法重新 #!/usr/bin/python # -*- coding: UTF-8 -*- class Parent: # 定义父类 def myMethod(self): print '调用父 ...

  6. 【转】弹出USB大容量存储设备时出问题的解决方法

    原文链接 如下图所示,这个问题,相信很多人都有遇到过,而且经常难以解决,试了很多方法都无效.到最后,只能抱着侥幸的心理直接拔出,如果运气好,可能没有事,如果运气不好,你的U盘或者移动硬盘就要从此报废了 ...

  7. (转)Oracle数据库备份与恢复总结

    http://blog.csdn.net/xyz846/article/details/6437963 http://blog.csdn.net/hollboy/article/details/867 ...

  8. PS进程及杀掉进程！

    1.程序和进程的关系(1)程序 保存在硬盘.光盘等介质中的可执行代码和数据 静态保存的代码 (2)进程 在 CPU 及内存中运行的程序代码 动态执行的代码 父.子进程:每一个进程可以创建一个或多个进程 ...

  9. 一个简单insert 语句执行 40ms 原因剖析

    背景:一个简单的带有主键的insert 语句,居然要 40ms ,开发受不了,要求降低 因此我们要关注的的 数据从插入落地的IO 中间都干了什么 一.MySQL的文件 首先简单介绍一下MySQL的数据 ...

  10. CSS三列自适应布局（两边宽度固定，中间自适应）

    https://blog.csdn.net/cinderella_hou/article/details/52156333 https://blog.csdn.net/wangchengiii/art ...