HTML5、ネイティブフロントウォーク道を振り返ります。

はじめに:様々な高度な制御ライブラリの様々なフレームワークを学んでいるので、より多くの疲れを感じます。三銃士自体フロントエンド(HTML、CSS、JAVASCRIPT)習得があまりにも熟練していません。私はそれが最も原始的なウェブコードを書くために、元に行く時間だと思います。

まず、セマンティック要素の構成ページ

次のようにHTML5でページに関連した最も一般的に使用されるセマンティック要素が構成されています。

ページ構造は、関連するセマンティックな要素をしたいです
要素 説明
<記事> これは、ニュース報道、フォーラムの投稿や(コメントや、著者は含まない)のブログ記事に類似している任意の物品の形などコンテンツのブロックを分離することができますを表し、
<余談> それは完全なブロックがページのメインコンテンツとは独立して表しています。たとえば、<余談>と
<フィギュア>和<figcaption> 彼はイラストを表します。ここで、<figcaption>要素マーク図キャプション(タイトル図)、及び<図>標識要素<figcaption>と<IMG>要素の画像を挿入します。目標は、絵や図のキャプションとの間のリンクを反映しています
<フッタ> これは、ページの下部にフッターを表します。著作権表示の小型サイズ、シンプルなリンクを含むコンテンツの通常小片、
<ヘッダ> タイトルの表現を強化、タイトルは、HTMLやその他のコンテンツが含まれていてもよいです。その他のコンテンツは記号、著作者または内容をバック指しナビゲーションリンクの集合とすることができます
<ナビゲーション> これは、リンクの重要な集合を表します。リンクは、現在のページのテーマを指すことが、あなたはまた、サイト上の他のページを指すことができます。実際には、ページは通常、複数の<ナビゲーション>が含まれています
<セクション> ブロック文書の表現、またはドキュメントのセットを表します。
<メイン> これは、ページの主な内容を表しています。たとえば、あなたが使用することができます。<メイン> <記事> header要素、孤立サイト、フッター、サイドバーが含まれています。この要素は、新しいHTML5です

 

第二に、より意味のあるマークを書きます

テキストの意味的要素の理解の三つの新しいレベル:

1. <時間>時刻と日付のスタンプ

//示例
パーティが始まり、< 時間> 2014年3月21日</ 時間>

2. <出力>戻り値は、JavaScriptを表します

//示例
 < P >あなたのBMI:< 出力のid = "結果" > </ 出力> </ P >

3. <マーク>ハイライトテキスト注釈

<マーク>要素は、テキストを標識するために使用され、このテキストが強調表示されます。他の人々の内容を引用し、あなたが注目を集めるしたいときは、<マーク>要素を使用することができます。

第三に、より良いフォームを作成

1.概要フォーム

  一般的に、フォームと呼ばれる、テキストボックス、リスト、ボタンなどのコントロールのセットは、小さなをクリックすることができ、これらすべての防犯機器を通じて特定の情報サイトの訪問者を集めることです。

  すべての作品は、ユーザーが情報を入力し、ボタンをクリックし、基本的な形に似ています。この場合、ブラウザは、ユーザーが入力した情報を収集し、それをサーバーに送信します。サーバーでは、情報を処理し、次の何をすべきかを決定する責任ソフトウェアプログラムがあります。このプログラムのサービス側がデータベースに連絡することがあり、それが読み取ることができるデータはブラウザに新しいページを送信した後、データを書き込むことができます。

  注:ないどんなに過程が似ているどのような方法、つまり、フォームデータをチェックし、いくつかのデータ処理;し、新しいページを送り返します。

2.HTML5検証の原則

理論的根拠:基本原理あなたがそのフィールドを検証するために、ブラウザに指示するためにそのHTML5フォーム検証です。

2つの場所での検証(2不可欠)

  1.クライアント側の検証:訪問者のための主要な利便性。

  2.認証サーバ:データの正確性を確保します。

正規表現を使用した:いわゆる正規表現を、それが正規表現書かれた言語でテキストモードです。一般的に、検索および検証に使用されます。

新しい入力コントロール:

HTMLフォームは、奇妙なアプローチを持っている、すなわち、複数のコントロールを作成するための要素と(<入力>曖昧と呼ばれる):ボックス、テキストボックス、およびボタンをチェック。この場合、メインスイッチのタイププロパティが実になります。

E-mailアドレス:

< 入力タイプ= "メール" > </ 入力>

URL:

< 入力タイプ= "URL" > </ 入力>

検索ボックス:

< 入力タイプ= "serach" > </ 入力>

電話番号:

< 入力タイプ= "TEL" > </ 入力>

値:

< 入力タイプ= "番号" > </ 入力>

スライダー:

< 入力タイプ= "範囲" > </ 入力>

日付と時刻:

< 入力タイプ= "日付" > </ 入力>

 

おすすめ

転載: www.cnblogs.com/zlforever-young/p/11563540.html
おすすめ