欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

初学HTML——文本类网页设计

程序员文章站 2024-02-26 17:58:16
...

一.常用的文本标签

1.标题标签

HTML中，定义了6级标题，分别为h1、h2、h3、h4、h5、h6，每级标题的字体大小依次递减，1级标题字号最大，6级标题字号最小。

2.段落标签

<p>标签用于定义段落。

<br>标签与<wbr>标签

<br>标签:可插入一个简单的换行符，用来输入空行，而不是分割段落。（<br>是直接显示换行）
<wbr>标签：规定在文本中的何处适合添加换行符。作用是建议浏览器在这个标记处可以断行,只是建议而不是必定会在此处断行,还要根据整行文字长度而定。除了 Internet Explorer，其他所有浏览器都支持 <wbr> 标签，。（<wbr>是根据在浏览器的变化时进行换行）

4. <details>标签与<summary>标签

<details>标签用于描述文档或文档某个部分的细节，目前只有Chrome浏览器支持<details>标签，可以与<summary>标签配合使用，<summary>标签用于定义这个描述文档的标题，在嵌套时，<summary>标签嵌套在<details>标签里

5.<bdi>标签

<bdi>标签用于设置一段文本，使其脱离其父标签的文本方向设置。在发布用户评论或其他您无法完全控制的内容时，该标签很有用。<bdi>标签的属性是dir，目前只有Chrome和Firefox浏览器支持。

示例如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
</head>
<body>
    <p>My school <bdi dir="ltr">is</bdi> NeijiangNormal University</p>
    <p dir="rtl">My school is NeijiangNormal University</p>
    <p>This <bdo dir="rtl">is</bdo> an bdi.</p>
</body>
</html>

效果如下：
初学HTML——文本类网页设计
注：dir的默认值为auto，结果是与<bdi>元素内的文本方向一致。dir的取值还可以是rtl,表示文本方向是从右到左,ltr表示文本方向是从左到右。
<bdo>标签表示：控制文字方向。rtl表示文字是从左到右显示。

6. <ruby>标签、<rt>标签与<rp>标签

<ruby>标签用于定义ruby注释（中文注音或字符）。与<rt>标签一同使用。
<rt>标签用于定义字符（中文注音或字符）的解释或发音。
<rp>标签在ruby注释中使用，以定义不支持<ruby>标签的浏览器所显示的内容。

示例如下:

<!DOCTYPE html>
<html>
<head> 
  <meta charset="utf-8"> 
</head>
<body>
  <ruby>
    汉 <rp>(</rp><rt>han</rt><rp>)</rp>
    字 <rp>(</rp><rt>Zi</rt><rp>)</rp>
  </ruby>
  <ruby>
    漢<rt>
    <rp>(</rp> ㄏㄢˋ <rp>)</rp>
   </rt>
  </ruby>
  <ruby>
    漢 <rp>(</rp><rt>ㄏㄢˋ</rt><rp>)</rp>
  </ruby> 
  <ruby>
    黄<rt>huang</rt>
  </ruby>
  <!--对于不支持ruby标记的浏览器里，rp标记里的内容就会显示出来-->
</body>
</html>

效果如下：
初学HTML——文本类网页设计

7.<mark>标签

<mark>标签主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字，典型应用是搜索结果中高亮显示搜素关键字。

8.<time>标签

<time>标签用于定义日期或时间，也可以两者同时。

9. <meter>标签

<meter>标签用于定义度量衡，仅用于已知最大和最小值的度量。

10. <progress>标签

<progress>标签用于定义任何类型任务的运行进度，可以使用<progress>标签显示JavaScript中时间函数的进程。

二.Css字体样式属性

1.css常用的字体样式属性如下表所示

初学HTML——文本类网页设计

aaa@qq.com规则

（1）@font-face是CSS3的新特性，用于定义服务器字体。通过@font-face规则，开发者便可以使用用户计算机未安装的字体。
（2）@font-face规则的语法格式如下所示。

@font-face {
	   font-family: <YourWebFontName>;
                  src: <source> [<format>][,<source> [<format>]]*;
                 [font-weight: <weight>];
	   [font-style: <style>];
	 }

其中：
YourWebFontName：自定义的字体名称，最好是使用下载的默认字体（下载回来的叫什么字体，这里就填什么字体名）。
source：此值指的是自定义的字体的存放路径，可以是相对路径也可以是绝对路径。
format：此值指的是自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype、opentype、truetype-aat、embedded-opentype、svg等；

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
@font-face
{
	font-family: myFirstFont;
	src: url('Sansation_Light.ttf')
		,url('迷你简卡通_downcc.TTF'); /* IE9 */
}
div{font-family:myFirstFont;}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9 只支持 .eot 格式的字体.</p>
<div>
使用 CSS3,网站终于可以使用字体以外的预先选择“合法”字体
</div>
</body>
</html>

效果如下：

初学HTML——文本类网页设计

三.css文本外观属性

1.CSS的文本外观属性用于设置颜色、字间距 、字母间距、水平对齐、文本装饰 、阴影等。

属性 描述
color 文本颜色
letter-spacing 字间距。默认值：normal属性值可为不同单位的数值。
word-spacing 单词间距。默认值：normal属性值可为不同单位的数值
line-height 行间距,用于定义行与行之间的距离，属性值的单位有三种: px, em和%。允许使用负值
text-transform 英文文本转换。capitalze:首字母大写，uppercase：全部字符转为大学，lowercase：全部字符转为小学
text-decoration 文本装饰。默认值：none，没有装饰，underline：下划线，overline：上划线,line-through：删除线
text-align 水平对齐方式。默认值:left:左对齐, right:右对齐，center：居中对齐
text-indent 首行缩进,属性值的单位有三种: px, em和%。允许使用负值
white-space 空白符处理,pre: 预格式化，按文档的书写格式保留空格、空行原样显示。nowrap: 合并所有空白符为一个空白符，强制文本不能换行
text-overflow 标示对象内溢出文本,clip:修剪溢出文本，不显示省略，ellipsis：用“……”表示被修剪的文本。

2.text-shadow为文本添加阴影效果

在CSS中，使用text-shadow属性可以为页面中的文本添加阴影效果，其基本语法格式如下：

选择器{text-shadow:h-shadow  v-shadow  blur  color;}

其中：
h-shadow：水平阴影
v-shadow：垂直阴影
blur:模糊半径
color：阴影颜色

示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        P{
            font-size: 25px;
            text-shadow:10px 10px 10px red;  /*设置文字阴影的垂直距离、水平距离、模糊半径、和颜色*/
        }
    </style>
</head>
<body>
<p>text-shadow属性可以为文字添加阴影哦！</p>
</body>
</html>

效果如下：
初学HTML——文本类网页设计

上一篇： StringBuffer及类型转换

下一篇： Python自动发邮件脚本

推荐阅读