您的位置：首页 > Web前端

Web 前端学习笔记之 HTML 入门（2）

2016-12-30 09:17 671 查看

HTML 链接（超链接）

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

可以通过使用

<a>

标签在 HTML 中创建链接，有两种使用

<a>

标签的方式：

通过使用 href 属性 - 创建指向另一个文档的链接

通过使用 name 属性 - 创建文档内的书签

URL 格式

格式说明：

协议（protocol）：指定使用的传输协议，如https、http、file等

主机名（host）：指存放资源的服务器的域名系统（DNS）主机名或IP地址

端口号（port）：整数，可选，省略时使用方案的默认端口，各种传输协议都有默认的端口号，如http的默认端口为80

路径（path）：由零或多个“/”符号隔开的字符串，一般用来表示主机上的一个目录或文件地址

查询（query）：可选，用于给动态网页（如使用CGI、ISAPI、PHP/JSP/ASP/ASP。NET等技术制作的网页）传递参数，可有多个参数，用“&”符号隔开，每个参数的名和值用“=”符号隔开

信息片段（fragment）：字符串，用于指定网络资源中的片断。例如一个网页中有多个名词解释，可使用fragment直接定位到某一名词解释

HTML 链接语法

<a href="http://www.w3.org">W3C</a>

说明：

href

属性规定链接的目标

“链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

页面内链接（锚点）

name

属性规定锚点的名称。当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接。

<h1>锚点</h1>
<p><a href="#test">到test</a></p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p id="test">test</p>
<p><a href="#">回顶部</a></p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>

说明：可以使用

id

属性来代替

name

属性，命名锚同样有效

链接目标

通过

target

属性，可以定义被链接的文档在何处显示。


值	描述
_blank	在新窗口中打开被链接文档
_self	默认。在相同的框架中打开被链接文档
_parent	在父框架集中打开被链接文档
_top	在整个窗口中打开被链接文档
framename	在指定的框架中打开被链接文档

<a href="http://www.w3.org" target="_self">W3C（当前窗口）</a>
<a href="http://www.w3.org" target="_blank">W3C（新窗口）</a>
<a href="http://www.w3.org" target="abc">W3C（abc）</a>
<a href="http://www.example.com" target="abc">Example（abc）</a>

相对路径和绝对路径

链接中的特殊符号及其代表的意义


符号	描述
.	代表目前所在目录，相对路径
..	代表上一级目录，相对路径
../../	代表上一级目录的上一级目录，相对路径
/	代表根目录，绝对路径

在使用相对路径时，使用

来表示当前目录，使用

..

HTML 图像

在 HTML 中，图像由

<img>

标签定义，

<img>

标签是空标签，只包含属性，没有闭合标签。

定义图像的语法：

<img src="url" />

，

src

属性的值为图像的URL地址。

<img src="/path/to/img.jpg" alt="替代文字"
width="300" height="200">

说明：

alt

属性规定了图像的替代文本。

width

和

height

属性设置了图像的大小，其值可以为pixels或%。

<img>

标签通常配合

<figure>

标签一起使用来表示图像。

<figure>

标签规定了独立的流内容，如图像、图表、照片、代码等等。

<figure>
<img src="/path/to/img.png" alt="替代文字">
<figcaption>图片说明</figcaption>
</figure>

说明：

<figcaption>

元素为

figure

添加标题（caption）

HTML 表格

表格由

<table>

标签来定义。每个表格均有若干行（由

<tr>

标签定义），每行被分割为若干单元格（由

<td>

标签定义）。字母

td

指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格标签


表格	描述
<table>	定义表格
<caption>	定义表格标题
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚
<col>	定义用于表格列的属性
<colgroup>	定义表格列的组

实例

<table border="1">
<thead>
<tr>
<th>浏览器</th>
<th>渲染引擎</th>
<th>JavaScript 引擎</th>
</tr>
</thead>
<tbody>
<tr>
<th>Chrome</th>
<td>Blink</td>
<td>V8</td>
</tr>
<tr>
<th>Opera</th>
<td>Blink</td>
<td>V8</td>
</tr>
<tr>
<th>Firefox</th>
<td>Gecko</td>
<td>SpiderMonkey</td>
</tr>
<tr>
<th>Edge</th>
<td>EdgeHTML</td>
<td>Chakra</td>
</tr>
</tbody>
</table>

效果


浏览器	渲染引擎	JavaScript 引擎
Chrome	Blink	V8
Opera	Blink	V8
Firefox	Gecko	SpiderMonkey

说明：

合并行：在

<td>

标签中设置

rowspan

属性可以规定单元格可横跨的行数

合并列：在

<td>

标签中设置

colspan

属性可以规定单元格可横跨的列数

若要设置

<caption>

，其必须是

<table>

的第一个元素

若需要对全部列应用样式，

<colgroup>

标签将会很有用

参考资料

w3school

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航