[前端笔记——HTML介绍] 4.HTML文本基础+超链接+高级文本格式
[前端笔记——HTML介绍] 4.HTML文本基础+超链接+高级文本格式
- 1.HTML文本基础
- 1.1标题和段落
- 1.2列表
- 1.2.1无序列表(unordered)
- 1.2.2有序列表(ordered)
- 1.3重点强调
- 2.建立超链接
- 2.1什么是超链接?
- 2.2链接的解析
- 2.3电子邮件链接
- 3.高级文本格式
- 3.1描述列表
- 3.2引用
- 3.2.1块引用
- 3.2.2行内引用
- 3.2.3引文
- 3.3缩略语
- 3.4标记联系方式
- 3.5上标和下标
- 3.6标记时间和日期
1.HTML文本基础
1.1标题和段落
在HTML中,每个段落是通过 <p>
元素标签进行定义的,比如下面这样:
<p>了解了HTML、CSS、JavaScript的基础知识。</p>
每个标题是通过“标题标签”进行定义的:
<h1>本周学习内容</h1>
1.2列表
1.2.1无序列表(unordered)
代码如下:
<ul>
<li>...</li>
</ul>
1.2.2有序列表(ordered)
代码如下:
<ol>
<li>...</li>
</ol>
在嵌套列表中,无序列表可以嵌套有序列表。
1.3重点强调
HTML 提供了相应的标签,用于标记某些文本,使其具有加粗、倾斜、下划线等效果。
加粗:<strong></strong>
倾斜:<em></em>
<i>
被用来传达传统上用斜体表达的意义:外国文字,分类名称,技术术语,一种思想……<b>
被用来传达传统上用粗体表达的意义:关键字,产品名称,引导句……<u>
被用来传达传统上用下划线表达的意义:专有名词,拼写错误……
因为我们常常会认为网页中的下划线代表着一个超链接,所以最好只用下划线来代表超链接。而在语义适合的情况下不得不使用元素时,可以使用 CSS 来改变元素对应的下划线的默认样式,从而和超链接的下划线区分开来。
2.建立超链接
2.1什么是超链接?
超链接是直接使互联网成为互联的网络。超链接使我们能够将文档连接到任何其他资源,也可以连接到文档本身的指定部分。几乎任何网络内容都可以转换为链接,点击(或激活)超链接将使网络浏览器转到另一个网址(url)。
URL 可以指向 HTML 文件、文本文件、图像、文本文档、视频和音频文件以及可以在网络上保存的任何其他内容。如果浏览器不知道如何显示或处理文件,它会询问你是否要打开文件(需要选择合适的本地应用来打开或处理文件)或下载文件(以后处理它)。
2.2链接的解析
通过将文本(或其它内容) 包裹在 <a>
元素内,并给它一个 href 属性(也称为超文本引用或目标,它将包含一个网址)来创建一个基本链接。
<p>我创建了一个指向<a href="https:csdn.net">CSDN 主页</a>的超链接。
</p>
这里可以通过使用title属性添加支持信息。比如:
<p>我创建了一个指向<a href="https:csdn.net" title="学习技术就来这儿!">CSDN 主页</a>的超链接。</p>
链接的标题仅当鼠标悬停在其上时才会显示,这意味着使用键盘来导航网页的人很难获取到标题信息。
超链接除了可以链接到文档外,也可以链接到 HTML 文档的特定部分(被称为文档片段)。要做到这一点,必须首先给要链接到的元素分配一个 id 属性。例如,如果想链接到一个特定的标题,可以这样做:
<h2 id="Mailing_address">邮寄地址</h2>
然后链接到那个特定的 id,可以在 URL 的结尾使用一个井号指向它,
<p>要提供意见和建议,请将信件邮寄至<a href="contacts.html#Mailing_address">我们的地址</a>。</p>
甚至可以在同一份文档下,通过链接文档片段,来链接到同一份文档的另一部分:
<p>本页面底部可以找到<a href="#Mailing_address">公司邮寄地址</a>。</p>
当需要链接到要下载的资源而不是在浏览器中打开时,可以使用 download 属性来提供一个默认的保存文件名。下面是一个 Firefox 的 Windows 最新版本下载链接的示例:
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"download="firefox-latest-64bit-installer.exe">下载最新的 Firefox 中文版 - Windows(64 位)
</a>
2.3电子邮件链接
当点击一个链接或按钮时,打开一个新的电子邮件发送信息而不是连接到一个资源或页面,这种情况是可能做到的。这样做是使用 <a>
元素和 mailto:URL 的方案。
其最基本和最常用的使用形式为一个 mailto: 链接,链接指明收件人的电子邮件地址。
比如:
<a href="mailto:nowhere#mozilla.org"向Mizilla发邮件</a>
实际上,电子邮件地址是可选的。如果mailto后面没有邮件地址,一个新的发送电子邮件的窗口也会被用户的邮件客户端打开,只是没有收件人的地址信息,这通常在“分享”链接是很有用的,用户可以给他们选择的地址发送邮件。
除了电子邮件地址,你还可以提供其他信息。事实上,任何标准的邮件头字段可以被添加到你提供的 mailto URL 中。其中最常用的是主题(subject)、抄送(cc)和主体(body)(这不是一个真正的标头字段,但允许你为新邮件指定一个简短的内容消息)。每个字段及其值被指定为查询项。
<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">Send mail with cc, bcc, subject and body
</a>
每个字段的值必须是使用 URL 编码的,也就是使用百分号转义的非打印字符(不可见字符比如制表符、换行符、分页符)和空格。同时注意使用问号(?)来分隔主 URL 与参数值,以及使用 & 符来分隔 mailto: URL 中的各个参数。
3.高级文本格式
3.1描述列表
描述列表使用与其他列表类型不同的闭合标签——<dl>
;此外,每一项都用 <dt>
(description term)元素闭合。每个描述都用 <dd>
(description definition)元素闭合。浏览器的默认样式会在描述列表的描述部分(description definition)和描述术语(description terms)之间产生缩进。
一个术语 <dt>
可以同时有多个描述 <dd>
。
3.2引用
HTML 也有用于标记引用的特性,至于使用哪个元素标记,取决于引用的是一块还是一行。
3.2.1块引用
如果一个块级内容(一个段落、多个段落、一个列表等)从其他地方被引用,应该把它用<blockquote>
元素包裹起来表示,并且在cite属性里用 URL 来指向引用的资源。例如,引用MDN的<blockquote>
元素页面:
<p>The <strong>HTML <code> <blockquote></code>
Element</strong></p>
<em>HTML Block Quotation Element</em> indicates that enclosed text is an
extended quotation.
把这些转换为块引用:
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"><p>The <strong>HTML <code> <blockquote></code>Element</strong></p><em>HTML Block Quotation Element</em> indicates that enclosed text is an extended quotation. </blockquote>
浏览器在渲染块引用时默认会增加缩进,作为引用的一个指示符。
3.2.2行内引用
行内元素用同样的方式工作,除了使用<q>
元素。例如:
<p>The quote element - <code><q></code>-is<q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q></p>
浏览器默认将其作为普通文本放入引号内表示引用。
3.2.3引文
cite属性内容不会被浏览器显示、屏幕阅读器阅读,需使用 JavaScript 或 CSS,浏览器才会显示cite的内容。
如果想要确保引用的来源在页面上是可显示的,更好的方法是为<cite>
元素附上链接.
举个例子:
- 把中间的段落变成块引用,它要包含cite属性
- 把第三个段落的一部分变成行内引用,它要包含cite属性
- 每一个引用都要包含
<cite>
元素
需要的引用源:
- http://www.brainyquote.com/quotes/authors/c/confucius.html 对应 “孔子曰”。
- http://www.affirmationsforpositivethinking.com/ 对应 “不要说泄气的话”。
<p>你好!欢迎访问我的激励网页!<a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>孔子</cite></a>曰:</p>
<blockquote cite="https://zh.wikipedia.org/zh-hans/孔子"><p>譬如为山,未成一篑,止,吾止也。譬如平地,虽覆一篑,进,吾往也。</p>
</blockquote>
<p>要保持乐观,<q cite="http://www.affirmationsforpositivethinking.com/">不要说泄气的话</q>。(源自 <a href="http://www.affirmationsforpositivethinking.com/"><cite>Affirmations for Positive Thinking</cite></a>。)</p>
3.3缩略语
web 上看到的相当常见的元素是<abbr>
——它常被用来包裹一个缩略语或缩写,并且提供缩写的解释(包含在title属性中)。
示例:
<p>我们使用<attr title="超文本标记语言">HTML</attr>来组织网页语言。</p>
3.4标记联系方式
HTML 有个用于标记联系方式的元素——
。它仅仅包含联系方式,例如:<address><p>Chris Mills,Manchester,The Grim North,UK</p>
</address>
但要记住的一点是,<address>
元素是为了标记编写 HTML 文档的人的联系方式,而不是任何其他的内容。因此,如果这是 Chris 写的文档,上面的内容将会很好。
3.5上标和下标
当使用日期、化学方程式、和数学方程式时会偶尔使用上标和下标。<sup>
和<sub>
元素可以解决这样的问题。
有大量的 HTML 元素可以来标记计算机代码:
<code>
: 用于标记计算机通用代码。<pre>
: 用于保留空白字符(通常用于代码块)——如果在文本中使用缩进或多余的空白,浏览器将忽略它,将不会在呈现的页面上看到它。但是,如果将文本包含在<pre></pre>
标签中,那么空白将会以与在文本编辑器中看到的相同的方式渲染出来。<var>
: 用于标记具体变量名。<kbd>
: 用于标记输入电脑的键盘(或其他类型)输入。<samp>
: 用于标记计算机程序的输出。
3.6标记时间和日期
HTML 还支持将时间和日期标记为可供机器识别的格式的 <time>
元素。例如:
<time datetime="2016-01-20">2016 年 1 月 20 日</time>
[前端笔记——HTML介绍] 4.HTML文本基础+超链接+高级文本格式相关推荐
- [前端笔记——HTML介绍] 2.开始学习HTML
[前端笔记--HTML介绍] 2.开始学习HTML 1什么是HTML? 2剖析一个HTML元素 3块级元素和内联元素 4空元素 5属性 6为一个元素添加属性 7布尔属性 8省略包围属性值的引号 9单引 ...
- Excel表格批量将文本转换为超链接 批量文本转链接 一键转URL
Excel表格批量将文本转换为超链接 批量文本转链接 一键转URL 想实现表格里的文本链接点击直接打开浏览器 方案对比 效果 工具 想实现表格里的文本链接点击直接打开浏览器 方案对比 逐个单元格双击. ...
- 前端笔记(3)css,选择器,文字文本属性,外观属性
CSS样式表(1) (1)css概念 引入css的三种方法 行内式(内联样式) 内部样式表(内嵌样式表) 外部样式表(外链式) (2)css选择器 css基础选择器 标签选择器 类选择器 id选择器 ...
- 前端笔记—从入门到坟墓[网站基础与优化][12.1]
网站icon图标 引入方式: <link rel="shortcut icon" href="favicon.ico" type="image/ ...
- 【学习笔记】山东大学生物信息学——Perl 语言基础入门+高级
文章目录 8.3 Perl 语言基础入门 8.3.1 第一个 Perl 8.3.2 Perl 的基本规则 8.3.3 字符串常用函数 8.3.4 数组常用函数 8.4 Perl 语言基础高级 8.4. ...
- Henry前端笔记之 Date对象详解
Henry前端笔记之 Date对象详解 Date 对象 1 时间格式简介 2 Date.now 与 new Date().getTime() 的区别 3 Date对象详解 普通函数的用法 构造函数的用 ...
- 前端笔记 | CSS基础
CSS基础 一.CSS简介 1.1 HTML的局限性 1.2 CSS的作用 1.3 CSS语法规范 1.4 CSS代码风格 二.CSS基础选择器 2.1 CSS选择器的作用 2.2 选择器的分类 2. ...
- [前端笔记——CSS] 12.处理不同方向文本
[前端笔记--CSS] 12.处理不同方向文本 1.书写模式 2.书写模式.块级布局和内敛布局 3.逻辑属性和逻辑值 1.书写模式 CSS 中的书写模式是指文本的排列方向是横向还是纵向的.writin ...
- UE4 Material 101学习笔记——01-07 介绍/PBR基础/UV扭曲/数据类型/翻页动画/材质混合/性能优化
UE4 Material 101学习笔记--01-07 介绍/PBR基础/UV扭曲/数据类型/翻页动画/材质混合/性能优化 Lec 01 什么是着色器 What Is A Shader? 1.1 介绍 ...
最新文章
- Python3模块Crypto改为pycryptodome
- birt报表表格边框_手把手教你五步制作出一张领导驾驶舱报表
- Java反射机制——获取成员变量构造函数
- 软件工程专业如何就业!
- C++中不能声明为虚函数的有哪些函数
- 如何软件项目电子投标
- ai软件基础教程自学网,怎么快速学会ai软件
- 剑指offer刷题专栏C++
- python处理xps文件_xps/pdf/png/json转换
- GetLastError的使用和返回值定义大全
- 数学建模Latex简易模板
- 北京驾驶证期满换证(2021-06)
- 【复杂网络系列】模块度(Modularity )的计算方法
- 程序员在互联网创业公司工作五年是一种怎样的体验?
- 如何正确使用关键路径图?
- Mysql定时任务,最简单例子
- dockers 的简单使用
- fir.im Weekly - 当技术成为一种“武器”
- 多个接口可以封装成一个接口处理
- WordPress配置SMTP发送电子邮件(QQ邮箱)