前端开发问题积累（1）

1.挺好用的艺术字体源：

点击进入官网
用法：
（1）在HTML页面head中写下面代码：

<link href="https://fonts.googleapis.com/css?family=Condiment|Roboto" rel="stylesheet">

（2）在css中就可以用刚才链接的字体了，只要在要设置字体的地方加上下面的代码即可（这里用Roboto字体示范，还可以改为其他字体）

font-family: 'Condiment', cursive;

说明：经过尝试，好像对汉字并没有什么用。。不过英文字体的确好看。

2.浏览器的内核：

（1）Trident内核代表产品Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等
（2）Gecko内核代表作品Mozilla FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。
（3）WebKit内核代表作品Safari、Chromewebkit 是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。
（4）Presto内核代表作品OperaPresto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。

3.HTML5验证表单

在input标签里面加入下面几句话即可。

<input type="text" name="username" id="username" placeholder="姓名" pattern="[\u4e00-\u9fa5]{2,10}" required="required" oninvalid="setCustomValidity('请输入真实姓名,10字以内中文!')" oninput="setCustomValidity('')" >

<input type="tel" name="tel" id="tel" placeholder="手机号" pattern="1[3-8][0-9]{9}" required="required" oninvalid="setCustomValidity('请输入11位正确手机号码!')" oninput="setCustomValidity('')">

注意：想要正确使用该验证，必须加form标签，而且按钮必须是submit！！

4.HTML5验证表单的确认密码

以下代码：

                    <input class="item" type="password" name="passWord" id="password" placeholder="8-16位密码" pattern="[A-Za-z0-9]{8,16}" oninvalid="setCustomValidity('请输入8-16位的密码')" oninput="setCustomValidity('')" required onchange="$('#Vpassword').attr('pattern',$(this).val())">

                    <input class="item" type="password" name="VpassWord" id="Vpassword" placeholder="确认密码" pattern="[A-Za-z0-9]{8,16}" oninvalid="setCustomValidity('两次密码不一致')" oninput="setCustomValidity('')" required>