HTML5 文字变化和排版技巧

原创 2016年08月25日 20:11:55

文字变化和排版技巧

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

1.1.1设置段落样式的标签

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

1.<p>标签

<p>标签是成对的标签,将<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已停用)

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

<font size=”2” color=”#FF0000”face=”楷体”>

属性如下:

属性

设置值

说明

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>标签

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

<u><i><b>...</b></i></u>

 

<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>

显示结果为:

SO42+

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

1.3.1 符号列表(又称 无序列表 Unordered list)

用法:

<ul>,<li>标签

<ul>

   <li>...</li>

   <li>...</li>

</ul>

<ul type=””> 属性: disc(实体圆),circle(空心圆),square(方块)H5不建议使用

1.3.2 编号列表(有序列表 Ordered list)

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

<ol type=”i”start=”3”></ol>

属性

设置值

说明

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>内。语法:

    <!--[ifIE]>只有IE会执行此语句<![endif]-->

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

    <!--[iflt IE 9]>IE 9 以下的版本会执行次语句<!endif--]-->

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

    <!--[iflit IE 9]>

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

    <![endif]-->

  1.4.2 使用特殊符号

   

特殊符号

HTML表示法

©

&copy;

&lt;

&gt;

&quot;

&

&amp;

半角空格

&nbsp;

在HTML文件中按几次键盘空格键,在网页上浏览时,都只会显示一个空格的距离。

如果希望显示多个空格,就使用多个”&nbsp;”符号。例如要显示:

    <u>BeautifulWorld</u>

    HTML需要:

    &lt;u&gt;BeautifulWorld&lt;/u&gt;

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

《文字与段落——使用HTML标记完成页面排版》

/* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2011, 烟台大学计算机学院学生 * All rights reserved. * 文件名称:   《文字...

HTML/CSS之段落排版

中文文字中的段前习惯空两个文字的空白,这个特殊的样式可以用下面代码来实现: p{text-indent:2em;},在head头里面写上下面的代码 p{text-indent:2em;} 注意...

HTML + css 页面按比例排版

固定页面大小时,css排版 使用position:relative;top、left来实现元素移动

CSS几种简单方法实现文字竖向排版

1.一个句子的竖向排列 如图: 1.                      2.  test .one { width: 20px; margin: 0 auto; lin...

HTML5 CSS格式化排版

文字排版 字体 设置微软雅黑: body{font-family:"Microsoft Yahei";}或者body{font-family:"微软雅黑";}第二种比第一种兼容性会更好,在设置字体时...

h5简单的拖拽排序,

原本是打算用户移动端的, 但考虑移动端的滑动和滚动(暂不知道也没有去搜索决解方案, 但是就算实现了也会有很多麻烦, 以后再考虑) .drag-containter > div { h...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

深入理解html5系列-文本标签

文章简介:       关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全...

用简单的程序理解Polling与Long Polling

服务端推送技术应用越来越普遍,应用范围也越来越宽广,技术解决方案也越来越成熟且丰富。很多SNS网站的chat功能就有用到了Long Polling技术。比如fackebook, kaixin001。 ...

手把手教你封装一个vue component

手把手教你封装一个vue component 文末有大彩蛋!
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5 文字变化和排版技巧
举报原因:
原因补充:

(最多只允许输入30个字)