HTML5 文字变化和排版技巧

文字变化和排版技巧

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;

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zheng__jun/article/details/52317845
文章标签: 标签 html5 html
个人分类: HTML5网页开发
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

HTML5 文字变化和排版技巧

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭