H5C3的讲解

Posted 2020-11-10 yuebanzhou

H5C3

html5

简介

• HTML5 是 HTML 标记语言的一个最新版本，制定了 web 应用开发的一系列标准，成为第一个将 web 作为应用开发平台的 HTML 语言。

• H5 其实是一个泛称，它指的是由 HTML5 + CSS3 + javascript 等技术组合而成的一个应用开发平台。

• HTML5 的设计目的是为了在移动设备上支持多媒体。HTML5 是最新的 HTML 标准。

• HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。

• HTML5 新增了一些元素，如新元素，新语义标签，智能表单，多媒体标签，图形以及多媒体元素。

• HTML5 提供的新元素和新的 API ：地理位置，重力感应，硬件访问，结合 CSS3 做动画。

• HTML5 是跨平台的，被设计为在不同类型的硬件(PC、平板、手机、电视机等等)之上运行。

• HTML5 中默认的字符编码是 UTF-8。

• < !DOCTYPE> 可以不遵循DTD

• < !DOCTYPE> 声明必须是 HTML 文档的第一行，位于 < html> 标签之前。

• < !DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个HTML 版本进行编写的指令。

• H5中script标签type属性值为”text/javascript”

优缺点

优点

• 提高可用性和改进用户的友好体验；

• 有几个新的标签，这将有助于开发人员定义重要的内容；

• 可以给站点带来更多的多媒体元素(视频和音频)；

• 可以很好的替代FLASH和Silverlight；

• 当涉及到网站的抓取和索引的时候，对于SEO很友好；

• 将被大量应用于移动应用程序和游戏；

• 可移植性好。

缺点

• 低版本的浏览器不支持，很多标签浏览器支持效果不好，也有安全漏洞

语义化

语义化标签

• article，aside，figure，main，mark，nav，section 等

• 在不支持HTML5新标签的浏览器中，会将这些新标签解析成行内元素。转化成块级元素就可以使用了。IE9版本一下还需要document.creatElement(“tagname”);

• 兼容代码：浏览器能识别H5标签时，不需要额外代码（输入cc:ie9加tab键）如果是IE9 以及以下的浏览器，就执行语句，如果不是，就不执行。避免冗余。

微数据

• 微数据使用HTML标记(常为 span 或 div)中的简单属性为项和属性指定简要的描述性名称。

• 在一项微数据的最外层 div ，需要用 itemscop 标识，并用 itemtype 指定微数据类型， itemtype 的值是一个 url ，用于引入一个微数据词汇表（即各种微数据的类型定义），可以使用 http://schema.org 或是 http://data-vocabulary.org ，具体的微数据类型可以参考上面两套微数据词汇表。

• 在用 itemscop 标识了的元素内使用 itemprop 属性添加微数据，itemprop 的值为 HTML 标签包含的内容（如例子中的 reviewer 和 description ），又或是标签的属性值（如例子中的 dtreviewed，取 datatime 的值为属性值）。

<div>
  <span>猪猪</span>
  <span>2017年7月10日 22:30</span>
  <span>评论内容</span>
</div>
<div itemscop itemtype="http://data-vocabulary.org/Review">
  <span itemprop="reviewer">猪猪</span>
  <span itemprop="dtreviewed" datatime="2017-07-10T22:30:00">2017年7月10日 22:30</span>
  <span itemprop="description">评论内容</span>
</div>

WAI-ARIA

• WAI-ARIA 是一个为残疾人士等提供无障碍访问动态、可交互 Web 内容的技术规范，为浏览器、媒体播放器、辅助技术的开发人员以及 Web

• 内容开发者定义了可以获得更广泛跨平台可访问性的方法。更为直接地说，WAI-ARIA 可以标识出网页中的内容及其变化，并让屏幕阅读器识别出然后告知盲人。WAI-ARIA 被 IE8+ 以及所有现代浏览器支持。

• 根据 W3C 的完整规范，WAI-ARIA 具有大量的属性，在开发中由于实际情况的限制，开发者很难使用全部的属性。实际上，使用几个常用而重要的属性就能让视障人士更清楚我们的网页了。

多媒体

音频

<audio width="300" height="200" controls autoplay>
<source src="music/1.mp3" />
<source src="music/1.wav" />
<source src="music/1.wma" />
对不起,您的浏览器不支持音频播放
</audio>

• autoplay 音频就绪后马上播放

• controls 向用户显示空间，比如播放按钮

• preload 预备播放，如果已经使用autoplay，则忽略这条属性

• src 路径

• loop 给定值表示循环次数，不给值表示一直循环

视频

<video width="300"  controls autoplay>
<source src="mov/cz.mp4">
<source src="mov/cz.ogg">
您的浏览器不支持播放视频
</video>

• autoplay 音频就绪后马上播放

• controls 向用户显示空间，比如播放按钮

• preload 预备播放，如果已经使用autoplay，则忽略这条属性

• src 路径

• loop 给定值表示循环次数，不给值表示一直循环

• height 播放器的高度

• width 播放器的宽度

表单

输入类型

• < input type="XXX" >

• email 输入邮箱格式

• tel 输入手机号码格式

• url 输入url格式

• number 输入数字格式

• search 搜索框

• range 自由拖动滑块

• color 拾色器

• time 时间

• date 日期

• datetime 日期时间

• month 月份

• week 星期

表单元素

• datalist 数据列表，需要配合input标签的list属性使用

<input type="text" value="" list="dt-list" name="name" />
<datalist id="dt-list">
  <option value="#"></option>
</datalist>

• keygen 生成加密字符串

• output 输出结果

• meter 度量器

<meter min="0" max="100" low="60" high="80" value="20"></meter>

表单属性

• placeholder 占位符

• autofocus 自动获得焦点

• multiple 多文件上传

• autocomplete 自动完成，默认是on，再次输入内容的时候会提示上次输入内容

• form

• novalidate 关闭验证

• required 必填项，如果不填，提交的时候会弹框

• pattern 自定义验证

DOM拓展

获取元素

• document.getElementsByClassName (‘class’)

• 通过类名获取元素，以伪数组形式存在。

• document.querySelector(‘selector’)

• 通过CSS选择器获取元素，符合匹配条件的第1个元素。

• document.querySelectorAll(‘selector’)

• 通过CSS选择器获取元素，以伪数组形式存在

类样式

• Node.classList.add(‘class‘) 添加class

• Node.classList.remove(‘class‘) 移除class

• Node.classList.toggle(‘class‘) 切换class，有则移除，无则添加

• Node.classList.contains(‘class‘) 检测是否存在class

• Node指一个有效的DOM节点，是一个通称。

自定义属性

• 一个属性可以获取所有自定义属性的值（dataset）

• 命名规范：必须是驼峰命名法。

• 获取

<script>
  var dvObj=document.getElementById("dv");
  console.log(dv.Obj.dataset);
</script>

• 设置

<script>
  dvObj.dataset["height"]="199";
  dvObj.dataset["myWeight"]="199";
  dvObj.dataset.myFace="帅";
</script>

网络状态

• 属性：window.onLine用户当前的网络状况，返回一个布尔值。

• 事件：

  • window.online用户网络连接时被调用

  • window.offline用户网络断开时被调用

读取文件

• HTML5中通过为表单元素添加multiple属性实现文件多选，因此通过< input type="file">上传文件后得到的FileList对象是以伪数组形式存在。

• HTML5新增内建对象，用以读取本地文件。

• 属性：result文件读取的结果

• 事件：onload文件读取结束

• 方法：readAsDataURL()、readAsText()

• 表单元素中file是上传文件的

• file.onchange的事件可以获取文件的信息，只要上传文件就会触发事件

• 过程：获取file元素--上传文件获取文件--创建对象--读取文件--读取完毕

<script>
  var file=document.querySelector("#f1");
  file.onchange=function () {
    //上传了一个文件，获取文件
    var f1=file.files[0];
    //读取文件，创建了一个读取文件的对象
    var fReader=new FileReader;
    //此时就可以读取了
    fReader.readAsText(f1);
    //读取完毕的事件
    fReader.onload=function () {};
  }
</script>

地理定位

• 获取当前地理信息：navigator.geolocation.getCurrentPosition(successCallback, errorCallback)

• 获取实时地理信息：navigator.geolocation.watchPosition(successCallback, errorCallback)

• 当成功获取地理信息后，会调用successCallback，并返回一个包含位置信息的对象。获取地理信息失败后，会调用errorCallback，并返回一个包含错误信息的对象。

• position.coords.latitude纬度

• position.coords.longitude经度

• position.coords.accuracy精度

• position.coords.altitude海拔高度

WEB存储

cookie

• cookie中的数据是字符串，存储键值对

• 其存储大小只有4k左右

• 解析也相当的复杂

sessionStorage

• 生命周期为关闭浏览器窗口

• 在同一个窗口下数据可以共享

• 在会话中产生，会话结束，数据自动删除

• 容量约5M

localStorage

• 永久生效，除非手动删除(在chrome浏览器下需要以服务器方式)

• 可以多窗口共享

• 容量约20M

用法

<script>
  localStorage.setItem("name","小白");
</script>
<script>
  console.log(localStorage.getItem("name"));
</script>

CSS3

简介

• 浏览器支持程度差，需要添加私有前缀；移动端支持优于PC端；不断改进中；应用相对广泛。

• CSS是Cascading Style Sheet的缩写，用于增强网页样式并允许将样式信息与网页内容分离的一种标记性语言。

• CSS不需要编译，可以直接由浏览器执行（属于浏览器解释型语言）。

选择器

属性

• E[attr] 存在attr属性即可

• E[attr=val] 属性值完全等于val

• E[attr*=val] 属性值里包含val字符，并且在“任意”位置

• E[attr^=val] 属性值里包含val字符，并且在“开始”位置

• E[attr$=val] 属性值里包含val字符，并且在“结束”位置

伪类

• E:first-child 其父元素的第1个子元素

• E:last-child 其父元素的最后一个子元素

• E:nth-child(n) 其父元素的第n个子元素

• E:nth-last-child(n) 其父元素的第n个子元素(倒数)

• 空伪类 E:empty 选中没有任何子节点的E元素；

• 目标伪类 E:target 结合锚点进行使用，处于当前锚点的元素会被选中；

• 排除伪类 E:not(selector) 除selector（任意选择器）外的元素会被选中；

伪元素

• E::first-letter文本的第一个单词或字（如中文、日文、韩文等）

• E::first-line 文本第一行；

• E::selection 可改变选中文本的样式；

• E::before和E::after

• 用before和after的时候，必须有content:””;和display:block;两个

• 推荐单冒号写法，这样不会存在浏览器兼容问题（双冒号属于C3内容）

文本修饰

• 两个到三个像素值，后面可以有颜色的设置

• text-shadow:none|length1 length2 length3 color

• none：无阴影

• length1：第1个长度值用来设置对象的阴影水平偏移值。可以为负值。

• length2：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值。

• length3：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值。

• color：设置对象的阴影的颜色。

<style>
  .to {
    text-shadow:-1px -1px 0px white,1px 1px 0px black;
  }
  .ao {
    text-shadow:-1px -1px 0px black,1px 1px 0px white;
  }
</style>

颜色

• Hue、Saturation、Lightness、Alpha即HSLA

• H 色调 取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色

• S 饱和度 取值范围0%~100%

• L 亮度 取值范围0%~100%

• A 透明度 取值范围0~1

• opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度；

• transparent 不可调节透明度，始终完全透明

盒子模型

• box-sizing: border-box 盒子大小为 width

• box-sizing: content-box 盒子大小为 width + padding + border

• 上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。

• border-box的content值会自动调整

边框

边框圆角

• border-radius: 10px; 表示四个角的横纵轴半径都为10px；

• border-radius: 10px 5px; 表示1和3角横纵轴半径都为 10px，2和4角横纵轴半径为5px；

• border-radius: 10px 5px 8px; 表示1角模纵轴半径都为10px，2和4角横纵轴半径都为8px，3角的横纵轴半径都为8px；

• border-radius: 10px 8px 6px 4px; 表示1角横纵轴半径都为10px，表示2角横纵轴半径都为8px，表示3角横纵轴半径都为6px，表示4角横纵轴半径都为6px；

边框阴影

• 与文字阴影类似，可分别设置盒子阴影偏移量、模糊度、颜色（可设透明度）。

• 如box-shadow: 5px 5px 5px #CCC

• 水平偏移量 正值向右 负值向左；

• 垂直偏移量 正值向下 负值向上；

• 模糊度是不能为负值；

• inset可以设置内阴影；

• 设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。可以设置多重边框阴影，实现更好的效果，增强立体感。

边框图片

• 将一个盒子想象是由9部分组成的，分别是左上角、上边框、右上角、右边框、右下角、下边框、左下角、左边框、中间，那么浏览器会将切割好的9张虚拟图片分别对应到盒子的各个部分上。

• border-image-source：指定图片路径

• border-image-repeat：指定裁切好的虚拟图片的平铺方式

  • round会自动调整尺寸，完整显示边框图片

  • repeat 单纯平铺,多余部分，会被“裁切”而不能完整显示。

• border-image-slice 切图 如果border-image-slice:27;表示切图像素为27px

• border-image-width设置边框背景区域的大小，这个值的大小不会影响到盒子的大小。

背景

尺寸

• background-size 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）

• 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。

• 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域，不一定会填满整个背景区域。

参考点

• background-origin 通过background-origin可以设置背景图片定位(background-position)的参照原点。

• border-box以边框做为参考原点；

• padding-box以内边距做为参考原点；

• content-box以内容区做为参考点；

裁切

• background-clip 可以设置对背景区域进行裁切，即改变背景区域的大小。

• border-box裁切边框以内为背景区域；

• padding-box裁切内边距以内为背景区域；

• content-box裁切内容区做为背景区域；

• 背景图片默认在padding左上角，当裁剪content的时候，背景图片会被切掉

多背景

• 以逗号分隔可以设置多背景，可用于自适应布局

<style>
  .wrapper {
    width:640px;
    height:1000px;
    margin:auto;
    background:url(./images/head.jpg) left top no-repeat,
          url(./images/foot.jpg) left bottom no-repeat;
    background-color:#ccc;
  }
</style>

自适应背景

• 宽高设置成100%的时候，页面比例变小，背景图相应变小

渐变

线性渐变 linear-gradient

• 指沿着某条直线朝一个方向产生渐变效果

• 必要元素：方向，起始色，终止色，渐变距离

• 设置渐变方向，角度是顺时针方向旋转，可以用关键字如to top（相当于0deg）、to right（相当于90deg）、to bottom（相当于180deg）、to left（相当于270deg），也可以用角度（正负值均可）如45deg、-90deg等。

径向渐变 radial-gradient

• 指从一个中心点开始沿着四周产生渐变效果

• 必要的元素：辐射范围即圆半径，中心点（圆的中心），渐变起始色，渐变终止色，渐变范围

• 中心位置参照的是盒子的左上。

• 其半径可以不等，即可以是椭圆，如background-image: radial-gradient(120px 100px at 0 0 yellow green)会是一个椭圆形（横轴120px、纵轴100px）的渐变。

过渡

参数

• 属性（transition-property）：all表示所有的属性；

• 动画执行时间（transition-duration）：单位一般是秒；

• 速度（timing-function）：linear匀速、ease快慢、ease-in先慢后快、ease-out先快后慢；

• 过渡延迟时间（transition-delay）；

• 下面的例子，宽用1秒时间从200px变成400px，高用2秒时间从200px变成400px

<style>
  div {
    width: 200px;
    height: 200px;
    margin:50px auto;
    background-color: green;
    transition:width 1s,height 2s;
  }
  div:hover {
    width:400px;
    height: 400px;
  }
</style>

2D转换

移动

• Y轴向下，X轴向右，位移时相对自身原来位置，不脱标也可以移动，可以相对自身设置百分比：向右移动相对自身宽度的50%，向上移动相对自身高度的50%

• 设置元素居中，前面left：50%；top：50%；后transform:translate(-50%,-50%);

缩放

• 缩放属性是scale，有两个参数，第一个参数表示X方向缩放比例，第二个参数表示Y方向的缩放比例

• transform:scale(2,2)

旋转

• 旋转属性是rotate，为正值时顺时针旋转，为负值时逆时针旋转

• transform:rotate(180deg)

倾斜

• 倾斜属性是skew，第一个参数是X方向倾斜角度，反方向的；第二个参数是Y方向倾斜角度，正方向的

• transform:skew(45deg,45deg)

原点

• 设置旋转的原点，在底部中间

• transform-origin:center bottom;

• 多个效果叠加的时候一定要注意顺序，是先旋转还是先叠加，旋转过后，坐标轴会发生变化

3D转换

• 透视

  • perspective有两种写法：作为一个属性，设置给父元素，作用于所有3D效果的子元素；作为transform的一个属性值，作用于元素自身。

  • 透视效果，近大远小

• 其他属性和2D类似

动画

参数

• animation:rotate 1s infinite linear

• 第一个参数：动画序列的名字（自己定义的，与后边@keyframes匹配）

• 第二个参数：动画执行的时间

• 第三个参数：速度

• 第四个参数：执行方式

例子

• 配合前面的rotate

• 起始时角度不变，缩放不变

• 进行到事件的25%，已经了旋转180度，大小变成2倍

• 进行到事件的50%，已经了旋转360度，大小变成3倍

• 进行到事件的75%，已经了旋转540度，大小变成2倍

• 进行到事件的100%，已经了旋转720度，大小变成1倍

<style>
  @keyframes rotate {
    0% {
      transform：rotateZ(0deg) scale(1);
    }
    25% {
      transform：rotateZ(180deg) scale(2);
    }
    50% {
      transform：rotateZ(360deg) scale(3);
    }
    75% {
      transform：rotateZ(540deg) scale(2);
    }
    100% {
      transform：rotateZ(720deg) scale(1);
    }
  }
</style>

属性

• animation-name 动画名字

• animation-direction 动画是否反向运动

  • normal 正常方向

  • reverse 反向

• animation-duration 动画持续时间

• animation-timing-function 动画过渡类型

  • linear 线性

  • ease 平滑

  • ease-in 慢到快

  • ease-out 快到慢

  • ease-in-out 慢快慢

• animation-delay 动画延迟时间

• animation-play-state 动画状态

  • running 运动

  • paused 暂停

• animation-literation-count 动画循环次数

• animation-fill-mode 动画状态

布局

多列布局

• column-count值设置为auto的时候，自动适应宽度。

• column-width值设置为auto的时候，自动适应宽度。

• column-gap值设置为normal的时候，和font-size的值一样。

• column-rule可以拆分成：column-rule-width，column-rule-style，column-rule-color。

• column-span设置对象是否跨列，none为不跨列，all为跨所有列。

• column-fill设置对象高度是否同意，auto自适应，balance所有列高以最高为高度

• column-break-before 值设置为auto既不强迫也不禁止在元素之前断行并产生新列，值设置为always总是在元素之前断行并产生新列，值设置为avoid避免在元素之前断行并产生新列

• column-break-after 值设置为auto既不强迫也不禁止在元素之后断行并产生新列，值设置为always总是在元素之后断行并产生新列，值设置为avoid避免在元素之后断行并产生新列

• column-break-inside 值设置为auto既不强迫也不禁止在元素内部断行并产生新列 ，值设置为avoid避免在元素内部断行并产生新列

伸缩布局

• flex-grow：定义拓展布局，不允许为负值。默认是0，如果没有定义该属性，不拥有分配剩余空间的权利。

• flex-shrink：定义收缩比例，不允许为负值。默认值是1，如果没有定义，按照默认值进行空间收缩。

• flex-basis：用长度值或者百分比来定义宽度，不允许为负值。值为auto，无特定宽度。值为content自动计算宽度。

• flex-flow：定义排列方向，控制是单行还是多行，下面两个属性属于flex-flow。

• flex-direction：值为row从左到右，值为row-reverse从右到左，值为column从上到下，值为column-reverse从下到上。

• flex-wrap：值为nowrap单行，会溢出，值为wrap多行，溢出部分放到下一行，值为wrap-reverse反转wrap数列。

• align-content：值为flex-start从起始位置堆叠，元素紧靠，值为flex-end从结束位置开始堆叠，元素紧靠，值为center从中间位置开始堆叠，元素紧靠，值为space-between各行之间空间平均分布，第一个元素和最后一个元素分别紧靠侧边，值为space-around剩余空间平均分布，值为stretch伸展占用剩余空间。

• align-items：值同align-content

• align-self：值同align-content

• justify-content：值同align-content

• order：排序 order值越小越靠前

字体

• 字体格式 .ttf .otf .woff .eot .svg

• 查找更多中文字体

  • http://www.zhaozi.cn/、http://www.youziku.com/

• 字体图标

  • 优点：将所有图标打包成字体库，减少请求；具有矢量性，可保证清晰度；使用灵活，便于维护；

• Font Awesome 使用介绍

  • http://fontawesome.dashgame.com/

• 定制自已的字体图标库

  • http://iconfont.cn/

  • https://icomoon.io/

• SVG素材

  • http://www.iconsvg.com/