Htmlの基礎知識を詳しく解説_html/css_WEB-ITnose
自分が正しいと思うことではなく、顧客の要求を満たすために自分がやりたいことをやらなければなりません。
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ラベル付け後、テーブルの内容が全てダウンロードされるまでこのフォームは表示されません。右側のコードエディターのコードなど。
テーブルヘッダー。
まとめの内容はブラウザでは表示されません。その機能は、表の可読性 (意味化) を高め、検索エンジンが表の内容をよりよく理解できるようにすること、また、スクリーン リーダーが特別なユーザーが表の内容を読みやすくできるようにすることです。
文法: <表概要="表紹介文">
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>
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 应用样式。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7489
15
1377
52
77
11
19
41
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
Giteeページ静的なWebサイトの展開に失敗しました：単一のファイル404エラーをトラブルシューティングと解決する方法
Apr 04, 2025 pm 11:54 PM
GiteEpages静的Webサイトの展開が失敗しました：404エラーのトラブルシューティングと解像度Giteeを使用する
