Htmlの基礎知識を詳しく解説_html/css_WEB-ITnose-htmlチュートリアル-php.cn

Htmlの基礎知識を詳しく解説_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:16:34

オリジナル

1117 人が閲覧しました

自分が正しいと思うことではなく、顧客の要求を満たすために自分がやりたいことをやらなければなりません。

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

タグにはセマンティクスはなく、その機能は別個のスタイルを設定することです。

試してみましょう: 「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>

ログイン後にコピー

1.4 Quote

たとえば、詩を引用する場合は二重引用符を使用し、Web ページではを使用しますが、これは自動的に二重引用符として認識されます。前のセクションのタグもテキストへの参照ではありませんか?たとえば、タグは

短いテキスト

への参照であることを忘れないでください。記事内で李白の『関山越』の詩を引用したいと思います。本文が長いため、 & lt; Blockquote & gt; を使用します。

注: blackquote ではなく blockquote、ブラウザは

indent スタイルを使用して <blockquote> タグを解析します。

インデントされているのでダブルクォーテーションを付ける必要はありません。

1.5 Line Break

例えば、Yishou Quatrainでは、最初の3行の後に
が続き、最後の行は必要ありません。

1.6 割線

は
と同じで、灰色の分割線です。

1.7 address

住所ラベルは実際には斜体であり、emと同じ機能を持ちます。

1.8 コードタグ

単一行の場合はを使用し、複数行の場合は

を使用します。実際には、プリセットを表示する必要がある場合に使用できます。テキスト形式。

1.9 list

<ul>    <li></li></ul>//有序<ol>    <li></li></ol>

ログイン後にコピー

2. Divの応用

2.1 table

ラベル付け後、テーブルの内容が全てダウンロードされるまでこのフォームは表示されません。右側のコードエディターのコードなど。

…: テーブルの先頭のセル、

テーブルヘッダー。

まとめの内容はブラウザでは表示されません。その機能は、表の可読性 (意味化) を高め、検索エンジンが表の内容をよりよく理解できるようにすること、また、スクリーンリーダーが特別なユーザーが表の内容を読みやすくできるようにすることです。

文法: <表概要="表紹介文">

概要

を右エディタの表に追加します。概要の内容は 「この表は 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 画像

、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>
ログイン後にコピー

　　

　　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代码中的其它元素，这样你就可以为它们指定样式了。
　　例子如下：
　　
some text.some other text.

　　例子解释如下：
　　如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此，上例中的 span 元素仍然为 p 元素增加了额外的结构。
　　可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。