HTML &amp；CSS学习总结

HTML前言：

 HTML是一种超文本标记语言，这款语言可以用任何文本编辑器撰写，撰写完成之后可以直接在将文件名修改为“名称+.html”即可放置在浏览器中进行运行了。HTML语言的运行过程中需要依靠于浏览器的使用，它的兼容性是很强的，通常使用的HTML的撰写软件平台是MicroSoftWare旗下的VS code 。

关于HTML的学习过程中，首先就是接触到了许多的html标签，这些标签有标记文本的，有标记图片的，这写标签的混合使用是的html界面更加的丰富：在HTML中首先使用的一些基础标签有：h标签，p标签，a标签，span标签，div标签，img标签，表格table标签以及列表标签，接下来就对这几种一一进行说明： 

h标签多为一种对标题进行分级渲染的标签，根据级数的不同依次将其分为一级标题h1,二级标题为h2,三级标题为h3,四级标题为h4，五级标题为h5,六级标题为h6.这些标签的展示如下所示，标签的字体大小是按照从大到小的顺序依次递减的：

 p标签的主要作用是用来书写一个段落的，比如书写小作文或者一段商品的叙述，p标签也自带的有换行的特点，如下所示：

 

a标签的主要作用是进行页面跳转的作用，比如一些网页的跳转，在制作网页时，往往是需要进行页面的跳转操作，这样可以使得网页之间的连通更加流畅，如下图中所示的样例，可以通过点击a标签进行页面的跳转，点击该标签上的文字，然后就可以实现页面的跳转的。

 

 span标签就是一个区块元素，它主要用于占取指定数据的区块，而不是按行占取，这个标签与div容器标签的最大的区别就是是容器所占页面空间的大小，其中div容器每次使用时就会占取一行的空间，如下图中所示，根据如下所示的对”Hello Json"使用不同的容器标签就可以得知所占空间的大小是不同的：

 

 

img标签主要是用来存放一个照片，这个照片的存放形式主要是利用src来进行的，在src中主要可以存放图片的绝对路径或者网络中的相对路径，其中绝对一般是指将图片放置在一个项目的路径下的，这样就不会因为网络的原因，从而就会使得图片加载不出来，但是使用绝对路径容易使得数据保存的方式具有局限性，两种路径下的图片有利也有弊，在不同的情况下从而使用不同的路径就可以使得项目更加的具有健壮性，如下图中所示使用网络中的绝对路径地址进行的img标签的使用，如下图中所示使用相对路径就可以完成对图片的读取：

 

table标签主要是为了使得数据展示更加的具有清晰可见的特点，这样就可以体现出table标签的作用，它可以将许多的数据分类呈现出来，比如呈现一个学生姓，名以及年龄的表格，实现代码如下图中所示，以及最终的表现形式(说明：在该代码中table即代表了表格，tr标签代表的是信息，th表示的就是标题的一行，td表示的就是在该标题行下所有的列的信息，它们之间相互联系，而对于该表之中只有一个形式上的表而没有横线，这就牵扯到了CSS标签的信息)：

 

列表标签的使用，在比如刻画一个水果种类下有许多种特定的水果的时候，列表标签的作用就可以体现出来，它的主要标签形式有<ul></ul>,并且在该主标签下还有<li></li>的形式。如下图中所示，它的表示特点主要是按照竖直方向进行排列的，如下所示：

HTML总结：

前面只例举了一些我认为十分重要的html标签，当然还有许多的html标签没有列举，html很多标签和属性其实也同样起着样式的作用即CSS语言之间的功能，例如对文字设置粗体，斜体，删除线，下划线(strong，em，del，ins)标签。在HTML标签语言的学习过程中，遇到了许多的问题，在使用一些例如<br>标签时，由于将这些小标签没有理解透彻而使得在使用页面的过程中遇到了许多的困境，但是在最后将这个标签理解完成之后，就知道这个标签是换行的作用。HTML这种超文本标记语言具有很强的兼容性，在以后制作前端页面时的使用也是很普遍的。

CSS标签语言的特点：

对于一个精美的前端界面，不只是有html的单纯的标记语言，还要有CSS标签对HTML的数据容器进行排版布局，从而使得页面更加的漂亮，根据如上所介绍的HTML个性化标签所展示的界面效果就可以得出，对于一个界面没有CSS标签的修饰就会变得格外的丑陋，因此如下我就会使用CSS的一些常用标签来使得前端界面更加的具有美感，在介绍之前我会提出几种让CSS语言生效的方法，首先可以使用id选择器，id选择器的使用方法是在HTML标签中使用id=“”，这个id选择器的特点就是在整个html的制作过程中是不能够重复的，它的使用方式就是#id{}，还可以使用class=""的类选择器，它的使用方式就是 .class{}，还可以使用标签选择器，比如说对所有的超链接标签进行修改时，就可以使用a{}；对于CSS标签语言的生效方法也可以直接在html标签中加一个style也可以使得CSS标签语言生效。如下简述几种常见的CSS标签语言：

1.设置背景图片：background-image: url("图片地址");

2.设置一个界面的宽高：width: _;height:_ ;"_"中填写相应的大小就可以完成。

3.设置一个方框的边界为圆形：border-radius: 50%;

4.设置两个html标签并排放置：justify-content: space-bettween;

5.设置一个标签的位置：position:_;position的位置一般有center,relative,absolute;

6.设置颜色：background-color:__;"__"中填写相应的颜色代码即可

7.关于字体：对于字体的情况，我们可以设置字体的大小即font-size:__;也可以设置字体的颜色即font-color:__;也可以设置字体的风格即font-style:__；以及等等关于字体的CSS标签语言。

关于HTML与CSS之间的相互使用的特点远不止我所总结的这些，毕竟科学技术在不断的发展，CSS标记语言也具有很多的属性，在这里只列举了我所常常使用的一系列的html与CSS标签语言，博客还会持续更新，一起期待新技术的革新。以下列举了我所使用HTML+CSS制作的一个简易的登录界面(由于代码中还有JS部分，因此我只截取了部分信息，来感受HTML与CSS语言的魅力)：

关于CSS语言设置样式我列举了如下所示的标签语言：

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Open Sans', sans-serif;
      line-height: 1.5;
      color: #444;
    }

    h3 {
      color: #333;
      margin-bottom: 0.3rem;
    }

    .container {
      max-width: 30rem;
      margin: 1.6rem 1rem 1rem;
    }

    span {
      display: block;
      background-color: #ed3f4f;
      color: white;
      font-size: 1.3rem;
      font-weight: 700;
      margin-right: 1.2rem;
      padding: 0.1rem 0.7rem;
      border-radius: 5px;
    }

    /* Generic Styles End */

    .container {
      display: flex;
    }

在该CSS标签语言中，*表示的就是全局标签，就是将该界面中所有的标签的样式设置为据上下边距距离为0，距左右边距距离为0。在<style></style>标签中使用了许多的选择器以及css语言，font-family设置了字体家族，其表示的方法就是使用逗号隔开然后将每一个字体写入其中，其中的选择器有标签选择器，还有类选择器，使用“.”号隔开。

总结

  通过为期八周的Web课程的学习，我学到了很多关于网页制作的原理，我以前常用框架Vue来对前端界面的制作，因此对于其中的框架的制作原理还是比较模糊，因此对于一些新奇的东西还需要继续学习，以上总结的就是HTML与CSS中我常用到的一些标记语言。