WEB页面前期基础部分总结

一、HTML

        HTML的主要学习内容就是认识和学习各种标签的用法以及属性。标签(标记)就是由w3c提前制定好的一些针对于html文档的标记符号,这些符号是具备各自的含义的，具体在html中的变现形式就是由 < > 括起来的对象；属性是额外的对标签进行描述的信息，属性的格式通常是:  key=value  键值对的形式。

1、元素的分类

元素通过在页面中的展示以及元素特性可以分为三大类：

块元素(block element)：

        特点:

                （1）块元素具有布局特点,一般常用页面的整体布局 

                （2）块元素独占(其父元素)页面的一行

                （3）块元素可以嵌套任何类型的元素(除p元素以外,p元素中不能嵌套任何的块元素)

                （4）块元素可以设置宽,高  默认的宽度是其父元素的宽度

                （5）块元素默认高度是由内容决定的

行内元素(inline element)：

        特点:

                （1）正常情况下,行内元素是不会换行的

                （2）行内元素会在一行排不下时进行换行

                （3）行内元素不能设置宽 高  行内元素的宽和高都是由其内容决定的

                （4）行内元素一般不会嵌套块级元素,大多数是嵌套文本或者其他的行内元素

行内块元素(inline-block element):

         特点:

                （1）行内块元素不会独占一行,在一行排列

                （2）可以设置宽高(默认是内容的宽 高)

3、常用的标签

 （1）列表标签：列表分为三种，有序列表、无序列表和定义列表。

        有序列表：有序列表是使用ol标签来创建的，列表中的每一项是通过li标签来代表；

        无序列表：无序列表是使用ul标签来创建的，它是无序的，没有顺序标号，无序列表中的每一项也是通过li标签来代表的；

          定义列表：定义列表是使用dl标签来创建的，使用dt来表示定义的内容或者小标题，使用dd来对小标题解释说明。

        总结：

            1.ul和ol都是块级元素，通常作为布局容器使用

            2.ul和ol的子项应该是li元素

            3.li元素是块级元素，可以嵌套任何其他元素

（2）超链接标签：即a标签，是一个行内元素，里面可以嵌套除自身以外的任何标签。a标签的偶用是：

        1.可以访问到外部网络的资源

        2.可以访问本地网页资源

        3.可以作为锚点，在当前页面指定位置进行定位跳转

（3）img标签：用于渲染图片资源的标签， img元素是行内块元素（替换元素），空标签。img标签具备的属性有;

 属性：

        1. src： 指定外部的图片资源路径，或者本地图片资源路径

        2. alt：对图片额外信息的描述，方便SEO检索到该图片，当图片无法加载时，显示alt中信息，提示用于，该图片的大致内容

        3.  width：设置图片的宽度，单位px

        4. hight：设置图片的高度，单位px

                注意：一般只设置宽度或者高度，两者选一即可，另一个属性让它自适应。

---

二、CSS

        CSS是网页设计的一个部分，主要用于设置网页整体的布局，以及元素的样式设置。CSS主要学习了各种选择器，以及页面布局所需使用的一些属性。

1、选择器的分类

        基础选择器：有元素选择器、id选择器、类选择器和通配符选择器，他们是通过元素的名称、id值或者类名选中对应的元素，使用比较简单。

        复合选择器：分为交集选择器和并集选择器，可以用于多个元素需要设置同一个属性时使用。

        关系选择器：分为子代选择器、后代选择器、兄弟选择器。他们通过各个元素之间的关系，可以准确地选择到对应的元素。

        属性选择器：是通过元素的属性值来选择对应的元素。

        伪类选择器：使用语法是： ：伪类名，通常情况下，不会单独使用，会和其他选择器配合使用。

---

三、总结

        通过第一个阶段的学习，让我从大学里分散自由的上课模式转换成了全天有课的状态，也让我对网页设计的关键步骤和大体框架有了一定的了解。总的来说，这一阶段学习的内容比较基础且又多又杂，较快的上课节奏需要我自己逐渐适应，当天的学习内容也学要我在当天就及时消化总结。  

1、学到的网页设计方法

        当开始写一个网页的时候，首先要先将网页的结构划分好，比如整个网页分成几个大块，大块里面又包含的小块，结构划分好以后，写代码的时候也先将大体框架写好，从外到内逐步添加完善内容，一块内容写好后接着就把这一块的属性写好。

2、遇到的问题

        在css的相关知识点中，元素的浮动、定位的应用，还有最后学的过渡属性和动画属性运用的不是很熟练，有时候一起用的时候还会有点混乱。有一些属性的内容和特点记得不清楚，要用的时候不能马上反应过来要用哪种属性才合适，需要去翻前面的笔记才行。 

---