ホームページ > 記事 > ウェブフロントエンド > Webページ制作（html）の基礎知識（4）リンクの詳細解説
Webページ制作（html）の基礎知識（4）リンクの詳細解説
- 零下一度オリジナル
- 2017-05-06 13:40:351742ブラウズ
1.HTML リンク
<html> <body> <p> <a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p> <p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p> </body> </html>
この例では、HTML ドキュメント内にリンクを作成する方法を示します。
<html> <body> <p> 您也可以使用图像来作链接： <a href="/example/html/lastpage.html"> <img border="0" src="/i/eg_buttonnext.gif" /> </a> </p> </body> </html>
この例では、画像をリンクとして使用する方法を示します。
HTML ハイパーリンク(リンク)
ハイパーリンクは、単語、単語、単語のグループ、または画像にすることができます。これらのコンテンツをクリックすると、新しいドキュメントまたは特定のセクションにジャンプできます。現在のドキュメントでは。
ウェブページ上のリンクの上にマウスポインタを移動すると、矢印が小さな手に変わります。
3499910bf9dac5ae3c52d5ede7383485 タグを使用して HTML でリンクを作成します。
3499910bf9dac5ae3c52d5ede7383485 タグを使用するには 2 つの方法があります:
href 属性を使用する - 別のドキュメントへのリンクを作成する
name 属性を使用する - ブックマークを作成するドキュメント内
詳しい読み方: ハイパーテキストとは何ですか?
HTMLリンク構文
リンクのHTMLコードは非常にシンプルです。次のようになります:
<a href="url">Link text</a>
href 属性はリンクのターゲットを指定します。
開始タグと終了タグの間のテキストがハイパーリンクとして表示されます。
インスタンス
<a href="www.php.cn/">Visit php</a>
上記のコード行は次のように表示されます: Visit php
このハイパーリンクをクリックすると、ユーザーは php のホームページに移動します。
ヒント: 「リンクテキスト」はテキストである必要はありません。 画像 またはその他の HTML 要素をリンクにすることができます。
HTML リンク - target 属性
Target 属性を使用すると、リンクされたドキュメントが表示される場所を定義できます。
次の行は、新しいウィンドウでドキュメントを開きます:
<a href="http://www.php.cn/" target="_blank">Visit W3School!</a>
自分で試してみてください
HTML リンク - name 属性
name 属性はアンカーの名前を指定します。
name 属性は、HTML 内でブックマークを作成するために使用されます。
ブックマークは特別な方法で表示されるわけではなく、読者には見えません。
名前付きアンカーを使用すると、ページのセクションに直接ジャンプするリンクを作成できるため、ユーザーは必要な情報を見つけるためにスクロールし続ける必要がありません。
アンカーに名前を付けるための構文:
<a name="label">Text to be displayed</a>
ヒント: アンカーの名前は任意の名前にすることができます。
例
HTML ドキュメント内の名前付きアンカー:
<a name="tips">Useful Tips Section</a>
次に、同じドキュメント内に「役立つヒント」セクションへのリンクを作成します:
<a href="#tips">Visit the Useful Tips Section</a>
あるいは、別のページからリンクを作成します。このドキュメントの「役立つヒント」セクション:
<a href="www.w3school.com.cn/html_links.htm#tips"> Visit the Useful Tips Section </a>
上記のコードでは、# 記号とアンカー名を URL の末尾に追加して、アンカーという名前のヒントに直接リンクします。
具体的な効果: 役立つヒント
基本 注 - 役立つヒント:
注 : サブフォルダーには常にスラッシュを追加してください。リンクが href="www.w3school.com.cn/html" のように記述されている場合、サーバーに対して 2 つの HTTP リクエストが生成されます。これは、サーバーがアドレスにスラッシュを追加して、次のような新しいリクエストを作成するためです: href="www.w3school.com.cn/html/"。
ヒント: 名前付きアンカーは、大きなドキュメントの先頭に目次を作成するためによく使用されます。各章に名前付きアンカーを付けて、これらのアンカーへのリンクを文書の上部に配置できます。百度百科事典に頻繁にアクセスすると、百度百科事典内のほぼすべてのエントリがこのナビゲーション方法を採用していることがわかります。
提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。
2.HTML 表格
<html> <body> <p>每个表格由 table 标签开始。</p> <p>每个表格行由 tr 标签开始。</p> <p>每个表格数据由 td 标签开始。</p> <h4>一列：</h4> <table border="1"> <tr> <td>100</td> </tr> </table> <h4>一行三列：</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <h4>两行三列：</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html>
这个例子演示如何在 HTML 文档中创建表格。
<html> <body> <h4>带有普通的边框：</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>带有粗的边框：</h4> <table border="8"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>带有很粗的边框：</h4> <table border="15"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>
本例演示各种类型的表格边框。
表格
表格由 f5d188ed2c074f8b944552db028f98a1 标签来定义。每个表格均有若干行（由 a34de1251f0d9fe1e645927f19a896e8 标签定义），每行被分割为若干单元格（由 b6c5a531a458a2e790c1fd6421739d1c 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
在浏览器显示如下：
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格
<table border="1"><tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>
表格的表头
表格的表头使用 b4d429308760b6c2d20d6300079ed38e 标签进行定义。
<table border="1"> <tr><th>Heading</th> <th>Another Heading</th></tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
在浏览器显示如下：
| Heading | Another Heading |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
表格中的空单元格
在大多数浏览器中，没有内容的表格单元显示得不太好。
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td><td></td></tr> </table>
在浏览器显示如下：
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 |
注意：这个空的单元格的边框没有被显示出来。（不过 Mozilla Firefox 可以将整个边框显示出来。）为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td><td> </td></tr> </table>
在浏览器中显示如下：
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 |
基本的注意事项 - 有用的提示：
ae20bdd317918ca68efdc799512a9b39, 92cee25da80fac49f6fb6eec5fd2c22a 和 06669983c3badb677f993a8c29d18845很少被用到，这是由于浏览器对它们的支持不太好。希望这种情况在未来版本的 XHTML 中会有所改观。如果你使用 IE5.0 或者更新的版本，可以查看在我们的《XML教程》中的具体例子。
3.HTML 列表
<html> <body> <h4>一个无序列表：</h4> <ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul> </body> </html>
本例演示无序列表。
<html> <body> <h4>一个有序列表：</h4> <ol> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ol> </body> </html>
有序列表
无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 ff6d136ddc5fdfeffaf53ff6ee95f185 标签。每个列表项始于 25edfb22a4f469ecb59f1190150159c6。
<ul> <li>Coffee</li> <li>Milk</li> </ul>
浏览器显示如下：
Coffee
Milk
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 c34106e0b4e09414b63b2ea253ff83d6 标签。每个列表项始于 25edfb22a4f469ecb59f1190150159c6 标签。
<ol> <li>Coffee</li> <li>Milk</li> </ol>
浏览器显示如下：
Coffee
Milk
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 5c69336ffbc20d23018e48b396cdd57a 标签开始。每个自定义列表项以 73de882deff7a050a357292d0a1fca94 开始。每个自定义列表项的定义以 67bc4f89d416b0b8236eaa5f43dee742 开始。
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
浏览器显示如下：
Coffee
Black hot drink
Milk
White cold drink
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
【相关推荐】
1. 免费html在线视频教程
2. html开发手册
以上がWebページ制作（html）の基礎知識（4）リンクの詳細解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。