2017.08.14

New

  • HTML5新增的标签

1.新增的结构标签

（1）section标签

<section>标签，定义文档中的节，比如章节、页眉、页脚或文档中的其它部分。一般用于成节的内容，会在文档流中开始一个新的节。它用来表现普通的文档内容或应用区块，通常由内容及其标题组成。但section标签并非一个普通的容器元素，它表示一段专题性的内容，一般会带有标题。

（2）article标签

<article>是一个特殊的section标签，它比section具有更明确的语义，它代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。例如，一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。article可以嵌套，内层的article标签对外层的article标签有隶属关系。例如，一篇博客的文章，可以用article显示，然后一些评论可以用article的形式嵌入其中。

（3）aside标签

通常用来描述跟主内容相关，但是又可以独立的内容。比如，以TOPYS网为例，红色的主要内容区是一篇独立的文章，可以使用article标签，右侧的蓝色框可以使用aside标签，该模块展示了与文章相关性的内容，可以是评论也可以是推荐文章等。

（4）header、footer、nav常用语义化标签

在HTML5之前，如果开发相关的页面布局的时候，往往都是使用CSS来定义相关的头部、底部及其导航部分。在新的HTML5标准中，定义的这些标签（header、footer、nav）帮助你更语义化的定义页面层次和逻辑，我们做网页布局就不仅限于div标签布局了。

这三种标签，顾名思义，就是对文章或区块，定义相关的头部信息、底部信息及导航内容的。

（5）hgroup、figure辅助主体布局标签

hgroup标签是对网页或区段section的标题元素（h1-h6）进行组合。例如，在一区段中你有连续的h系列的标签元素，则可以用hgroup将他们括起来。

figure标签规定独立的流内容（图像、图表、照片、代码等等）。figure元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

2.多媒体标签

（1）audio音频标签

audio音频标签用在网页中嵌入音频文件。语法结构及各属性如下：

<audio src="demo.mp3">您的浏览器不支持audio标签</audio> src属性 指定音频URL地址，可以是相对的URL也可以是绝对的URL。

<audio src="demo.mp3"></audio> 注意：音频可以支持三种格式，分别是wav、MP3、ogg，都是音频格式，而且在不同的浏览器中还有不同的兼容性。下面是主流的几个浏览器对它的支持性：

2222.jpg

controls属性 添加该属性之后，音频播放控件将会显示，控件包括：播放、暂停、定位、音量等。

<audio src="demo.mp3" controls></audio> autoplay属性 添加autoplay属性并准确赋值时，音频将会自动播放。

<audio src="demo.mp3" controls autoplay></audio> loop属性 添加loop属性并准确赋值时，音频将会循环播放。

<audio src="demo.mp3" controls loop></audio> preload属性 可选值有auto（当页面加载后载入整个音频）、meta（当页面加载后只载入元数据）和none（当页面加载后不载入音频），如果设置了前面的autoplay属性，那么preload将会被忽略。

<audio src="demo.mp3" controls preload="auto"></audio> （2）video视频标签

video视频标签就是向页面中嵌入视频元素。

<video src="shipin.mp4">您的浏览器不支持video标签</video> 视频标签和音频标签很多属性用法都是一样的，如src、controls、autoplay、loop、preload相同的属性，这里就不做过多的介绍了，下面主要介绍视频独有的一些属性。

src属性 注意：视频也支持3种格式，分别是WebM、MPEG4、ogg，而且在不同的浏览器中还有不同的兼容性。下面是主流的几个浏览器对它的支持性：

3333.jpg

width、height属性 宽度和高度一般只要指定一个属性即可。如果不知道源视频的大小，两个属性一起修改会把视频比例调整变形，只指定宽度或高度一个属性即可等比例缩放。

<video src="shipin.mp4" controls width="500"></video> muted属性 规定视频的输出音量被静音。

<video src="shipin.mp4" controls muted></video> poster属性 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。

<video src="shipin.mp4" controls poster="tu.jpg"> （3）source标签

该标签是对audio和video标签的补充，source标签为媒介元素（比如 <video>和 <audio>）定义媒介资源，以video视频标签为例，火狐浏览器不支持MP4格式，但是支持ogg格式，因此为了在各种浏览器下都能显示视频，做以下兼容方式：

<video controls="controls">
    <source src="video.ogg" type="video/ogg">
    <source src="video.mp4" type="video/mp4">
</video>

3.其他功能性标签

（1）details标签和summary标签

details用于描述文档或文档某个部分的细节。 summary做为details的标题，标题是可见的，用户点击标题时，会显示出details的详细内容。 语法：

<details>
        <summary>这里填写标题文字</summary>
        <p>这里填写详细内容</p>
</details>

（2）progress标签和meter标签

progress标签，顾名思义，是一个进度条，有两个常用参数value（表示当前进度）、 max（表示总进度）。 meter标签的结构类似progress控件，都是设置一个max参数，使用value来指定显示的结果。但它比progress多了几个参数，还可以设置min表示最低量，以及low、high、optimum这些参数来描述数据的状态。 （3）mark标签、cite标签、time标签

mark标签突出显示部分文本。 cite标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。 time标签定义日期或时间，或者两者，格式如下： <time datetime="2016-10-01">国庆节</time> 注意：datetime属性，定义元素的日期和时间，标签内的文字只是展示效果，搜索引擎抓取的事实上是datetime属性内的时间。

（4）canvas标签

canvas标签可以实现在网页中直接绘制复杂的图形，但canvas只是一个图像的容器，使用脚本才能绘制想要的图形，该标签会在HTML5高级中进行讲解。

新增的表单控件和属性 1.新增表单特点

表单是HTML中非常重要的一部分，是连接前端与后台的桥梁，它担负大量的用户和网页后台数据更新交互的任务。

因此在HTML5中表单也发生了一些变化，它在保持简便易用的特性的同时，增加了许多内置的控件或者控件属性来满足用户的需求，并且同时减少了开发人员的编程。

  • 新增表单控件

（1）email输入类型

<input type="email" name="youxiang"/> 此类型要求输入格式正确的email地址，否则浏览器是不允许提交的，并会有一个错误信息提示。此类型在Opera中必须指定name值，否则无效果。

（2）url输入类型

<input type="url" name="dizhi" /> 上面代码展示的文本域要求输入格式正确的URL地址，开始处需要添加http://。

（3）日期时间相关输入类型

<input type="date">      <!--格式：  年/月/日 -->
<input type="time">      <!--格式：  时/分 -->
<input type="month">     <!--格式：  年/月 -->
<input type="week">      <!--格式：  年/周 -->

这一系列是很酷的一个类型，完全解决了烦琐的JS日历控件问题。但目前各种浏览器兼容性不是很好，且展示效果也不一样。

（4）number输入类型

<input type="number"/> 输入框中只能用来输入数字，不支持其他字符，在输入框上有可以点击的上下按钮。但浏览器支持情况不是很好，IE和Firefox不支持。

（5）search输入类型

<input type="search" results=s /> 此类型表示输入的将是一个搜索关键字，通过results=s可显示一个搜索小图标。

（6）tel输入类型

<input type="tel" /> 此类型要求输入一个电话号码，但实际上它并没有特殊的验证，与text类型没什么区别。

（7）color输入类型

<input type="color" /> 此类型可以让用户通过颜色选择器选择一个颜色值，并反馈到value中。

（8）range滑块

<input type="range" max="100" min="0" step="20" value="10"> 具有返回数值结果的滑块控件，可以调节滑块的最大值、最小值以及渐进程度。

  • 新增表单属性

（1）placeholder属性

<input type="text" placeholder="文本框提示文字，点击将会清除"> 这是一个很实用的属性，免去了用JS实现点击清除表单初始值，标准浏览器都能很好的支持。

（2）required/pattern属性

<input type="text" required pattern="^[1-9]\d{5,12}$"> 表单验证属性，require类型若输入值为空，则拒绝提交 pattern类型为正则验证，可以完成各种复杂的验证 这两种类型在Opera中必须指定name值，否则无效果 （3）autofocus属性

<input type="text" autofocus="true"> 默认聚焦属性，可在页面加载时聚焦到一个表单控件，类似于JS的focus()。

（4）list属性

<input type="text" list="ilist">
<datalist id="ilist">
  <option value="值1"></option>
  <option value="值2"></option>
  <option value="值3"></option>
</datalist>

该属性需要与datalist属性共用，datalist是对选择框的记忆，而list属性可以为选择框自定义记忆的内容。

（5）max/min/step属性

<input type="range" max="100" min="0" step="20" value="10"> max定义最大值 min定义最小值 step定义渐进程度 （6）autocomplete属性

<input type="text" autocomplete="on"> autocomplete属性规定表单是否应该启用自动完成功能。默认值是"on"，为自动补全，如果为"off"则是关闭自动补全功能。

  • HTML5标签的兼容

1.HTML5兼容说明

现如今越来越多的站点开始使用HTML5标签，但是难免有一些客户的电脑系统老旧，浏览器版本比较低，仍然使用IE6-IE8版本的浏览器，HTML5标签对这些老版本的浏览器不支持。如果想让你的网站使用HTML5标签，但是又想兼容低版本的浏览器，下面推荐几种方法，供大家选择。

2.使用html5.js插件兼容（推荐）

<!--[if IE]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]-->

可以直接将以上代码放置在标签内部，即可完成HTML5标签的兼容。该插件放置在Google code project上提供给大家，是可以直接调用的。当然，如果觉得这样会影响你的网页打开速度，也可以把html5.js文件直接下载下来，然后上传到自己的服务器单独调用。

以下是html5.js文件中的代码：

/*
 HTML5 Shiv v3.7.0 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
*/
(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/[\w\-]+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}</style>";
c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:"3.7.0",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);
if(g)return a.createDocumentFragment();for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);

这种方法是推荐大家使用的方法，操作比较简单，只需要引入html5.js即可完成兼容。

3.为低版本浏览器创建专属页面

很显然这种方法稍微逊色一些，原理就是通过JS判断浏览器版本，专门为低版本浏览器创建一个不使用HTML5标签的页面，而高版本就直接运行HTML5标签即可。这种方法只是一种解决方式，需要用到JS脚本，在这里就不为大家讲解，大家只需要知道有该种兼容的思路即可。

  • CSS

  • 外链、页内、行内 2.（通用选择器、类选择器、标签选择器、ID选择器、）（后代选择器、编组选择器）（伪类选择器是有顺序的link、:visited、:hover、:active ）

  • 文本样式
    • 斜体：italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字，而oblique是倾斜的文字，对于没有斜体的字体应该使用oblique属性值来实现倾斜的文字效果
    • overline: 上划线、line-through: 中划线
    • 简写

（1）代码简写的作用：

使用缩写可以减少CSS文件的大小，并且更加易于阅读。

（2）通过下面案例讲解文字简写的格式：

某文字属性如下

font-family: "微软雅黑";font-size: 12px;line-height: 24px;font-weight: 900;

可以简写为

font: 900 12px/24px "微软雅黑";

简写语法

font：粗细 字号/行高 字体类型

注意：使用文字简化代码时，必须以字体结束，否则在实际中代码失效，字号和行高不是通过空格隔开，而是通过“/”分割，一定要注意字号在前，行高在后。

  • 文本区块：letter-spacing, text-indent, text-align, vetical-align

常见显示类型的区别

（1）块级元素

常见标签：h1-h6、p、div、ui、ol、li、dl、dt、dd等。 特性：能够独立显示在一行，在没有设置宽度的情况下，默认宽度等于父级宽度，并且可以自定义块元素的宽高。 转换：任何元素都可以通过display:block转换为块级元素，转换完成之后，将具备块级元素的所有特性。 （2）行级元素

常见标签：a、span、strong、b、em、i、del、s、font等。 特性：行级元素可以显示在一行，在没有设置宽度的情况下，默认的宽度等于内部元素的宽度，行级元素不能自定义宽高。 转换：任何元素都可以通过display:inline转换为行级元素，转换之后同样具备以上行级元素的特性。 （3）行级块元素

常见标签：img、input等。 特性：行级元素能够在一行显示，并且可以自定义元素的宽高。 转换：任何元素都可以通过display:inline-block转换为行级块元素，转换完成之后具备行级块元素的所有特性。

  • 背景：bgcr, background-image,attachment,position, 简写规则

  • 盒模型

  • IE浏览器的兼容 所谓的浏览器兼容问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，IE6-IE8浏览器在Web发展中起到很大阻力，Web前端工程师写好的页面在Firefox、Chrome、Opera等主流浏览器下测试，基本没有什么问题，而在IE6-IE8浏览器下预览，又是另一番景象，本来规整的页面全乱了。

幸好随着HTML5的盛行，IE低版本的浏览器也逐渐退出舞台，所以现在很多网站也不再去考虑IE6-IE8低版本的浏览器，不过有些特殊的网站不得不考虑低版本浏览器，比如政府网站、教育系统网站，网站性质也决定了不得不兼容低版本浏览器，那么下面我们就介绍一下常见的IE低版本的兼容方式，如果你的客户网站不考虑低版本浏览器，你就可以完全忽略该节课了。

1.IE6双倍边距

产生因素：当元素有float属性，又有margin属性时，在IE6下面显示的margin的值是设置值的两倍。

解决方法：将有float属性的元素添加display:inline属性。

2.伪类选择器hover

产生因素：IE6只支持a标签的CSS定义hover效果，其他标签添加hover效果没有任何作用。

解决方法：一方面可以使用JavaScript添加鼠标移入效果，另一方面只能将其他标签改变为a标签后再添加hover效果。

3.定义元素的不透明度

产生因素：opacity:0.5，可以改变元素的透明度，取值范围是0~1，但是IE6不支持这种透明度表现方式。

解决方法：IE6浏览器专属的透明度属性， filter：alpha（opacity=80），取值范围是0~100。

4.IE各个版本hack

属性hack方式

.box {_width:100px;}             /* IE6专用*/

.box {*+width:100px;}          /* IE7专用*/

.box {*width:100px;}            /* IE6、IE7共用*/

.box {width:100px\0;}           /* IE8、IE9共用*/

.box {width:100px\9;}           /* IE6、IE7、IE8、IE9共用*/

.box {width:330px\9\0;}        /* IE9专用*/

选择器hack
*html .box{width:100px;}       /*IE6*/

*+html .box{width:100px;}     /*IE7*/
  • ::selection: 选择文字元素

学习 React Notes -- Jikexueyuan

环境搭建

  1. 环境参数
  2. node -v : v7.9.0
  3. npm -v : v4.2.0
  4. cnpm : npm install -g cnpm --registry=https://registry.npm.taobao.org
    • npm -v:
      cnpm@5.1.1 (/Users/carlsiry/.nvm/versions/node/v7.9.0/lib/node_modules/cnpm/lib/parse_argv.js)
npm@5.3.0 (/Users/carlsiry/.nvm/versions/node/v7.9.0/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@7.9.0 (/Users/carlsiry/.nvm/versions/node/v7.9.0/bin/node)
npminstall@3.1.1 (/Users/carlsiry/.nvm/versions/node/v7.9.0/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/Users/carlsiry/.nvm/versions/node/v7.9.0
darwin x64 16.7.0
registry=http://registry.npm.taobao.org
  5. init : cd learn-react; npm init -y
  6. install : npm i react react-dom --save
  7. 为了使用 ES6 语法编写代码，需要通过编译器编译成浏览器能够直接执行的代码：

results matching ""

    No results matching ""