HTMLHTML 标签 ⑤ ( 锚点定位 | base 标签 | 预格式化文本标签 | HTML 特殊符号 )

Posted 韩曙亮

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTMLHTML 标签 ⑤ ( 锚点定位 | base 标签 | 预格式化文本标签 | HTML 特殊符号 )相关的知识,希望对你有一定的参考价值。

文章目录





一、锚点定位



锚点定位步骤 :

  • 创建锚点 : 使用 id 属性 , 创建 跳转锚点 , 一般情况下是在各种级别的标题上添加的 ;
	<h1 id="anchor1">标题锚点1</h1>
	<h2 id="anchor2">标题锚点2</h2>
	<h3 id="anchor3">标题锚点3</h3>
	<h4 id="anchor4">标题锚点4</h4>
  • 创建锚点链接 :
	<a href="#anchor1">跳转到 标题锚点1</a>
	<a href="#anchor2">跳转到 标题锚点2</a>
	<a href="#anchor3">跳转到 标题锚点3</a>
	<a href="#anchor4">跳转到 标题锚点4</a>

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
    </head>
    <body>
		<a href="#anchor1">跳转到 标题锚点1</a>
		<br />
		<a href="#anchor2">跳转到 标题锚点2</a>
		<br />
		<a href="#anchor3">跳转到 标题锚点3</a>
		<br />
		<a href="#anchor4">跳转到 标题锚点4</a>
		<br />
		<br />
		<h1 id="anchor1">标题锚点1</h1>
		<br />
		<h2 id="anchor2">标题锚点2</h2>
		<br />
		<h3 id="anchor3">标题锚点3</h3>
		<br />
		<h4 id="anchor4">标题锚点4</h4>
    </body>
</html>

显示效果 :





二、base 标签



base 标签 的 作用是 为 HTML 页面中 所有的链接 添加 打开状态 , 该标签必须 写在 <head></head> 标签之间 ;

在实际开发中 , 需要 使用 base 标签为所有的链接 , 默认添加 target=“_blank” 打开状态 , 在新窗口中打开 ;


代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
        <!-- ★ 为所有链接设置 在新窗口中打开 状态 -->
		<base target="_blank"/>
    </head>
    <body>
		<a href="https://blog.csdn.net/">CSDN 博客</a>
		<a href="https://blog.csdn.net/shulianghan">韩曙亮博客</a>
		<a href="https://www.csdn.net/">CSDN 首页</a>
    </body>
</html>

展示效果 :





三、预格式化文本标签



将文本 写在 <pre></pre> 预格式化文本标签 中 , 其中的 文本格式 , 包括 空格 , 缩进 , 换行 等内容 , 在 网页中显示的内容HTML 中看到是一致的 ;

在 HTML 中写的什么格式 , 就显示什么效果 ; 该标签不常用 ;


代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
		<base target="_blank"/>
    </head>
    <body>
<pre>
	悯农
	作者:李绅

春种一粒粟,秋收万颗子。
四海无闲田,农夫犹饿死。
锄禾日当午,汗滴禾下土。
谁知盘中餐,粒粒皆辛苦。
</pre>
    </body>
</html>

展示效果 :





四、HTML 特殊符号



在 HTML 中 的 特殊符号 是以 & 符号开始 , 以 分号 ; 结尾 的符号 ;


常见的 HTML 特殊符号如下 :

以上是关于HTMLHTML 标签 ⑤ ( 锚点定位 | base 标签 | 预格式化文本标签 | HTML 特殊符号 )的主要内容,如果未能解决你的问题,请参考以下文章

html中设置锚点定位的几种常见方法

HTMLHTML 表单 ⑤ ( form 表单域 )

Android 实现锚点定位

使用锚点定位页面位置

js 定位到某个锚点的方法

jquery 在页面上根据ID定位(jQuery锚点跳转及相关操作) 经典