ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML初心者向け共通タグ(1) テキストtag_html/css_WEB-ITnose
HTML初心者向け共通タグ(1) テキストtag_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:27:171187ブラウズ
最近、iOS 開発の過程で、開発者としてすべての問題を克服するという原則に基づいて、JS とネイティブ OC (Swift) の間の対話が含まれることに気づき、HTML を学習し始めました。将来の復習を容易にするため、および初心者向けの参考として、ここに勉強メモを置きます。
HTML は、私がこれまでに学んださまざまなオブジェクト指向言語や関数型言語とは異なり、明確な文脈論理を持ちません。他の言語とは異なります。この文章があなたを他の言語の学習の影から遠ざけてくれることを願っています
。 1.
HTML は Web コンテンツのキャリアですコンテンツは Web ページの作成です ユーザーが閲覧するために作成者がページに置く情報には、テキスト、写真、ビデオなどが含まれます 2.
CSS スタイルはパフォーマンスWeb ページのコートのようなものです。たとえば、タイトルのフォント、色の変更、背景画像、境界線などを追加します。これらはすべて、コンテンツの外観を変更するために使用されます。 3.
JavaScript は Web ページに特殊効果を実装するために使用されます。例: マウスがその上をスライドするとドロップダウン メニューがポップアップします。または、マウスがその上をスライドするとドロップダウン メニューがポップアップします。テーブルの変更 (ニュース写真) のローテーションもあります。 アニメーションとインタラクションは一般に JavaScript を使用して実装されていることがわかります。 HTML を初めて使用する場合。 , 私が触れたい最初の専門用語は、タグまたはセマンティクスのいずれかです。平たく言えば、セマンティクスの意味は、各タグの目的 (さまざまなタグ、それらがどのような状況で使用されるか、およびそれらの使用方法) を理解することです。 Web ページ上の記事のタイトル、Web ページに反映させたいグラフ、列名、段落など、これらはセマンティクスとして考慮する必要があるものです) はすべてタグによって実現されます。 . 基本的なタグと CSS を追加することで、非常に美しいページを作成できます。
セマンティクスの利点:1. 検索エンジンによってインデックスされやすくなります
2. スクリーン リーダーが Web ページのコンテンツを読みやすくなります。 .
2. 最も簡単なプログラムから説明する HTML をダウンロードする
C、Java、OC などを学習しているかどうかにかかわらず、プログラマーとしては誰もが最初に書くべきだと思います。 print 関数がありますが、HTML には関数がありません。HTML はテキストエディタと同様に、適切なタグを追加することでテキストを希望どおりに配置できるため、以下の印刷関数はありません。将来的にはそれを持ってください) ).
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>我的第一个网页</title> 6 </head> 7 <body> 8 <h1>Hello World</h1> 9 </body>10 </html>
上記はHTMLのHello Worldです
このコードの簡単な紹介
まず、コードから、ほとんどのタグがペアで表示されていることがわかります、タグと終了タグに分かれており、終了タグには、上記の 100db36a723c770d327fc0aef2ce13b1 や 73a6ac4ed44ffec12cee46588e518a5e のように、「/」が 1 つ多く含まれていることがわかります。コードは相互にネストして埋め込むことができますが、交差することはできません。100db36a723c770d327fc0aef2ce13b1 には多くのタグのペアがネストされていますが、相互に交差するタグはありません。 73a6ac4ed44ffec12cee46588e518a5e これは問題ありませんが、100db36a723c770d327fc0aef2ce13b16c04bd5ca3fcae76e30b72ad730ca86d73a6ac4ed44ffec12cee46588e518a5e36cc49f0c466276486e50c850b7e4956 はルートタグと呼ばれます。 Web ページのタグは 100db36a723c770d327fc0aef2ce13b173a6ac4ed44ffec12cee46588e518a5e にあります。
93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 タグはドキュメントの先頭を定義するために使用されます。ドキュメントの先頭には、ドキュメントのさまざまな属性と情報が記述されます。ドキュメントのタイトルを含む待機。ほとんどのドキュメントのヘッダーに含まれるデータは、実際にはコンテンツとして読者に表示されません。ヘッダー タグには、タイトル タグ b2386ffb911b14667cb8f0f91ea547a7、JavaScript インライン タグ 3f1c4e4b6b16bbbd69b2ee476dc4f83a、および CSS スタイルが含まれます。 c9ccee2e6ea535a969eb3f532ad9fe89 タグ、2cdf5bf648cf2f33323966d7f58a7f3f、e8e496c15ba93d81f6ea4fe5f55a2244 などのタグは、b2386ffb911b14667cb8f0f91ea547a7 内に
で順次導入されます。 ; および b25a9407cfe693f10872c2a72988c045 タグ間のテキスト コンテンツは、ブラウザのタイトル バーに表示される Web ページのタイトル情報です。Web ページの title タグは、読者や検索エンジンに内容を伝えるために使用されます。 Web ページのメインコンテンツは、Web ページにタグを付けることで、Web ページの本文が異なり、Web ページごとに固有のタイトルが必要になります。 Web ページのインターフェースに表示されるコンテンツであり、一般的なコンテンツ タグには、階層型タイトル タグ ec79fc78cf54608bf98b440367ec5433、3499910bf9dac5ae3c52d5ede7383485 などがあります。 tags< ;img> など。これらのタグの内容は Web ページに直接反映されます。
4a249f0d628e2318394fd9b75b4636b1473f0a7621bec819994bb5020d29372a标题标签, 网页中有很多的标题, 比如这篇博客的2, 从最简单的程序解释下HTML就是一个标题, 而标题也有着不同的大小尺寸, HTML中定义了标题的标签分别为4a249f0d628e2318394fd9b75b4636b1到4e9ee319e0fa4abc21ff286eeb145ecc, 他们会默认加粗, 然后逐级减小字体.
3, 其他的标签
e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3段落标签, 在文章中, 我们需要条理清晰的一个一个段落, 这个时候我们就需要段落标签了, 默认样式中e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3前后都会有空白, 但是并不是我们正常使用中的首行缩进, 它通常不会让我们满意, 所以我们需要用css样式(c9ccee2e6ea535a969eb3f532ad9fe89标签)来删除或者改变它.
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title> <p>标签</title> 6 </head> 7 <body> 8 <p>我的第一个段落.</p> 9 <p>我的第二个段落.</p>10 <style>11 p{12 color:#940;13 }14 </style>15 </body>16 </html> 8e99a69fbe029cd4e2b854e244eab143和907fae80ddef53131f3292ee4f81644b强调标签, 这两个标签用于强调网页中文本的特定词语或者段落, 但是两者在语气上有区别, 8e99a69fbe029cd4e2b854e244eab143更假强烈, 表现形式会是使用粗体, 而907fae80ddef53131f3292ee4f81644b会是斜体.
45a2772a6b6107b401db3c9b82c049c2标签, 45a2772a6b6107b401db3c9b82c049c2标签是没有任何语义的, 大家也许会想, 那它有何作用, 但是正是因为没有语义, 才体现了它的强大之处, 也就是自定义, 它标签内的文本配合上css或者是JS能够高度的进行特定文本的自定义, 这在以后的学习中可以称之为最重要的标签之一.
1244aa79a84dea840d8e55c52dc97869短引用文本标签, 这个标签比较冷门, 当你在引用某名人名言等时候, 会用到的标签, 浏览器会对你引用的文字自动加双引号, 所以你并不需要自己为之加双引号.
b8a712a75cab9a5aded02f74998372b4长引用文本标签, 这个和上面的标签使用同理, 但是适用于长的段落性引用, 在实际效果中会是缩进的, 单独段落的引用效果, 并不会增加双引号.
208700f394e4cf40a7aa505373e0130b地址标签, 可以定义一个地址, 可以是邮箱, 签名, 或者是文档的作者身份. 标签中的文字在浏览器上的样式默认为斜体, 使用css样式表可以自定义.
ffbe95d20f3893062224282accb13e8f代码标签, 在一些技术网站, 比如我们的博客论坛网站, 需要展示一行代码的时候, 就会用到code标签. 但是多行代码的时候就不可以了.
e03b848252eb9375d56be284e690e873代码段标签, 在需要插入大段的代码时, 需要使用e03b848252eb9375d56be284e690e873标签, 它可以将我们代码中的回车, 缩进等完整的体现出来, 避免了HTML不识别多空格和回车的问题.
空标签(单一标签, 不存在开始结束标签)
df250b2156c434f3390392d09b1c9563换行标签, 在HTML中是不识别多空格(可以识别单个空格作为一个文本形式)和换行的, 所有的文本都会是连续的, 所以有了段落标签e388a4556c0f65e1904146cc1a846bee, 空格 df250b2156c434f3390392d09b1c9563在HTML中也就是等价于ASCII中的" \n ".
231a563c997aa9e3e0ae614bd16728b0水平横线标签, 在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。
使用这些标签就可以完成一些简单的文本文档类的网站编辑了.