html一些难记知识点-5

HTML5 中可以使用 data-* 自定义属性，使用 data-* 属性来嵌入自定义数据：
<ul>
<li data-animal-type="鸟类">喜鹊</li>
<li data-animal-type="鱼类">金枪鱼</li> 
<li data-animal-type="蜘蛛">蝇虎</li> 
</ul>

HTML标签对大小写不敏感，为了规范，推荐小写

article 元素：文本或嵌入内容，开始和结束标记都是必需的，可以用来提供作者信息，contenteditable 属性可以与 article 元素一起使用（<article> 标签定义外部的内容，contenteditable 属性规定是否可编辑元素的内容）

公众号未授权进行定位时，H5页面的定位将要手动选择。（手机定位未打开，H5和微信公众号没有权限，手动选择也不行）。H5页面需要测试页面是否能被浏览器正常打开。H5页面在第一次打开时，需要测试公众号授权。

input 元素的range属性将元素的值设置为表示一定范围内的数字

iframe是用来在网页中插入第三方页面，早期的页面使用iframe主要是用于导航栏这种很多页面都相同的部分，这样在切换页面的时候避免重复下载。

iframe的创建比一般的DOM元素慢了1-2个数量级。

iframe标签会阻塞页面的的加载。

<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。

embed用来定义嵌入的内容。

jQuery方法中

.fadeIn()  使用淡入效果显示元素

.fadeOut()  淡入效果隐藏元素

.fadeToggle()  淡入效果显示 / 隐藏元素来回切换

.fadeTo()  元素的透明度逐渐变化到制定的值

CSS的 content CSS 属性用于在元素的  ::before 和 ::after 伪元素中插入内容。使用content 属性插入的内容都是匿名的可替换元素。不是新增的标签

iframe的使用场景：

1：典型系统结构，左侧是功能树，右侧就是一些常见的table或者表单之类的。为了每一个功能，单独分离出来，采用iframe。
2：ajax上传文件。
3：加载别的网站内容，例如google广告，网站流量分析。

4： 在上传图片时，不用flash实现无刷新。

5： 跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源。

 播放音频或者视频，通过视频或者音频的链接就可以播放，不需要通过别的插件播放 

音频或者视频不属于属性或者事件。属性是放在标签里面的。只有指定的视频或者音频格式才可以。

 canvas 与 SVG 之间的一些不同之处。

Canvas

• 依赖分辨率
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以 .png 或 .jpg 格式保存结果图像
• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

• Canvas 是逐像素进行渲染的。

  在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

SVG

• 不依赖分辨率
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序（比如谷歌地图）
• 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
• 不适合游戏应用

Canvas绘制的形状都能被记忆和操作。SVG为了之后的操作，需要记录坐标，所以比较缓慢。Canvas不能使用绘制对象的相关事件处理，因为我们没有他们的参考。

响应式布局：

1，flex

2.可以使用bootsrap框架

3，可以利用media query媒体查询功能

后台提供，前台渲染，利于SEO优化

在 HTML5 中，您能够直接将 SVG 元素嵌入 HTML 页面中

CSS 百分比参照问题

• 参照父元素宽度的元素：padding margin width text-indent

• 参照父元素高度的元素：height

• 参照父元素属性:font-size line-height

• 特殊：相对定位的时候，top(bottom) left(right)参照的是父元素的内容区域的高度与宽度，而绝对定位的时候参照的是最近的定位元素包含padding的高度与宽度

• 当 margin-top、padding-top 的值是百分比时：相对最近父级块级元素的 width，相对最近父级块级元素的 width