HTML5 文字变化和排版技巧 | 您所在的位置:网站首页 › 字体如何设计上窄下宽的字体 › HTML5 文字变化和排版技巧 |
文字变化和排版技巧
1.1段落效果——使用排版标签 1.1.1设置段落样式的标签 在HTML中利用 标签来区分段落,换行可以用标签完成。 1. 标签 标签是成对的标签,将 置于段落起始初, 置于段尾,这样不但具有分段功能还具有设置段落居中或靠右对齐的功能。语法: ... 2.标签 功能:换行,无结尾标签,也无属性。 语法: 第一行第二行(加不加”/”都可以,但是在HTML5中有不成文的规定:单一标签必须加上) 1.1.2设置对齐与缩进标签 1.标签 可以让文字按照原始代码的排列方式进行显示。 2.标签 用来表示引用文字,会将标记内的文字换行并缩进。 1.1.3 添加分隔线 可以让画面更容易区分主题或段落。 标签 作用是添加分隔线。在HTML4中标签有改变外观的属性,如size、color等,H5中不再支持,可以使用CSS实现。 1.1.4 设置段落标题 ,,,,,这6个标签是设置段落标题的大小级别,字体最大,最小。由~标签标识的文字将会独占一行。H5不再支持align 属性,align 属性:规定 div 元素中的内容的水平对齐方式。 1.2文字效果——使用文字标记 1.2.1设置字形样式的标记 1.标签(HTML5已停用) 主要用来设置文字的字号、颜色和字体,用法如下: 属性如下: 属性 设置值 说明 size 相对值(size=+2) 绝对值(size=2) 设置文字大小,默认值为size=3 color 颜色名称(color=”read”) HEX码(color=”#FF0000”) 设置文字颜色 face 系统内置字形 设置文字字体 face 当用户的计算机没有设置的字体时,浏览器会自动以系统内置字形进行显示。 size 相对值的意思是以0为基础,每加1则字体放大一级,最大到”+4”,每减1则字体缩小1级,最小到”-2”。 2.,,标签 这些都必须有结束标签。可以嵌套使用。如: ...
是将文字设置为粗体。 是将文字设置为斜体。 是将为文字添加下划线。 基本上,H5不建议使用这些标签,最好使用CSS语法代替: ——>font-weight ——>font-style ——>font-decoration 1.2.2 设置上表、下标 ,标签 分别用于将文字设置为上标和下标,通常用于方程式或公式。如: SO42+ 显示结果为: SO42+ 1.3项目符号与编程——使用列表标签 1.3.1 符号列表(又称 无序列表 Unordered list) 用法: ,标签 ... ... 属性: disc(实体圆),circle(空心圆),square(方块)H5不建议使用 1.3.2 编号列表(有序列表 Ordered list) 功能是将文字段落向内缩进,并在段落的每个项目前加上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... 小写罗马数字 有序无序列表可以嵌套创建:
1.3.3 定义列表 适用于有主题与内容的两段文字,通常第一段以标签定义主题,第二段以标签来定义内容。 标签定义了定义列表(definition list) 标签用于结合 (定义列表中的项目)和 (描述列表中的项目) 如:
Google(中文名:谷歌),是一家美国的跨国科技企业,致力于互联网搜索、云计算、广告技术等领域,开发并提供大量基于互联网的产品与服务,其主要利润来自于AdWords等广告服务。Google由当时在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布卢姆共同创建,因此两人也被称为“Google Guys”。 1.4 注释与特殊符号 1.4.1 添加注释 格式:
使用HTML5注释加入条件,就可以让IE浏览器根据注释内容进行条件判断,而其他浏览器则只会当作普通HTML注释进行处理。IE条件建议放在与内。语法:
上述代码是让注释标记的语句只有在IE才能执行。IE注释内还可以加入一些命令来限制IE版本,如lt(lower than)表示更旧的版本,语法:
上述代码只有IE6-IE8的版本才会执行。可以使用JavaScript来弥补IE9一下版本不能浏览H5的问题。
1.4.2 使用特殊符号
特殊符号 HTML表示法 © ©
; “ ; & ; 半角空格 ; 在HTML文件中按几次键盘空格键,在网页上浏览时,都只会显示一个空格的距离。 如果希望显示多个空格,就使用多个”;”符号。例如要显示: BeautifulWorld HTML需要: ;u;BeautifulWorld;/u; |
CopyRight 2018-2019 实验室设备网 版权所有 |