《HTML+CSS+JavaScript》之第4章文本

最新推荐文章于 2024-08-03 22:21:30 发布

mali378287007

最新推荐文章于 2024-08-03 22:21:30 发布

阅读量209

点赞数

分类专栏： html 学习整理文章标签： html

本文链接：https://blog.csdn.net/oqqyx1234567/article/details/125565620

版权

整理同时被 3 个专栏收录

181 篇文章 11 订阅

订阅专栏

学习

130 篇文章 4 订阅

订阅专栏

html

10 篇文章 0 订阅

订阅专栏

4.1 文本简介

4.1.1 页面组成元素

多数静态页面组成：
文字、图片、超链接、音频和视频。

静态页面与动态页面的区别在于是否与服务器进行数据交互。

下面情况不一定是动态页面：

带有音频和视频
带有Flash动画
带有CSS动画
带有JavaScript特效

4.1.2 HTML文本

标题标签、段落标签、换行标签、文本标签（上标、下标等）、水平线标签、特殊符号。

4.2 标题标签

h1、h2、h3、h4、h5、h6。
一个页面只能有一个h1标签，h2到h6可以多个。
title标签显示地址栏的标题，h1标签显示文章的标签。

4.3 段落标签

4.3.1 段落标签

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8"/>
    <title>段落标签</title>
</head>
<body>
    <h3>爱莲说</h3>
    <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
    <p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人? 牡丹之爱，宜乎众矣。</p>
</body>
</html>

段落标签会自动换行，且段落间有一定的间距。

4.3.2 换行标签

段落标签自动换行。
br标签用来文字换行，p标签用来文字分段。
p标签导致段落间有一定的间距，br标签不会。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
    <h3>静夜思</h3>                  
    <p>床前明月光，疑是地上霜。</p>
    <p>举头望明月，低头思故乡。</p>
</body>
</html>

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>换行标签</title>
</head>
<body>
    <h3>静夜思</h3>                  
    <p>床前明月光，疑是地上霜。<br/>举头望明月，低头思故乡。</p>
</body>
</html>

4.4 文本标签

文本标签对文字进行修饰。

粗体标签strong、b
斜体标签i、em、cite
上标标签sup
下标标签sub
中划线标签s
下划线标签u
大字号标签big
小字号标签small

4.4.1 粗体标签

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>粗体标签</title>
</head>
<body>
    <p>这是普通文本</p>
    <strong>这是粗体文本</strong> <!--strong标签更具有语义性-->
    <br/>
    <b>这是粗体文本</b>
</body>
</html>

4.4.2 斜体标签

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>斜体标签</title>
</head>
<body>
    <i>斜体文本</i><br/>
    <em>斜体文本</em><br/>	<!--emphasized标签更具有语义性-->
    <cite>斜体文本</cite>
</body>
</html>

4.4.3 上标标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>上标标签</title>
</head>
<body>
	<!--superscripted-->
    <p>(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p>
</body>
</html>

4.4.4 下标标签

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>下标标签</title>
</head>
<body>
	<!--subscripted-->
    <p>H<sub>2</sub>SO<sub>4</sub>指的是硫酸分子</p>
</body>
</html>

4.4.5 中划线标签

中划线一般用于显示不正确或者不相关的内容，常用于商品促销标价中。
一般用CSS实现，不用s标签实现。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>删除线标签</title>
</head>
<body>
    <p>新鲜的新西兰奇异果</p>
    <p><s>原价:￥6.50/kg</s></p>
    <p><strong>现在仅售：￥4.00/kg</strong></p>
</body>
</html>

4.4.6 下划线标签

一般用CSS实现，不用u标签实现。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>下划线标签</title>
</head>
<body>
    <p><u>绿叶学习网</u>是一个精品的技术分享网站。</p>
</body>
</html>

4.4.7 大字号标签和小字号标签

一般用CSS实现，不用big和small标签实现。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>big标签和small标签</title>
</head>
<body>
    <p>普通字体文本 </p>
    <big>大字号文本</big><br/>
    <small>小字号文本</small>
</body>
</html>

4.5 水平线标签

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>水平线标签</title>
</head>
<body>
    <h3>静夜思</h3>                  
    <p>床前明月光，疑是地上霜。</p>
    <p>举头望明月，低头思故乡。</p>
    <hr/> <!--horizon-->
    <h3>春晓</h3>                  
    <p>春眠不觉晓，处处闻啼鸟。</p>
    <p>夜来风雨声，花落知多少。</p>
</body>
</html>

4.6 div标签

division，划分区域，配合CSS实现区域样式控制。
div+css，div标签内部可以放入绝大多数其他标签。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>div标签</title>
</head>
<body>
    <!--这是第一首诗-->
    <div>
        <h3>静夜思</h3>                  
        <p>床前明月光，疑是地上霜。</p>
        <p>举头望明月，低头思故乡。</p>
    </div>
    <hr/>
    <!--这是第二首诗-->
    <div>
        <h3>春晓</h3>                  
        <p>春眠不觉晓，处处闻啼鸟。</p>
        <p>夜来风雨声，花落知多少。</p>
    </div>
</body>
</html>

4.7 自闭和标签

一般标签：有开始和结束符号，内部可以插入其他标签或文字。
自闭和标签：只有开始，无结束符号，内部不可以插入其他标签或文字。
<meta/>、<link/>、<br/>、<hr/>、<img/>、<input/>

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>自闭合标签</title>
</head>
<body>
    <div>
        <h3>绿叶学习网</h3>
        <hr/>
        <p>“绿叶，给你初恋般的感觉。”</p>
    </div>
</body>
</html>

4.8 块元素和行内元素

4.8.1 块元素

块元素在浏览器显示状态下占据整一行，内部可以容纳其他块元素和行内元素。
h1~h6、p、div、hr、oi、ul

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>块元素和行内元素</title>
</head>
<body>
    <div>
        <h3>绿叶学习网（块元素）</h3>
        <p>“绿叶，给你初恋般的感觉。”（块元素）</p>
        <strong>绿叶学习网（行内元素）</strong>
        <em>“绿叶，给你初恋般的感觉。”（行内元素）</em>
    </div>
</body>
</html>

4.8.2 行内元素

行内元素可以与其他行内元素位于同一行，内部只可以容纳其他行内元素。
strong、em、a、span

4.9 特殊符号

4.9.1 网页中的“空格”

1个汉字约等于3个“ ”。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="gb2312" />
    <title> 网页中的“空格”</title>
</head>
<body>
    <h3>爱莲说</h3>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人? 牡丹之爱，宜乎众矣。</p>
</body>
</html>

4.9.2 网页中的“特殊符号”

特殊符号	说明	代码
"	双引号（英文）	`"`
‘	左单引号	`‘`
’	右单引号	`’`
×	乘号	`×`
÷	除号	`÷`
>	大于号	`>`
<	小于号	`<`
&	与符号	`&`
——	长破折号	`—`
\|	竖线	`\|`
§	分节符	`§`
©	版权符	`©`
®	注册商标	`®`
™	商标	`™`
€	欧元	`€`
￡	英镑	`£`
¥	日元	`¥`
°	度	`°`

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>特殊符号</title>
</head>
<body>
    <p>欧元符号：&euro;</p>
    <p>英镑符号：&pound;</p>
</body>
</html>

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>特殊符号</title>
</head>
<body>
    <p>欧元符号：€</p>
    <p>英镑符号：￡</p>
</body>
</html>