ホームページ >ウェブフロントエンド >htmlチュートリアル >Htmlの基礎知識を詳しく解説_html/css_WEB-ITnose
Htmlの基礎知識を詳しく解説_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:16:341134ブラウズ
自分が正しいと思うことではなく、顧客の要求を満たすために自分がやりたいことをやらなければなりません。
1. 基本タグ1.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> 1.2 強調
例えば、オンラインモールでは、商品の割引価格を強調する必要があります。以下に示すように。
コード実装:
1.3 span
45a2772a6b6107b401db3c9b82c049c2 タグにはセマンティクスはなく、その機能は別個のスタイルを設定することです。
試してみましょう: 「American Dream」を青に設定します
1. 右側のエディタの 13 行目の「American Dream」テキストに 45a2772a6b6107b401db3c9b82c049c2 タグを追加します。
2. 8行目に color:blue; と入力して、45a2772a6b6107b401db3c9b82c049c2要素の文字色を青に設定します。
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> 1.4 Quote
たとえば、詩を引用する場合は二重引用符を使用し、Web ページでは 1244aa79a84dea840d8e55c52dc978699c3e8ae475e7f023c5ba43842c1b434e を使用しますが、これは自動的に二重引用符として認識されます。前のセクションのタグもテキストへの参照ではありませんか?たとえば、1244aa79a84dea840d8e55c52dc97869 タグは
短いテキストへの参照であることを忘れないでください。記事内で李白の『関山越』の詩を引用したいと思います。本文が長いため、 & lt; Blockquote & gt; を使用します。
注: blackquote ではなく blockquote、ブラウザはindent スタイルを使用して 86418835f6a5021dc9ffbed4da1da974 タグを解析します。
インデントされているのでダブルクォーテーションを付ける必要はありません。
1.5 Line Break例えば、Yishou Quatrainでは、最初の3行の後に076402276aae5dbec7f672f8f4e5cc81が続き、最後の行は必要ありません。
1.6 割線
fa8fd94cc4b4d9671e4ee513ae2a31d1は076402276aae5dbec7f672f8f4e5cc81と同じで、灰色の分割線です。
1.7 address
住所ラベルは実際には斜体であり、emと同じ機能を持ちます。
1.8 コードタグ
単一行の場合は ffbe95d20f3893062224282accb13e8f1cd55414ff5abdfea5dd958e7e547fdd を使用し、複数行の場合は e03b848252eb9375d56be284e690e873bc5574f69a0cba105bc93bd3dc13c4ec を使用します。実際には、プリセットを表示する必要がある場合に使用できます。テキスト形式。
1.9 list
<ul> <li></li></ul>//有序<ol> <li></li></ol>
2. Divの応用
2.1 tableラベル付け後、テーブルの内容が全てダウンロードされるまでこのフォームは表示されません。右側のコードエディターのコードなど。
b4d429308760b6c2d20d6300079ed38e…01c3ce868d2b3d9bce8da5c1b7e41e5b: テーブルの先頭のセル、
テーブルヘッダー。
まとめの内容はブラウザでは表示されません。その機能は、表の可読性 (意味化) を高め、検索エンジンが表の内容をよりよく理解できるようにすること、また、スクリーン リーダーが特別なユーザーが表の内容を読みやすくできるようにすることです。
文法: 5f62e1bca6fa784d0cc565dd9d60b448
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.2 ハイパーリンク title 属性の役割 リンクテキスト上でマウスをスライドすると、この属性のテキスト内容が表示されます。この属性は、実際の Web 開発において、主に検索エンジンがリンク アドレスの内容を理解しやすくするために (意味的によりわかりやすく) 大きな役割を果たします。 ハイパーリンクを追加すると青色になり、クリックすると紫色になります。
メールを送信
2.3 画像
1、src：成功すると、この属性で指定されたテキストが表示されます
3; : 画像が表示されているときに画像の説明を入力します(マウスを画像の上に置いたときに表示されるテキスト)
4, 画像 GIF、PNG、または JPEG 形式の画像ファイルにすることができます 2.4 textarea
1. 4750256ae76b6b9d804861d8f69e79d3 で始まり 40587128eee8df8f03d0b607fe983014 で終わるタグがペアで表示されます。 2. cols: 複数行の入力フィールドの
列の数。 3.
行:複数行の入力フィールドの
行の数。
4. 4750256ae76b6b9d804861d8f69e79d340587128eee8df8f03d0b607fe983014タグの間にデフォルト値を入力できます。 举例： <form method="post" action="save.php"> <label>联系我们</label> <textarea cols="50" rows="10" >在这里输入内容...</textarea></form>
2.4 label
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代码中的其它元素，这样你就可以为它们指定样式了。
例子如下：
e388a4556c0f65e1904146cc1a846bee45a2772a6b6107b401db3c9b82c049c2some text.54bdf357c58b8a65c66d7c19c8e4d114some other text.94b3e26ee717c64999d7867364b1b4a3
例子解释如下：
如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此，上例中的 span 元素仍然为 p 元素增加了额外的结构。
可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。