整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML标签之文本格式化和注释标签

、文本格式化标签

在网页中,有时需要为文字设置粗体、斜体或下划线效果,这时就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示。

b i s u 只有使用 没有 强调的意思 , strong em del ins 语义更强烈

二、注释标签

HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。

  • 语法

<!-- 注释语句 -->

  • 注意
  • 注释内容不会显示在浏览器窗口中,但是作为HTML文档内容的一部分,也会被下载到用户的计算机上,查看源代码时就可以看到。

Markdown是一种轻量级标记语言,它最初由John Gruber和Aaron Swartz2004年共同创建,可以通过简单、纯文本的语法,快速构建格式化、排版精美的文档。其可与HTML混编,可导出为HTML、PDF、Word等格式的文件

Markdown可以让作者更多地关注内容本身而非格式排版。同样的内容,在Markdown里会比在Word、HTML等里容易很多

  • 如:定义一段粗体文字
    • Word中,我们需要选中这段文字,然后选中粗体格式,或快捷键ctrl+B
    • HTML中,我们需要用strong或b标签包裹,或用CSS设置
    • 而在Markdown中,我们只需要在两侧用两个星号**包裹即可

得益于其简洁、高效、易读、易写,Markdown被大量使用。如GitHub、Jupyter Notebook和各种博客平台,都原生支持Markdown,可以说是技术文档编写的首选,甚至可以用来帮助写公众号文章(本篇推文即用Markdown编写)

使用

Markdown文件通常采用.md的后缀,其可以在几乎所有文本编辑器中打开编辑,如:电脑自带的记事本等

但,如果你想要预览其排版格式化的内容,则需要使用对应支持的编辑器,好用的编辑器可以帮你快速预览、导出各种格式的文档或图像等,下面介绍几款主流好用的编辑器

  • Typora — 可实时预览,界面简洁,支持多种格式导出,可自由导入、切换、自定义各种主题
  • VSCode — 了解的应该都了解,搭配扩展,可实现Markdown的预览编写
  • Obsidian — 一款功能强大的笔记软件,以双向链接和知识图谱为特色,适合笔记和知识管理
  • StackEdit — 功能强大的在线编辑器,可同步到Google DriveDropbox

基础语法

千万不要被标记语言吓到,Markdown的语法十分简单,常用的标记符号不超过十个,用于日常写作记录绰绰有余,几乎不到半小时就能完全掌握,从此达到心中无尘,码字入神的境界

标题

用于创建1-6级的标题,可对应HTMLh1 - h6

用#后加一个空格再跟标题内容的语法创建,#的数量于标题级数成正比,几级标题前就跟几个#

对应预览效果(不同编辑器、主题会呈现不同效果,可自定义,本文采用github主题):

段落

创建段落,只需使用空白行一行或多行文本进行分隔

预览:

如果段落含有语法字符,可使用 \ 转义,如:\*转义而非斜体\*

词汇语法

强调

可将文本设置为粗体斜体来强调其重要性

  • 粗体

需要加粗文本,只需在待加粗内容前后两侧分别添加*星号_下划线,推荐使用星号

预览(效果是一样的):

  • 斜体

需要斜体显示文本,只需在待斜体内容前后两侧分别添加*星号_下划线,推荐使用星号

预览(效果一致):

  • 粗斜体

如果想要同时粗体和斜体,只需在待格式内容前后两侧各添加*星号_下划线,推荐使用星号

预览:

删除线

想要出现删除线效果,只需在待删除内容前后两侧各加~

预览:

高亮

想要高亮内容,只需在待高亮内容前后两侧各加=

预览:

上下标

有时需要使用上下标格式文本

  • 上标

使用上标,需在待上标内容两侧加一个^

预览

  • 下标

使用下标,需在待下标内容两侧~

预览

链接

可用于快速插入链接,达到跟HTMLa标签同样的效果

语法为:[链接描述](链接地址)

预览:

图片

可用于快速插入图片,达到跟HTMLimg标签同样的效果

语法为:![图片描述](图片链接地址,可本地或网络),与链接语法类似,前面多了个!而已

预览:

引用

用于创建块引用,达到突出引用内容的目的

语法为:> 引用内容,采用>后跟一个空格再加待引用内容的形式

如有多段引用内容,需要在每一段内容前均添加>包括分隔段落用的空白行

预览:

引用还可以嵌套结合其它语法进行使用,如强调、链接、列表等,具体可自行尝试

分隔线

单独一行上使用三个或多个星号 ***、破折号--- 或下划线 ___,并且不包含其他内容,可创建一条分隔线

预览(三种方式效果一致):


列表

用于将多个条目组织成有序或无序列表

  • 无序列表

每个列表项前面添加破折号-、星号*或加号+(用空格隔开),缩进一个或多个列表项可创建嵌套列表

预览:

  • 有序列表

每个列表项前添加数字并紧跟一个英文句点(用空格隔开),数字不必按数学顺序排列,但是列表会当以数字1起始

预览:

代码

可将短语或单词表示为代码,两侧各使用一个反引号`

如果想在代码内含有反引号,可在内容两侧使用反引号`包裹

预览:

代码块

用于表示一整段代码内容,语法如下,用三个反引号```三个波浪号~~~包裹块内容

预览:

反引号后可跟内容块语法的标注名称,可起到语法高亮效果,也可不跟内容,表示普通纯文本

内嵌HTML

有时候,单纯的Markdown并不能满足我们的全部需求,此时可直接使用HTML标签表达

<span><cite><del><a><img><div>等标签,同时可搭配一些简单的属性样式,起到改变文字、图片大小等效果

高级语法

基础语法用于应对大部分日常场景已经十分够用,但对于某些场景仍有一些不够

表格

使用个或连字符---创建分隔标题与内容块,并使用管道|分隔每列,可以选择在表的任一端添加管道

预览:

默认是采用左对齐,可在分隔行两侧添加冒号:表示左对齐、右对齐或居中

预览:

任务列表

在列表项前带有复选框,用于表达任务的完成与否

语法参考:在任务列表项之前添加破折号-方括号[ ](两者用空格隔开),选择复选框,需在方括号[]里面添加x,如[x]

预览:

脚注

可以为内容添加注释和参考

  • 脚注使用[^1]: 注释一内容的形式定义,[^1]为脚注标识,^后可跟数字或单词(这里为数字1),脚注内容标识之间用冒号空格隔开
  • 引用脚注只需在内容后加脚注标识即可[^1]

预览:

最后

除了本文介绍内容,Markdown还可以扩展流程图图表数学公式等语法,感兴趣可自行深入了解

同时,搭配不同主题还可以生成各种精美格式、以下是一个拟态风的自定义主题预览

TML针对不同的内容有不同类型的标记,这些标记是HTML5文档的基础,你知道有哪些吗?

1.单标记和双标记

为了方便学习和理解,通常将HTML5标记分为两大类,即双标记和单标记。

a.双标记:

双标记双标记也称为体标记,分为开始标记和结束标记,其基本语法为:

<标记名>内容</标记名>

如:

<p>我是一个双标记</p>

b.单标记:

单标记也称空标记,是指用一个标记就可以完整的描述某个功能,其基本语法为:

<标记名/>

如:

<hr/>

上面hr标记表示一条水平线,后面会提到

2.注释标记

注释标记是HTML的一种特殊标记,它是一段便于阅读理解的不需要在页面中显示的注释文字。其基本语法格式为:

<!-- 注释语句 -->

如:

<p>这是一段文本</p>   <!-- 这是注释文本,不会在页面中显示 -->

上图即为浏览器中的结果。

3.标记的属性

HTML标记的默认样式是无法满足页面开发的需求的,如果想要为某段文本设置特定的样式,就需要用到HTML标记的属性了,其基本语法格式为:

<标记名 属性1="属性值1" 属性2="属性值2" 属性3="属性值3"...>内容</标记名>

下面以一个例子来展示:

网页第一行是一个二级居中的标题,第二行是一个局中的段落,第三行是一个大小为2px,颜色为灰色的水平线,第四行是一段正常的段落,部分词语被加粗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2 align="center">我是居中的二级标题</h2> 
    <p align="center">我是居中的段落</p> 
    <hr size="2" color="#ccc"/>
    <p>我是一个正常的段落,这是<strong>关键字</strong>,其他的都是正常内容。<p/>
</body>
</html>

效果如图所示:

多学一招(键值对):

“键值对”简单地说即为对“属性”设置“值”

例如:

color = "red";width:"200px";

上面的color和width就相当于属性1和属性2,red和200px就是对应的属性值1和属性值2,如果顺序出错,是没有效果的

总结:

在HTML开始标记中,可以通过 属性=“属性值”的方式为标记添加属性,其中“属性”和“属性值”是以“键值对”的形式出现的

4.HTML5文档头部相关标记(拓展)

1.title

一个HTML文档只能含有一对<title></title>标记,<title></title>之间的内容将显示在浏览器窗口的标题栏中。

基本语法格式:

<title>网页标题名称</title>

2.meta

meta定义页面元信息:

设置网页关键字》》》<meta name=”keywords” content=”JAVA、php”/>

设置网页描述》》》<meta name=”description” content=”IT培训教育”/>

设置网页作者》》》<meta name=”author” content=”传智播客”/>

设置字符集》》》<meta http-equiv=”Content-Type” content=”text/htm; charset=utf-8l”/>

设置页面自动刷新与跳转》》》<meta http-equiv=”refresh” content=”10;url=http://www.itcast.cn”/>

3.link

基本语法格式:

<link 属性=”属性值” />

属性名

常用属性值

描述

href

URL

指定引用外部文档

rel

stylesheet

指定当前文档与引用外部文档的关系,该属性值通常为stylesheet,表示定义一个外部样式表

type

text/css

引用外部文档的类型为CSS

type

text/javascript

引用外部文档的类型为JavaScript脚本

4.style

基本语法格式:

<style 属性=”属性值”>样式内容</style>

在HTML中使用style标记时,常常定义其属性为type,相应的属性值为text/css,表示使用内嵌式的CSS样式