文本标签
<em>和<strong>
em标签用于表示一段内容中的着重点。
strong标签用于表示一个内容的重要性。
这两个标签可以单独使用，也可以一起使用。
<strong>警告：任何情况下不要接近僵尸。</strong>
他们只是<em>看起来</em> 很友好，实际上他们是为了吃你的胳膊！</p>
通常em显示为斜体，而strong显示为粗体。
<i>和<b>
i标签会使文字变成斜体。
b标签会使文字变成粗体。
这两个标签和em和strong类似，但是这两个标签没有语义。
所以根据html5标准，当我们只想设置文本特殊显示，而不需要强调内容时就可以使用i和b标签。
<small>
small标签表示细则一类的旁注，通常包括免责声明、注意事项、法律限制、版权信息等。
浏览器在显示small标签时会显示一个比父元素小的字号。
<p><small>©2016尚硅谷. 保留所有权利.</small></p>
<cite>
使用cite标签可以指明对某内容的引用或参考。例如，戏剧、文章或图书的标题，歌曲、电影、照片或雕塑的名称等。
<cite>《七龙珠》</cite>讲的是召唤神龙的故事
<blockquote>和<q>
blockquote和q表示标记引用的文本。
Blockquote用于长引用，q用于短引用
在两个标签中还可以使用cite属性来表示引用的地址。
孟子曾经说过：<blockquote>天将降大任于是人也...</blockquote>他说的真对啊！
<p>孔子曾经说过：<q>学而时习之不亦说乎</q></p>
<sup>和<sub>
sup和sub用于定义上标和下标。
上标主要用于表示类似103的3。
下表主要用于表示类似H2O中的2
<ins>和<del>
ins表示插入的内容，显示时通常会加上下划线。
Del表示删除的内容，显示时通常会加上删除线。
<code>和<pre>
如果你的内容包含代码示例或文件名，就可以使用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 f
00 - ff
00表示没有，相当于rgb中的0，ff表示最大，相当于rgb中255
红色：#ff0000
像这种两位两位重复的颜色，可以简写比如：#ff0000 可以写成 #f00，#abc ，#aabbcc例如background-color: #00f;
字体的样式
设置字体颜色,使用color来设置文字的颜色。color：red
Font-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-caps
font：使用该样式可以同时设置字体相关的所有样式,
语法：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 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!
网友评论