[19/06/06-星期四] HTML基础_文本标签、列表(有序、无序、定义)、文本格式化(单位、字体、大小写、文本修饰、间距、对齐文本)

时间 2019-11-16

标签星期四 html 基础文本标签列表有序无序定义格式化单位字体大小写修饰间距对齐栏目 HTML 繁體版

原文原文链接

1、文本标签css

　　em：用来表示一段内容的着重点，语气上的强调。通常显示为斜体html

　　i：是斜体显示，和em显示效果同样。h5规定不须要着重的内容而是单纯加粗或斜体能够用i或b。用的很少java

　　strong：用来表示一个内容的重要性。通常显示为粗体。与em能够单独使用，也能够一块儿使用。api

　　b：加粗显示，跟strong显示效果同样。浏览器

　　small：标签中的内容会比他的父元素中内容小一点。在h5中来表示一些细则中内容，如版本声明，合同条款。工具

　　big：没什么语义，不多使用。字体

　　cite：网页中全部加书名号的内容均可以使用cite标签，表示参考内容。好比书名、电影名等网站

　　q：表示短的引用(行内运用) ，自动加个引号。是经过css的before和after自动加的。样式几乎不用。搜索引擎

　　blockquote：表示长引用(块级引用)。块元素，独占一行。b乎中用的多。spa

　　sup：把内容设置成上标显示。如，数学中符号。或者在上标中加入超连接，如论文中、百度百科中。supremum的缩写

　　sub：把内容设置成下表显示。如，化学中分子式。subtitle字幕、下边的意思

　　del：给内容中间加个横杠，经常使用于原来价格的改变。购物网站中经常使用，如淘宝打折时。

　　ins：在内容下边加个横线，插入的一个内容。填空题的效果，英文insert

　　pre：预格式标签，将代码中的格式保存，不会弄成一行显示，不会忽略空格，源代码怎么写，网页就怎么显示。技术博客中经常使用。

　　code：专门用来表示代码，可是不会保留格式。每每结束使用，技术博客中经常使用。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文本标签</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <!--em:主要表示语气上强调。在浏览器中默认显示斜体
            strong:表示强调的内容。比em更强烈，默认粗体显示。
        -->
        <div>
            你作事真像个<em>傻逼</em>。 <br />
            <strong>警告：当心灯火！</strong> <br />
            
            <p> <cite> 《史记》 </cite>是汉代司马迁所著。 </p> <!--cite表示参考内容-->
            <p> 子曰：<q>己所不欲勿施于人</q> </p> <!--q引用的内容浏览器自动加个引号-->
            <blockquote> 子曰：有朋自远方来，2333</blockquote>
            
            3的平方：3<sup>2</sup>=9 <br />
            周杰伦<sup><a href="http://www.baidu.com"> [1]</a> </sup>出席电影开幕式。
            水的分子式：H<sub>2</sub>O <br />
            原价：<del>9.9</del> 现价：6.9 <br />
            猫的英文是<ins>Cat</ins> <br />
            java举例：<pre>
                <!--shift+table 往回缩 。public前边的也算是预格式的一部分-->
            public class Test{
                public static void main(String[] args){
                    System.out.println("hello,world");
                }
            }
           </pre>            
        </div>
    </body>
</html>

2、列表(无序和有序列表之间均可以相互嵌套)

　　一、无序列表（使用ul-li标签，ul和li都是块元素）

　　　　默认前边有个小圆点，即无序的项目列表。经过type属性能够修改前边的小圆点。

　　　　disc：默认值，实心的圆点； square：实心小方块；circle：空心的圆圈。几乎都不用。去掉项目符号，使用css。若是须要设置符号，能够为li设置背景图片。　　　　　

　　二、有序列表（使用ol-li标签，也是块元素）

　　　　默认前边有相似一、二、3的项目编号。经过type属性能够改变默认值。

　　　　可选择：阿拉伯数字1，默认值；大写字母A；小写字母a ；罗马字母I；做为开头　　

　　三、定义列表（dl-dt/dd，dt被定义的内容，dd对内容进行解释，也能够相互嵌套）

　　　　用来对一些词汇或内容进行定义。显示效果，dt一行，dd一行，前面有空格

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>列表</title>
        <style type="text/css">
            ul{
                list-style: none;/*去掉项目符号*/
            }
        </style>
    </head>
    <body>
        <!--无序列表-->
        <ul>
            <li>李白</li>
            <li>杜甫</li>
            <li>王维</li>
        </ul>
        <!--有序列表-->
        <ol type="A">
            <li>打开冰箱</li>
            <li>把大象装进去</li>
            <li>关上冰箱</li>
        </ol>
        
        <!--相互嵌套-->
        <ul>
            <li>鱼香肉丝</li>
            <li>酸菜鱼
                <ol type="1">
                    <li>买鱼</li>
                    <li>作菜</li>
                    <li>刷碗</li>
                </ol>
            
            </li>
            <li>京酱肉丝</li>
        </ul>
        <!--定义列表-->
        <dl>
            <dt>胡萝卜</dt>
            <dd>一种蔬菜，兔子最爱</dd>
            <dd>一种腹黑的动物</dd>
            <dt>西安</dt>
            <dd>一座古都，位于陕西省。</dd>
        </dl>
    </body>
</html>

3、文本格式化

一、单位

像素

长度单位：px（像素）一个像素就至关于屏幕中的一个小点(小方块)，屏幕就是由像素点组成。像素点事不能肉眼识别，由于过小了。　

　分辨率：1366*768 不一样显示器的一个像素大小也不一样，显示效果好的，像素点就小。计算机中1个像素约是手机中的4倍。可是手机浏览器默认乘以4倍显示，因此不会有问题

百分比

也能够设置成百分比，这浏览器会根据父元素的样式来计算该值。

　　好处是当父元素属性值发生变化时，子元素也会发生改变。建立自适应页面，常用这种。

　　和百分比相似，根据当前元素的字体大小来计算的。1em=1font-size(字体大小)。font-size变em也变。设置字体相关的样式时，使用em.

颜色（取色工具：FastStone）

　　一、使用颜色的单词来表示颜色。

　　二、使用RGB值表示颜色。是指美术的三原色：Red、Green、Blue(红、绿、蓝)，经过三原色的不一样的浓度来表示不一样颜色。

　　　如：rgb(红色的浓度，绿色的浓度、蓝色的浓度)，颜色的浓度须要一个0-255之间的值。使用截图工具来看浓度的调配，rgb(255,250,232) 豆沙绿

　　浓度也可使用百分数来表示，使用百分数最终也能够转成0-255之间的值。

　　三、使用16进制的rgb值来表示颜色。三组两位的16进制来表示颜色，#红色绿色蓝色，范围#000000(黑色)-#FFFFFF(白色)，FF转成10进制就是255

每两位重复的能够简写：如#ff0000（红色）简写成#f00。#bfa 豆沙绿

二、字体

　　浏览器中默认的字体大小是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：文本以小型大写字母显示。

三、大小写

　　text-transform可将元素中的字母按样式改变。

　　uppercase 全部字母所有大写； lowercase 所有小写；capitalize :首字母大写 none，正常显示，大小写分明。浏览器经过空格识别单词。

四、文本修饰

　　text-decoration 给文本加修饰，经过他给文本上方、下方、中间加线条。

　　underline下方，下划线； overline上方； line-through 中间，删除线； none 正常显示。

　　超连接自带下划线，由于它text-decoration默认值是underline ，本身能够更改，如设置为none，去掉下划线

五、间距

　　letter-spacing 设置字符之间的间距

　　Word-spacing 设置单词之间的间距。实际设置词与词之间空格大小，可是中文词语是词语是连着的，没啥意义，不起做用。

六、对齐文本

　　text-align：设置文本对齐方案

　　 left：左对齐，默认值； right 右对齐；justify 两边对齐，经过调整文本之间空格的大小来实现；center 居中对齐

七、首行缩进

　　text-indent 用来设置首行缩进。在采起默认字体大小时，设置为32px表示首行空出2个字符的位置。

　　text-indent：2em 表示跟随字体变化永远空出2个字符的位置。

　　当给它一个正数，表示向右移动指定的像素，负数表示向左移动指定的像素（这样能够将一些字符隐藏起来，不但愿用户看见，但搜索引擎能够看见）

八、行高

　　在css中没有直接提供设置行间距方式，能够经过使用设置行高的方式来设置。

　　line-height：设置行高。行高相似上学时的单线本，单线本是一行一行的，线与线之间的距离就是行高，网页中文字也是处在两行之间去显示，默认垂直居中显示。

因此行间距(文字之间的行间距)=行高-字体大小。从上到下：行的横线—线与第1行文字的间距—第1行文字—线与第1行文字的间距—行的横线—线与第2行文字间距—第2行

文字—线与第2行文字的间距—行的横线。行高指2个横线之间的距离，行间距指两行文字之间的距离。

　　行高能够接受一个像素或者百分数。百分数是相对于字体的大小去计算

　　行高也能够指定数字n，则行高会设置字体大小的n倍。

　　对于单行文本，可将行高设置与父元素同样，这样能够在父元素垂直居中。原理是文字在两行之间默认垂直居中。

　　写法：font：30px/30px 表示字体30px，行高30px，若不指定，有默认值