ソート一般的に使用されるタグをhtmlの

タグの構文

  1. タグ英語角かっこから<>このようなタグその囲まれました、。
  2. HTMLタグは、ペアで一般的に分裂開始タグ終了タグ開始タグより/終了タグの1以上。

以下のような:

(1)<p></p>

(2) <div></div>

(3) <span></span>

http://img.mukewang.com/528960dc0001cb6802710128.jpg

  1. ラベルにラベルをネストすることができますが、順序が一致していなければならない、など:
    内部にネスト

    それから

    配置する必要があります
    以前。図に示すように。

http://img.mukewang.com/5289611a0001469c05510206.jpg

  1. HTMLタグは大文字と小文字を区別し、されていない<h1><H1>同じですが、ほとんどのプログラマが優先小文字であるため、小文字を示唆しました。

htmlファイルの基本構造の理解

このセクションでは、htmlファイルの構造を学ぶ:HTMLファイルは、独自の固定構造を有しています。

<html>

​    <head>...</head>

​    <body>...</body>

</html>

説明するコード:

  1. <html></html>ルートタグとして知られている、すべてのページがあるラベル<html></html>に。
  2. <head>タグは、文書の頭を定義するために使用され、それはすべてのヘッド要素のコンテナです。ヘッド素子を有し<title><script><style><link><meta>及び他のラベルは、ラベルヘッドは、次のセクションで詳細に説明します。
  3. では<body></body>タグの間の内容は、次のような、ページのメインコンテンツである<h1><p><a><img>およびその他のWebコンテンツ・ラベル、内容がブラウザに表示されるラベル。

headタグを知っています

さて、見てみましょう<head>ラベルの役割を。文書の頭には、ように、本書のタイトルとを含む情報や文書のさまざまな属性を、説明しています。文書のヘッダに含まれるデータの大部分は、実際にコンテンツとして読者に表示されません。

次のラベルには、ヘッド部に使用できます。

<head>

​    <title>...</title>

    <meta>

​    <link>

    <style>...</style>
    <script>...</script>
</head>

<title>タグ:

では<title></title>タグの間のテキストは、タイトル情報ページでは、ブラウザのタイトルバーに表示されます。このページはページのタイトルで検索エンジンとは何であるページのタイトルタグの主な内容は、ユーザーと検索エンジンに伝え、すぐにページのトピックを判断します。各ページの内容が異なる場合、各ページには、ユニークなタイトルを持っている必要があります。
例えば:

<head>

​    <title>hello world</title>

</head>

以下に示すように、タグの内容は、「Hello World」のタイトルバーにあるであろうが、ブラウザに表示されます。

http://img.mukewang.com/5285fc8a0001d1da04100215.jpg

<head>他のラベルのコンテンツのラベルを説明し、我々は後の章で皆のためにそれを説明します。

HTMLコードのコメントを学びます

何がコードのコメントコメントコードの役割時間をかけて、プログラマはコードラベルを使用する際に役立つ、その後、あなたが書いたコードを見て、あなたはすぐにこのコードを使用することを考えることができます。コードのコメント前のコードを呼び出すために、プログラマを使用することは容易ではないだけでは、他のプログラマにもすばやくWebページのコードを開発するために人々を容易にするため、プログラムの機能を理解するのに役立ちます。

構文:

<!-- 注释文字   -->

あなたは、コメントコードが結果ウィンドウに表示されていないでしょう。

セマンティックは、より良いあなたのウェブサイトを作るには、検索エンジンによって理解されます

この章では、我々は一般的にラベルを導入するために使用されているWebページを開始したい、その学習プロセス、学習の二つの側面への主な注意を覚えておくことは、HTMLタグのこのセクションを勉強するとき:タグの使用を、ラベルブラウザのデフォルトスタイル。

ラベルを使用してください:私たちは、ウェブ制作を学ぶとき、多くの場合、言葉を聞いたセマンティック各ラベルの目的を理解するために(このラベルは、状況下で合理的である)、例えば、ページ上の記事:だからそれはセマンティクス何で、人気のポイントはこれであると述べたタイトルはあなたがタイトルタグを使用することができ、ページ上の各セクションの列名前はまた、タイトルタグを使用することができます。あなたは上の持っている段落の記事の内容段落タグは、あなたは記事のように強調のためのemタグを使用することができ、テキストを強調することがしたいと思います。

私たちは、そんなに意味的な話が、メリットの種類の意味は、それが私たちにもたらすことができますか?

  1. もっと簡単に検索エンジンでインデックス化。
  2. スクリーンリーダーのためのより簡単にページの内容を読み取ります。

後の章では、HTMLの各タグ(使用)の意味について学ぶために私たちをリードします。

<body>ここに表示されたラベル、ページのコンテンツ

それは、最後の章では、我々は簡単に導入された身体のラベルを忘れないでください:で来てページのページコンテンツはbodyタグに配置する必要があります。次の図は、Webニュース記事です。

http://img.mukewang.com/5286057e0001839310980564.jpg

ブラウザに表示します。

http://img.mukewang.com/5306aa4600015fb005760351.jpg

学習を開始<p>段落を追加し、ラベルを

ページ上の記事を表示したい場合は、する必要がある<p>にタグを付け、物品の段落<p>のラベル。

構文:

<p>段落文本</p>
 注意一段文字一个<p>标签,如在一篇新闻文章中有3段文字,就要把这3个段落分别放到**3**个<p>标签中。如下图所示。

http://img.mukewang.com/528606c50001a5d304830211.jpg

ブラウザに表示された効果:

http://img.mukewang.com/528606f000013fc405960399.jpg

<p>あなたがこれを好きではない場合は、デフォルトのスタイルタグは、あなたは、あなたが削除したり、それを変更するCSSスタイルを使用することができ、前のセクションの後に、空白、空白があるだろう、それは上の写真で見ることができます。

理解し<hx>、ラベルを自分のWebページのタイトルを追加

段落で記事<p>のタグ、それが何であるか、使用品のラベルの後、タイトル?このセクションでは、使用する<hx>にするためにラベルを記事のタイトルを

6個のタイトルタグ、H1、H2、H3、H4の合計 、H5、H6はタイトル、小見出し、3本のタイトル、タイトル4、5本のタイトル、6つのタイトルです。そして、漸減重要度に応じました。<h1>それは最高の評価です。

構文:

<hx>标题文本</hx><!-- (x为1-6) -->

すでに述べてきた記事のタイトルの前では、各ページに、他のタイトルタグを使用することができますセクションのタイトルもそれらを使用することができます。以下の画像は、テンセントのウェブサイトを示しています。

http://img.mukewang.com/528970a400010df312740572.jpg

注:H1タグは、Webページでより重要であるため、それは一般的にタグがサイト上で使用されているh1です。テンセントのウェブサイトには、そうすることです。以下のような:<h1>テンセント</h1>

デフォルトのスタイルH1-H6タグ:

ラベルコード:

http://img.mukewang.com/528970d80001e67f01720125.jpg

ブラウザではスタイルが表示されます。

http://img.mukewang.com/528970f4000143a405960399.jpg

上の写真から分かるように、大胆なスタイルのタイトルタグ、H1タグの最大フォントサイズになり、H1タグのサイズにh2が比較的小さいので、最小フォントサイズH6タグ。

強調追加音色、使用<strong>および<em>ラベル付け

あなたは段落内の特定の単語に重点をしたい場合がある段落のタイトルで、そして今、この時間はあなたが使用することができますまたはタグ。

しかし、二つは強調した口調で異なっている:<em>強調、<strong>より強く強調した表現。そして、ブラウザ内<em>でデフォルトで斜体、指示<strong>大胆な表現。2つのラベルと比較すると、現在のフロントエンドプログラマが使用することを好む<strong>強調のために。

構文:

<em>需要强调的文本</em>  

<strong>需要强调的文本</strong> 

たとえば、オンラインストアでは、強調される必要があり、製品の割引価格の後に。以下に。

http://img.mukewang.com/528b406b0001f06701720271.jpg

コードの実装:

http://img.mukewang.com/528b409a00015f1a02300097.jpg

ブラウザでは、デフォルトのスタイルは異なります。

オリジナルコード、下図のように。

http://img.mukewang.com/528b41a80001b81509760314.jpg

ブラウザの外観は、下図のように。

http://img.mukewang.com/528b41cf0001e8d306240377.jpg

<em>コンテンツは、ブラウザでのイタリック体で表示され、<strong>表示が太字です。あなたはこのスタイルが好きではない場合、それは、問題ではありません、あなたはそれを変更するCSSスタイルを使用することができます。

使用する<span>テキストに個々のスタイルを設定するラベルを

このセクションでは、説明<span>のラベルが、我々は<em><strong><span>3つのラベルを合計します:

  1. <em>そして、<strong>ラベルがすることです強調するその意味がされ、段落内のキーワードの使用を強調しました。
  2. <span>何の意味ラベルはありませんが、その役割は使用別々のスタイルを提供することです。

今、私たちが最初の段落の前のセクションにしたい場合は名前の単語「アメリカン・ドリーム」はブルー(青)に設定されますが、しないように注意を払うさ重視「アメリカンドリーム」を、単にそれのために異なるスタイル、およびその他のテキストを設定したいですこの場合には、使用することができますので、(私は、これらの3つの言葉を読み、アクセント、「アメリカンドリーム」でスクリーン・リーダーを望んでいない)<span>のラベルを。

次の例のように:

<p>1922年的春天,一个想要成名名叫<em>尼克•卡拉威</em>(托比•马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,<strong>股票</strong>飞涨的时代。为了追寻他的<span>美国梦</span>,他搬入纽约附近一海湾居住。</p>

構文:

<span>文本</span>

<q>ラベル、短いテキスト参照

私はそれであなたのhtmlでのいくつかの参照を追加したいと思いますか?たとえば、その後、詩ライターを参考に記事ページに考えるので、あなたの記事がより多くの色にする<q>ラベルは何が必要です。

構文:

<q>引用文本</q>

次の例のように:

<p>最初知道庄子,是从一首诗<q>庄生晓梦迷蝴蝶。望帝春心托杜鹃。</q>开始的。虽然当时不知道是什么意思,只是觉得诗句挺特别。后来才明白这个典故出自是庄子的《逍遥游》,《逍遥游》代表了庄子思想的最高境界,是对世俗社会的功名利禄及自己的舍弃。</p>

説明:

  1. 上記の例では、「Zhuangshengシャオファンは蝶の夢を見る。天皇王欲望ケアシャクナゲを。」これは後半唐の詩人李殷観音から詩、ある「ツィター。」それは、著者自身の言葉ではないので、必要とされた<q></q>参照を達成するために。
  2. 増加せずにテキストを引用するには注意してください、二重引用符、ブラウザが自動的にラベルqを二重引用符を追加します。

次の図は結果を示したコードです:

http://img.mukewang.com/528c0ab90001413905750340.jpg

使用に注意してください<q>代わりに、そのデフォルトスタイルの本当のキーポイントラベルを二重引用符(ので、我々はライン上のキーボード、二重引用符の独自の入力にも可能性がある場合)が、その意味を:引用他人

<blockquote>ラベル、長いテキスト参照**

<blockquote>役割は、テキストの他の人を引用しました。しかし、それは、長いテキストなどの記事の大部分のテキストのよく知られた作家の導入などの参考文献は、その後、ラベルを必要としています。

など、上の<q>テキスト上のラベルへの参照ではないでしょうか?ことを忘れてはいけない<q>ラベルである短いテキストの単語の参照を使用し、例えば、参照<q>ラベルを。

参照テキストが長いので、とても使い、私の記事の詩で「山を見て」、李白を引用します<blockquote>

構文

<blockquote>引用文本</blockquote>

次の例のように:

<blockquote>明月出天山,苍茫云海间。长风几万里,吹度玉门关。汉下白登道,胡窥青海湾。由来征战地,不见有人还。 戍客望边色,思归多苦颜。高楼当此夜,叹息未应闲。</blockquote>

するには、ブラウザ<blockquote>のタグを解析するには、あるインデントスタイル。下図のように:

http://img.mukewang.com/528c50ea000146a205520264.jpg

使用する<br>テキスト支店を表示するラベルを

前のセクションの例では、我々は、以下の結果として、いくつかは、表示さより美しい詩を表示します:

http://img.mukewang.com/5292e6ee00014d6406260408.jpg

どのように詩、それをラップを追加し、各1の後ろに得ることができますか?それはで使用することができ<br />、ラベル、および必要に応じ追加キャリッジリターン改行が追加され<br /><br />ワード文書などのラベルが働く入力します。

読むためのコードセクション:

http://img.mukewang.com/53ba39390001703403330194.jpg

構文:

XHTML1.0の書き込み:

<br />

HTML4.01の書き込み:

<br>

注意は、現在一般的文言(他のラベルである)、このバージョンかなり標準のXHTML1.0のバージョンを使用しています。

同じラベルではありません、我々が学んだ前に、<br />ラベルが空のタグで、何のHTMLタグがコンテンツのラベル、空白のラベルはちょうど開始タグを記述する必要がある、そのような標識の空ではない<br /><hr /><img />

このことについて話して、あなたは、疑問を持っているラインが良いの頭脳ではありません壊したく、ワード文書ファイルやメモ帳では、あなたがプレスの前で改行したいとまだライン上にない入力したのですか?残念ながら、それはHTMLで無視されるキャリッジリターンスペースあなたも現れなかった多くのキャリッジリターンとスペースを入力してください。エッジコードは次の通りです。

http://img.mukewang.com/5292ec400001f2f003370176.jpg

上記のコードは、効果を入力し、ブラウザに表示されません。下図のように:

http://img.mukewang.com/5292ec740001fdcd05810242.jpg

概要:では HTMLの 入力入力し、スペースコードは効果はありません。あなたは復帰改行を入力するHTMLテキストでは、あなたが入力する必要があります

<br />

おすすめ

転載: www.cnblogs.com/caoleiCoding/p/11366094.html