• HTML5学习笔记（三）

    离线应用

    HTML5新增了一个离线存储的API，用于实现本地数据的缓存，从而使得开发离线应用成为可能。
    所谓“离线存储”，指的是建立一个URL列表，该列表可以包含HTML文件、CSS文件、JavaScript文件和图片等。当与服务器建立连接时，浏览器会在本地缓存URL列表中的文件；当与服务器断开连接时，浏览器将调用缓存的文件来支持页面展示。

    想要实现离线存储，我们一般需要以下3步。

    ① 配置httpd.conf文件

    AddType text/cache-manifest .manifest

    ② 页面头部加入manifest属性：manifest属性的取值是cache.manifest文件的路径。

    1. html>
    2. <html manifest="cache.manifest">
    3. <head>

    ③ 在www文件目录建立一个cache.manifest文件。

    多线程处理

    在HTML5中，我们可以使用Web Worker创建一个“后台线程”来执行某一段耗时较长的JavaScript程序，而不会影响页面响应。Web Worker其实就是HTML5提供的“JavaScript多线程”解决方案。

    Web Worker技术基本原理就是：在当前JavaScript的主线程中，使用Worker()构造函数新建一个worker实例，然后加载某一个JavaScript文件，发送给一个后台线程来处理（注意，这里是后台线程）。

    1. //新建worker实例
    2. var worker = new Worker(url);
    3. //向后台发送数据
    4. worker.postMessage(yourdata);
    5. //接收后台处理完成的数据
    6. worker.onmessage = function(e){
    7.   //e.data
    8. };

    Web Worker最重要的用途就是使用多线程的方式来处理耗时较长的JavaScript程序。
    ▶ Web Worker由于使用的是后台线程，发送给后台线程的那个JavaScript文件的使用有一定的限制，例如无法访问DOM、无法访问全局变量或全局函数等。
    ▶ Web Worker依然可以使用定时器的4个函数：setTimeout()、clearTimeout()、setInterval()、clearInterval()。
    ▶ Web Worker不支持跨域加载JavaScript。

    地理位置

    可以使用HTML5的geolocation对象来获取用户的地理位置信息。

    window.navigator.geolocation

    在geolocation对象中，我们可以使用getCurrentPosition()方法获取当前位置的坐标（经度和纬度）。
    在geolocation对象中，我们可以使用watchPosition()方法来持续不断地获取当前位置的坐标，也就是追踪移动中的用户的位置。
    getCurrentPosition()方法是一次性操作，而watchPosition会一直监视，每次位置发生改变，都会自动更新数据。
    watchPosition()会一直监视位置，不过在geolocation对象中，我们可以使用clearWatch()方法来取消这个监视过程。

    桌面通知

    我们可以使用新增的Notification API来轻松实现桌面通知功能。Notification API通知属于桌面性质的通知，有点类似于显示器右下角弹出来的QQ弹框、360杀毒提示等，它跟浏览器是脱离的，消息是置顶的。

    var notice = new Notification(title, options);

    Canvas

    HTML5新增了一个Canvas元素，我们常说的Canvas技术，指的就是使用Canvas元素结合JavaScript来绘制各种图形的技术。
    游戏开发在HTML5领域具有举足轻重的地位，现在我们也可以使用Canvas来开发各种游戏。这几年非常火的游戏如《捕鱼达人》《围住神经猫》等，也可以使用HTML5 Canvas来开发。

    HTML5有两个主要的2D图形技术：Canvas和SVG。

    ▶ Canvas是使用JavaScript动态生成的，SVG是使用XML静态描述的。
    ▶ Canvas是基于“位图”的，适用于像素处理和动态渲染，图形放大会影响质量；SVG是基于“矢量”的，图形放大不会影响质量。也就是说，使用Canvas绘制出来的是一个“位图”，而使用SVG绘制出来的是一个“矢量图”。
    ▶ 每次发生修改，Canvas需要重绘，而SVG不需要重绘。
    ▶ Canvas与SVG的关系，简单来说就像“美术与几何”的关系一样。

    CSS3

    我们常说的CSS指的是CSS2.1，而CSS3特指相对于CSS2.1新增加的内容。
    由于CSS3新增的一些属性尚未成为W3C标准的一部分，因此对于这些属性来说，每种内核的浏览器都只能识别“带有自身私有前缀的属性”。也就是说，我们在书写CSS3属性的时候，可能需要在属性前面加上浏览器的私有前缀，然后该浏览器才能识别对应的CSS3属性。

    1. border-shadow:5px 5px 10px red;
    2. -webkit-border-shadow:5px 5px 10px red;
    3. -moz-border-shadow:5px 5px 10px red;
    4. -ms-border-shadow:5px 5px 10px red;
    5. -o-border-shadow:5px 5px 10px red;

    CSS3新增选择器

    在CSS3中，新增加了以下三大类选择器。

    属性选择器

    属性选择器，指的是通过“元素的属性”来选择元素的一种方式。


    结构伪类选择器

    子元素伪类选择器，指的就是选择某一个元素下的子元素。

    ▶ :first-child、:last-child、:nth-child(n)、:only-child
    ▶ :first-of-type、:last-of-type、:nth-of-type(n)、:only-of-type

    “：first-child”是选择父元素下的第1个子元素（不区分元素类型）;

    “：first-of-type”是选择父元素下某个元素类型的第1个子元素（区分元素类型）。

    1. <div>
    2.  <h1>h1>
    3.  <p>p>
    4.  <span>span>
    5.  <span>span>
    6. div>

    （1）：first-child

    h1:first-child：选择的是h1元素，因为h1元素是div的第1个子元素。

    p:first-child：选择不到任何元素，因为p并不是div的第1个子元素，而是div的第2个子元素。

    span:first-child:选择不到任何元素，因为span并不是div的第1个子元素，而是div的第3个子元素；

    （2）：first-of-type

    h1:first-of-type:选择的是h1元素，因为h1元素是div中所有h1元素中的第1个h1元素，事实上也只有一个为h1的子元素；

    p:first-of-type:选择的是p元素，因为p元素是div中所有p元素中的第1个p元素，事实上也只有一个为p的子元素；

    span:first-of-type:选择的是id="first"的span元素，因为在div元素中有2个span元素，我们选择的是两个之中的第1个。

    伪类选择器，最典型的就是超链接的几个伪类：a:link、a:visited、a:hover、a:active。


    UI伪类选择器

    UI伪类选择器，指的是针对“元素的状态”来选择元素的一种伪类选择器。UI，全称“User Interface”，也就是用户界面。
    元素的状态包括：可用、不可用、选中、未选中、获取焦点、失去焦点等。UI伪类选择器的共同特点是：对于指定的样式，在默认状态下不起作用，只有当元素处于某种状态时才起作用。此外，大多数UI伪类选择器都是针对表单元素的。
    在CSS3中，UI伪类选择器主要包括以下5类。
    ▶ :focus
    ▶ ::selection
    ▶ :checked
    ▶ :enabled和:disabled
    ▶ :read-write和:read-only

    其他几种伪类选择器。
    ▶ :root
    ▶ :empty
    ▶ :target
    ▶ :not()

    我们可以使用:root选择器来选择HTML页面的根元素，也就是。

    1. :root{
    2.     font-size: 16px;
    3. }

    我们可以使用:empty选择器来选择一个“不包含任何子元素和内容”的元素，也就是选择一个空元素。

    1.  
    2. .box span:empty{
    3. }
    4. <div class="box">
    5.   <span>内容span>
    6.   <span>span>   
    7. div>

    我们可以使用:target选择器来选取页面中的某一个target元素。所谓的target元素，指的是id被当成页面的锚点链接来使用的元素。

    1. <html>
    2. <head>
    3. <style>
    4.     :target{
    5.         border: 2px solid #D4D4D4;
    6.         background-color: #e5eecc;
    7.     }
    8. style>
    9. head>
    10.  
    11. <body>
    12. <h1>这是标题h1>
    13. <p><a href="#news1">跳转至内容 1a>p>
    14. <p><a href="#news2">跳转至内容 2a>p>
    15. <p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。p>
    16. <p id="news1"><b>内容 1...b>p>
    17. <p id="news2"><b>内容 2...b>p>
    18. <p><b>注释：b> Internet Explorer 8 以及更早的版本不支持 :target 选择器。p>
    19. body>
    20. html>

    我们可以使用:not()选择器来选取某一个元素之外的所有元素。

    1. /* 为每个非<span>元素设置css */
    2. .box :not(span){
    3.    font-size: 16px;
    4. }
    5. <div class="box"> 
    6.   <span>文本span>
    7.   <h2>h2h2>
    8.   <p>段落p>
    9. div>

    CSS3 文本样式

    text-shadow 文本阴影

    我们经常见到的坐标系是数学坐标系，不过CSS3使用的坐标系是W3C坐标系，这两种坐标系唯一的区别在于y轴正方向的不同，

    ▶ 数学坐标系：y轴正方向向上。
    ▶ W3C坐标系：y轴正方向向下。

    text-shadow:x-offset y-offset blur color;

    x-offset是“水平阴影”，表示阴影的水平偏移距离，单位可以是px、em和百分比等。因此如果值为正，则阴影向右偏移；如果值为负，则阴影向左偏移。
    y-offset是“垂直阴影”，表示阴影的垂直偏移距离，单位可以是px、em和百分比等。由于CSS3采用的是W3C坐标系，因此如果值为正，则阴影向下偏移；如果值为负，则阴影向上偏移。
    blur是“模糊距离”，表示阴影的模糊程度，单位可以是px、em和百分比等。blur值越大，阴影越模糊；blur值越小，阴影越清晰。此外，blur不能为负值。如果不需要阴影模糊效果，可以把blur值设置为0。

    我们可以使用text-shadow属性为文本定义多个阴影，并且针对每个阴影使用不同的颜色。当定义多个阴影时，text-shadow属性是一个以英文逗号隔开的值列表。当text-shadow属性是一个值列表时，阴影效果会按从左到右的顺序应用到文本上，因此可能会出现相互覆盖的效果。

    text-shadow:0 0 4px red, 0 -5px 4px green, 2px -10px 6px blue;
    1. text-shadow:
    2.   -1px 0 0 #333,　/*向左阴影*/
    3.   0 -1px 0 #333,　/*向上阴影*/
    4.   1px 0 0 #333,　 /*向右阴影*/
    5.   0 1px 0 #333;　 /*向下阴影*/

    如果将向左和向上的阴影颜色设置为白色，文本就会出现“凸起效果”，text-shadow属性修改如下：

    1. text-shadow:
    2.   -1px 0 0 white,　 /*向左阴影*/
    3.   0 -1px 0 white,　/*向上阴影*/
    4.   1px 0 0 #333,　　/*向右阴影*/
    5.   0 1px 0 #333;　　/*向下阴影*/

    如果将向右和向下的阴影颜色设置为白色，文本就会出现“凹陷效果”，text-shadow属性修改如下：

    1. text-shadow:-
    2.   1px 0 0 #333,　 /*向左阴影*/
    3.   0 -1px 0 #333,　/*向上阴影*/
    4.   1px 0 0 white,　/*向右阴影*/
    5.   0 1px 0 white;　/*向下阴影*/

    text-stroke 文本描边

    在CSS3中，我们可以使用text-stroke属性为文本添加描边效果。所谓的“描边效果”，指的是给文字添加边框。
    text-stroke是一个复合属性，它是由text-stroke-width和text-stroke-color两个子属性组成的。

    ▶ text-stroke-width：定义边框的宽度。
    ▶ text-stroke-color：定义边框的颜色。

    使用text-stroke配合color:transparent;，我们还可以实现镂空文字。

    1. {
    2.   font-family:Verdana;
    3.   font-size:50px;
    4.   font-weight:bold;
    5.   color:transparent;　　/*设置文字颜色为透明*/
    6.   text-stroke:2px red;
    7.   -webkit-text-stroke:2px red;
    8. }

    text-overflow 文本溢出

    在CSS3中，我们可以使用text-overflow属性来定义文本的溢出样式。
    单独使用text-overflow属性是无法得到省略号效果的。要想实现文本溢出时就显示省略号效果，我们还需要结合white-space和overflow这两个属性来实现，下面是完整的语法：

    1. {
    2.   overflow:hidden;
    3.   white-space:nowrap;
    4.   text-overflow:ellipsis;
    5. }

    word-warp 文本换行

    在CSS3中，我们可以使用word-wrap或word-break来定义长单词或URL地址是否换行到下一行。
    一般情况下，我们只会用到word-wrap:break-word;或word-break:break-all；这两个来实现强制换行。

    1. {
    2.   word-wrap:break-word;
    3.   word-break:break-all;
    4. }

    @font-face加载字体

    在CSS3中，我们可以使用@font-face方法来加载服务器端的字体，从而使得所有用户的电脑都能正常显示该字体。

    1. @font-face
    2. {
    3.   font-family: 字体名称;
    4.   src:url(文件路径);
    5. }

  • 相关阅读:
    10000字！图解机器学习特征工程
    通过Python设置及读取PDF属性，轻松管理PDF文档
    stable diffusion本地部署教程
    Kotlin File.reader BufferedReader readLine
    Arcgis 定义投影、投影变换、导出栅格为tif、矢量转tif
    Excel打开第二个文件很慢的解决方法
    Git报错：git@github.com: Permission denied (publickey)
    FRED应用：激光二极管光源耦合到光纤的仿真
    nginx 反向代理 与缓存功能
    用python gdal裁剪栅格数据提取添加xy经纬度和栅格值
  • 原文地址：https://blog.csdn.net/sinat_37138973/article/details/128032821