HTML 文本格式化

TML 文本格式化

加粗文本

斜体文本

电脑自动输出

这是下标和上标

HTML 格式化标签

HTML 使用标签<b> 与<i> 对输出的文本进行格式, 如：粗体 or 斜体

这些HTML标签被称为格式化标签（请查看底部完整标签参考手册）。

	通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。然而，这些标签的含义是不同的：<b> 与<i> 定义粗体或斜体文本。<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。

在线实例

文本格式化

此例演示如何在一个 HTML 文件中对文本进行格式化

预格式文本

此例演示如何使用 pre 标签对空行和空格进行控制。

"计算机输出"标签

此例演示不同的"计算机输出"标签的显示效果。

地址

此例演示如何在 HTML 文件中写地址。

缩写和首字母缩写

此例演示如何实现缩写或首字母缩写。

文字方向

此例演示如何改变文字的方向。

块引用

此例演示如何实现长短不一的引用语。

删除字效果和插入字效果

此例演示如何标记删除文本和插入文本。

HTML 文本格式化标签

标签	描述
<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字

HTML "计算机输出" 标签

标签	描述
<code>	定义计算机代码
<kbd>	定义键盘码
<samp>	定义计算机代码样本
<var>	定义变量
<pre>	定义预格式文本

HTML 引文, 引用, 及标签定义

标签	描述
<abbr>	定义缩写
<address>	定义地址
<bdo>	定义文字方向
<blockquote>	定义长的引用
<q>	定义短的引用语
<cite>	定义引用、引证
<dfn>	定义一个定义项目。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

、什么是HTML

HTML简介

HTML是用来描述网页的一种语言，它是一种超文本标记语言，由一套标记标签组成，在制作网页时，HTML使用标记标签来描述网页。

发展史

HTML：Hyper Text Markup Language超文本标记语言

超文本标记语言—在1993年6月互联网工程工作小组工作案发布（并非标准）

HTML2.0—1995年11月作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布过时。

HTML3.2—1996年1月14日，W3C推荐标准

HTML4.0—1997年12月18日，W3C推荐标准

HTML4.01（微小改进）—1999年12月24日，W3C推荐标准，2000年5月15日发布基本严格的HTML4.01语法，是国标标准化组织和国际电工委员会的标准

XHTML1.0—发布于2000年1月26日，是W3C推荐标准，后来经过修订于2002年8月1日重新发布

XHTML1.1—2001年5月31日发布

XHTML2.0是W3C的工作草案，由于改动过大，学习这个新技术的成本过高而最终胎死腹中，因此，现在最常用的还是XHTML1.0标准。

目前最新的版本为HTML5，它是2004年被提出，2007年被W3C接纳并成立新的HTML工作团队，

2008年1月22日公布HTML5第一份正式草案，

2012年12月17日HTML5规范正式定稿，

2013年5月6日，HTML5.1正式草案公布。

HTML 5作为最新版本，提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。目前企业开发中也在增大使用HTML5的力度

HTML的优势

各大浏览器厂商对H5的支持
市场的需求
跨平台

二、HTML的基本结构

<html>......</html> HTML文档的开始和结束标记。
<head>……</head> 头控制标记，不在界面上进行展示，子标签可设置SEO优化的一些内容以及设置网页的编码。
<title>……</title>：设置浏览器的窗口上标题。
<body>……</body>：页面可见内容。

三、HTML的基本标签

标题标签

h1~h6

源代码

<!DOCTYPE html>

<head>

</head>

<body>

<h1>这是一级标题</h1>

<h2>这是二级标题</h2>

<h3>这是三级标题</h3>

<h4>这是四级标题</h4>

<h5>这是五级标题</h5>

<h6>这是六级标题</h6>

<h7>这是七级标题</h7>效果怎么显示不出来呢？？？

<h1>这是一级标题</h1>

</body>

</html>

浏览器预览效果

段落标签和换行标签

p标签为段落标签，br标签为换行标签

源代码

<!DOCTYPE html>

<head>

<title>段落和换行标签</title>

</head>

<body>

<h1>北京欢迎你</h1>

<p>北京欢迎你，<br>为你开天辟地</p>

<p>北京欢迎你，<br/>有有勇气就会有奇迹</p>

</body>

</html>

浏览器预览效果图

水平线标签

hr标签为水平线标签

源代码

<!DOCTYPE html>

<head>

<title>水平线标签</title>

</head>

<body>

<h1>漂洋过海来看你</h1>

<hr>

<p>为你我用了半年的积蓄，<br>漂洋过海来看你</p>

<hr/>

</body>

</html>

浏览器预览效果图

字体样式标签

em为斜体标签，strong为字体加粗标签

源代码

<!DOCTYPE html>

<head>

<title>字体样式标签</title>

</head>

<body>

<h1>漂洋过海来看你</h1>

<hr>

<p>为你我用了<em>2017</em>半年的<strong><em>积蓄</em></strong>，<br>

<em><strong>漂洋过海</strong></em>来看你

</p>

<hr/>

</body>

</html>

浏览器预览效果图

注释和特殊符号

注释使用：

大于号：> great than的缩写

小于号：< less than的缩写

双引号：""

版权符号：©

空格：

源代码

<!DOCTYPE html>

<head>

<title>注释和特殊符号</title>

</head>

<body>

<pre>

注释使用：

大于号：> great than的缩写

小于号：< less than的缩写

双引号：""

版权符号：©

空格：

</pre>

5<10>6 <br>

"我是被双引号引起来的内容"<br>

©自由职业开发者公司<br>

我是测试空格的

</body>

</html>

浏览器预览效果图

以上就是HTML的简单入门，后续带大家更深入的了解HTML

HTML 在页面上放置了一个按钮

<button class="btn">点击按钮</button>

如果想要实现当鼠标悬停在按钮上时，按钮文字加粗，在 CSS 里这样设置

.btn:hover {
    font-weight: bolder;
}

但是这样做了之后，当文字加粗后，势必会将按钮的尺寸撑的更大。那么有可能会影响到按钮周围其他 HTML 元素的位置，如果你的页面内容比较多，而且比较紧凑的话，撑大的按钮会将周围的元素推开，这很有可能会扰乱页面的布局。

如果既要保留按钮的鼠标悬停文字加粗的效果，还不能影响到周围元素的位置，可以再给按钮设定一个固定的尺寸。

.btn {
    padding: 1rem;
    width: 4rem;
}

.btn:hover {
    font-weight: bolder;
}

这样按钮的尺寸就不会变化，但是文字在鼠标悬停时会加粗，按钮周围的元素也不会受到影响。

以上这种情况一般在页面顶部的导航条上最为常见，请大家注意。

在线咨询

上一篇：前端开发基础课分享4-教你怎样让你的网页获得关注，醒目的标题
下一篇：CSS样式更改-字体设置Font&边框Border

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML 文本格式化

、什么是HTML

二、HTML的基本结构

三、HTML的基本标签

您的项目需求