フロントエンド（すごい名前ですね）に触れてから1か月以上が経ち、たくさんのビデオやブログを見て、ある程度の感覚的な理解はできました。体系化するために学んだ知識をまとめます。 html タグから始めましょう。タグに関して最も話題になるのは、簡潔さと意味論です。シンプルとは、HTML タグがページ上のコンテンツに正しくラベルを付けることのみを担当し、CSS がコンテンツのすべてのプレゼンテーションを担当することを意味します。意味論化は問題にはなりません。人々の間のコミュニケーションに意味のある言語が必要であるのと同じように、HTML ドキュメントは人々がブラウザとコミュニケーションするための言語として当然意味があるからです。しかし、これに誰もが従うわけではありません (北京語の出現と同様に、地元の方言は同じ目的を達成できる場合もあり、人々は常に最も慣れている方法でそれを行うため、さまざまな場所で今でも人気があります）。簡潔な問題は CSS にまとめられています。次に、セマンティックな問題について説明します。
w3school には合計 117 個のタグがあり、そのうち 16 個は html5 でサポートされていないタグ、29 個は新しいタグ、72 個のタグは過去から継承されています。
今日は、これらの 72 個の「古い」タグを (意味論の私の理解に従って) 大まかに分類して、ステップごとに意味論的な分析を行っていきます。
4 つのフレーム タグ: 、,
ここの
タグは タグ内に存在する必要がありますが、これは私が述べた最初の部分に属しません。 タグ内にのみ含めることができる (ただし必須ではありません) または必須の 4 つのタグ: <title>、<meta>、<link> <p class="sycode"> <pre class='brush:php;toolbar:false;'>1 <!DOCTYPE>2 <html>3 <head>4 <title>标题</title>5 </head>6 <body>7 内容。。。8 </body>9 </html></pre> </p> 22 個のテキスト関連タグ:<abbr>、<b>、<bdo>、<blockquote>、<cite>、<code>、<dfn>、<del>、<em> 、<h1>-<h6>、<i>、<ins>、<p>、</p>
<pre class="brush:php;toolbar:false">、<q>、<small>、<smap><sub>、 <sup>、<span>、<strong>、<var> など、テキストに関連するタグの多くは、テキスト コンテンツが Web ページの最も重要な部分であるというメッセージも伝えます。 10 個のテーブル関連タグ: <caption>、</caption>
<col>、<colgroup>、<table>、<th>、</th>
<tr>、<td>、<thead>、</thead>
</td>
</tr>
<tbody> 、</tbody>
<tfoot>。 <p class="sycode"> <pre class='brush:php;toolbar:false;'>1 <head>2 <title>标题</title>3 <meta http-equiv="content-type" content="text/html; charset=utf-8">4 <base href="#" />5 <link rel="stylesheet" type="text/css" href="#" />6 </head></pre> </p> <p class="sycode"> <pre class='brush:php;toolbar:false;'><table> <caption>每月的存款</caption> <colgroup span="3"> <col span="1" style="background-color:red"> <col span="3" style="background-color:blue"> <tr> <th>月份</th> <th>一月</th> <th>二月</th> <th>三月</th> </tr> <tr> <td>存款</td> <td>1000元</td> <td>1000元</td> <td>1000元</td> </tr></table></pre> </p> <p> </p> 10 個のフォーム関連ラベル: <fieldset>、<legend>、<form>、<input>、<label>、<select>、<option>、、<menu>、<textarea>。 <p class="sycode"> </p>
<p class="sycode"> <pre class='brush:php;toolbar:false;'> 1 <table> 2 <thead> 3 <tr> 4 <td>THEAD 中的文本</td> 5 </tr> 6 </thead> 7 <tfoot> 8 <tr> 9 <td>TFOOT 中的文本</td>10 </tr>11 </tfoot>12 <tbody>13 <tr>14 <td>TBODY 中的文本</td> 15 </tr>16 </tbody>17 </table></pre> </p> コードを表示 <p> このフォームはテーブルによってレイアウトされています。これは、昔はよく使われた方法ですが、現在はほとんど使用されません。私が見る限り、これらはすべて定義リスト (</p>
<dl>
<dt></dt>
<dd>) と div タグを使用してレイアウトされており、上記のコードはインターネットから見つけたもので、タグの適用は非常に完成しています。ここで使用してください。 6 つのリスト関連タグ: <ol>、</ol>
<ul>、<li>、<dl>、<dt>、</dt>
<dd>。 <p class="sycode"> <pre class='brush:php;toolbar:false;'> 1 <form action="DoFormAction.htm"> 2 <fieldset style="width=800px"> <!--套住注册表格的边框--> 3 <legend>请输入如下的信息然后进行注册</legend> 4 <table cellspacing="0px" cellpadding="6px" border="1px" bordercolor="black" align="center" width="600px"> 5 <tr> 6 <td align="right">用户名:</td> <!--文本框--> 7 <td><input type="text" size="20" style="width:150px" /></td> 8 </tr> 9 <tr> 10 <td align="right">密码:</td> <!--密码框--> 11 <td><input type="password" size="20" style="width:150px" /></td> 12 </tr> 13 <tr> 14 <td align="right">确认密码:</td> 15 <td><input type="password" size="20" style="width:150px" /></td> 16 </tr> 17 <tr> 18 <td align="right">性别:</td> <!--单选框--> 19 <td> 20 <input type="radio" checked="checked" name="sex1" value="男" />男 21 <input type="radio" name="sex1" value="女" />女 22 </td> 23 </tr> 24 <tr> 25 <td align="right">性别(可以点文字选择):</td> 26 <td> 27 <fieldset style="width:150px"> <!--表单外框，也可以通过css设置宽度--> 28 <legend>请选择性别</legend> 29 <input type="radio" checked="checked" name="sex2" value="男" id="man" /> 30 <label for="man">男</label> 31 <input type="radio" name="sex2" value="女" id="woman" /> 32 <label for="woman">女</label> 33 </fieldset> 34 </td> 35 </tr> 36 <tr> 37 <td align="right">城市:</td> <!--下拉框--> 38 <td> 39 <select name="city"> 40 <option value="北京">北京</option> 41 <option value="深圳">深圳</option> 42 <option value="上海">上海</option> 43 <option value="南昌" selected="selected">南昌</option> <!--默认选择南昌--> 44 </select> 45 </td> 46 </tr> 47 <tr> 48 <td align="right">城市所在区域:</td> 49 <td> 50 <select name="area"> 51 <optgroup label="北京"> <!--下拉框分组显示--> 52 <option value="朝阳区">朝阳区</option> 53 <option value="海淀区">海淀区</option> 54 <option value="其他区">其他区</option> 55 </optgroup> 56 <optgroup label="南昌"> 57 <option value="东湖区">东湖区</option> 58 <option value="西湖区">西湖区</option> 59 <option value="青山湖区">青山湖区</option> 60 </optgroup> 61 </select> 62 </td> 63 </tr> 64 <tr> 65 <td align="right">交友目标:</td> 66 <td> 67 <select name="target" size="3" multiple="multiple"> <!--列表框--> 68 <option value="同行" selected="selected">同行</option> 69 <option value="普通朋友">普通朋友</option> 70 <option value="爱人">爱人</option> 71 </select> 72 </td> 73 </tr> 74 <tr> 75 <td align="right">爱好:</td> 76 <td> 77 <!--复选框,注意name属性设置一样，分组--> 78 <input type="checkbox" name="love" value="足球" />足球 79 <input type="checkbox" name="love" value="蓝球" />蓝球 80 <input type="checkbox" name="love" value="乒乓球" />乒乓球 81 </td> 82 </tr> 83 <tr> 84 <td align="right">照片上传:</td> 85 <td> 86 <!--文件选择框--> 87 <input type="file" name="myPic" /> 88 </td> 89 </tr> 90 <tr> 91 <td align="right">自我介绍:</td> 92 <td> 93 <!--多行文本框--> 94 <textarea rows="5" cols="50"> 95 </textarea> 96 </td> 97 </tr> 98 <tr> 99 <td align="center" colspan="2">100 <input type="submit" value="确定" />101 <input type="reset" value="清空" /> 102 <input type="image" src="../images/btnreg.png" onclick="alert('hello')" /> <!--演示图片按钮(会提交数据，类似submit)103 -->104 </td>105 </tr>106 </table>107 </fieldset>108 </form></pre> </p> <p> </p> 3 つの画像関連タグ: <img alt="フロントエンド初心者のためのメモ -- はじめての HTML タグ入門_html/css_WEB-ITnose" >、<map>、<area>。 <p class="sycode"> すごい </p> <p> </p> 5 つの導入タグ: <style>、<script>、<noscript>、<object><param>。 <style> -- スタイル シートを HTML ドキュメントに導入し、<script> と <noscript> は HTML ドキュメントにスクリプトを導入し、<object> と <param> はマルチメディア オブジェクトの導入を定義し、それらのパラメータを設定します。 <p> 2 つのコンテナ タグ: <div>、<iframe>。前者は、ページ全体に表示するコンテンツを複数の「ブロック」に分割し、CSSスタイルシートで各部分のスタイルを設定できるようにします。後者は、画面上に複数のページを表示できます。最も一般的なアプリケーションは、画面上のブロックの内容が変更されても、他の部分は変更されないことです。 <p> 10. 残りの 6 つの個別のタグ: コメント用の <br />、行の分割用の <a>ボタン>定義ボタン、<アドレス>アドレスラベル。 <p> これは「古い」タグのまとめです。今後、いくつかの重要でよく使用されるタグがまとめられます。 <p> </style></map>
</dd>
</dl>
</li>
</ul>
</dd>
</dl></textarea>
</menu>
</option></select></label>
</form>
</legend>
</fieldset>
</tfoot>
</table>
</colgroup></var></strong></span></sup></sub></smap></small></q></pre></ins></i>
</h6>
</h1></em></del></dfn></code></cite>
</blockquote></bdo></b></abbr>
HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM
HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM
HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM
HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM
HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AM
CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は？Apr 05, 2025 pm 01:24 PM
オンラインコードエディターはコード入力を実装するためにどのようなHTML要素を使用していますか？Apr 05, 2025 pm 01:21 PM
