图片等比缩放方案
图片等比例缩放方案在Web开发时无可避免的需要将图片进行缩放，缩放时需要保证图片不变形，也就是需要等比例缩放。
设定宽度或高度引入图片时，仅设置图片的width或者是height就可以使另一边自适应，从而实现等比例缩放。
123456789101112<section> <img id="t1" src="http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg"> <img id="t2 ...
实现消息提示组件
实现消息提示组件在浏览器页面中，通用的消息提示组件一般可以分为静态局部提示和动态全局提示，用于反馈用户需要关注的信息，使用频率较高。
实现实现消息提示组件，动态全局提示，主要使用原生JavaScript实现，实现的代码基本都作了注释。
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293<! ...
瀑布流布局
实现瀑布流布局瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式。
实例主体思路是记录每一列的高度，父容器相对定位，成员绝对定位，利用top与left属性控制位置，每次新增加成员时找到高度最低的那个将成员置于其下方，即可实现瀑布流布局。如果不需要动态加入成员，而只是一次性加载供展示用，那么可以考虑使用flex布局将容器设置为flex-direction: column;以及flex-wrap: wrap;并给 ...
Attribute与Property区别
Attribute和Property的区别attribute是XML元素中的概念，用于描述XML标签的附加信息，即XML标签的属性，property是JavaScript对象中的概念，用于描述JavaScript对象的成员，即JavaScript对象的属性。
描述在描述HTML时需要为其设定一些属性值的键值对用以描述标签：
1<input id="this-input" type="text" value="test" />
上述标签节点就定义了3个attribute：
123id: this-inputtype: te ...
HTML语义化
HTML语义化语义化可以总结为 根据内容选择标签，用最恰当的标签来标记内容。例如网页中的标题使用<h1>~<h6>这样的标签，而不是使用<div>+css。
语义化好处
使HTML结构变得清晰，有利于维护代码和添加样式。
通常语义化HTML会使代码变的更少，使页面加载更快。
即使在没有CSS样式的条件下，也能很好地呈现出内容结构、代码结构。
便于团队开发和维护，语义化更具可读性，遵循W3C标准，可以减少差异化。
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页。
提升搜索引擎优化(SEO)的效果。和搜索引擎建立良好沟 ...
实现三栏布局
实现三栏布局三栏布局在开发十分常见，即两边固定宽度，中间自适应宽度的布局。
Flex使用CSS3的flex布局实现三栏布局，Flex布局也称弹性布局，可以为盒状模型提供最大的灵活性，是布局的首选方案，现已得到所有现代浏览器的支持，此处主要是利用flex容器成员默认按照主轴排列，以及利用flex属性即flex-grow，flex-shrink和flex-basis的简写形式将间的块自适应撑起。
1234567891011121314151617181920212223242526272829303132333435<!DOCTYPE html><html><head ...
DOM与BOM的区别
DOM和BOM的区别在浏览器中运行的JavaScript可以认为由三部分组成：ECMAScript描述了该语言的语法和基本对象，DOM文档对象模型描述了处理网页内容的方法和接口，BOM浏览器对象模型描述了与浏览器进行交互的方法和接口。
DOM
DOM是Document Object Model的缩写，即文档对象模型。
DOM是W3C的标准。
DOM最根本对象是document，即window.document。
DOM全称是Document Object Model即文档对象模型，是针对XML的基于树的API，描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成 ...
HTML节点操作
HTML节点操作HTML节点的基本操作，添加节点，替换节点，删除节点，绑定事件，访问子节点，访问父节点，访问兄弟节点。文档对象模型Document Object Model，简称DOM，是W3C组织推荐的处理可扩展标记语言XML的标准编程接口，是一种与平台和语言无关的应用程序接口API。根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点：整个文档是一个文档节点，每个HTML元素是元素节点，HTML元素内的文本是文本节点，每个HTML属性是属性节点，注释是注释节点。HTML DOM将HTML文档视作树结构。这种结构被称为节点树：HTML DOM Tree实例。
添加节点123 ...
HTML5新特性
HTML5新特性HTML5是下一代HTML标准，是HTML最新的修订版本，2014年10月由万维网联盟W3C完成标准制定，HTML5将HTML从用于构造一个文档的一个简单标记，到一个完整的应用程序开发平台，HTML5还包括新元素和用于增强存储、多媒体和硬件访问的JavaScript APIs。
新增语义化标签
<header>: 页眉通常包括网站标志、主导航、全站链接以及搜索框。
<footer>: 定义文档的底部区域，通常包含文档的作者，著作权信息，联系信息等。
<nav>: 提供当前文档内或其他文档的导航链接，导航部分的常见示例是菜单，目录和索引。
&l ...
行内元素和块级元素
行内元素和块级元素HTML可以将元素种类分为行内元素、块级元素和行内块级元素三种，在使用过程中可以通过CSS的display属性相互转换。
行内元素行内元素对应的CSS样式设置为display: inline;。
特点
元素排在一行。
封闭后不会自动换行。
不能指定高度与宽度。
可以使用line-height来指定高度。
外边距对于水平方向有效，垂直方向无效。
内边距对于水平方向正常有效，垂直方向只有效果，对其他元素无任何影响。
示例1234567891011121314<span>行内元素1</span> <!-- 排列在一行 --><span&g ...