ユーザープロファイルのマイクロフォーマット

テストページを作成しました。猫の下に私の行動の説明があります。

注意！ 説明を読んですぐに説明を追加しますので、新しい段落が表示されても驚かないでください。

新しい行は新しい行を開始するのは残念ではありません

そのため、「Habr」はブロックで構成されていました。マイクロフォーマットを導入する大きな理由。同時に、処理するコードをクリーンアップします。数日前に私を訪ねたのはそのような考えでした。プロファイルページをダウンロードし、ローカルコンピューターで動作するように調整し（画像ファイル、スタイルなどへのパスを修正）、戦場の検査に進みました。

新しいプロファイル

自分で作成したものではないサイトコードを編集する前に、その特徴的な機能を調べておくとよいでしょう。そのため、現在のバージョンのhaberuserページの内部を見ると、次のことがわかります。

ページはブロック形式です（良い、しかし良い）
DOCTYPE'omにはコンプライアンスモード標準が含まれています（必要なもの）
デフォルトでは、要素とマージンは無効化されません（ご自身でリセットする必要があります）
コードはスペースで場所を熱く打たれているため、重く、読みにくくなっています。

ヘッダー、メニューなどをスクロールする class = "userinfo"でブロックの内容を調べ始めました-ユーザーに関する情報を含むのは彼です。私は彼に追加のクラスvcardを割り当てます。これは、ブロックにhCardマイクロフォーマットが含まれていることを示します。

<div class="userinfo vcard ">

ユーザーに関する情報の一部は、この種の典型的な構造内に含まれています。

<div class="userinfo_line"> 
      

        
        
        
      

     <div class="left"></div> 
      

        
        
        
      

     <div class="right"><span class="username"> </span></div> 
      

        
        
        
      

     </div>

私はそれをよりコンパクトに、より意味的に行う方法を知っています。定義のリストを使用し、すぐにコンテキストに応じた適切なマイクロフォーマットクラスでそれらを飽和させ始めます。タグビートタブを実行します。そのため、より視覚的で、高速で、軽量です。

例では、知覚を妨げるすべてのサービス情報（主にURL）を削除し、省略記号（...）に置き換えました。

<dl class=" fn n "> 
      

        
        
        
      

     <dt> </dt> 
      

        
        
        
      

     <dd class="username"><span class=" given-name "></span> <span class=" family-name "></span></dd> 
      

        
        
        
      

     </dl>

このコードは、内部に個人の名前と姓に関する情報が含まれていることを示しています。

さらに進みます。生年月日に関する情報について説明します。

<dl> 
      

        
        
        
      

     <dt> :</dt> 
      

        
        
        
      

     <dd class=" bday " title="1982-01-26" >26  1982</dd> 
      

        
        
        
      

     </dl>

写真へのリンクについて説明します。

<dl> 
      

        
        
        
      

     <dt>:</dt> 
      

        
        
        
      

     <dd><img class="photo" src="…" width="136" height="144" alt="" title="" border="0"></dd> 
      

        
        
        
      

     </dl>

次は、ユーザーの位置情報の順番です。

<dt>:</dt> 
      

        
        
        
      

     <dd><a class="country-name" href="…"></a>, 
      

        
        
        
      

     <a class="region" href="…"> .</a></dd> 
      

        
        
        
      

     </dl> 
      

        
        
        
      

     
      

        
        
        
      

        ,        : 
      

        
        
        
      

     <dl> 
      

        
        
        
      

     <dt> :</dt> 
      

        
        
        
      

     <dd class= "summary" >  , </dd> 
      

        
        
        
      

     </dl> 
      

        
        
        
      

    
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

     .   IT-  ?    ,    "url"      rel   "me" —    ,      ,    . ..      .    —   ,   XFN,    hCard. 
      

        
        
        
      

     
      

        
        
        
      

     <dl> 
      

        
        
        
      

     <dt>:</dt> 
      

        
        
        
      

     <dd class= "url" ><a class="icon" rel="me" href="http://webmascon.com/" target="_blank">Webmascon</a></dd> 
      

        
        
        
      

     </dl>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

       .

All Articles

ユーザープロファイルのマイクロフォーマット

新しい行は新しい行を開始するのは残念ではありません

新しいプロファイル

More articles: