1.同一个web页面链接
首先设计书签
<a name=”top”></a>
在不同位置定义
<a href=”#top”>返回到top位置</a>
2.不同的页面之间转接
如果是在不同的页面之间链接时要在href属性中加上网页名称。
First.html中定义了书签
<a name=”top”>Top的位置</a>
现在要从Second.html中转入First.html并且将位置定到top所在的位置
可以设置
<a href=”first.html#top”>return first Top</a>
超链接和书签是非常重要的工具，可帮助用户在网页中以及在网页之间快速定位到所需的内容。单击超链接时，超链接将尝试查找一个 HTML 文档并在 Web 浏览器中打开它。它使用统一资源定位器 (URL) 字符串定位此新文档。例如，超链接 将在当前文件夹中查找名为 mypage.htm 的页，然后在当前框架中显示此页。 插入超链接在“设计”视图中，打开要编辑的网页。 选择要用作超链接的文本或图像。在“格式”菜单上单击“转换为超链接”。出现“超链接”对话框。 在“URL”框中，键入资源路径或单击“浏览”按钮并定位至目标页或文件，再单击“确定”。 target 属性指定显示超链接的浏览器窗口。可以输入目标窗口的实际名称，或者使用像 parent 或top 这样的特殊术语来表示目标窗口相对于当前窗口的位置。如果未设置 target 属性，则超链接显示当前浏览器窗口中的目标页。 设置超链接的目标窗口选择超链接 在“属性”窗口中，在“目标”框中输入目标窗口的名称或选择一个特殊术语。书签在一个 HTML 文档中创建一个位置，超链接可以跳转到该位置（例如，）。 插入书签在“设计”视图中，将光标放在页上要插入书签的位置。在“格式”菜单上选择“插入书签”。 出现“书签”对话框。键入书签的名称，再单击“确定”。 现在可以将此书签设为超链接的目标。 可以创建一个超链接，该超链接将把当前 HTML 文档滚动到先前用定位点标记的位置。Web 浏览器使用一个缩写形式的 URL 来定位此定位点（例如，）。插入到书签的超链接选择供用户用作超链接的文本或图像。在“格式”菜单上单击“转换为超链接”。出现“超链接”对话框。在“类型”列表中选择“(其他)”。在“URL”框中，键入一个英镑标记 (#) 和书签名称（例如，#anchor），再单击“确定”。9-2020, CSDN.NET, All Rights Reserved而多乐在线书签导入html文件
打开APP
weixin_39597318
关注
而多乐在线书签导入html文件,,简单介绍HTML5中的文件导入 转载
2021-06-01 11:50:00
weixin_39597318
码龄5年
关注
Template，Shadow DOM和Custom Elements让您创建UI组件比以前更容易了。但是像HTML，CSS，JavaScript这样的资源仍然需要一个个地去加载，这是很没效率的。
例如，现在加载jQuery UI或Bootstrap就需要为JavaScript，CSS及Web字体添加单独的标签。如果您的Web组件应用了多重的依赖，那事情就变得更加复杂。
HTML导入让您以一个合并的HTML文件来加载这些资源。使用HTML导入
为加载一个HTML文件，您需要增加一个链接标签，其相关属性为import，herf属性是HTML文件的路径。例如，如果您想把component.html加载到index.html：
index.html
XML / HTML代码将内容复制到文本
<link rel = “ import” href = “ component.html” >
您可以往HTML导入文件(译者注：此处将“导入的HTML”译为“ HTML导入文件”，将“原始HTML”译为“ HTML主文件”。例如，index.html是HTML主文件， component.html是HTML导入文件。)添加任何的资源，包括脚本，样式表和字体，就跟往普通的HTML添加资源一样。
component.html
XML / HTML代码将内容复制到文本
<link rel = “ stylesheet” href = “ css / style.css” >
脚本>
doctype，html，head，body这些标签是不需要的。HTML导入会立即加载要引入的文档，解析文档中的资源，如果有脚本的话也会立即执行它们。执行顺序
浏览器解析HTML文档的方式是线性的，这就是说HTML顶部的脚本会比底部先执行。并且，浏览器通常会等到JavaScript代码执行完毕后，才会接着解析后面的代码。
为了不让脚本压缩HTML的渲染，你可以在标签中添加async或Defer属性(或者你也可以将脚本标签放到页面的底部)。defer属性会重复脚本的执行，直到全部页面解析完成。async属性让浏览器初始化地执行脚本，从而不会阻止HTML的渲染。那么，HTML导入是怎样工作的呢？
HTML导入文件中的脚本就跟着包含defer属性一样。例如在下面的示例中，index.html会先执行script1.js和script2.js，然后再执行script3.js。
index.html
XML / HTML代码将内容复制到文本
<link rel = “ import” href = “ component.html” > // 1。
<title >导入示例 title >
<script src = “ script3.js” >script >// 4。
component.html
XML / HTML代码将内容复制到文本
<script src = “ js / script1.js” >script > // 2。
<script src = “ js / script2.js” >script > // 3。
1.在index.html中加载component.html并等待执行
2.执行component.html中的script1.js
3.执行完script1.js后执行component.html中的script2.js
4.执行完script2.js继而执行index.html中的script3.js
注意，如果给link [rel =“ import”]添加异步属性，HTML导入会把它当做包含异步属性的脚本来对待。它不会等待HTML导入文件的执行和加载，这意味着HTML导入不会阻止HTML主文件的渲染。这也给提升网站性能带来了可能，除非有其他的脚本依赖于HTML引入文件的执行。跨域引入
