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
start1,2,3等整数值设置编号起始值,默认值:start=1
reversed reversed反向排序,数字改为由⼤到⼩(IE9不⽀持)
有序⽆序列表可以嵌套创建:
<ul>
<ol>
</ol>
<ol>
</ol>
</ul>
好玩的游戏 单机
1.3.3 定义列表
适⽤于有主题与内容的两段⽂字,通常第⼀段以<dt>标签定义主题,第⼆段以<dd>标签来定义内容。
<dl> 标签定义了定义列表(definition list)
<dl> 标签⽤于结合  (定义列表中的项⽬)和  (描述列表中的项⽬)
如:
<dl>
<dt>
Google
<dd>Google(中⽂名:⾕歌),是⼀家的跨国科技企业,致⼒于互联⽹搜索、、等领域,开发并提供⼤量基于的产品与服务,其主要利润来⾃于等⼴告服务。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]>
<![endif]-->
1.4.2 使⽤特殊符号
特殊符号HTML表⽰法
©©
< <
> >
“"
&&
半⾓空格 
在HTML⽂件中按⼏次键盘空格键,在⽹页上浏览时,都只会显⽰⼀个空格的距离。
如果希望显⽰多个空格,就使⽤多个” ”符号。例如要显⽰:
<u>BeautifulWorld</u>
HTML需要:
<u>BeautifulWorld</u>