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