#yyds干货盘点# 1.4 HTML5基础 - 文本标签控制-CFANZ编程社区

二、文本标签控制

设计Web页面时要组织好页面的基本元素，同时再配合一些特效，构成一个绚丽多彩的页面。页面的组成对象包括文本、图片、表单、超链接以及多媒体等。内容是网站的灵魂，而文本则是构成网站灵魂的物质基础。文本与图片在网站上的运用是最广泛的，一个内容充实的网站必然会用大量的文本和图片，然后把超级链接应用到文本和图片上，才能使这些文本和图片“活”起来。

标题段落标签

标题段落在页面文字中起到格式化文本的作用，可以使得文本信息结构更清晰，读者可以一目了然。

1.标题标签<hi>

<hi>标签用于定义段落标题的大小级数。

<hi>标题</hi>

其中i表示标题级数，取值范围为1到6之间的正整数。最大的标题级数是<h1>,最小的标题级数是<h6>。

可使用<hi>标签的align属性来控制文字的对齐方式，属性值可以是left(左看齐)、center(居中对齐)、right(右对齐)和justify(两端对齐，对齐进行伸展，这样每行都可以有相等的长度)，默认的属性值为left。

<!DOCTYPE html>
<html>
  <head>
    <title>各级标题</title>
  </head>
  <body>
      <h1>这是第一级标题</h1>
      <h2>这是第二级标题</h2>      
      <h3>这是第三级标题</h3>      
      <h4>这是第四级标题</h4>      
      <h5>这是第五级标题</h5>      
      <h6>这是第六级标题</h6>   
  </body>
</html>

#yyds干货盘点# 1.4 HTML5基础 - 文本标签控制_前端开发

2.段落标签<p>

<p>标签用于划分段落，控制文本的位置。

<p>段落内容</p>

<p>是成对标签，用于定义内容从新的一行开始，并与上段之间有一个空行。开始标签<p>和结束标签</p>之间写入段落内容。

可使用<p>标签的algin属性定义新开始的一行的内容在页面中的对齐位置，属性值可以是left（左对齐）、center（居中对齐）、right（右对齐）和justify（两段对齐，对行进行伸展，这样每行都可以有相等的长度）。<p>标签的align属性不建议使用，可以利用CSS来代替。

<!DOCTYPE html>
<html>
  <head>
    <title>段落标签</title>
  </head>
  <body>
    <p align="left"> HTML5 的时代已经到来，各大浏览器早已做好准备，能很好的支持 HTML5 规范。
      当前互联网技术飞速发展，但几乎每一个互联网产品，都无法回避前端开发这一环节</p>
    <p align="center"> HTML5 的时代已经到来，各大浏览器早已做好准备，能很好的支持 HTML5 规范。
      当前互联网技术飞速发展，但几乎每一个互联网产品，都无法回避前端开发这一环节</p>
    <p align="right"> HTML5 的时代已经到来，各大浏览器早已做好准备，能很好的支持 HTML5 规范。
      当前互联网技术飞速发展，但几乎每一个互联网产品，都无法回避前端开发这一环节</p>
    <p align="justify"> HTML5 的时代已经到来，各大浏览器早已做好准备，能很好的支持 HTML5 规范。
      当前互联网技术飞速发展，但几乎每一个互联网产品，都无法回避前端开发这一环节</p>
  </body>
</html>

#yyds干货盘点# 1.4 HTML5基础 - 文本标签控制_前端开发_02

文本格式化标签

1.换行标签<br>

<br>标签用于定义文本从新的一行显示。

<br>

它不产生一个空行，但连续多个的<br>标签可以产生多个空行的效果。

<br>标签是非成对标签，所以规范的换行标签在使用的时候记为<br>。

注意：<br>标签只是简单地开始新的一行，而当浏览器遇到<p>标签时，通常会在相邻的段落之间插入一些垂直的间距。

<!DOCTYPE html>
<html>
  <head>
    <title>换行标签</title>
  </head>
  <body>
    <p> HTML5 的时代已经到来，各大浏览器早已做好准备，能很好的支持 HTML5 规范。
      当前互联网技术飞速发展，但几乎每一个互联网产品，都无法回避前端开发这一环节</p>
    <p> HTML5 的时代已经到来，各大浏览器早已做好准备，能很好的支持 HTML5 规范。<br>
      当前互联网技术飞速发展，但几乎每一个互联网产品，都无法回避前端开发这一环节</p>
  </body>
</html>

#yyds干货盘点# 1.4 HTML5基础 - 文本标签控制_html5_03

注意：注意观察<br>标签与<p>标签的区别，特别是行间距

2.水平标签<hr>

<hr>标签用于产生一条水平的线，以分隔文档的不同部分。

<hr>

<hr>标签是非成对标签，所以规范的换行标签在使用的时候记为<hr>

属性	值	描述
width	pixels/%	水平线的宽度
size	pixels	水平线的粗细
align	center/left/right	水平线的对齐方式

<!DOCTYPE html>
<html>
  <head>
    <title>水平标签</title>
  </head>
  <body>
    <h1>前言</h1>
    <hr>
    <p> HTML5 的时代已经到来，各大浏览器早已做好准备，能很好的支持 HTML5 规范。<br>
      当前互联网技术飞速发展，但几乎每一个互联网产品，都无法回避前端开发这一环节</p>
  </body>
</html>

#yyds干货盘点# 1.4 HTML5基础 - 文本标签控制_html5_04

3.字形标签

字形标签用于设置文字的风格。

标签	含义
<b>...</b>	粗体标签
<i>...</i>	斜体标签
<big>...</big>	大字体标签
<small>...</small>	小字体标签
<u>...</u>	下划线标签
<sup>...</sup>	上标标签
<sub>...</sub>	下标标签
<strong>...</strong>	斜体加T体标签
<mark>...</mark>	定义带有记号的文本

HMTL规范声明：

应该使用<h1>~<h6>来表示标题
使用<em>标签来表示强调的文本
使用<strong>标签来表示重要文本
使用<mark>标签来表示标注的或突出显示的文本
根据HTML5规范，在没有其他标签更合适时，才应该把<b>标签作为最后的选项。

3.<div>标签

<div>标签可以用来排版大块的HTML段落，设置多个段落的文本对齐方式等。

<div></div>

目前<div>标签最重要的功能是结合CSS设计页面布局。<div>标签是一种块(block)容器，默认状态时占据一行。

<div style="color:#0000FF">
  <h3>这是一个在div元素中的标题</h3>
  <p>这是一个在div元素中的文本</p>
</div>

3.<span>标签

<span>标签被用来组合文档中的行内元素。使用方法和<div>标签基本相同。

<span>行内容</span>

<span>标签没有固定的格式表现。当对他应用样式时，才会产生视觉上的变化。如果不对<span>应用样式，那么span元素中的文本与其他文本不会有任何视觉上的差异。可以通过CSS对它定义样式，也可以通过JavaScript对它进行操作。

<span>标签和<div>标签主要区别为：

<span>标签不换行，而<div>标签换行

<span>标签不包含<div><p>标签，而<div>标签可以包含<span>标签和<p>标签。

特殊字符标签

在HTML中

特殊字符以“&”开头，以“；”结尾，中间为相关字符编码。
如用于声明标签的“<”和“>”，在页面上需要显示这两个符号的时候需要进行特殊处理。
在HTML编码中，用“<”表示“<”，用“>”表示“>”

特殊符号	符号码	说明
“	"	双引号
&	&	&符号
<	<	小于
>	>	大于
©	©	版权
®	®	已注册商标
⊕	&oplus;	circle plus
™	™	商标
×	×	乘号
÷	÷	除号