html5知识整理

Posted on | In

h5变化

  • 表单增强属性
    • 日期、时间、搜索
    • 表单验证 （required必填，minmax输入范围，正则）
    • placeholder 表单空的时候显示什么内容 自动聚焦
  • 新增语义
    • header/footer
    • section/article 区域 （块级）
    • nav 导航（快级）
    • aside（快级）
    • em/strong 强调
  • 新API
    • 离线 （applicationCache ）
    • 音视频 （audio, vidio）
    • 图形 （canvas）
    • 实时通信（websoket）
    • 本地存储（localStorage, indexDB）
    • 设备能力（地图定位，手机摇一摇）

Doctype 作用？标准模式与兼容模式各有什么区别?

<!DOCTYPE html>声明位于HTML文档中的第一行，不是一个HTML标签，它的作用：告知web浏览界面应该使用哪个html版本。

  • 标准模式：<!DOCTYPE html>

    h5及以后的版本，以该浏览器支持的最高标准运行

  • 兼容模式：
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    h5以前的版本，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
    需引用DTD（文档类型说明），因为html 4.0.1是基于SGML(Standard Generalized Markup Language，标准通用标记语言)。DTD指定了标记语言的规则，确保了浏览器能正确的渲染内容。

行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

定义：CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认的 display 值，如 div 的 display 默认值为“block”，则为“块级”元素；span 默认 display 属性值为“inline”，是“行内”元素。

  • 行内元素有：a b span img input select strong（强调的语气）
  • 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
  • 空元素：
    • 常见: br hr img input link meta
    • 不常见: area base col command embed keygen param source track wbr

不同浏览器（版本）、HTML4（5）、CSS2 等实际略有差异 参考: http://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements

哪些元素可以自闭合？

  • 表单元素 input
  • img
  • br, hr
  • meta, link

HTML和DOM的关系

  • HTML只是一个字符串
  • DOM由HTML解析而来
  • JS可以维护DOM

form 作用

  • 直接提交表单
  • 使用submit / reset按钮
  • 便于浏览器保存表单
  • 第三方库可以整体取值
  • 第三方库可以进行表单验证

简述一下你对 HTML 语义化的理解？

  • 用正确的标签做正确的事情。
  • html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
  • 即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;
  • 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO;
  • 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(layout engineer 或 Rendering Engine)和 JS 引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后渲染到用户的屏幕上。

JS 引擎则：解析和执行 javascript 来实现逻辑和控制 DOM 进行交互。

最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

html 中 title 属性和 alt 属性的区别？

<img src="#" alt="alt信息" />

当图片不输出信息的时候，会显示 alt 信息 鼠标放上去没有信息，当图片正常读取，不会出现 alt 信息。

<img src="#" alt="alt信息" title="title信息" />

  • 当图片不输出信息的时候，会显示 alt 信息 鼠标放上去会出现 title 信息；
  • 当图片正常输出的时候，不会出现 alt 信息，鼠标放上去会出现 title 信息。
  • 除了纯装饰图片外都必须设置有意义的值，搜索引擎会分析。

另外还有一些关于 title 属性的知识：

  • title 属性可以用在除了 base，basefont，head，html，meta，param，script 和 title 之外的所有标签。
  • title 属性的功能是提示。额外的说明信息和非本质的信息请使用 title 属性。title 属性值可以比 alt 属性值设置的更长。
  • title 属性有一个很好的用途，即为链接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的。

为什么我们要弃用table标签？

table的缺点在于服务器把代码加载到本地服务器的过程中，本来是加载一行执行一行，但是table标签是里面的东西全都下载完之后才会显示出来，那么如果图片很多的话就会导致网页一直加载不出来，除非所有的图片和内容都加载完。如果要等到所有的图片全都加载完之后才显示出来的话那也太慢了，所以table标签现在我们基本放弃使用了。

head子元素大概分为三类，分别是：

  • 描述网页基本信息的
  • 指向渲染网页需要其他文件链接的
  • 各大厂商根据自己需要定制的

网页基本信息

一个网页，首先得有个标题，就跟人有名字一样。除此之外，还可以根据实际需要补充一些基本信息。

  • 文档标题（浏览器标签中显示的文本）：<title>深入了解 head 元素</title>
  • 编码格式： 如果你的页面出现乱码，那一般就是编码格式不对
  • 视窗设置：
  • 搜索引擎优化相关内容：
  • IE浏览器版本渲染设置：

其他文件链接

  • CSS 文件：
  • JavaScript 文件：<script src=“script.js"></script>

但是为了让页面的样子更早的让用户看到，一般把JS文件放到body的底部

厂商定制

同样分享页面到QQ的聊天窗口，有些页面直接就是一个链接，但是有些页面有标题，图片，还有文字介绍。为什么区别这么明显呢？其实就是看有没有设置下面这三个内容

<meta itemprop="name" content="这是分享的标题"/>
<meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png" />
<meta name="description" itemprop="description" content="这是要分享的内容" />

移动端项目需要注意的4个问题

meta中设置viewport

阻止用户手滑放大或缩小页面，需要在 index.html中添加meta元素,设置viewport。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

CSS样式统一问题

我们需要重置页面样式，因为在不同的手机浏览器上，默认的css样式不是统一的。 解决方法：使用reset.css重置所有元素的默认样式

一像素边框问题

有的手机分辨率比较高，是2倍屏或3倍屏，手机上的浏览器就会把CSS中的1像素值展示为2个或3个物理宽度

解决方法： 添加一个border.css库，将利用scroll缩放的原理将边框重置。当我们需要使用一像素边框时只需要在标签上添加对应类名，如设置底部一像素边框就在标签上加入”border-bottom”的class名

300毫秒点击延迟问题

在移动端开发中，某些机型上使用click事件会延迟300ms才执行，这样影响了用户体验。 解决方法： 引入fastclick.js。

嵌套

  • 块级一般不能嵌套块级（但div可以嵌套p）
  • a可以包含div

html问题

  • doctype的意义是什么
    • 让浏览器以标准模式渲染
    • 让浏览器知道元素的合法性
  • html xhtml h5的关系
    • html属于sgml
    • xhtml属于xml，是html进行xml严格化的结果
    • h5是一个独立的规范，比hxtml宽松
  • H5有什么变化
    • 新的语义化元素section article header footer aside
    • 表单增强
    • 新的API
  • em和i有什么区别
    • 都是斜体，em是语义化标签，i是纯样式
  • 语义化的意义
    • 维护的开发者容易理解
    • 机器容易理解结构
    • 有助于seo
  • 哪些标签可以自闭和（不能嵌套其他标签）
    • input
    • img
    • br（换行） hr（水平线）
    • meta link