웹페이지 제작 기초 지식(html) (4) 링크 상세 설명
- 零下一度원래의
- 2017-05-06 13:40:351817검색
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 태그를 사용하는 방법에는 두 가지가 있습니다.
href 속성을 사용하여 - 만들기 다른 문서에 대한 링크
name 속성을 사용하여 문서에 대한 링크 - 문서 내에 북마크를 생성합니다
심화 읽기: 하이퍼텍스트란 무엇인가요?
HTML 링크 구문
링크의 HTML 코드는 매우 간단합니다.
<a href="url">Link text</a>
href 속성은 링크의 대상을 지정합니다.
열기 태그와 닫는 태그 사이의 텍스트가 하이퍼링크로 표시됩니다.
Instance
<a href="www.php.cn/">Visit php</a>
위의 코드 줄은 다음과 같이 표시됩니다. Visit php
클릭 이 슈퍼 링크는 사용자를 PHP 홈페이지로 연결합니다.
팁: '링크 텍스트'는 텍스트일 필요는 없습니다. 이미지 또는 기타 HTML 요소가 링크가 될 수 있습니다.
HTML 링크 - 대상 속성
대상 속성을 사용하면 링크된 문서가 표시될 위치를 정의할 수 있습니다.
다음 줄은 새 창에서 문서를 엽니다.
<a href="http://www.php.cn/" target="_blank">Visit W3School!</a>
직접 시도해 보세요
HTML 링크 - 이름 속성
이름 속성은 앵커의 이름을 지정합니다.
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"과 같이 작성되면 두 개의 HTTP 요청이 서버에 생성됩니다. 이는 서버가 주소에 슬래시를 추가한 다음 href="www.w3school.com.cn/html/"과 같이 새 요청을 생성하기 때문입니다.
팁: 이름이 지정된 앵커는 대용량 문서의 시작 부분에 목차를 만드는 데 자주 사용됩니다. 각 장에 명명된 앵커를 지정한 다음 문서 상단에 해당 앵커에 대한 링크를 배치할 수 있습니다. Baidu Encyclopedia를 자주 방문한다면 거의 모든 항목이 이 탐색 방법을 사용하고 있음을 알게 될 것입니다.
提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。
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开发手册
위 내용은 웹페이지 제작 기초 지식(html) (4) 링크 상세 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!