200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > 【HTML】HTML 标签 ⑤ ( 锚点定位 | base 标签 | 预格式化文本标签 | HTML 特殊符号 )

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

时间:2020-12-13 12:12:21

相关推荐

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

文章目录

一、锚点定位二、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="/">CSDN 博客</a><a href="/shulianghan">韩曙亮博客</a><a href="/">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 特殊符号如下 :

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。