HTML5 文字变化和排版技巧
2016-08-25 20:11
260 查看
文字变化和排版技巧
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 | 系统内置字形 | 设置文字字体 |
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>
<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表示法 |
© | © |
< | < |
> | > |
“ | " |
& | & |
半角空格 | |
如果希望显示多个空格,就使用多个” ”符号。例如要显示:
<u>BeautifulWorld</u>
HTML需要:
<u>BeautifulWorld</u>
相关文章推荐
- HTML5学习笔记-3.文字与排版技巧
- 『Photoshop 教程』提高排版技巧的20个文字效果教程
- html5学习记录08:认识css样式文字排版
- 帮助你提高排版技巧的18个 PS 文字特效教程
- 『Photoshop 教程』提高排版技巧的20个文字效果教程
- PhotoShop(PS)实践中总结参考线实用技巧文字排版实例教程
- Photoshop文字排版小技巧。
- 网页颜色搭配技巧 文字字体、字号、字体排版等
- 网页颜色搭配技巧 文字字体、字号、字体排版等
- Powerpoint文档大量文字排版技巧年终总结ppt模板
- 网页颜色搭配技巧 文字字体、字号、字体排版等
- 网页颜色搭配技巧 文字字体、字号、字体排版等
- CorelDRAW文字排版实战技巧
- 网页颜色搭配技巧 文字字体、字号、字体排版等
- 网页颜色搭配技巧 文字字体、字号、字体排版等
- 美工(一)网页颜色搭配技巧 文字字体、字号、字体排版等
- 二、svg文字之排版
- 22个HTML5的初级技巧
- ppwjs之bootstrap文字排版:对齐方式
- 28个你必须知道的HTML5的新特性,技巧以及技术