デイリーものがたり(2019年12月12日)

トピックの概要

  • 使用方法のHTML5のオフラインストレージファイルには、何の作品?
  • CSSセレクタは何?どのような属性を継承することができますか?
  • アンダースコアキャメルケースに国立成功大学という名前のメソッドを書きます

答えの対象

どのような作品の使用方法のHTML5のオフラインストレージファイル

  • 使用

    • ページヘッダの追加manifestプロパティを

      <!DOCTYPE HTML>
      <html manifest = "cache.manifest">
      ...
      </html>
    • cache.manifestファイル

      CACHE MANIFEST
      #v0.11
      CACHE: 
      //表示需要离线存储的资源列表,由于包含manifest文件的页面将被自动离线存储,所以不需要把页面自身也列出来
      js/app.js
      css/style.css
      
      NETWORK:
      //表示在它下面列出来的资源只有在在线的情况下才能访问,他们不会被离线存储,所以在离线情况下无法使用这些资源。不过,如果在CACHE和NETWORK中有一个相同的资源,那么这个资源还是会被离线存储,也就是说CACHE的优先级更高
      resourse/logo.png
      
      FALLBACK:
      //表示如果访问第一个资源失败,那么就使用第二个资源来替换他,比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了,那么就去访问offline.html
      / /offline.html
  • 原則

    • オンラインの場合は、ブラウザのHTMLヘッドがマニフェストの属性を発見した、それは最初の訪問アプリであれば、それは、ブラウザがオフラインストレージに対応するリソースコンテンツマニフェストファイルとダウンロードに基づいて行われます、マニフェストファイルを要求します。アプリを訪問したとオフライン資源が格納されている場合は、ブラウザがオフラインで、ブラウザは、ファイルが変更されていない場合は、何もしない、新しいマニフェストファイルマニフェストファイルで古いものを比較するリソースページの読み込みを使用します。ファイルが変更されている場合は、ファイルリソースとオフラインストレージを再ダウンロードします。オフラインブラウザの場合は、直接オフラインストレージリソースを使用して

    • サーバーのオフラインリソースが更新された場合は、マニフェストファイルを更新せずにリソースを更新する場合にのみ、再ダウンロードしたブラウザであるためには、マニフェストファイルにこれらのリソースを更新する必要があり、ブラウザはそれはまだある、リソース・ダウンロードの再はありませんオリジナルのオフラインストレージリソースを使用して

    • あなたがマニフェストファイルに更新されていること場合があるので、時にマニフェストファイルのキャッシングについては非常に慎重になりますが、HTTPキャッシュルールは、ブラウザのローカルキャッシュマニフェストファイルに指示する必要が、ブラウザまたはこの例の使用を満了していませんそれが最善であるように、元のマニフェストファイルは、キャッシュマニフェストファイルを設定していません

    • 何らかの理由でリソースがダウンロードに失敗した場合の時間のマニフェストファイルでダウンロードリソースへのブラウザ、それはすべての更新が、これは失敗であったとしても、すべてのリソースをダウンロードすると、ブラウザはまだ元のリソースを使用します

    • 必要なリソースをただちに有効にすることができた場合、あなたが使用できるリソース、あなたがアプリを開く次の時間を有効にするに必要な新しいリソースを更新した後、window.applicationCache.swapCache()その効果的な方法にする理由は、このような現象は、ブラウザが最初にオフラインで使用するということですあなたがページを開く次の時間を有効にする必要があるので、ページをロードして、マニフェストの更新のチェックを行ってリソース

      //对于HTML5中离线存储对象window.applicationCache
      1.oncached:当离线资源存储完成之后触发这个事件
      2.onchecking:当浏览器对离线存储资源进行更新检查的时候会触发这个事件
      3.ondownloading:当浏览器开始下载离线资源的时候会触发这个事件
      4.onprogress:当浏览器在下载每一个资源的时候会触发这个事件,每下载一个资源就会触发一次。
      5.onupdateready:当浏览器对离线资源更新完成之后会触发这个事件
      6.onnoupdate:当浏览器检查更新之后发现没有资源更新的时候触发这个事件

CSSセレクタは何?どのような属性を継承することができますか?

  • セレクタ

    セレクタ 記述の例 CSS
    。クラス .intro すべての要素「イントロ」を選択したクラス=。 1
    #ID #ファーストネーム すべての要素=「FIRSTNAME」IDを選択します。 1
    * * すべての要素を選択します。 2
    素子 P すべての要素を選択します。 1
    要素、要素 DIV、P すべての要素とすべての要素を選択します。 1
    要素要素 DIV P 内部要素のすべての要素を選択します。 1
    要素>要素 div>のP 親要素の要素のすべての要素を選択します。 2
    要素+要素 DIV + P すぐに要素を以下のすべての要素を選択します。 2
    [属性] [ターゲット] ターゲット属性を持つすべての要素を選択します。 2
    [属性=値] [ターゲット= _blank] すべての要素でターゲット=「_空白」を選択します。 2
    [属性〜=値] [タイトル〜=花] title属性を選択すると、単語のすべての要素の「花」が含まれています。 2
    [属性| =値] [ラング| = 1] プロパティ値の先頭の「en」LANGするために、すべての要素を選択します。 2
    :リンク リンク アクセスされていないすべてのリンクを選択します。 1
    :訪問 A:訪問 訪問されているすべてのリンクを選択します。 1
    :アクティブ A:アクティブ アクティブリンクを選択します。 1
    :ホバー :ホバー マウスポインタが上にあるリンクを選択します。 1
    :フォーカス 入力:フォーカス input要素を選択してフォーカスを持っています。 2
    :最初の一文字 P:最初の文字 各要素の最初の文字を選択します。 1
    :最初の行 P:最初の行 各要素の最初の行を選択します。 1
    :第一子 P:第一子 親要素の最初の子要素に属する各要素を選択します。 2
    :前 P:前 各要素の内容の前にコンテンツを挿入します。 2
    :後 P:後 各元素の含有量の後にコンテンツを挿入します。 2
    :LANG(言語) P:LANG(それ) 初めにlang属性値「それ」との各要素を選択します。 2
    要素1〜要素2 P〜UL 各以前に選択された要素を持っています。 3
    [属性^ =値] [SRC ^ = "HTTPS"] 各要素の先頭にそのsrc属性値「HTTPS」を選択します。 3
    [属性$ =値] [SRC $ = "PDF"] 「PDFファイル」のすべての要素の最後にそのsrc属性を選択します。 3
    [属性* =値] [SRC * = "ABC"] どの部分文字列内の各要素のsrc属性「ABC」を選択することを含みます。 3
    :第一の型 P:第一の型 最初の要素の親要素に属する各要素を選択します。 3
    :最後の型 P:最後の型 最後の要素の親要素に属する各要素を選択します。 3
    :のみ-の型 P:のみ-の型 各要素は、その親要素の唯一の要素を選択するために属します。 3
    :一人っ子 P:のみ、子 独自のサブ要素が親要素に属する各要素を選択します。 3
    :n番目の子(N) P:n番目の子(2) 第2のサブ要素に属する親要素の各要素を選択します。 3
    :n番目の最後-子(N) P:n番目の-最後の子(2) 同上。、最後の子要素のカウントから開始します。 3
    :n番目の型(N) P:n番目の型(2) 親要素の2番目の要素に属する各要素を選択します。 3
    :第n-最後の型(N) P:第n-最後の式(2) 以上のように、しかし最後の子要素のカウントから始まります。 3
    :最後の子 P:最後に、子 各要素の最後の子要素に属する親要素を選択します。 3
    :ルート :ルート 文書のルート要素を選択します。 3
    :空の P:空 各要素を選択すると(テキストノードを含む)は、サブ要素を有していません。 3
    :ターゲット ニュース:ターゲット 現在の活動の#news要素を選択します。 3
    :enabled input:enabled 选择每个启用的 元素。 3
    :disabled input:disabled 选择每个禁用的 元素 3
    :checked input:checked 选择每个被选中的 元素。 3
    :not(selector) :not(p) 选择非元素的每个元素。 3
    ::selection ::selection 选择被用户选取的元素部分。 3
  • 可以继承的属性

    • 字体系列属性:

      属性 描述
      font 组合字体
      font-family 规定元素的字体系列
      font-weight 设置字体的粗细
      font-size 设置字体的尺寸
      font-style 定义字体的风格
      font-variant 设置小型大写字母的字体显示文本
      font-stretch 允许你使文字变宽或变窄。所有主流浏览器都不支持
      font-size-adjust 为某个元素规定一个 aspect 值
    • 文本系列属性

      属性 描述
      text-indent 文本缩进
      text-align 文本水平对齐
      line-height 行高
      word-spacing 增加或减少单词间的空白(即字间隔)
      letter-spacing 增加或减少字符间的空白(字符间距)
      text-transform 控制文本大小写
      direction 规定文本的书写方向
      color 文本颜色
    • 元素可见性:visibility

    • 表格布局属性:caption-side、border-collapse、border-spacing、 empty-cells、table-layout

    • 列表属性:list-style-type、list-style-image、list-style-position、list-style

    • 生成内容属性:quotes

    • 光标属性:cursor

    • 页面样式属性:page、page-break-inside、windows、orphans

    • 声音样式属性:speak、speak-punctuation、speak-numeral、speak-header、 speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

写一个方法把下划线命名转成大驼峰命名

//方式一:转为数组操作
function toCamelCase(str) {
    if (typeof str !== 'string') {
        return str;
    }
    return str.split('_').map(item => item.charAt(0).toUpperCase() + item.substr(1, item.length)).join('');
}
//方式二:正则匹配
function toCamelCase(str) {
    str = str.replace(/(\w)/, (match, $1) => `${$1.toUpperCase()}`)
    while (str.match(/\w_\w/)) {
        str = str.replace(/(\w)(_)(\w)/, (match, $1, $2, $3) => `${$1}${$3.toUpperCase()}`)
    }
    return str
}

おすすめ

転載: www.cnblogs.com/EricZLin/p/12032373.html