知识梳理——HTML篇

浏览器内核：

• IE: trident
• Fixfox: gecko
• Safari: webkit
• Opera: 以前是presto,现已改用Google Chrome的Blink
• Chrome: Blink(基于Webkit)

DOCTYPE:

　　<!DOCTYPE>文档类型声明，位于文档中的最前面位置，处于<thml>标签之前。

　　作用：告诉浏览器按照何种规范解析页面

浏览器模式：（标准模式 or 混杂模式）

　　标准模式：根据W3c规范呈现页面

　　混杂模式：以一种比较宽松的向下兼容的方式呈现页面

　　两者区别：

盒模型的解析

　　　　　　　　标准模式下，盒模型的内容宽度和高度不包括padding和border值，而混杂模式下包括padding和border值。

　　　　　　　　　可用box-sizing进行计算。

　　　　　　2.给行内元素设置宽高

　　　　　　　　标准模式下，给<span>等行内元素设置width和height都不会生效，而在混杂模式中会生效。

　　　　　3.设置百分比高度

　　　　　　　　标准模式下，一个元素的高度由其内容的大小来决定，如果没有给父元素设置height值,子元素设置百分比的height是无效的，而在混杂模式下生效。

 

　　（ps:这些是我在编写项目中遇到的一些区别，应该还有很多）

渐进增强、优雅降级：

　　渐进增强：一开始只构建站点的最少特性，然后不断针对浏览器追加功能。

　　优雅降级：一开始就构建站点的完整功能，然后针对浏览器测试和修复。

　　微妙差别：都关注于同一网站在不同浏览器下的表现程度。区别在于它们的关注点不同，以及这种关注如何影响工作的流程。

语义化：

　　使用含有语义的标签，起到强调作用，很明显的告诉你它们的作用是什么。

　　好处：　

　　　　去掉样式后页面呈现清晰的结构

　　　　盲人使用读屏器更好的阅读

　　　　搜索引擎更好的理解页面

　　　　便于团队项目的可持续运作及维护

块元素、行内元素：

　　块元素：div p h1~h6 ul li address form table section article aside nav header hgroup footer

　　行内元素：span th tr td a label textarea input select img  button time,其中，textarea input select img button time又叫内联块级元素。

　　区别：块级元素会独占一行，默认情况下，其宽度会自动填满父元素的宽度，行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随内容而变化,内联块级元素可以使用css为其设置宽高，但不会独占一行。

HTML5:

　　html5主要是关于图像、位置、存诸等功能的增加。

　　语义化更好的内容标签：header nav footer aside article section

　　音频、视频：audio video

　　画布：canvas

　　拖放

　　本地存诸：localStorage(永久存诸，浏览器关闭后数据不丢失，需手动删除)

　　　　　　　sessionStorage(临时存诸，浏览器关闭后自动删除)

　　离线应用

　　新增表单类型：email url number range date search

　　移除元素：

　　　　纯表现的元素：basefont big center font u...

　　　　不再使用frame框架

转载于:https://www.cnblogs.com/pwei/p/html-carding.html

总结

以上是生活随笔为你收集整理的知识梳理——HTML篇的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。