HTML5 文字变化和排版技巧

最新推荐文章于 2024-09-13 22:14:19 发布

这个刹车不太灵

最新推荐文章于 2024-09-13 22:14:19 发布

阅读量4.6w

点赞数 16

分类专栏： HTML5网页开发文章标签：标签 html5 html

本文链接：https://blog.csdn.net/zheng__jun/article/details/52317845

版权

HTML5网页开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文字变化和排版技巧

1.1段落效果——使用排版标签

1.1.1设置段落样式的标签

在HTML中利用<p>标签来区分段落，换行可以用<br>标签完成。

1.<p>标签

<p>标签是成对的标签，将<p>置于段落起始初，</p>置于段尾，这样不但具有分段功能还具有设置段落居中或靠右对齐的功能。

语法：

2.<br>标签

功能：换行，无结尾标签，也无属性。

语法：

第一行<br/>第二行（加不加”/”都可以，但是在HTML5中有不成文的规定：单一标签必须加上）

1.1.2设置对齐与缩进标签

1.<pre></pre>标签

<pre>可以让文字按照原始代码的排列方式进行显示。

2.<blockquote></blockquote>标签

用来表示引用文字，会将标记内的文字换行并缩进。

1.1.3 添加分隔线

可以让画面更容易区分主题或段落。

<hr>标签

作用是添加分隔线。在HTML4中<hr>标签有改变外观的属性，如size、color等，H5中不再支持，可以使用CSS实现。

1.1.4 设置段落标题

<h1>,<h2>,<h3>,<h4>,<h5>,<h6>这6个标签是设置段落标题的大小级别，<h1>字体最大，<h6>最小。由<h1>~<h2>标签标识的文字将会独占一行。H5不再支持align 属性，align 属性：规定 div 元素中的内容的水平对齐方式。

1.2文字效果——使用文字标记

1.2.1设置字形样式的标记

1.<font>标签（HTML5已停用）

主要用来设置文字的字号、颜色和字体，用法如下：

属性如下：

属性	设置值	说明
size	相对值（size=+2）绝对值（size=2）	设置文字大小，默认值为size=3
color	颜色名称（color=”read”） HEX码（color=”#FF0000”）	设置文字颜色
face	系统内置字形	设置文字字体

face 当用户的计算机没有设置的字体时，浏览器会自动以系统内置字形进行显示。

size 相对值的意思是以0为基础，每加1则字体放大一级，最大到”+4”，每减1则字体缩小1级，最小到”-2”。

2.<b>,<u>,<i>标签

这些都必须有结束标签。可以嵌套使用。如：

<b>是将文字设置为粗体。

<i>是将文字设置为斜体。

<u>是将为文字添加下划线。

基本上，H5不建议使用这些标签，最好使用CSS语法代替:

<b> ——>font-weight

<i> ——>font-style

<u> ——>font-decoration

1.2.2 设置上表、下标

<sup>,<sub>标签

分别用于将文字设置为上标和下标，通常用于方程式或公式。如：

SO<sub>4</sub><sup>2+</sup>

显示结果为：

SO₄²⁺

1.3项目符号与编程——使用列表标签

1.3.1 符号列表（又称无序列表 Unordered list）

用法：

<ul>,<li>标签

<ul>

</ul>

<ul type=””> 属性： disc（实体圆），circle（空心圆），square（方块）H5不建议使用

1.3.2 编号列表（有序列表 Ordered list）

<ol> 功能是将文字段落向内缩进，并在段落的每个项目前加上1，2，3。。。有顺序的数字。如：

属性	设置值	说明
Type	设置值有5种	设置数目样式，默认值：type=1
start	1,2,3等整数值	设置编号起始值，默认值：start=1
reversed	reversed	反向排序，数字改为由大到小（IE9不支持）

type设置值	项目编号样式	说明
1	1，2，3...	阿拉伯数字
A	A，B，C...	大写英文字母
a	a，b，c...	小写英文字母
I	I，II，III...	大写罗马数字
i	i，ii，iii...	小写罗马数字

有序无序列表可以嵌套创建：

<ul>

<ol>

</ol>

<ol>

</ol>

</ul>

1.3.3 定义列表

适用于有主题与内容的两段文字，通常第一段以<dt>标签定义主题，第二段以<dd>标签来定义内容。

<dl> 标签定义了定义列表（definition list）

<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）

如：

<dl>

<dt>

Google

<dd>Google（中文名：谷歌），是一家美国的跨国科技企业，致力于互联网搜索、云计算、广告技术等领域，开发并提供大量基于互联网的产品与服务，其主要利润来自于AdWords等广告服务。Google由当时在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布卢姆共同创建，因此两人也被称为“Google Guys”。

</dl>

1.4 注释与特殊符号
1.4.1 添加注释

格式：

使用HTML5注释加入条件，就可以让IE浏览器根据注释内容进行条件判断，而其他浏览器则只会当作普通HTML注释进行处理。IE条件建议放在<head>与</head>内。语法：

上述代码是让注释标记的语句只有在IE才能执行。IE注释内还可以加入一些命令来限制IE版本，如lt（lower than）表示更旧的版本，语法：

上述代码只有IE6-IE8的版本才会执行。可以使用JavaScript来弥补IE9一下版本不能浏览H5的问题。

<!--[iflit IE 9]>

<scriptsrc=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>

<![endif]-->