目次
2.5 VScode によって生成されるデフォルトのフレームワークを理解する
1.HTMLとは
HTMLの正式名称はHyper Text Markup Language（ハイパーテキストマークアップ言語）といい、マークアップ言語の一つです。これには一連のタグが含まれており、これによってネットワーク上の文書形式を統一し、散在するインターネット リソースを論理的な全体に接続することができます。平たく言えば、HTML はフロントエンド ページを記述するために使用され、通常のブラウザーのさまざまなページは HTML で記述されています。
ショートカット キーF12またはfn+F12を使用して、ブラウザ ページの HTML ソース コードを表示できます。
2 つの HTML インフラストラクチャ
2.1 HTML タグについて
HTMLコードは「タグ」で構成されており、タグの基本的な形式は次のとおりです。
<body>hello</body>- <>内にタグ名(本文)を入れる必要があります。
- ほとんどの HTML タグはペアで表示されます。<body> が開始タグ、</body> が終了タグです。
- 少数のタグには開始タグのみがあり、これは単一タグと呼ばれます。
- 開始タグと終了タグの間にはコンテンツが入ります
- 一部の属性は開始タグに含めることができます
次のような形状:
<body id="hello">hello</body>これは、現在のタグのペアに一意の識別子を設定することと同じです。
2.2 HTMLファイルの基本構造
<html>
<head>
<title>我的页面</title>
</head>
<body>
hello world
</body>
</html>- htmlタグはhtmlファイル全体のルートタグであり、最上位のタグでもあります。
- headタグには、ページのタイトルやページの文字セットなど、ページの属性を記述します。
- body タグは、ページに表示する特定のコンテンツを記述します。
- title タグにはページのタイトルが含まれます
上記のコードを実行すると、次のページが表示されます。
2.3 ラベル階層
各ラベルには次の 2 つの関係があります。
- 父と子の関係
- 兄弟愛
<html>
<head>
<title>我的页面</title>
</head>
<body>
hello world
</body>
</html>これには次のような関係があります
- headとbodyはhtmlの子タグ、htmlはheadとbodyの親タグで親子関係になります。
- title は head の子タグ、head は title の親タグです
- 頭と胴体は兄弟関係にある
2.4 タグのプロパティ
ラベルの属性には次のような特徴があります。
- 複数の属性を指定できますが、ラベルの前に属性を記述することはできません。
- 属性はスペースで区切られます。複数のスペースまたは改行を使用できます。
- 属性には特別な順序はありません
- プロパティはキーと値のペアの形式で表されます
例は次のとおりです (src タグとその属性については、この記事で後ほど詳しく説明します)。
<img src="dog.jpg" alt="狗" title="这是一个小狗"
width="500px" height="800px">2.5 VScode によって生成されるデフォルトのフレームワークを理解する
VScode で、 htmlと入力した後、html:5 を選択して、デフォルトで次の HTML フレームを生成します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>- <!DOCTYPE html> は DTD (Document Type Definition) と呼ばれ、現在のファイルが HTML5 ファイルであることを示します。
- <html lang="en"> これは実際には lang 属性を html タグに追加しており、long の値は en で、現在のページが英語のページであることを示します (一部のブラウザーは、ここでのプロンプトに従って自動的に翻訳します)。
- <meta charset="UTF-8"> 現在のページの文字エンコード方式を記述します。この行がないと漢字が正しく解析されず文字化けする可能性があります。
- <meta name="viewport" content="width=device-width,initial-scale=1.0"> このうち、ビューポートとは、Web ページを表示するために使用できるデバイスの画面上の領域を指します。width=device- width,initial -scale=1.0 は、表示領域とデバイスの幅を等しく設定し、初期ズームを非スケーラブルに設定します。
- <title>Document</title> title タグは現在のページの名前を記述します。つまり、現在のページの初期名は Document です。
3 つの HTML 共通タグ
上記の HTML の基本を理解した上で、一般的なタグをいくつか学び、特別なインターフェイスを自分で作成してみましょう
3.1 アノテーションタグ
<!-- 这是注释的基本格式 -->コメントは Web インターフェイスには表示されません。その主な目的は、コードの読みやすさを向上させることです。VScode では、ctrl+/を使用してコメントをすばやくコメントしたりコメント解除したりできます。
3.2 見出しタグ：h1～h6
コード例は次のとおりです
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>効果は以下の通りです
titleタグを使用する場合は以下の2点に注意してください。
- タイトルタグには独自の改行があります
- タイトルラベルの番号が大きくなるほど、フォントは小さくなります。第 1 レベルのタイトル、第 2 レベルのタイトル、第 3 レベルのタイトルを参照して理解できます。つまり、第 1 レベルのタイトルが最も大きくなります。言葉。
3.3 段落タグ: p
HTMLで比較的長いテキストをbodyタグに貼り付けると、VScodeで段落を分割していても、実行してみると段落に分割されていないことがわかります。段落タグを使用してセグメンテーションを実装する
コード例は次のとおりです
<p>这是第一段</p>
<p>这是第二段</p>効果は以下の通りです
p タグを使用する場合は、次の点に注意してください。
- p タグは単なる改行、つまり p タグと他のコンテンツの間のギャップではありません。
- pタグで記述された段落は先頭がインデントされていません
- p タグの各ペアのコンテンツについて、ブラウザの幅に応じてレイアウトが自動的に決定されます。
- HTML コンテンツの先頭と末尾の改行とスペースは無効です
- HTML 内の単語の間に入力された複数のスペースは、1 つのスペースにのみ相当します。
- HTMLソースコードに直接入力した改行は解析時に改行として解析されず、ページ上に空白が表示されます。
3.4 改行ラベル: br
使用例は以下の通りです
<p>
p 标签不单单是换行,即 p 标签和别的内容之间一个空隙 <br/>
p 标签描述的段落开头没有缩进<br/>
对于每一对 p 标签中的内容,会自动根据浏览器宽度来决定排版<br/>
html 内容首尾处的换行,空格均无效<br/>
在 html 中文字之间输入的多个空格只相当于一个空格<br/>
html 源码中直接输入的换行在解析的时候不会解析为换行,而是在页面中显示一个空格<br/>
</p>効果は以下の通りです
brタグを使用する場合は次の点に注意してください。
- br は単一のラベルです
- br タグには p タグのような大きな空白はなく、単なる改行です。
- <br/> は標準的な書き方です。<br> のように書くことはお勧めしません。
3.5 テキスト書式タグ
- 太字:strongタグとBタグ
- 斜体: em タグと i タグ
- 取り消し線: del タグと s タグ
- 下線: ins タグと u タグ
コード例は次のとおりです
<strong>加粗</strong>
<b>加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>効果は以下の通りです
3.6 画像タグ: img
img タグの共通属性:
- src: 画像のパスを示します。相対パスまたは絶対パスを使用できます (相対パスと絶対パスの違いと使用法については、ここではあまり説明しません。また、それを知らない老鉄人もいるでしょう)確認できます）
- alt: 置換テキスト、画像が正しく表示できない場合、置換テキストを表示します
- 幅 / 高さ: 幅と高さを制御します。通常、高さと幅の一方を変更し、他方を比例的に拡大縮小できます。同時に変更すると、画像のバランスが崩れる可能性があります。
- border: ボーダー、パラメータはピクセルの幅です
- title: 画像のタイトル、つまり、カーソルが画像上にあるとき、カーソル上に表示されるテキスト
img タグを使用してインターフェイスに画像を表示するため、img タグには src 属性が必要です
コード例は次のとおりです
<img src="dog.png" alt="狗" title="这是一个小狗" width="500px">注: src パスは相対パスです。つまり、事前に画像を html ファイルと同じディレクトリに置き、そのファイル名は Dog.png です。
効果は以下の通りです
3.7 ハイパーリンクラベル: a
a タグの共通属性:
- href: クリック後の目的のページへのリンク
- target: open モード、デフォルトは _self です。このモードでは、クリック後にジャンプする新しいページが現在のページを占有します。通常使用する場合は、_blank に変更します。変更後、リンクをクリックすると開きます。新しいページが表示される
aタグを使用する場合は、次の2点に特に注意してください。
- a タグの href 属性が必要です。そうでない場合、ジャンプは実行できません。
- a タグにはコンテンツが必要です。そうでない場合、a タグにはコンテンツがページに表示されません。
a タグの href 属性のいくつかの形式のリンク:
1. 外部リンク: 他の Web サイトのアドレスを参照します。
<a href="http://www.baidu.com">百度</a>2. 内部リンク: Web ページ間のリンクの場合は、相対パスを記述するだけです。
まず、同じディレクトリに test.html を作成し、次に HTML ファイルを作成します。このファイルには、このコードを通じてテスト ページにジャンプできます
<a href="test.html">跳转到test页面</a>
3. ダウンロード リンク: href に対応するパスがファイルの場合、ブラウザはダウンロード タスクを実行します。
<a href="test.zip">下载文件</a>4. 空のリンク: # を使用してスペースを配置します
<a href="#">空链接</a>この場合、ページ上の空のリンク テキストをクリックするとジャンプしません。
5. Web ページ要素へのリンク: Web ページ上の任意の要素へのリンクを追加できます。
<!-- 这是给一个图片添加链接 -->
<!-- 点击图片之后就会跳转到搜狗主页 -->
<a href="http://www.sogou.com">
<img src="dog.png">
</a>6 アンカー リンク: これにより、ディレクトリをクリックするのと同様に、Web ページの場所にジャンプして、対応する段落にジャンプできます。
以下は、使用される基本的な方法を示すためのコードサンプルです。
<a href="#one">第一段</a>
<a href="#tow">第二段</a>
<a href="#three">第三段</a>
<!-- 这是第一段 -->
<p id="one">
...
</p>
<!-- 这是第二段 -->
<p id="two">
...
</p>
<!-- 这是第三段 -->
<p id="three">
...
</p>7. ジャンプリンクの禁止: リンクをジャンプさせたくない場合は、その href 属性をjavascript:void(0)またはjavascript :;に設定してください。
3.7 リストラベル
1. 順序なしリスト: ul と li
コード例
<ul>
<li>唐僧</li>
<li>孙悟空</li>
<li>猪八戒</li>
<li>沙悟净</li>
</ul>効果は以下の通りです
2. 順序付きリスト: ol と li
コード例
<ol>
<li>唐僧</li>
<li>孙悟空</li>
<li>猪八戒</li>
<li>沙悟净</li>
</ol>効果は以下の通りです
3. カスタムリスト dl dt (字幕) および dd
コード例
<dl>
<dt>西游记四人组</dt>
<dd>唐僧</dd>
<dd>孙悟空</dd>
<dd>猪八戒</dd>
<dd>沙悟净</dd>
</dl>効果は以下の通りです
4. 注意事項
- 各リストのラベルは並列関係にあります
- ul/olタグにはliタグのみ、dlタグにはdtタグ、ddタグのみ配置可能
- 異なるリストをネストしたい場合は、li タグ内に他のタグを入れることができます
4つの総合的な演習
上記の基本的なタグの使用法を学習したら、いくつかの基本的な Web ページを作成できるようになります。これは簡単な Web ページの履歴書です。
期待されるページ効果
コードは以下のように表示されます
インターネット上で画像を自分で見つけて、それを HTML ファイルと同じディレクトリにダウンロードし、コード内の画像のパス名を変更すると、画像が正しく表示されることに注意してください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的简历</title>
</head>
<body>
<h2>某某某</h2>
<div>
<!-- 基本信息 -->
<div>
<h3>基本信息</h3>
<!-- 这里填写正确的图片路径 -->
<img src="dog.png" alt="个人图片" title="某某某" height="300px" height="150px">
</div>
<div>
<p>求职意向: Java开发工程师</p>
</div>
<div>
<p>联系电话: XXX-XXX-XXXX</p>
</div>
<div>
<p>邮箱: [email protected]</p>
</div>
<div>
<!-- 这里可以填写你的gitee地址 -->
<p><a href="#" target="_blank">我的 gitee</a></p>
</div>
<div>
<!-- 这里可以填写你的博客地址 -->
<p><a href="#" target="_blank">我的 博客</a></p>
</div>
</div>
<!-- 教育背景 -->
<div>
<h3>教育背景</h3>
<ol>
<li>1990 - 1996 小葵花幼儿园 幼儿园</li>
<li>1996 - 2002 小葵花小学 小学</li>
<li>2002 - 2005 小葵花中学 中学</li>
<li>2005 - 2008 小葵花中学 高中</li>
<li>2008 - 2012 小葵花大学 计算机专业 本科</li>
</ol>
</div>
<!-- 专业技能 -->
<div>
<h3>专业技能</h3>
<ul>
<li>Java基础语法扎实, 已经刷了800道Leetcode题</li>
<li>常见数据结构都可以独立实现并熟练运用</li>
<li>熟知计算机网络理论, 并且可以独立排查常见问题</li>
<li>掌握Web开发能力, 并且独立开发了学校的留言墙功能</li>
</ul>
</div>
<!-- 我的项目 -->
<div>
<h3>我的项目</h3>
<ol>
<li>
<h3>留言墙</h3>
<p>开发时间: 2008年9月->2008年12月</p>
<p>功能介绍:
<ul>
<li>支持留言发布</li>
<li>支持匿名留言</li>
</ul>
</p>
</li>
<li>
<h3>学习小助手</h3>
<p>开发时间: 2008年9月->2008年12月</p>
<p>功能介绍:
<ul>
<li>支持错题检索</li>
<li>支持同学探讨</li>
</ul>
</p>
</li>
</ol>
</div>
<!-- 个人评价 -->
<div>
<h3>个人评价</h3>
<p>在校期间，学习成绩优良，多次获得奖学金</p>
</div>
</body>
</html>要約する
ここでは HTML の比較的基本的な知識を紹介します。これは非常に興味深く、役に立つものであり、すべての読者に良い影響を与えることを願っています。
作るのは簡単ではありませんが、このブログがお役に立ちましたら、いいね、ブックマーク、フォローして、大勢の編集者をサポートしてください、ありがとうございます!