フロントエンドのインタビューのために不可欠 - （一万語）記事では、HTML5とCSS3の基礎と応用開発を理解して取り

ファイル

著者| Jesksonの
ソース|ダダフロントエンドビストロ

HTML5とCSS3の基本の開発とは、新機能の詳細な説明を適用し、HTML5の要素、CSS3の新機能、新しい追加オプション、新しいレイアウト、ボックスモデル、テキスト、ボーダー、勾配、変形、アニメーションなどを追加します。HTML5の導入、共通の要素と属性、フォーム関連要素や属性、新しく追加されたCSS3セレクター、CSS3の新しいプロパティ。

HTML5、今主流のブラウザ、および基本的な文法を学びます。

XHTMLはXMLドキュメント必見のHTML形式であるため、HTMLはXHTMLと比較しているため、代わりにHTMLのXHTMLを使用したいW3C HTML5を、使用する前に、XHTMLが必要とされる厳しい、より準拠したHTMLコードは、XML文書があり、あります構造化文書。

XML文書と唯一のルート要素で、文書内の要素は、開始タグと終了タグであり構成されている必要があり、単一のラベルに加えて、それは「空の要素構文、ラベルの使用、属性値の絶対必要」との間のクロスではありません引用符。

書類の準備が仕様XHTMに従って作成HTML文書に書かれていますが、原因これらの非標準的なページの数が多いために、インターネット上に存在するように、非標準の多くは、ありますので、その時のHTML文書では、その新しいHTML標準がHTML5ですが存在します。

HTML5では実際には、それほど厳しい要件が、その書き込みの仕様への強い需要にプログラマーとして。

HTML4とHTML5の違い

HTML4とHTML5の違い

文字エンコーディングの変更：

HTML4：

<meta http-equiv="content-type" content="text/html;charset=utf-8">

HTML5：

<meta charset="utf-8">

HTML5の構文は、HTML5文書に書かれた非標準のHTML文書の様々な、と互換性が現れることです時々厳しい標準のXMLドキュメントは、しかし、まだ強く自分の書き込み仕様を促すようにすることはできません。

HTML5、特定の要素は終了タグを省略することができ、そしていくつかの要素が完全に開始タグと終了タグを省略することができ、どの要素の終了タグは絶対にありません、ラベルは標準の属性値属性の一部を省略することができ、もはや、大文字と小文字が区別されません。

クロスブラウザ、クロスプラットフォームの問題を解決することができますHTML5の利点は、ほとんどのブラウザはフロントエンドの開発者のための市場をサポートしてサポートし、開発
HTML + CSS + JavaScriptは、強化されたWebアプリケーションがより便利になります。

ファイル

HTML5の共通の要素と属性

HTML5は、新しく追加された共通の要素、共通の性質を予約し、共通の要素は、それが要素と属性を放棄してきました。

HTML5の主な共通要素は予約しました：

HTMLのコメントは、注釈がブラウザに表示されていない、コードは他の開発者はコードの特定の内容を理解するために解釈することができます。

HTMLは、HTML5のルート要素であるブラウザ自体がHTML文書で通知します。

ヘッダHTML5ページ文書、メインベース、リンク、メタ、スクリプト、styple、headタグ内のタイトルを定義するためのヘッド部。

タイトルは、文書のタイトルページを定義します。

スタイル定義のスタイルは、文書を導入しました。

文書の定義のためのメタメタ情報。

ベースアドレスが文書で定義されているデフォルトではすべてのリンクまたはデフォルトの宛先と規定しました。

ボディは、文書のページのトピックセクションを定義するために使用されます。

H1〜H6のタイトルを定義します。

pは通路を定義するために使用されます。

水平線を挿入するための時間。

改行を挿入するためのBR。

DIVは、文書のパーティションまたはセクション、ブロックレベル要素を定義するために使用されます。

スパンとdivが同様に、要素が折り返されません。

テキストの書式設定の要素

B太字テキストは太字、小さな定義するために使用される小さなテキストフォントを定義するための、強力なを定義するために使用され、EMは、テキストを強調するために使用、私は定義するためのイタリック体、定義のためのサブ添字テキスト、SUPを定義するために使用されます上付き文字。

アドレスは、ブロック引用BLOCKQUOTEを定義するために使用されるアドレスを定義するために使用され、qは短い参照を定義するために使用される、略称の略語略語略語を定義するために使用される、テキストのコードを定義するために使用されるコンピュータコード、AUFは、引用することを示すために使用されていますデルは、テキスト、テキストを定義するためにドキュメントに挿入イン、定義するKBDテキストキーボード、定義するプリフォーマットテキストを事前に、サンプルテキストを定義するために使用SAMPを削除する文書を定義するために使用される、引用文献、VaRは、変数を定義するために使用されます。

ハイパーリンクとアンカー

HTML5ジャムハイパーリンクは、1ページから別のにジャンプするために使用されるラベル要素は、タグのhrefのための重要な属性は、それがターゲットへのリンクです。

HTML4.01では、要素は、ハイパーリンク、またはアンカーであってもよいですが、何のhref属性が存在しない場合はHTML5で、ハイパーリンク要素が、それは、ハイパーリンクのためだけのプレースホルダです。

HTML5は、ダウンロードやメディアへの2つの新しいプロパティを、導入されています。

ダウンロードの要素は、ターゲットURL指定されたメディアであり、むしろそれにナビゲートするよりも、ダウンロードURLにブラウザに指示なぜメディアまたはデバイスの進化のタイプ。

<a href="http.."></a>
<a href="" download="">点击下载</a>

リスト要素

順不同リストULを定義するために使用され、順序付きリストを定義するために使用オール、Liは項目のリストを定義するために使用され、DLサブ要素のリストを定義したDLは、2つの種類のddを有するために使用されます。dtはタイトルのリストを定義するために使用される用語であり、ddは定義リストの項目を定義するために使用されます。

表要素

テーブルは、タイトルを定義するためのキャプションテーブル、テーブルを定義するために使用され、TRは、テーブルの行を定義するために使用され、Tdが番目のセルを定義するため、細胞を定義するために使用番目およびTDの2種類を規定するためのサブ要素がテーブルでありますヘッダー。

td要素では二つの属性で構成されていますCOLSPAN ROWSPAN属性と属性がどのように多くの列のセル間で、多くの行にまたがるセルを示しています。

TBODYテーブルは本体を定義するために使用され、子供が、THEADテーブルヘッダを定義するため、子供がフッタを定義するための二つ目とTD、TFOOTテーブルを有し、TH及びTDの2種類があり、子供は二種類目およびTDを有します。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>HTML5</title>
 </head>
 <body>
  <table border="1">
   <thead>
    <tr>
     <th>da</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>da</td>
    </tr>
   </tbody>
   <tfoot>
    <tr>
     <td>da</td>
    </tr>
   </tfoot>
  </table>
 </body>
</html>

COLGROUPテーブル列の定義された列または複数の属性値のためのCOLテーブルがフォーマットされるように組み合わせること。

マークが強調表示されたテキストを定義するために使用される、情報、24時間の時間システムを標識する日付や時刻を表示するための時間は、日時属性は、この要素の時刻と日付が示し、日付と時刻を示すpubtimeドキュメントのリリース日の時間要素であります。

文書構造要素は、ヘッダは、文書またはセクション、HTML5新しい構造ヘッダ、フッタを除き、物品はさておき、文書の定義の範囲内にあるの定義については、文書またはセクションヘッダー、フッターフッターを定義するために使用しましたエリアドキュメントのセクションを定義する、タイトルを説明するためfigcaption、又はfigcaptionと共に使用ページ定義部分のNAVナビゲーションリンク、基準期間を規定するための独立図は、参照それに関連する、等で表されますこれは、コードの可読性を向上させることです。

<figure>
 <figcaption></figcaption>
</figures>

メータは、カウンタの既知の最大値と最小値を表す、フォームの一つ以上の形式指定された要素は、メータ、値計要素は、現在の値、指定された最小の分計要素、最大最大メータ要素を指定、低指定属しメータ要素指定された最小の指定された範囲、高い最大計要素指定された範囲、最適メータ素子指定最適値。

進行状況がプログレスバー、賃金の最大指定されたタスクの合計金額、タスクが完了している指定した値の量を表しています。

マルチメディア要素

オーディオカスタムオーディオ、ビデオ、カスタム動画

<audio src="" controls="controls"></audio>

パスのsrcの曲を設定するには

再生コントロールを使用するかどうかを設定するコントロール

<video src="" controls="controls"></video>

SRCは、ビデオパスを提供しています

再生コントロールを使用するかどうかを設定するコントロール

共通プロパティ

HTML要素を一意に識別するためのID、CSSスタイルスタイルはHTML要素を指定し、コンテンツの配置の方向を設定するためのクラス、クラスCSSスタイルセレクタ、DIR要素を一致させるため、二つの属性のRTLとLTRがあります。

キー属性：

表示されたときに隠し属性は、属性値がtrueで、隠された属性の値がfalseの場合、表示される：どれも隠されていない=「true」に等しいです

スペルチェック属性セットのスペルチェック=「true」を、入力チェックを実行するユーザーのブラウザが入力したテキストは、チェックが渡されていない、ブラウザがスペルミスの単語を促すメッセージが表示されます。

フォーム関連要素と属性

フォーム要素は、入力フォームを生成するために、アクションはアドレスに送信され、この方法は、フォームの内容を符号化するために使用される文字セットを指定するには、属性値やポスト、ENCTYPEを、要求の種類フォームを送信取得するために使用しました：

application/x-www-form-urlencoded
默认编码方式

multipart/form-data

text/plain

名前だけの名前がフォームを定義するために使用され、ターゲットは、ターゲットURL、プロパティ値_blank、_self、_top 1を開くためにどの方法を定義するために使用されます。

フォームコントロール：

type="text"单行文本输入框
type="password"密码输入框
type="hidden"隐藏域
type="radio"单选框
type="checkbox"复选框
type="file"文本域
type="image"图像域
type="submit"提交按钮
type="reset"重置按钮
type="button"按钮

<body>
 <form action="" method="post">
  <label for="username">用户名：</label>
  <input id="username" type="text"/><br/>
  <label>密码：
  <input type="password"/>
  </label>
  <br/>
 </form>
</body>

選択し、オプション、OPTGROUPドロップダウンリストボックス

サイズのショーどのように多くのリスト項目は、要素が、同時に複数の選択肢は、プロパティOPTGROUP、ラベルグループを選択するオプションにラベルを付ける許可するかどうかを複数の表示を選択します。

// button
<body>
 <form action="" method="post">
  <button type="submit">提交</button><br/>
  <button type="reset">重置</button><br/>
  <button type="button"><img src=""></button>
 </form>
</body>

テキストエリアフォームコントロール

TEXTAREA属性：テキストフィールドの幅を表すために使用されるCOLSは、読み取り専用読み取るためのテキストフィールドの高さを表現するための行は、テキストだけのフィールドことを示しています。

<body>
 <form action="" method="get">
  <input type="color" name="color" id="" value="#ff000"/><br/>
  <input type="submit" id="" name="" />
 </form>
</body>

<body>
 <form action="" method="get">
  <input type="time" name="time" id="" value=""/><br/>
  <input type="submit" id="" name=""/>
 </form>
</body>

<body>
 <form action="" method="get">
  <input type="data" name="date" id="" value="" max="205-02-01" min="2019-03-03"/>
  <br/>
  <input type="submit" id="" name=""/>
 </form>
</body>

<body>
 <form action="" method="get">
  <input type="month" name="month" id="" value="" min="1002-02" max="2303-23"/>
  <br/>
  <input type="submit" id="" name="" />
 </form>
</body>

<body>
 <form action="" method="get">
  <input type="week" name="week" id="" value="" min="2322-W01"
  max="3444-w12"/>
  <br/>
  <input type="submit" id="" name="" />
 </form>
</body>

<body>
 <form action="" method="get">
  <input type="email" name="email" id="" value="" multiple="multiple"/>
  <br/>
  <input type="submit" id="" name=""/>
 </form>
</body>

<body>
 <form action="" method="get">
  <input type="number" name="number" id="" value="" max="100" min="0" step="10"/>
  <br/>
  <input type="submit" id="" name="" />
 </form>
</body>

レンジタイプは、ドラッグバーを生成します。

<body>
 <form action="" method="get">
  <input type="range" name="range" id="" value="" max="100" min="0" step="10"/>
  <br/>
  <input type="submit" id="" name=""/>
 </form>
</body>

<body>
 <form action="" method="get">
  <input type="search"/>
  <input type="submit" id="" name="" />
 </form>
</body>

TELの種類は、テキストボックスの電話番号を入力することができます

<body>
 <form action="" method="get">
  <input type="tel" name="tel">
 </form>
</body>

// url类型，如果输入框中不是url格式，会提示用户
<body>
 <form action="" method="get">
  <input type="url" name="url">
  <input type="submit" id="" name="" />
 </form>
</body>

ログインユーザリスト

<body>
 <form id="login" action="" method="get">
  <label for="username">
  用户名：
  </label>
  <input id="username" type="text" name="username"/>
 </form>
 <label>密码：
 <input from="login" type="password" name="password"/>
 </label>
 <br/>
 <input form="login" type="submit"/>
</body>

帳票フォーム、アクション性、他の特性formaction、方法formmethod特性及び属性、特性、及びENCTYPEのformenctype特性、および特性formtargetターゲットプロパティ。

<body>
 <form id="login" action="" method="get">
  <label for="username"></label>
  <input id="username" type="text" name="username" placeholder="请输入用户名"/>
  <br/>
  <label><input type="password" name="password" autofocus="autofocus" placeholder="请输入密码"/>
  </label>
  <br/>
  <input type="submit" formaction="login"/>
  <button type="submit" formaction="regist">注册</button>
  <br/>
 </form>
</body>

<body>
 <form id="login" action="login"  method="get">
  <label for="username"></label>
  <input id="username" type="text" name="username" palceholder="请输入用户名"/>
  <br/>
  <label><input type="password" name="password" autofocus="autofocus" placeholder="请输入密码"/>
  </label>
  <br/>
  <input type="submit" formmethod="get"/>
  <input type="submit" formmethod="post"/>
 </form>
</body>

迅速なエントリーフォームのオートコンプリート属性は、ブラウザのオートコンプリート機能を提供します。値がオンになっているオートコンプリートHTML5デフォルトでは、それはオフにすることが必要な場合があるときに、属性値を入力してくださいオートコンプリート=「オフ」。

自動的にオートフォーカス属性取得フォーカス、パターン属性は、反対の形態がNOVALIDATE特性、入力値が前の提出に満たされなければならない必要な属性を指定し送信されるときに検証されていないフォームの入力内容を確認するために使用されます。

<body>
 <form action="" method="get">
  <textarea name="text" rows="5" cols="5" wrap="hard">
  </textarea>
  <input type="submit" id="" name=""/>
 </form>
</body>

テキストエリア内の文字の所定の最大数をMAXLENGTH、
ワープソフトのデフォルト値、フォームが送信されたときに、現在のTextAreaの中国では、ラップしていない
フォームの送信時に提出されたテキストの折り返し=「ハード」は、改行が含まれている場合、

CSS3セレクター

兄弟セレクタ、2つの新しい属性セレクタ、3新しい擬似クラスセレクタ、4つの新しい擬似要素セレクタ。

兄弟セレクター：

格式：

元素1~元素2 

{ property1: value1; property2: value2 }

E[attribute^=value] 
选择带有以指定开头的属性值的元素

E[attribute$=value]
选择带有以指定结尾的属性值的元素

E[attribute*=value]
选择属性值中包含值的元素，位置不限，不限制整个单词

疑似クラスセレクタ

:root 选择文档的根元素
向元素添加样式
:last-child 该元素是它的父元素的最后一个子元素
:nth-child(n) 该元素是它的父元素的第n个子元素
:nth-last-child(n) 该元素是它的父元素的倒数第n个子元素
:noly-child 该元素是它的父元素的唯一子元素
:first-of-type 该元素是同级同类型元素中第一个元素
:last-of-type 该元素是同级同类型元素中最后一个元素
:nth-last-of-type(n)该元素是同级同类型元素中倒数第n个元素
:only-of-type 该元素hi同级同类型元素中唯一的元素
:empty 向没有子元素的元素添加样式

新しいCSS3の属性：

background-clip 设置背景覆盖范围
border-box/padding-box/content-box
border-box背景显示区域到边框
padding-box背景显示区域到内边距框
content-box背景显示区域到内容框

background-origin 设置背景覆盖的起点
border-box/padding-box/content-box
border-box:背景起点在边框的左上角
padding-box:背景起点在内边距框的左上角
content-box:背景起点在内容框的左上角

background-size 设置背景的大小
cover/contain

text-overflow
设置当文本溢出元素框时的处理方式
clip/ellipsis
clip：裁剪文本内容
ellipsis：显示省略号

word-break
自动换行的方式
normal/break-all/keep-all

word-wrap
单词的换行方式
normal/break-word

ボックスモデル

border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

角丸

ボックスシャドウの影

h-shadow
阴影的水平方向偏移的距离

v-shadow
阴影的垂直方向偏移的距离

blur
模糊的半径距离

spread
阴影的额外增加的尺寸

color
阴影的颜色

inset
切换为内部阴影

輪郭の輪郭オフセット性は、セットオフセット輪郭を増加させることができます

変形特性、変換、変換、原点

3D変形特性、特性変換。

回転X：X軸に沿った回転要素を表し
回転Yを、Y軸に沿った回転要素を示し
回転Zが：回転、Z軸に沿ったプレゼンテーションエレメント

効果は、3D空間での表示のためのサブ要素入れ子集合様式の変換、デフォルト値が平坦である、保存-3D、視点、遠近効果を提供バック要素は、一般的に配向するとき、画面を設定するための背面視認性が表示されユーザーを設定するための回転要素の背中を見たいと思っていません。

カラムカウント
の列の数は、要素によって分離されなければなりません

列幅の
列幅を設定します

列
1列幅と列の数を設定する声明

カラムギャップ
列の配置間隔

列スパン
素子の両端の列の数べき

コラム・ルールスタイル
スタイルに列間の間隔

カラムルール色
列の間隔の色を設定します

コラム・ルール幅の
列間のスペースの幅を設定します

コラム・ルールの
列を設定するためのステートメントのすべてのプロパティの間の間隔

❤️[コメントのように収集ポイント]を学ぶあなたの足跡を残すことを忘れないでください

情報を著者：

[著者]：Jeskson

いいえ公共ん[元]：ダダフロントエンドビストロ。

[予約]説明：ソースを明記してください、ありがとう再現！〜

フロントエンドに関与している記事の現在の内容にあなたが従うことが興味を持っている場合、PHPの知識は、非常に光栄、あなたが本当に何を英国の識別見つけることができます！また、静かに私を支援して期待して、数日中にご清聴ありがとうございました、私はより良い作品を書くことを試みます。私たちは一緒に成長、ジュニアパートナーにゼロベースのプログラミング、ユーザーフレンドリーなフロントエンドWebプレゼンテーションエリア、データ構造とアルゴリズム、ネットワーク理論などから学びます。共有Webフロントエンド関連の技術資料、ツール、リソース、コース選択、ホットな情報。

ローカルコンテンツのこの数はビットを取得しない場合（例：著作権やその他の問題に）、タイムリーにすることができ整流のための私達に連絡し、最初の時間に処理されますしてください。

親指アップしてください！あなたが同意しているので/励ましは、私の文章の最大の力です！

ようこそ注意ダダさんCSDN！

これは、品質、態度のブログです