自分が正しいと思うことではなく、顧客の要求を満たすために自分がやりたいことをやらなければなりません。
1. 基本タグ
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Html和CSS的关系</title> <style type="text/css"> h1{ font-size：12px; color:#930; text-align:center; } </style> </head> <body> <h1>Hello World!</h1> </body></html>例えば、オンラインモールでは、商品の割引価格を強調する必要があります。以下に示すように。
コード実装:
タグにはセマンティクスはなく、その機能は別個のスタイルを設定することです。
試してみましょう: 「American Dream」を青に設定します
1. 右側のエディタの 13 行目の「American Dream」テキストに タグを追加します。
2. 8行目に color:blue; と入力して、要素の文字色を青に設定します。
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>了不起的盖茨比</title> 6 <style> 7 span{ 8 color:blue; 9 }10 </style>11 </head>12 <body>13 <p>1922年的春天，一个想要成名名叫尼克•卡拉威（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道<span>美国梦</span>，他搬入纽约附近一海湾居住。</p>14 <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>15 </body>16 </html> たとえば、詩を引用する場合は二重引用符を使用し、Web ページでは を使用しますが、これは自動的に二重引用符として認識されます。前のセクションのタグもテキストへの参照ではありませんか?たとえば、 タグは
への参照であることを忘れないでください。記事内で李白の『関山越』の詩を引用したいと思います。本文が長いため、 & lt; Blockquote & gt; を使用します。
注: blackquote ではなく blockquote、ブラウザはindent スタイルを使用して <blockquote> タグを解析します。
インデントされているのでダブルクォーテーションを付ける必要はありません。
1.5 Line Break例えば、Yishou Quatrainでは、最初の3行の後に
1.6 割線
1.7 address
1.8 コードタグ
1.9 list
<ul> <li></li></ul>//有序<ol> <li></li></ol>
2. Divの応用
2.1 table
まとめの内容はブラウザでは表示されません。その機能は、表の可読性 (意味化) を高め、検索エンジンが表の内容をよりよく理解できるようにすること、また、スクリーン リーダーが特別なユーザーが表の内容を読みやすくできるようにすることです。
文法: <表概要="表紹介文">
1.
概要を右エディタの表に追加します。概要の内容は 「この表は 2012 年からの在庫を記録します。」 2013 年までの記録 (USB フラッシュ ドライブやヘッドフォンの在庫を含む)。
2. タイトルを右側のエディタのテーブルに追加します。タイトルの内容は、「2012年から2013年までの在庫記録」です。
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>认识table表标签</title> 6 <style type="text/css"> 7 table tr td,th{ 8 border:1px solid #000; 9 }10 </style>11 </head>12 <body>13 <table summary="本表格记录2012年到2013年库存记录，记录包括U盘和耳机库存量">14 <caption>2012年到2013年库存记录</caption>15 <tr>16 <th>产品名称 </th>17 <th>品牌 </th>18 <th>库存量（个） </th>19 <th>入库时间 </th>20 </tr>21 <tr>22 <td>耳机 </td>23 <td>联想 </td>24 <td>500</td>25 <td>2013-1-2</td>26 </tr>27 <tr>28 <td>U盘 </td>29 <td>金士顿 </td>30 <td>120</td>31 <td>2013-8-10</td>32 </tr>33 <tr>34 <td>U盘 </td>35 <td>爱国者 </td>36 <td>133</td>37 <td>2013-3-25</td>38 </tr>39 </table>40 </body>41 </html>ハイパーリンクを追加すると青色になり、クリックすると紫色になります。
2.3 画像
1、src：3; : 画像が表示されているときに画像の説明を入力します(マウスを画像の上に置いたときに表示されるテキスト)
4, 画像 GIF、PNG、または JPEG 形式の画像ファイルにすることができます 2.4 textarea
1. で終わるタグがペアで表示されます。 2. cols: 複数行の入力フィールドの
列の数。 3.
行:の数。
4. タグの間にデフォルト値を入力できます。 举例： <form method="post" action="save.php"> <label>联系我们</label> <textarea cols="50" rows="10" >在这里输入内容...</textarea></form>
ログイン後にコピー
label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
我来试试：完成下面任务
要求：慢跑、登山和篮球复选框要与各自的复选项用for属性关联。效果图如下
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>form中的lable标签</title> 6 </head> 7 8 <body> 9 <form>10 <label for="sport">你对什么感兴趣</label></br>11 慢跑<input type="checkbox" name="gender" id="sport" />12 <br />13 登山<input type="checkbox" name="gender" id="sport" />14 <br />15 篮球<input type="checkbox" id="sport" >16 17 </form>18 19 </body>20 </html>
网页中所有显示的内容都要放在标签中。
标签不区分大小写。
网页中展示的内容在body里。
em标签是强调，就是斜体。
Strong加粗。
SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。
例子如下：
some text.some other text.
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
