前端（三）

作者: 玄非氪命 | 来源:发表于2018-06-04 20:57 被阅读0次

2018年，前端应该怎么学？
前端总结
前端（三）
七周从前端入门到前端开发工程师
2021年怎么自学前端？
微前端技术
前端三大框架小结
前端第一天
HTML
前端基础进阶系列

文本标签:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>small于big标签</title>
</head>
<body>
<p>我是p中的<small>small标签</small></p>
<p>我是p中的<big>big标签</big></p>
<p><cite>《三国演义》</cite>是罗贯中写的</p>
<!--q标签表示短引用(行内引用)-->
<p>你是<q>张圈</q>吗</p>
<!--blockquote表示长引用 (块引用)-->
<div>
    曾子曰:<blockquote>吾日三省吾身</blockquote>
</div>
<!--sup表示上标-->
<p>8<sup>3</sup></p>
<p>张圈<sup><a href="#">[1]</a></sup></p>
<!--sub表示下标-->
<p>O<sub>2</sub>o</p>
<!--del删除横线-->
<p><del>2000</del>
    <br>500</p>
<!--ins下划线-->
<p>身高<ins>180cm</ins></p>
<!--pre 保留所有格式-->
<pre>
    i = 0
    while i>5:
        print(i)
</pre>
<pre>
    <!--code 写代码-->
   <code>
    while True:
        print('world')
   </code>
</pre>
</body>

</html>

运行结果

列表:

1. 无序列表

使用ul和li来创建一个无序列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序列表</title>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</body>
</html>

效果

2. 有序列表

使用ol和li来创建一个无序列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序列表</title>
</head>
<body>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
</body>
</html>

效果

3.定义列表

使用dl、dd、dt来创建一个定义列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义列表</title>
</head>
<body>
<dl>
<dt>定义项1</dt>
<dd>定义描述1</dd>
<dt>定义项2</dt>
<dd>定义描述2</dd>
<dt>定义项3</dt>
<dd>定义描述3</dd>
</dl>
</body>
</html>

效果

单位：

长度单位

像素px
像素是我们在网页中使用得最多的一个单位一个像素就相当于屏幕中的一个小点我们的屏幕实际上就是由这些像素点构成的但是这些像素点是不能直接看见的 - 不同显示器一个像素的大小也不相同显示效果越好、越清晰，像素就越小，反之像素越大
百分比%
也可以将单位设置为一个百分比的形式这样浏览器将会根据其父元素的样式来计算该值 - 使用百分比的好处是，当父元素的属性值发生变化时，子元素也会按照比例发生改变 - 在我们创建一个自适应的页面时，经常使用百分比作为单位
em
em和百分比类似，它是相对于当前元素的字体大小来计算的 - 1em = 1font-size - 使用em时，当字体大小发生改变时，em也会随之改变 - 当设置字体相关的样式时，经常会使用em

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单位</title>
    <style type="text/css">

        .box{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        .box1{
            width: 50%;
            height: 25%;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1"></div>
</div>
</body>
</html>

效果

颜色的单位:

在CSS可以直接使用颜色的单词来表示不同的颜色

红色：red

蓝色：blue

绿色：green

可以使用RGB值来表示不同的颜色

例如：rgb(红色的浓度,绿色的浓度,蓝色的浓度);

颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有

浓度也可以采用一个百分数来设置，需要一个0% - 100%之间的数字使用百分数最终也会转换为0-255之间的数 0%表示0 100%表示255

可以使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样，只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色，每组表示一个颜色第一组表示红色的浓度，范围00-ff 第二组表示绿色的浓度，范围00-ff 第三组表示蓝色的浓度，范围00-ff。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>颜色的单位</title>
    <style type="text/css">
        /*单词：red blue green
        RGB：三原色(红浓度，绿浓度，蓝浓度)
        0~255
        0%~100%
        16进制: 00~FF #红，黄，蓝
                红色：#FF0000
        */
        .box{
            width: 100px;
            height: 100px;
            /*background-color: red;*/
            /*background-color: rgb(45,56,89);*/
            /*background-color: rgb(100%,72%,22%);*/
            background-color: #FF0000;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

字体的样式：

通过font-family可以指定文字的字体当采用某种字体时，如果浏览器支持则使用该字体，如果字体不支持，则使用默认字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体的样式</title>
    <style type="text/css">
        /*默认16px*/
         p{
            color: red;
            font-size: 40px;
            font-family: 华文隶书;
        }
    </style>
</head>
<body>
<p class="p1">秦失其鹿</p>
<p id="p2">天下共逐之</p>
</body>
</html>

效果

字体分类：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体的分类</title>
    <style type="text/css">
        p{
            font-family: Arial,华文隶书,华文彩云,Serif;
        }
    </style>
</head>
<body>
<p style="font-size: 50px;font-family: serif">衬线字体,我是文字,ABCabc,123一</p>
<p style="font-size: 50px;font-family: sans-serif">非衬线字体,我是文字,ABCIabci,123一</p>
<p style="font-size: 50px;font-family: monospace">等宽字体,我是文字,ABCIabci,123一</p>
<p style="font-size: 50px;font-family: cursive">草书字体,我是文字,ABCIabci,123一</p>
<p style="font-size: 50px;font-family: fantasy">虚幻字体,我是文字,ABCIabci,123一</p>

</body>
</html>

效果

字体的样式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
    <style type="text/css">
        .p1{
            color: red;
            font-family: 华文隶书;
            /*设置一个文字大小*/
            font-size: 40px;
             /*设置文字斜体*/
            font-style: italic;
             /*设置文字加粗*/
            font-weight: bold;
            /*设置一个小型大写字母*/
            font-variant: small-caps;
        }
        .p2{
            color: blue;
            font-size: 50px;
            font-style: italic;
            font-family: 华文彩云;

            font-variant: small-caps;
        }
        .p3{
            font: italic small-caps bold 60px "华文楷体";
        }

    </style>
</head>
<body>
<p class="p1">我是p标签ABCDabcd</p>
<p class="p2">我是p标签ABCDabcd</p>
<p class="p3">我是p标签ABCDabcd</p>

</body>
</html>

效果

行间距：

在css中只能通过调整行高与字体大小来调整行间距.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行间距</title>
    <style type="text/css">
        .p1{
            line-height: 45px;
            font-size: 25px;
            font-family: 华文隶书;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color:mediumspringgreen;
            line-height: 200px;
        }
    </style>
</head>
<body>
<div class="box">
    <center><a href="#">超链接</a></center>
</div>
<p class="p1">秦孝公据崤函之固，拥雍州之地，君臣固守以窥周室，有席卷天下，包举宇内，囊括四海之意，并吞八荒之心。当是时也，商君佐之，内立法度，务耕织，修守战之具，外连衡而斗诸侯。于是秦人拱手而取西河之外。 孝公既没，惠文、武、昭襄蒙故业，因遗策，南取汉中，西举巴、蜀，东割膏腴之地，北收要害之郡。诸侯恐惧，会盟而谋弱秦，不爱珍器重宝肥饶之地，以致天下之士，合从缔交，相与为一。当此之时，齐有孟尝，赵有平原，楚有春申，魏有信陵。此四君者，皆明智而忠信，宽厚而爱人，尊贤而重士，约从离衡，兼韩、魏、燕、楚、齐、赵、宋、卫、中山之众。于是六国之士，有宁越、徐尚、苏秦、杜赫之属为之谋，齐明、周最、陈轸、召滑、楼缓、翟景、苏厉、乐毅之徒通其意，吴起、孙膑、带佗、倪良、王廖、田忌、廉颇、赵奢之伦制其兵。尝以十倍之地，百万之众，叩关而攻秦。秦人开关延敌，九国之师，逡巡而不敢进。秦无亡矢遗镞之费，而天下诸侯已困矣。于是从散约败，争割地而赂秦。秦有余力而制其弊，追亡逐北，伏尸百万，流血漂橹；因利乘便，宰割天下，分裂山河。强国请服，弱国入朝。 延及孝文王、庄襄王，享国之日浅，国家无事。 及至始皇，奋六世之余烈，振长策而御宇内，吞二周而亡诸侯，履至尊而制六合，执敲扑而鞭笞天下，威振四海。南取百越之地，以为桂林、象郡；百越之君，俯首系颈，委命下吏。乃使蒙恬北筑长城而守藩篱，却匈奴七百余里；胡人不敢南下而牧马，士不敢弯弓而报怨。于是废先王之道，焚百家之言，以愚黔首；隳名城，杀豪杰；收天下之兵，聚之咸阳，销锋镝，铸以为金人十二，以弱天下之民。然后践华为城，因河为池，据亿丈之城，临不测之渊，以为固。良将劲弩守要害之处，信臣精卒陈利兵而谁何。天下已定，始皇之心，自以为关中之固，金城千里，子孙帝王万世之业也。 秦王既没，余威震于殊俗。然陈涉瓮牖绳枢之子，氓隶之人，而迁徙之徒也；才能不及中人，非有仲尼，墨翟之贤，陶朱、猗顿之富；蹑足行伍之间，而倔起阡陌之中，率疲弊之卒，将数百之众，转而攻秦；斩木为兵，揭竿为旗，天下云集响应，赢粮而景从。山东豪俊遂并起而亡秦族矣。 且夫天下非小弱也，雍州之地，崤函之固，自若也。陈涉之位，非尊于齐、楚、燕、赵、韩、魏、宋、卫、中山之君也；锄懮棘矜，非铦于钩戟长铩也；谪戍之众，非抗于九国之师也；深谋远虑，行军用兵之道，非及向时之士也。然而成败异变，功业相反，何也？试使山东之国与陈涉度长絜大，比权量力，则不可同年而语矣。然秦以区区之地，致万乘之势，序八州而朝同列，百有余年矣；然后以六合之家，崤函为宫；一夫作难而七庙隳，身死人手，为天下笑者，何也？仁义不施而攻守之势异也。
</p>
</body>
</html>

效果

盒子模型：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style type="text/css">
        .box{
            /*内容区的大小 */
            width: 100px;
            /*使用width来设置盒子内容区的宽度*/
            height: 100px;
            /*使用height来设置盒子内容区的高度*/
            background-color: chartreuse;
            /*border-width: 20px;*/
            /*border-width:边框的宽度*/
            /*border-color:边框颜色*/
            /*border-style:边框的样式*/
            border-width: 20px;
            border-top: 10px;
            border-top-color: #FF0000;
            border-bottom-color: aqua;
            border-left-color: blue;
            border-right-color: #ffff77;
            border-style: solid;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

效果

边框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 200px;
            background-color: blue;
            border-color: #FF0000;
            border-style: solid;
        }
        .box1{
            width: 250px;
            height: 250px;
            background-color: #ffff77;
            /*简写*/
            border: blue solid 20px;
            /*右边框为空*/
            border-right: none;
        }

    </style>
</head>
<body>
<div class="box1"></div>
<div class="box"></div>
</body>
</html>