HTML文本标签、列表和文本格式化的方法

这篇文章主要介绍“HTML文本标签、列表和文本格式化的方法”，在日常操作中，相信很多人在HTML文本标签、列表和文本格式化的方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”HTML文本标签、列表和文本格式化的方法”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
　　一、文本标签
　　em：用来表示一段内容的着重点，语气上的强调。一般显示为斜体
　　i：是斜体显示，和em显示效果一样。h6规定不需要着重的内容而是单纯加粗或斜体可以用i或b。用的不多
　　strong：用来表示一个内容的重要性。一般显示为粗体。与em可以单独使用，也可以一起使用。
　　b：加粗显示，跟strong显示效果一样。
　　small：标签中的内容会比他的父元素中内容小一点。在h6中来表示一些细则中内容，如版本声明，合同条款。
　　big：没什么语义，很少使用。
　　cite：网页中所有加书名号的内容都可以使用cite标签，表示参考内容。比如书名、电影名等
　　q：表示短的引用（行内运用） ，自动加个引号。是通过css的before和after自动加的。样式几乎不用。
　　blockquote：表示长引用（块级引用）。块元素，独占一行。b乎中用的多。
　　sup：把内容设置成上标显示。如，数学中符号。或者在上标中加入超链接，如论文中、百度百科中。supremum的缩写
　　sub：把内容设置成下表显示。如，化学中分子式。subtitle字幕、下边的意思
　　del：给内容中间加个横杠，常用于原来价格的改变。购物网站中常用，如淘宝打折时。
　　ins：在内容下边加个横线，插入的一个内容。填空题的效果，英文insert
　　pre：预格式标签，将代码中的格式保存，不会弄成一行显示，不会忽略空格，源代码怎么写，网页就怎么显示。技术博客中常用。
　　code：专门用来表示代码，但是不会保留格式。往往结束使用，技术博客中常用。
　　二、列表（无序和有序列表之间都可以相互嵌套）
　　1、无序列表（使用ul-li标签，ul和li都是块元素）
　　默认前边有个小圆点，即无序的项目列表。通过type属性可以修改前边的小圆点。
　　disc：默认值，实心的圆点； square：实心小方块；circl免费云主机域名e：空心的圆圈。几乎都不用。去掉项目符号，使用css。如果需要设置符号，可以为li设置背景图片。
　　2、有序列表（使用ol-li标签，也是块元素）
　　默认前边有类似1、2、3的项目编号。通过type属性可以改变默认值。
　　可选择： 阿拉伯数字1，默认值；大写字母A；小写字母a ；罗马字母I；作为开头
　　3、定义列表（dl-dt/dd，dt被定义的内容，dd对内容进行解释，也可以相互嵌套）
　　用来对一些词汇或内容进行定义。显示效果，dt一行，dd一行，前面有空格
　　三、文本格式化
　　1、单位
　　像素
　　长度单位：px（像素）一个像素就相当于屏幕中的一个小点（小方块），屏幕就是由像素点组成。像素点事不能肉眼识别，因为太小了。
　　分辨率：1366*768 不同显示器的一个像素大小也不同，显示效果好的，像素点就小。计算机中1个像素约是手机中的4倍。但是手机浏览器默认乘以4倍显示，所以不会有问题
　　百分比
　　也可以设置成百分比，这浏览器会根据父元素的样式来计算该值。
　　好处是当父元素属性值发生变化时，子元素也会发生改变。创建自适应页面，经常使用这种。
　　em
　　和百分比类似，根据当前元素的字体大小来计算的。1em=1font-size（字体大小）。font-size变em也变。设置字体相关的样式时，使用em.
　　颜色（取色工具：FastStone）
　　1、使用颜色的单词来表示颜色。
　　2、使用RGB值表示颜色。是指美术的三原色：Red、Green、Blue（红、绿、蓝），通过三原色的不同的浓度来表示不同颜色。
　　如：rgb（红色的浓度，绿色的浓度、蓝色的浓度），颜色的浓度需要一个0-255之间的值。使用截图工具来看浓度的调配，rgb（255,250,232） 豆沙绿
　　浓度也可以使用百分数来表示，使用百分数最终也可以转成0-255之间的值。
　　3、使用16进制的rgb值来表示颜色。三组两位的16进制来表示颜色，#红色绿色蓝色，范围#000000（黑色）-#FFFFFF（白色），FF转成10进制就是255
　　每两位重复的可以简写：如#ff0000（红色）简写成#f00。#bfa 豆沙绿
　　2、字体
　　浏览器中默认的字体大小是16px。font-size设置的不是文字本身的大小，页面中每个文字处于一个看不见的格中，我们设置的font-size设置的是格子的高度，一般情况
　　下文字都要比这个格小点，也有时比格子大。根据字体（微软雅黑、宋体等）的不同显示的效果不同。
　　font-family：可以指定浏览器中显示的字体类型。当采用某种字体，如果浏览器支持则使用该字体，不支持（如采用英文字体去设置汉字）则采用默认字体。该样式可同
　　时指定多种字体，font-family：arial，微软雅黑。浏览器优先使用前边，前边没有则使用下一个，还没有使用默认。
　　浏览器中使用的字体使用的是电脑中安装过的字体，没有就不用。开发中字体用的太少，尽量不要使用。，有可能用户电脑中没有。
　　字体的分类：serif 衬线字体 ；sans-serif 非衬线字体；monospace 等宽字体；cursive 草书字体；fantasy 虚幻字体。
　　我们可以将字体设置为大的分类。大类中会微软雅黑、宋体等具体的类。当设置为大的分类，浏览器会自动选出一种字体去使用。
　　font-style： 可以设置文字的斜体。
　　none：文字正常显示；italic ：文字斜体显示；oblique：文字倾斜显示。大部分浏览器不会做区分，区别效果不大，人眼看不出区别。一般使用第二个。
　　font-weight ：设置文本的粗细。
　　bold：文字加粗显示；normal：正常显示；也可以设置数字100-900这9个级别的9个值，但是用户的计算机没有这么多级别的字体，不能达到效果。也就是200可能比100粗
　　也可能一样，基本没什么用。
　　font-variant ：设置小写字母的大写显示，将所有字母大写显示，但是小写字母比大写字母的显示小一点
　　normal：正常显示；small-caps： 文本以小型大写字母显示。
　　3、大小写
　　text-transform可将元素中的字母按样式改变。
　　uppercase 所有字母全部大写； lowercase 全部小写；capitalize :首字母大写 none，正常显示，大小写分明。浏览器通过空格识别单词。
　　4、文本修饰
　　text-decoration 给文本加修饰，通过他给文本上方、下方、中间加线条。
　　underline下方，下划线 ； overline上方； line-through 中间，删除线； none 正常显示。
　　超链接自带下划线，因为它text-decoration默认值是underline ，自己可以更改，如设置为none，去掉下划线
　　5、间距
　　letter-spacing 设置字符之间的间距
　　Word-spacing 设置单词之间的间距。实际设置词与词之间空格大小，但是中文词语是词语是连着的，没啥意义，不起作用。
　　6、对齐文本
　　text-align：设置文本对齐方案
　　left：左对齐，默认值； right 右对齐；justify 两边对齐，通过调整文本之间空格的大小来实现；center 居中对齐
　　7、首行缩进
　　text-indent 用来设置首行缩进。在采取默认字体大小时，设置为32px表示首行空出2个字符的位置。
　　text-indent：2em 表示跟随字体变化永远空出2个字符的位置。
　　当给它一个正数，表示向右移动指定的像素，负数表示向左移动指定的像素（这样可以将一些字符隐藏起来，不希望用户看见，但搜索引擎可以看见）
　　8、行高
　　在css中没有直接提供设置行间距方式，可以通过使用设置行高的方式来设置。
　　line-height：设置行高。行高类似上学时的单线本，单线本是一行一行的，线与线之间的距离就是行高，网页中文字也是处在两行之间去显示，默认垂直居中显示。
　　所以行间距（文字之间的行间距）=行高-字体大小。从上到下：行的横线—线与第1行文字的间距—第1行文字—线与第1行文字的间距—行的横线—线与第2行文字间距—第2行
　　文字—线与第2行文字的间距—行的横线。行高指2个横线之间的距离，行间距指两行文字之间的距离。
　　行高可以接受一个像素或者百分数。百分数是相对于字体的大小去计算
　　行高也可以指定数字n，则行高会设置字体大小的n倍。
　　对于单行文本，可将行高设置与父元素一样，这样可以在父元素垂直居中。原理是文字在两行之间默认垂直居中。
　　写法：font：30px/30px 表示字体30px，行高30px，若不指定，有默认值到此，关于“HTML文本标签、列表和文本格式化的方法”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注百云主机网站，小编会继续努力为大家带来更多实用的文章！

相关推荐: HTML5中怎么显示视频

这篇文章主要讲解了“HTML5中怎么显示视频”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“HTML5中怎么显示视频”吧！ HTML5 规定了一种通过 video 元素来包含视频的标准方法。 在HTML5中，vi…