【HTML】文字效果

为了在网页中显示文字信息，设计html时，只要在<body></body>中需要添加文字的地方输入文字就可以了，和我们在Word、记事本中的添加方式一样。同时，为了增加代码的可读性，还可以用<!-->添加必要的注释，这些注释信息不会显示在页面中。

1.文字修饰

在html文件中添加文字后，为了使网页更加的美观，还需要对文字添加一些效果。需要用到的一些标记如下


标记
说明

<b>
加粗

<i>
斜体

<u>
下划线

<del>
删除线

<address>
设置地址文字

<sup>
上标

<sub>
下标

实例：

<html>
	<head>
		<title>文字修饰</title>
	</head>
	<body>
		<p>语文：<br>
		　静夜思<br>
		<b>床前明月光</b><br>		<!--粗体-->
		<i>疑似地上霜</i><br>		<!--斜体-->
		<u>举头望明月</u><br>		<!--下划线-->
		<del>低头思故乡</del><p>	<!--删除线-->

		<p>数学：<br>
		  x<sup>2</sup>-6x+5=0<br>	<!--上标-->
		解：x<sub>1</sub>=0;x<sub>2</sub>=1		<!--下标-->
		</p>

		<p>版权所有&copy;：廊坊师范学院</p>	<!--特殊符号-->
	</body>
</html>

效果：

2. 段落

不管普通文档还是网页，在关于文字信息的部分都会涉及到段落的相关内容，它使得文字表达更加清晰。在html中专门的段落标记是<p>，除此之外还有很多标记可以设置它的段落格式


标记
说明

<p>
定义段落，但是不能进行段落格式的设置

<br>
回车

<pre>
预格式化，设置后，键盘上的回车键就可生成一个段落

<blockquote>
设置段落缩进，可以增加段落的层次效果

<hr>
插入并设置水平线

3.特殊符号

在使用特殊符号时需要转换成相应的代码，把这些代码插入到html文件中，这样显示在网页中的才是我们需要的特殊符号。常用的特殊符号与代码对应如下：


符号
对应代码

空格
&nbsp;

&
&amp;

?
&copy;　　　　

?
&trade;

?
&reg;

￥
&yen;

§
&sect;

小结：

在html文档中，当需要对某部分文字进行说明时，还可通过添加文字的标注标记<ruby>来完成。文字效果的设置有很多，只要掌握常用的一些标记，合理的使用它们可以使网页更加赏心悦目。

时间： 2024-08-04 18:03:58

【HTML】文字效果的相关文章

实现textview竖排文字效果

文字效果 /** * @描述 * @作者 tll * @时间 2016/10/20 */public class VerticalTextView extends LinearLayout { private LinearLayout llLayout; private TextView textView; public VerticalTextView(Context context, AttributeSet attrs) { super(context, attrs); this.cont

实现密码框默认文字效果实例代码

实现密码框默认文字效果实例代码:大家都知道很多文本框在默认情况下都有默认的提示文本,例如"请输入姓名"之类的语言,当点击文本框的时候,会清除提示语,比较人性化.但是在密码框中实现此效果可能就有点麻烦了,因为密码框不是以明文显示的,下面就介绍一下代码实例解决此问题.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="

cocos2dx 实现跑马灯效果和文字效果

目标:实现下面2种文字效果 1. 2. 方法:   利用ClippingNode实现上图所示效果. 1效果:给ClippingNode添加裁剪裁剪内容,即红色文字,然后设置裁剪模板.然后让模板来回移动即可实现如图效果.直接贴代码: Label* txt = Label::create("this is a clippingNode Test...this is a clippingNode Test...","Arial",30); txt->setColor

CSS立体文字效果最佳实践

上一篇的<纯CSS3文字效果推荐>文章里面推荐了8款纯css实现的文字效果,其中3d文字效果最为流行,限于篇幅仅仅展示了其3D实现原理,没有考虑代码的复用性和可移植性,今天来补充下,顺便领略sass的强大功能,请大家摩摩拳擦擦掌,开工咯! 案例效果还是在codepen,在线研究点这里,下载收藏点这里. 1.单单纯纯的效果一 为了简化操作,我们使用和上一篇文章<纯CSS3文字效果推荐>一样的文档结构,后面的效果大差小不差,也就不再列出. <div contenteditable

小tip:CSS3下的渐变文字效果实现——张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1601 一.方法一:借助mask-image属性 可以狠狠地点击这里:CSS3下的渐变文字效果方法一demo 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面中看到类似下面的效果: 相应的HTML代码如下: <h2 class="text-gradient" data-text=

canvas动画文字效果

Doughnut Chartvar c=document.getElementById("canvas");var ctx=c.getContext("2d");ctx.font="50px sans-serif";ctx.fillText("75%",40,92);//ctx.clearRect(40, 52, 74, 68); var c=document.getElementById("canvas"

纯CSS3文字效果推荐

之前曾经研究过几个纯css实现的文字效果,<CSS文字条纹阴影动画>和<响应式奶油立体字效果>等,今天我们来研究几款文字效果,主要利用text-shadow.webkit内核的几个独有特性实现效果. 在线研究单击这里,下载收藏单击这里. 效果1-立体字效果 我们的html文件貌似这样,为了更好的展示效果,我们加上了可编辑属性. <div contenteditable="true" class="text effect01">前端

Qt qml 模拟iphone slide to unlock 的聚光动画文字效果

模拟iphone slide to unlock 的聚光动画文字效果    /底层放淡文字    /前景放高亮文字+半透明遮罩    /动画移动遮罩 Author: surfsky.cnblogs.com 2015-02Lisence: MIT, 请保留本文档说明 [先看效果] [下载] http://download.csdn.net/detail/surfsky/8448175 [核心代码] // 背景文字(灰色) Text{ text: root.text font.pointSize:

精通CSS+DIV网页样式与布局--CSS文字效果

上篇文章,小编简单的介绍了一下CSS的一些基本语法,学习内容不是很复杂,都是CSS的一些入门知识,但是万丈高楼平地起,搭好地基,高楼大厦不在话下,学习任何课程,都必须从基础开始,一步一个脚印,踏实坚定的往下走,今天这篇博文,小编主要简单总结一下CSS的文字效果,首先,我们来看一张图: 接下来,小编会随着上面图示的脉络,一一进行讲解,都是一下简单的知识,有兴趣的小伙伴,可以动手和小编一起来实现以下代码实例. 文字的字体 在CSS中,我们采用了font-family来控制文字的字体,接着,我们来看一