前端小白必存！H5前端之文本标签及样式

和blockquote和q表示标记引用的文本。Blockquote用于长引用，q用于短引用在两个标签中还可以使用cite属性来表示引用的地址。孟子曾经说过：

天将降大任于是人也...

他说的真对啊！

孔子曾经说过：学而时习之不亦说乎

和sup和sub用于定义上标和下标。上标主要用于表示类似103的3。下表主要用于表示类似H2O中的2和ins表示插入的内容，显示时通常会加上下划线。Del表示删除的内容，显示时通常会加上删除线。和

如果你的内容包含代码示例或文件名，就可以使用code元素。Pre元素表示的预格式化文本，可以使用pre包住code表示一段代码
无序列表和有序列表在HTML也可以创建列表，在网页中一共有三种列表：1、无序列表使用ul创建一个无序列表，使用li中创建一个一个的列表项通过type属性可以修改无序列表的项目符号可选值：disc，默认值，实心的圆点square，实心的方块circle，空心的圆注意：默认的项目符号我们一般都不使用！！如果需要设置项目符号，则可以采用为li设置背景图片的方式来设置ul和li都是块元素
2、有序列表使用ol标签来创建一个无序列表有序列表使用有序的序号作为项目符号type属性，可以指定序号的类型可选值：1，默认值，使用阿拉伯数字a/A采用小写或大写字母作为序号i/I 采用小写或大写的罗马数字作为序号列表之间都是可以互相嵌套，可以在无序列表中放个有序列表，也可以在有序列表中放一个无序列表
定义列表定义列表用来对一些词汇或内容进行定义使用dl来创建一个定义列表dl中有两个子标签dt ：被定义的内容dd ：对定义内容的描述同样dl和ul和ol之间都可以互相嵌套
长度单位px：像素。一个像素就相当于屏幕中的一个小点，不同显示器一个像素的大小也不相同，显示效果越好越清晰，像素就越小，反之像素就越大。例如width：200px。百分比：可以将单位设置成一个百分比的形式，这样浏览器会根据父元素的样式来计算该值。当父元素的属性值发生变化时，子元素也会按照比例发生改变。在我们需要创建一个自适应的页面时，经常使用百分比作为单位。例如：width:50%em：em和百分比类似，它是相对于当前元素的字体大小来计算的1em = 1font-size，使用em时，当字体大小发生改变时，em也会随之改变，当设置字体相关的样式时，经常会使用em十六进制RGB值可以使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样，只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色每组表示一个颜色   ,第一组表示红色的浓度，范围00-ff，第二组表示绿色的浓度，范围是00-ff，第三组表示蓝色的浓度，范围00-ff语法：#红色绿色蓝色十六进制：0 1 2 3 4 5 6 7 8 9 a b c d e f00 - ff00表示没有，相当于rgb中的0，ff表示最大，相当于rgb中255红色：#ff0000像这种两位两位重复的颜色，可以简写比如：#ff0000 可以写成 #f00，#abc ，#aabbcc例如background-color: #00f;字体的样式设置字体颜色,使用color来设置文字的颜色。color：redFont-size:设置文字的大小，浏览器中文字的默认大小是16px,，我们设置font-size实际上是设置格的高度，并不是字体的大小，一般情况下文字都要比这个格小。例如font-size:30px。Font-family:指定文字的字体。当采用某种字体时，如果浏览器支持则使用该字体，如果字体不支持，则使用默认字体，该样式可以同时指定多个字体，多个字体之间使用,分开，当采用多个字体时，浏览器会优先使用前边的字体，如果前边没有在尝试下一个。font-family: arial , 微软雅黑;RGB值颜色单位：在CSS可以直接使用颜色的单词来表示不同的颜色。红色：red蓝色：blue绿色：green也可以使用RGB值来表示不同的颜色，所谓的RGB值指的是通过Red Green Blue三元色。通过这三种颜色的不同的浓度，来表示出不同的颜色例子：rgb(红色的浓度,绿色的浓度,蓝色的浓度);颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有例如background-color:rgb(161,187,215)浓度也可以采用一个百分数来设置，需要一个0% - 100%之间的数字使用百分数最终也会转换为0-255之间的数，0%表示0，100%表示255。例如background-color: rgb(100%,50%,50%);RGBA表示一个颜色和RGB类似，只不过比RGB多了一个A（alpha）来表示透明度，透明度需要一个0-1的值。0表示完全透明， 1表示完全不透明。RGBA(255,100,5,0.5)字体分类字体的分类serif（衬线字体）sans-serif（非衬线字体）monospace （等宽字体）cursive （草书字体）fantasy （虚幻字体）以上这些分类都是一些大的分类，并没有涉及具体的类型，如果将字体指定为这些格式，浏览器会自己选择指定类型的字体
字体样式二斜体和粗体：•    font-style用来指定文本的斜体。指定斜体：font-style:italic指定非斜体：font-style:normal指定倾斜的效果：font-style:oblique•    font-weight用来指定文本的粗体。指定粗体：font-weight:bold指定非粗体：font-weight:normal小型大写字母：font-variant属性可以将字母类型设置为小型大写。在该样式中，字母看起来像是稍微缩小了尺寸的大写字母。font-variant:small-capsfont：使用该样式可以同时设置字体相关的所有样式,语法：font:加粗 斜体 小型大写 大小/行高 字体可以将字体的样式的值，统一写在font样式中，不同的值之间使用空格隔开，使用font设置字体样式时，斜体加粗 小大字母，没有顺序要求，甚至可写可不写。如果不写则使用默认值，但是要求文字的大小和字体必须写，而且字体必须是最后一个样式，大小必须是倒数第二个样式。实际上使用简写属性也会有一个比较好的性能font: small-caps bold italic 60px "微软雅黑";行高line-height用于设置行高，行高越大则行间距越大。行间距 = line-height – font-size可以接收的值：直接就收一个大小；可以指定一个百分数，则会相对于字体去计算行高；可以直接传一个数值。例如line-height:200%或line-height: 2;对于单行文本，可以将行高设置为和父元素的高度一致，这样可以使单行文本在父元素中垂直居中。在font中也可以指定行高，来指定行高，该值是可选的，如果不指定则会使用默认值。例如font:30px/50px“微软雅黑”;文本样式text-transform样式用于将元素中的字母全都变成大小。所有的字母都大写：text-transform:uppercase所有的字母都小写：text-tansform:lowercase首字母大写：text-transform:capitalize正常：text-transform:none文本的修饰text-decoration属性，用来给文本添加各种修饰。通过它可以为文本的上方、下方或者中间添加线条。可选值Underline：为文本添加下划线overline：为文本添加上划线line-through：为文本添加删除线none：默认值不添加任何修饰，正常显示例如：text-decoration:line-through;字母间距和单词间距letter-spacing用来设置字符之间的间距。word-spacing用来设置单词之间的间距。这两个属性都可以直接指定一个长度或百分数作为值。正数代表的是增加距离，而负数代表减少距离。对齐文本text-align用于设置文本的对齐方式。•可选值：left：左对齐right：右对齐justify：两边对齐center：居中对齐首行缩进text-indent用来设置首行缩进。该样式需要制定一个长度，并且只对第一行有效。当给它指定一个正值时，会自动向右侧缩进指定的像素如果为它指定一个负值，则会向左移动指定的像素,通过这种方式可以将一些不想显示的文字隐藏起来。up是一个从事前端开发6年的程序员，在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!
本文章由javascript技术分享原创和收集