検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >フロントエンド初心者のためのメモ -- はじめての HTML タグ入門_html/css_WEB-ITnose

フロントエンド初心者のためのメモ -- はじめての HTML タグ入門_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 12:34:211642ブラウズ

フロントエンド（すごい名前ですね）に触れてから1か月以上が経ち、たくさんのビデオやブログを見て、ある程度の感覚的な理解はできました。体系化するために学んだ知識をまとめます。 html タグから始めましょう。タグに関して最も話題になるのは、簡潔さと意味論です。シンプルとは、HTML タグがページ上のコンテンツに正しくラベルを付けることのみを担当し、CSS がコンテンツのすべてのプレゼンテーションを担当することを意味します。意味論化は問題にはなりません。人々の間のコミュニケーションに意味のある言語が必要であるのと同じように、HTML ドキュメントは人々がブラウザとコミュニケーションするための言語として当然意味があるからです。しかし、これに誰もが従うわけではありません (北京語の出現と同様に、地元の方言は同じ目的を達成できる場合もあり、人々は常に最も慣れている方法でそれを行うため、さまざまな場所で今でも人気があります）。簡潔な問題は CSS にまとめられています。次に、セマンティックな問題について説明します。

w3school には合計 117 個のタグがあり、そのうち 16 個は html5 でサポートされていないタグ、29 個は新しいタグ、72 個のタグは過去から継承されています。

今日は、これらの 72 個の「古い」タグを (意味論の私の理解に従って) 大まかに分類して、ステップごとに意味論的な分析を行っていきます。

4 つのフレーム タグ: 1a309583e26acea4f04ca31122d8c535、4ad5802c3f79f7c845b48c2ec33b688a,6c04bd5ca3fcae76e30b72ad730ca86d

ここの b2386ffb911b14667cb8f0f91ea547a7 タグは 93f0f5c25f18dab9d176bd4f6de5d30e タグ内に存在する必要がありますが、これは私が述べた最初の部分に属しません。

93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 タグ内にのみ含めることができる (ただし必須ではありません) または必須の 4 つのタグ: b2386ffb911b14667cb8f0f91ea547a7、e8e496c15ba93d81f6ea4fe5f55a2244、2cdf5bf648cf2f33323966d7f58a7f3f 

1 <!DOCTYPE>2 <html>3        <head>4            <title>标题</title>5        </head>6        <body>7               内容。。。8        </body>9 </html>

22 個のテキスト関連タグ:、、、
、、、<dfn>、<del>、<em> 、<h1>-<h6>、<i>、<ins>、<p>、</p> <pre class="brush:php;toolbar:false">、&lt;q&gt;、&lt;small&gt;、&lt;smap&gt;&lt;sub&gt;、 2cdea26b4c3988e37d674b56660962a7、45a2772a6b6107b401db3c9b82c049c2、8e99a69fbe029cd4e2b854e244eab143、b7f90f73cad438258bf67e62f79b2113 など、テキストに関連するタグの多くは、テキスト コンテンツが Web ページの最も重要な部分であるというメッセージも伝えます。 10 個のテーブル関連タグ: &lt;caption&gt;、&lt;/caption&gt; &lt;col&gt;、&lt;colgroup&gt;、&lt;table&gt;、&lt;th&gt;、&lt;/th&gt; &lt;tr&gt;、&lt;td&gt;、&lt;thead&gt;、&lt;/thead&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tbody&gt; 、06669983c3badb677f993a8c29d18845。 &lt;p class=&quot;sycode&quot;&gt; &lt;pre class=&quot;sycode&quot; name=&quot;code&quot;&gt;1 &lt;head&gt;2 &lt;title&gt;标题&lt;/title&gt;3 &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;4 &lt;base href=&quot;#&quot; /&gt;5 &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;#&quot; /&gt;6 &lt;/head&gt;</pre> </p> <p class="sycode"> <pre class="sycode" name="code">&lt;table&gt; &lt;caption&gt;每月的存款&lt;/caption&gt; &lt;colgroup span=&quot;3&quot;&gt; &lt;col span=&quot;1&quot; style=&quot;background-color:red&quot;&gt; &lt;col span=&quot;3&quot; style=&quot;background-color:blue&quot;&gt; &lt;tr&gt; &lt;th&gt;月份&lt;/th&gt; &lt;th&gt;一月&lt;/th&gt; &lt;th&gt;二月&lt;/th&gt; &lt;th&gt;三月&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;存款&lt;/td&gt; &lt;td&gt;1000元&lt;/td&gt; &lt;td&gt;1000元&lt;/td&gt; &lt;td&gt;1000元&lt;/td&gt; &lt;/tr&gt;&lt;/table&gt;</pre> </p> <p> </p> 10 個のフォーム関連ラベル: 92a029b6737bfe5568c27bda5095457273de882deff7a050a357292d0a1fca9467bc4f89d416b0b8236eaa5f43dee742) と div タグを使用してレイアウトされており、上記のコードはインターネットから見つけたもので、タグの適用は非常に完成しています。ここで使用してください。 6 つのリスト関連タグ: c34106e0b4e09414b63b2ea253ff83d6、ff6d136ddc5fdfeffaf53ff6ee95f185、25edfb22a4f469ecb59f1190150159c6、5c69336ffbc20d23018e48b396cdd57a、73de882deff7a050a357292d0a1fca94、67bc4f89d416b0b8236eaa5f43dee742。 <p class="sycode"> <pre class="sycode" name="code"> 1 &lt;form action=&quot;DoFormAction.htm&quot;&gt; 2 &lt;fieldset style=&quot;width=800px&quot;&gt; &lt;!--套住注册表格的边框--&gt; 3 &lt;legend&gt;请输入如下的信息然后进行注册&lt;/legend&gt; 4 &lt;table cellspacing=&quot;0px&quot; cellpadding=&quot;6px&quot; border=&quot;1px&quot; bordercolor=&quot;black&quot; align=&quot;center&quot; width=&quot;600px&quot;&gt; 5 &lt;tr&gt; 6 &lt;td align=&quot;right&quot;&gt;用户名:&lt;/td&gt; &lt;!--文本框--&gt; 7 &lt;td&gt;&lt;input type=&quot;text&quot; size=&quot;20&quot; style=&quot;width:150px&quot; /&gt;&lt;/td&gt; 8 &lt;/tr&gt; 9 &lt;tr&gt; 10 &lt;td align=&quot;right&quot;&gt;密码:&lt;/td&gt; &lt;!--密码框--&gt; 11 &lt;td&gt;&lt;input type=&quot;password&quot; size=&quot;20&quot; style=&quot;width:150px&quot; /&gt;&lt;/td&gt; 12 &lt;/tr&gt; 13 &lt;tr&gt; 14 &lt;td align=&quot;right&quot;&gt;确认密码:&lt;/td&gt; 15 &lt;td&gt;&lt;input type=&quot;password&quot; size=&quot;20&quot; style=&quot;width:150px&quot; /&gt;&lt;/td&gt; 16 &lt;/tr&gt; 17 &lt;tr&gt; 18 &lt;td align=&quot;right&quot;&gt;性别:&lt;/td&gt; &lt;!--单选框--&gt; 19 &lt;td&gt; 20 &lt;input type=&quot;radio&quot; checked=&quot;checked&quot; name=&quot;sex1&quot; value=&quot;男&quot; /&gt;男 21 &lt;input type=&quot;radio&quot; name=&quot;sex1&quot; value=&quot;女&quot; /&gt;女 22 &lt;/td&gt; 23 &lt;/tr&gt; 24 &lt;tr&gt; 25 &lt;td align=&quot;right&quot;&gt;性别(可以点文字选择):&lt;/td&gt; 26 &lt;td&gt; 27 &lt;fieldset style=&quot;width:150px&quot;&gt; &lt;!--表单外框，也可以通过css设置宽度--&gt; 28 &lt;legend&gt;请选择性别&lt;/legend&gt; 29 &lt;input type=&quot;radio&quot; checked=&quot;checked&quot; name=&quot;sex2&quot; value=&quot;男&quot; id=&quot;man&quot; /&gt; 30 &lt;label for=&quot;man&quot;&gt;男&lt;/label&gt; 31 &lt;input type=&quot;radio&quot; name=&quot;sex2&quot; value=&quot;女&quot; id=&quot;woman&quot; /&gt; 32 &lt;label for=&quot;woman&quot;&gt;女&lt;/label&gt; 33 &lt;/fieldset&gt; 34 &lt;/td&gt; 35 &lt;/tr&gt; 36 &lt;tr&gt; 37 &lt;td align=&quot;right&quot;&gt;城市:&lt;/td&gt; &lt;!--下拉框--&gt; 38 &lt;td&gt; 39 &lt;select name=&quot;city&quot;&gt; 40 &lt;option value=&quot;北京&quot;&gt;北京&lt;/option&gt; 41 &lt;option value=&quot;深圳&quot;&gt;深圳&lt;/option&gt; 42 &lt;option value=&quot;上海&quot;&gt;上海&lt;/option&gt; 43 &lt;option value=&quot;南昌&quot; selected=&quot;selected&quot;&gt;南昌&lt;/option&gt; &lt;!--默认选择南昌--&gt; 44 &lt;/select&gt; 45 &lt;/td&gt; 46 &lt;/tr&gt; 47 &lt;tr&gt; 48 &lt;td align=&quot;right&quot;&gt;城市所在区域:&lt;/td&gt; 49 &lt;td&gt; 50 &lt;select name=&quot;area&quot;&gt; 51 &lt;optgroup label=&quot;北京&quot;&gt; &lt;!--下拉框分组显示--&gt; 52 &lt;option value=&quot;朝阳区&quot;&gt;朝阳区&lt;/option&gt; 53 &lt;option value=&quot;海淀区&quot;&gt;海淀区&lt;/option&gt; 54 &lt;option value=&quot;其他区&quot;&gt;其他区&lt;/option&gt; 55 &lt;/optgroup&gt; 56 &lt;optgroup label=&quot;南昌&quot;&gt; 57 &lt;option value=&quot;东湖区&quot;&gt;东湖区&lt;/option&gt; 58 &lt;option value=&quot;西湖区&quot;&gt;西湖区&lt;/option&gt; 59 &lt;option value=&quot;青山湖区&quot;&gt;青山湖区&lt;/option&gt; 60 &lt;/optgroup&gt; 61 &lt;/select&gt; 62 &lt;/td&gt; 63 &lt;/tr&gt; 64 &lt;tr&gt; 65 &lt;td align=&quot;right&quot;&gt;交友目标:&lt;/td&gt; 66 &lt;td&gt; 67 &lt;select name=&quot;target&quot; size=&quot;3&quot; multiple=&quot;multiple&quot;&gt; &lt;!--列表框--&gt; 68 &lt;option value=&quot;同行&quot; selected=&quot;selected&quot;&gt;同行&lt;/option&gt; 69 &lt;option value=&quot;普通朋友&quot;&gt;普通朋友&lt;/option&gt; 70 &lt;option value=&quot;爱人&quot;&gt;爱人&lt;/option&gt; 71 &lt;/select&gt; 72 &lt;/td&gt; 73 &lt;/tr&gt; 74 &lt;tr&gt; 75 &lt;td align=&quot;right&quot;&gt;爱好:&lt;/td&gt; 76 &lt;td&gt; 77 &lt;!--复选框,注意name属性设置一样，分组--&gt; 78 &lt;input type=&quot;checkbox&quot; name=&quot;love&quot; value=&quot;足球&quot; /&gt;足球 79 &lt;input type=&quot;checkbox&quot; name=&quot;love&quot; value=&quot;蓝球&quot; /&gt;蓝球 80 &lt;input type=&quot;checkbox&quot; name=&quot;love&quot; value=&quot;乒乓球&quot; /&gt;乒乓球 81 &lt;/td&gt; 82 &lt;/tr&gt; 83 &lt;tr&gt; 84 &lt;td align=&quot;right&quot;&gt;照片上传:&lt;/td&gt; 85 &lt;td&gt; 86 &lt;!--文件选择框--&gt; 87 &lt;input type=&quot;file&quot; name=&quot;myPic&quot; /&gt; 88 &lt;/td&gt; 89 &lt;/tr&gt; 90 &lt;tr&gt; 91 &lt;td align=&quot;right&quot;&gt;自我介绍:&lt;/td&gt; 92 &lt;td&gt; 93 &lt;!--多行文本框--&gt; 94 &lt;textarea rows=&quot;5&quot; cols=&quot;50&quot;&gt; 95 &lt;/textarea&gt; 96 &lt;/td&gt; 97 &lt;/tr&gt; 98 &lt;tr&gt; 99 &lt;td align=&quot;center&quot; colspan=&quot;2&quot;&gt;100 &lt;input type=&quot;submit&quot; value=&quot;确定&quot; /&gt;101 &lt;input type=&quot;reset&quot; value=&quot;清空&quot; /&gt; 102 &lt;input type=&quot;image&quot; src=&quot;../images/btnreg.png&quot; onclick=&quot;alert('hello')&quot; /&gt; &lt;!--演示图片按钮(会提交数据，类似submit)103 --&gt;104 &lt;/td&gt;105 &lt;/tr&gt;106 &lt;/table&gt;107 &lt;/fieldset&gt;108 &lt;/form&gt;</pre> </p> <p> </p> 3 つの画像関連タグ: a1f02c36ba31691bcfe87b2722de723b、dab9f699790ab0922e596ecb9f6677d5、03fc64e1e502d5ba947b3a9af06d2d2a。 <p class="sycode"> すごい </p> <p> </p> 5 つの導入タグ: c9ccee2e6ea535a969eb3f532ad9fe89、3f1c4e4b6b16bbbd69b2ee476dc4f83a、2b0b25ff593c5b6c03403dd6234ffb2c、273238ce9338fbb04bee6997e5552b950c68fef83818661b6da588c77ca3985e。 c9ccee2e6ea535a969eb3f532ad9fe89 -- スタイル シートを HTML ドキュメントに導入し、3f1c4e4b6b16bbbd69b2ee476dc4f83a と 2b0b25ff593c5b6c03403dd6234ffb2c は HTML ドキュメントにスクリプトを導入し、273238ce9338fbb04bee6997e5552b95 と 0c68fef83818661b6da588c77ca3985e はマルチメディア オブジェクトの導入を定義し、それらのパラメータを設定します。 <p> 2 つのコンテナ タグ: dc6dce4a544fdca2df29d5ac0ea9906b、d5ba1642137c3f32f4f4493ae923989c。前者は、ページ全体に表示するコンテンツを複数の「ブロック」に分割し、CSSスタイルシートで各部分のスタイルを設定できるようにします。後者は、画面上に複数のページを表示できます。最も一般的なアプリケーションは、画面上のブロックの内容が変更されても、他の部分は変更されないことです。 </p> <p> 10. 残りの 6 つの個別のタグ: コメント用の df250b2156c434f3390392d09b1c9563、行の分割用の 3499910bf9dac5ae3c52d5ede7383485ボタン>定義ボタン、db1bd5ff939b092036182a1f2f3c6846アドレスラベル。 </p> <p> これは「古い」タグのまとめです。今後、いくつかの重要でよく使用されるタグがまとめられます。 </p> <p> </p> </tbody> </table> </colgroup></sub></smap></small></q></pre></ins></i> </h6> </h1></em></del></dfn>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTMLメモ(7) form_html/css_WEB-ITnose次の記事：HTMLメモ(7) form_html/css_WEB-ITnose

関連記事

続きを見る