【HTML 往日冒险 02】链接图像表格列表块类 id 内联框架

最新推荐文章于 2024-06-14 14:51:07 发布

Zanebla

最新推荐文章于 2024-06-14 14:51:07 发布

阅读量628

点赞数 1

分类专栏： HTML 文章标签： html 前端 css

本文链接：https://blog.csdn.net/m0_62629457/article/details/130950878

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML 往日冒险 02

链接 links

HTML 使用超级链接与网络上的另一个文档相连
几乎可以在所有的网页中找到链接，超链接可以是一个字，词或者一组词，也可以是一幅图像，用户可以通过点击这些内容来跳转到新的文档或者当前文档中的某个部分

通过使用 <a> 标签在 HTML 中创建链接
有两种使用 <a> 标签的方式：
1. 通过使用 href 属性 -- 创建指向另一个文档的链接
2. 通过使用 name 属性 -- 创建文档内的书签

超文本
标记语言的真正威力在于其收集能力，它可以将收集来的文档组合成一个完整的信息库，并且可以将文档库与世界上的其他文档集合链接起来
读者不仅可以完全控制文档在屏幕上的显示，还可以通过超链接来控制浏览信息的顺序
这就是 HTML 和 XHTML 中的 HT - 超文本（hypertext），其将整个 Web 网络连接起来

超文本概念
超链接（hyper text），或者按照标准叫法称为锚（anchor）
1 锚的一种类型是在文档中创建一个热点，当用户激活或选中（通常是使用鼠标）这个热点时，会导致浏览器进行链接。浏览器会自动加载并显示同一文档或其他文档中的某个部分，或触发某些与因特网服务相关的操作，例如发送电子邮件或下载特殊文件等
2 锚的另一种类型会在文档中创建一个标记，该标记可以被超链接引用

<a href="udl">Link text</a>
href 属性规定链接的目标
<a href="http://www.w3school.com.cn/">Visit W3School</a>

target 属性  定义被链接的文档在何处显示
新窗口打开文档
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

name 属性  规定锚（anchor）的名称
可以使用 name 属性创建 HTML 页面中的书签
书签不会以任何特殊方式显示，读者是不可见
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，使用者就无需不停地滚动页面寻找需要的信息
（可以使用 id 属性来替代 name 属性，命名锚同样有效）
<a name="label">锚（显示在页面上的文本）</a>

锚的实例
1. 在 HTML 文档中对锚进行命名（创建一个书签）
<a name="tips">基本的注意事项 - 有用的提示</a>

2. 在同一个文档中创建指向该锚的链接
<a href="#tips">有用的提示</a>

3. 也可以在其他页面中创建指向该锚的链接
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了

请始终将正斜杠添加到子文件夹
假如这样书写链接：href=“http://www.w3school.com.cn/html”，就会向服务器产生两次 HTTP 请求
这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=“http://www.w3school.com.cn/html/”

命名锚经常用于在大型文档开始位置上创建目录
为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部
假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生
百度百科其中几乎每个词条都采用这样的导航方式

图像 images

<img> 是空标签:只包含属性，并且没有闭合标签
在页面上显示图像，需要使用源属性值是图像的 URL 地址
<img src="url" />
URL 指存储图像的位置
如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中，那么其 URL 为 http://www.w3school.com.cn/images/boat.gif

alt 替换文本属性 为图像定义一串预备的可替换的文本
<img src="boat.gif" alt="Big Boat">
为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的

图片操作实例（背景/排列/浮动/尺寸/替换/链接/映射）

表格 tables

表格由 <table> 标签来定义
table row <tr>
table data <td>
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

table header <th>
大多数浏览器会把表头显示为粗体居中的文本

<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>

<td>&nbsp;</td> 空格占位符 避免空单元格边框不显示

列表 lists

HTML 支持有序、无序和定义列表

无序列表始于 <ul> 标签。每个列表项始于 <li>标签
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签
自定义列表以 <dl> 标签开始
每个自定义列表项以 <dt> 开始
每个自定义列表项的定义以 <dd> 开始
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等

块 blocks

可以通过 <div> 和 <span> 将 HTML 元素组合
大多数 HTML 元素被定义为块级元素(block level element)或内联元素(inline element)
块级元素在浏览器显示时，通常会以新行来开始结束
内联元素在显示时通常不会以新行开始

类 classes

对 HTML 进行分类，使我们能够为相同的类设置相同的样式

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
}	
</style>
</head>

<body>

<div class="cities">
<h2>London</h2>

<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>

<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div> 

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>

<h1>My <span class="red">Important</span> Heading</h1>

</body>
</html>

id

一个 HTML文档中不能存在多个有相同 id 的元素
id 属性用于指向 CSS 样式表中的特定样式声明
JavaScript 也可使用它来访问和操作拥有特定 ID 的元素
id 的语法是：写一个井号 #，后跟一个 id 名称
然后在花括号 {} 中定义 CSS 属性

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>

id 名称对大小写敏感
id 必须包含至少一个字符，且不能包含空白字符（空格、制表符等）

通过ID和链接实现HTML书签
<h2 id="C4">第四章</h2>
<a href="#C4">跳转到第四章</a>
<a href="html_demo.html#C4">Jump to Chapter 4</a>

JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

内联框架 iframe

iframe 用于在网页内显示网页

<iframe src="URL"></iframe>

height 和 width 属性用于规定 iframe 的高度和宽度
属性值的默认单位是像素，但也可以用百分比来设定（比如 "80%"）
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

frameborder 属性规定是否显示 iframe 周围的边框
设置属性值为 "0" 就可以移除边框
<iframe src="demo_iframe.htm" frameborder="0"></iframe>

iframe 可用作链接的目标（target）
链接的 target 属性必须引用 iframe 的 name 属性
由于链接的目标匹配 iframe 的名称，所以链接会在 iframe 中打开

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

Zanebla

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【HTML 往日冒险 02】链接图像表格列表块类 id 内联框架

【HTML 往日冒险 02】链接图像表格列表块类 id 内联框架几乎可以在所有的网页中找到链接，超链接可以是一个字，词或者一组词，也可以是一幅图像，用户可以通过点击这些内容来跳转到新的文档或者当前文档中的某个部分。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=“http://www.w3school.com.cn/html/”的真正威力在于其收集能力，它可以将收集来的文档组合成一个完整的信息库，并且可以将文档库与世界上的其他文档集合链接起来
复制链接

扫一扫