タイポグラフィラベル
タイトルラベル
<!-- 共6种标题 -->
<h1>标题一共六级选</h1>
<h2>文字加粗一行里</h2>
<h3>由大到小依次减</h3>
<h4>从重到轻随之变</h4>
<h5>语法规范书写到位</h5>
<h6>具体效果刷新见</h6>
段落タグ
<p>段落内容</p>
改行ラベル
<br/>
横ラベル
<hr/>
<div>および<span>ラベル
2つにはセマンティクスがなく、主に区別とレイアウトに使用され、他のラベルを保持するためのボックスとして使用できます。
divは大きなボックスと見なすことができ、1つのdivのみを1行に配置できます。divは
小さなボックスと見なすことができ、多くのスパンを1行に配置できます。
<div></div>
<span></span>
テキストフォーマットタグ
| ラベル | 効果 |
|---|---|
<b></b>または< strong></strong> |
太字 |
<i></i> 或<em></em>> |
文字斜体 |
<s></s>或<del></del> |
テキスト削除行 |
<u></u> 或 <ins></ins> |
テキストの下線 |
これらのタグのうち、<b> <i> <s> <u>4つのタグはセマンティクスなしで独自の効果しか達成できないため、使用することはお勧めしません。<strong> <em> <del> <ins>4つのタグは異なる効果を達成したが、それらを使用することが推奨されても、強い意味を持つことはできません。
画像タグの<img>
形式は次のとおりです。
<img src="图像.jpg" width="104" height="142" />
<img`>タグの属性：
幅と高さの属性の1つだけが設定されている場合、画像は比例して拡大縮小されます。
パス
ページにはたくさんの写真があります。通常、これらの画像ファイル（画像）を保存するための新しいフォルダを作成します。このとき、画像を探すとき
は、「パス」メソッドを使用して場所を指定する必要があります。画像ファイルの。
パスは次のように分割できます。
- 相対パス
- 絶対パス
相対パス：参照ファイルの場所に基づいて確立されたディレクトリパス。
簡単に言うと、HTMLページに対する画像の位置の
相対パスは、ターゲットファイルを見つけるためのコードが配置されているファイルから始まり、上位レベル、次のレベル、および同じレベルで説明します。これが
HTMLに関連する画像ですページの場所。
絶対パス：ディレクトリの下の絶対パスを指し、ターゲットの場所を直接参照します。通常は、ドライブ文字から始まるパスです。
たとえば、「D：\ web \ img \ logo.gif」または完全なWebアドレス「http://www.itcast.cn/images/logo.gif」です。
アンカータグ<a>
<a>タグはハイパーリンクを表し、その構文は次のとおりです。
<!-- 当内容为文本时，表示为文本加链接 -->
<!-- 当内容为图像时，表示为图像加链接 -->
<a href="跳转目标" target="目标窗口的打开方式">内容</a>
href：リンクターゲットのURLアドレスを指定するために使用されます。hrefの値が「＃」の場合、それは空のアドレスであり、リダイレクトがないことを意味します。
ターゲット：リンクされたページの開く方法を指定するために使用され、その値には「_self」と「_blank」の2つのタイプがあります。
其中self 为默认值，表示在当前窗口打开链接，blank为在新窗口中打开方式。
アンカーポイントの配置
アンカーポイントの配置は、現在のページでジャンプする効果を実現できます。
アンカーポイントを使用するには、次の2つの手順があります。
① 为某个标签添加 id 属性。
② 在<a> 标签中添加 href="#id 值"。
例は次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>锚点定位练习</title>
</head>
<body>
<h3><a href="#China">去中国</a></h3>
<h3><a href="#America">去美国</a></h3>
<h3><a href="#England">去英国</a></h3>
<p id="China"> 这里是中国 </p>
<p id="America"> 这里是美国 </p>
<p id="England"> 这里是英国 </p>
</body>
</html>
< base>タグは、以下に示すように
、<head>タグ間に書き込まれるリンク全体のオープン状態を設定するために使用されます。
<head>
<!-- 设置本页面中所有的链接的打开方式为_blank -->
<base target="_blank" />
</head>
リストタグ
リストタグには、不要リスト、順序付きリスト、カスタムリストの3種類があり、最もよく使われるのは不要リストです。以下に1つずつ見ていきましょう。
順序なしリスト（キーポイント）
順序なしリストは<ul></ul>タグで表され、そのリスト項目は<li></li>タグで表されます。<ul>通常、<li>タグにはタグのみが配置され、他の<li>タグは配置されず、他のタグを格納できることに注意してください。タグで。各リスト項目の順序はなく、並列関係であり、構文形式は次のとおりです。
<ul>
<li>列表项1</li>
<li>列表项2</li>
...
</ul>
順序付けされていないリストの例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表演示</title>
</head>
<body>
<h3>下面是徐峥导演的四部电影</h3>
<ul>
<li>人在囧途</li>
<li>泰囧</li>
<li>港囧</li>
<li>囧妈</li>
</ul>
</body>
</html>
ブラウザで開いた後の効果は次のとおりです。
順序付きリスト
順序なしリストは<ol></ol>タグで表され、そのリスト項目も<li></li>タグで表されます。各リスト項目の間には順序関係があります。構文形式は次のとおりです。
<ol>
<li>列表项1</li>
<li>列表项2</li>
...
</ol>
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有序列表演示</title>
</head>
<body>
<h3>一天分三餐</h3>
<ol>
<li>早餐</li>
<li>午餐</li>
<li>晚餐</li>
</ol>
</body>
</html>
以下に示すようにブラウザを開くと、
カスタムリスト
カスタムリストの説明と説明に一般的に使用される用語または用語のカスタムリストには<dl>、ラベルの開始に3つの異なるラベルが必要です。各カスタムリスト項目を<dt>開始し、各カスタム定義リスト項目を<dd>開始します。<dt>複数に対応する場合があります<dd>。
以下は、Xiaomiの公式ウェブサイトの下部のレイアウトです。このレイアウトは、カスタムリストを使用して記述できます。
カスタムリストの構文形式は次のとおりです。
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义列表演示</title>
</head>
<body>
<dl>
<dt>清华大学</dt>
<dd>教学楼</dd>
<dd>图书馆</dd>
<dd>体育馆</dd>
<dt>教室</dt>
<dd>桌子</dd>
<dd>椅子</dd>
<dd>黑板</dd>
</dl>
</body>
</html>
ブラウザで開くと、次のようになります。
