【每日十分钟前端】基础篇10，placeholder属性、css3新特性、多行字符串声明

1、[HTML]placeholder 属性有什么作用？
2、[CSS]css3新特性
3、[JS]多行字符串的声明有哪几种常见写法？

---

1、placeholder 属性有什么作用？

提供可描述输入字段预算值的提示信息。
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
placeholder属性适用于下面的input类型：text、search、url、tel、email、password。

2、css3新特性

常用：

圆角：border-radius
阴影：box-shadow
文字阴影：text-shadow
线性渐变：grandient
颜色透明度：rgba

另外：

选择器：nth-child(n)、nth-of-type(n)
弹性盒模式：flex
媒体查询：@media
多列布局：column-count
个性化字体：@font-face
倒影：box-reflect
文字装饰：text-stroke-color
文字溢出：text-overflow
文本换行：text-wrap
非中日韩文本换行：word-break
强制换行（比如单词）：word-wrap
元素中的空白处理：white-space
背景效果：background-size
边框图片：border-image
过度：transform
动画：animation
旋转：translate、scale、rotate

3、多行字符串的声明有哪几种常见写法？

(1)、直接申明\n

str = 'str1\nstr2\nstr3\n'

(2)、多行分开声明LineContinuation

str = ' str1\n\
        str2\n\
        str3'
str = ` str1
        str2
        str3`

这种方法用反斜杆""进行字符串连接。

(3)、Array的join方法

var str = ['str1', 'str2', 'str3'].join('\n')

(4)、js注释

利用Function.prototype的toString方法会输出方法体注释来输出多行字符串。但并不兼容所有浏览器。

Function.prototype.getString = function() {
    var strs = new String(this);
    strs = strs.substring(strs.indexOf("/*") + 3, strs.lastIndexOf("*/"));
    return strs;
}

var string = function() {
    /*
str1
    str2
str3
    */
}
console.log(string.getString());