前端基础之——网页文本与段落信息组织（二）

一时失言乱红尘 2021-09-22 07:42 260阅读 0赞

上一章讲到了初识HTML的格式，这一章了解一下网页文本与段落信息组织

本文主要讲解：

**文本基本标记**

**标题元素标记**

**段落元素标记**

**文本的间隔和布局**

**水平分割线元素标记**

**文本的样式设置**

# 1 网页文本与段落信息组织  #

## 1.1 文本基本标记 ##

标记用来控制字体、字号和颜色等属性。它是HTML中最基本的标记之一。

### 1.1.1 字体属性face ###

face标记用于设置文本所采用的字体名称。使用者的浏览器中只有安装了设置的字体后，才可以正确显示。否则这些特殊的字体会被浏览器中的普通字体所代替。

基本语法：

...

语法介绍：

face属性用来定义字体，任何安装在操作系统中文字都可以显示在浏览器中，可以给face属性一次定义多个字体，字体直接使用“，”分割开，浏览器在读取字体时，如果第一种字体不存在，则使用第二种字体代替，依次类推。

### 1.1.2 字号属性size ###

使用标记中的size属性可以设置文字大小。

基本语法：

...

语法介绍：

文字的大小有绝对和相对两种方式，size标记属性如下：

属性         描述

绝对整数从1到7的整数，代表字体大小的绝对字号

相对整数从-4到+4的整数（不包含0），字体相当于3好的放大和缩小字号（“+”号不能省略）

案例：

这两个字体时一样大的。

### 1.1.3 颜色属性 ###

color标记用于设置文字的颜色

基本语法：

...

语法介绍：

与网页背景色的设置类似，可以是一个已命名的颜色，也可以是一个十六进制的颜色值。

案例：

## 1.2 标题元素<H1~H6> ##

在页面中用到h1~h6的标题属性。标题（h1~h6）标签是指HTML网页中对文本标题所进行着重强调的一种标签。以标签<h1>、<h2> ... <h6>显示重要性的递减

基本语法：

语法介绍：

<h1>定义最大标题,<h6>定义最小标题

案例：

提示：不同的浏览器，标题的尺寸大小是不相同的，但<h1>标题大约是标准文字高度的2~3倍，<h6>标题则比标准字体略小

## 1.3 段落元素 ##

基本语法：

段落文字

语法介绍：

是HTML文档中最常见的标记，用来起始一个段落。段落标记可以没有结束标记,而每一个新的段落标记开始的同时也意味着上一个段落的结束。

案例：

## 1.4 文本的间隔和布局 ##

浏览器会把它找到的文字以适合显示窗口水平宽度的方式显示，当浏览器窗口宽松时，文本会自动调整以适应新的行宽，而窗口变窄时，文本会被挤压到下面去。但HTML使用明确的换行标记 ，缩进标记blockquote等控制文本的间隔和布局。

### 1.4.1 换行元素 ###

换行标记 的作用是在不另起一段的情况下将当前文本强制换行。

基本语法：

语法介绍：

一个 标记代表一个换行，连续多个标记可以实现多次换行。

案例：

### 1.4.2 取消换行元素 ###

在网页中，如果某一行的文本过长，浏览器会自动对这段文字进行换行处理，可以使用nobr标记来禁止自动换行。

基本语法：

不换行文字

语法介绍：

nobr标记是成对出现的，以开始，以结束，nobr用于强迫在一行显示内容。

案例：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head> 
 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>文本间隔和布局，取消换行元素</title>
 </head>
 
 <body background="C:\Users\mch\Desktop\t0115e42ca3ffd6e8f8.jpg" >
 	
 	人生最大的敌人是自己人生最大的失败是自大人生最大的愚蠢是欺骗人生最大的错误是自卑
 	人生最大的敌人是自己人生最大的失败是自大人生最大的愚蠢是欺骗人生最大的错误是自卑
 	人生最大的敌人是自己人生最大的失败是自大人生最大的愚蠢是欺骗人生最大的错误是自卑
 	人生最大的敌人是自己人生最大的失败是自大人生最大的愚蠢是欺骗人生最大的错误是自卑
 	人生最大的敌人是自己人生最大的失败是自大人生最大的愚蠢是欺骗人生最大的错误是自卑
 	人生最大的敌人是自己人生最大的失败是自大人生最大的愚蠢是欺骗人生最大的错误是自卑
 	人生最大的敌人是自己人生最大的失败是自大人生最大的愚蠢是欺骗人生最大的错误是自卑
 	人生最大的敌人是自己人生最大的失败是自大人生最大的愚蠢是欺骗人生最大的错误是自卑
 	
 </body>
 </html>

### 1.4.3 缩进元素<blockquote> ###

<blockquote>与</blockquote>之间的所有文本都会从常规文本中分离出来，经常会在左，右两边进行缩进（增加外边距），而且有时会使用斜体。

基本语法：

<blockquote cite="引用信息路径">块级元素的长引用文字</blockquote>

语法介绍：

blockquote标记长引用的时候必须同时给出首尾标记以指明引用界线，cite用于指定引用的源文档或信息的URL路径。

案例：

提示：浏览器把一个块级元素的长引用全部用缩进的方式进行显示，以表示和其它普通段落的不同。

### 1.4.4 保留格式元素<pre> ###

pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。

基本语法：

语法介绍：

把制作好的文字排版内容前后加上始标记<pre>和尾标记</pre>，可以实现预格式化的效果。

案例：

### 1.4.5 引用元素<q> ###

当希望在句子内添加引用，而不是将引用作为独立的缩进块时，可以使用<q>元素。HTML规范和XHTML规范中都规定，<q>元素中的文本在显示时需要包含在双引号中。<q>元素也能附带cite属性，该属性的值应该设置引用的来源的URL.

基本语法：

<q cite="引用信息路径">行内元素的短引用文字</q>

语法介绍：

在该语法中，cite用于指定引用的原文档或信息的URL路径。

案例：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head> 
 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>文本间隔和布局，引用元素</title>
 </head>
 
 <body background="C:\Users\mch\Desktop\t0115e42ca3ffd6e8f8.jpg" >
 	<q cite="HTML.html">
 	人生最大的敌人是自己人生最大的失败是自大人生最大的愚蠢是欺骗人生最大的错误是自卑
 	</q>
 	人生最大的敌人是自己人生最大的失败是自大人生最大的愚蠢是欺骗人生最大的错误是自卑
 	人生最大的敌人是自己人生最大的失败是自大人生最大的愚蠢是欺骗人生最大的错误是自卑
 	人生最大的敌人是自己人生最大的失败是自大人生最大的愚蠢是欺骗人生最大的错误是自卑
 	人生最大的敌人是自己人生最大的失败是自大人生最大的愚蠢是欺骗人生最大的错误是自卑
 	人生最大的敌人是自己人生最大的失败是自大人生最大的愚蠢是欺骗人生最大的错误是自卑
 	人生最大的敌人是自己人生最大的失败是自大人生最大的愚蠢是欺骗人生最大的错误是自卑
 	人生最大的敌人是自己人生最大的失败是自大人生最大的愚蠢是欺骗人生最大的错误是自卑
 </body>
 </html>

本质就是给文章的某句话加上双引号。

## 1.5 水平分隔线元素<hr> ##

### 1.5.1粗细属性size ###

size属性控制水平线的粗细，以像素（pixel）为单位表示。

基本语法：

案例：

### 1.5.2 阴影属性noshade ###

noshade属性规定水平线的颜色呈现为纯色，而不是有阴影的颜色

基本语法：

语法介绍：

noshade是布尔值的属性，它没有属性值，如果在<hr>元素中写上了这个属性，则浏览器不会显示立体形状的水平线，反之则无须设置该属性，浏览器默认显示一条立体形状带有阴影的水平线。

案例：

### 1.5.3 宽度属性width ###

width属性规定水平线的宽度，以像素计或百分比。

基本语法：

语法介绍：

在该语法中，水平线的宽度可以是确定的像素值，也可以是窗口的百分比。

案例：

### 1.5.4 对齐属性align ###

水平线在默认的情况下是居中对齐的，如果想让水平线左对齐或者右对齐，就需要设置对齐方式。

基本语法：

语法介绍：

对齐方式有三种：center、left、right，其中center的效果与默认的效果相同

案例：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head> 
 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>水平分隔线元素，水平线粗细，阴影属性，宽度属性，对齐方式</title>
 </head>
 
 <body>
 
 	人生最大的敌人是自己人生最大的失败是自大人生最大的愚蠢是欺骗人生最大的错误是自卑
 	<hr size="6" noshade width="300" align="left">
 	下一个
 </body>
 </html>

### 1.5.5颜色属性color ###

基本语法：

颜色是16进制的数值或者颜色的英文名称

案例：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head> 
 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>水平分隔线元素，水平线粗细，阴影属性，宽度属性，对齐方式，颜色属性</title>
 </head>
 
 <body>
 
 	人生最大的敌人是自己人生最大的失败是自大人生最大的愚蠢是欺骗人生最大的错误是自卑
 	<hr size="6" noshade width="300" align="left" color="yellow">
 	下一个
 </body>
 </html>

## 1.6 文本的样式设置 ##

在HTML中，有一些文本格式化标记来设置文字以特殊的方式显示，如，粗体标记，斜体标记，和文字的上下标等。

### 1.6.1放大元素<big> ###

big标记用来增大文本中字号的大小，它所包含的文字都会在原来的字号上增加一级。如果有多个<big>作用于同一个文本，则字号会被逐级增大。<big>作为一个行内元素，它可以成对出现在一段文字中的任何位置。

基本语法：

<big>大字号内容</big>

案例：

### 1.6.2缩小元素 ###

同放大元素，缩小元素会小一级

基本语法：

小字号内容

案例：

1.6.3斜体显示元素、和<cite> 
、和<cite>是HTML中格式化斜体文本的最基本元素。

基本语法：

斜体文字

斜体文字

案例：

### 1.6.4加粗的强调元素和 ###

是加重语气标签，是粗体标签。他们均是加粗字体的作用。在大多情况下，他们表现出的效果也大致相同。

基本语法：

加粗的文字

加粗的文字

可以插入到一段文本的任何部分。

案例：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head> 
 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>文本的样式设置，放大元素，缩小元素，斜体显示元素，加粗元素</title>
 </head>
 
 <body>
 
 	<big>人生最大的敌人是自己</big>
 	人生最大的失败是自大
 	人生最大的愚蠢是欺骗
 	人生最大的错误是自卑
 	<cite>人生最大的敌人是自己</cite>
 	人生最大的失败是自大
 	人生最大的愚蠢是欺骗
 	人生最大的错误是自卑
 	
 </body>
 </html>

### 1.6.5下标元素 ###

下标元素的英文原名为subscript，在各种数学公式、化学方程式中，下标元素有广泛的应用。若在元素里继续使用,那么被作用的文字将成为“下标的下标”

基本语法：

下标内容

案例：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head> 
 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>文本的样式设置，放大元素，缩小元素，斜体显示元素，加粗元素，下标元素</title>
 </head>
 
 <body>
 
 	<big>人生最大的敌人是自己</big>
 	人生最大的失败是自大
 	人生最大的愚蠢是欺骗
 	人生最大的错误是自卑
 	<cite>人生最大的敌人是自己</cite>
 	人生最大的失败是自大
 	人生最大的愚蠢是欺骗
 	人生最大的错误是自卑
 	Fe304
 </body>
 </html>

### 1.6.6上标元素 ###

上标元素的英文原名为superscript，同下标元素

基本语法：

上标元素

案例：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head> 
 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>文本的样式设置，放大元素，缩小元素，斜体显示元素，加粗元素，下标元素，上标元素</title>
 </head>
 
 <body>
 
 	<big>人生最大的敌人是自己</big> 
 	人生最大的失败是自大 
 	人生最大的愚蠢是欺骗 
 	人生最大的错误是自卑 
 	<cite>人生最大的敌人是自己</cite> 
 	人生最大的失败是自大 
 	人生最大的愚蠢是欺骗 
 	人生最大的错误是自卑 
 	Fe304 
 	6x2+5x3+4=30
 </body>
 </html>

如有兴趣，可以继续跟着笔者进行下一章节。