提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
一、HTML学习总结
以下是一个完整的html页面的结构:
可以发现每个结构都是由<标签>内容</标签>构成。例如上图中h1为一个标题,p是一个段落。
总而言之,HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本,添加图片,创建链接、输入表单、框架和表格等等,并可将之存为文本文件,浏览器即可读取和显示。
HTML 的关键是标签,其作用是指示将出现的内容。要想学习HTML的各种标签可以参考以下网站:菜鸟驿站
二、CSS学习总结
1.何为CSS
在HTML中,我们可以设计网页上的内容,但是缺无法让页面展示的更好看(HTML的页面默认为浏览器的默认样式),所以我们如何设计自己想要展示的页面呢,这就需要CSS来帮忙。其实,在HTML文件中也可以设计样式,但是我们通常将web内容和页面分开来编写代码,是为了更方便、有效。
2.CSS语法
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:
CSS声明总是以分号 ; 结束,声明总以大括号 {} 括起来:p {color:red;text-align:center;}
3.CSS 选择器
一般的css选择器有三种:id选择器 class选择器 标签选择器。其中的规则分别是:
#id、.类、标签名。
4.示例
背景
background-color ,background-image,background-repeat,background-attachment,background-position,分别是背景颜色、背景图像、设置定位与不平铺等等。
盒子模型
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。
下面的图片说明了盒子模型(Box Model):
Margin(外边距) - 清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像。
定位
position 属性指定了元素的定位类型。position 属性的五个值:
static:HTML 元素的默认值,即没有定位,遵循正常的文档流对象。
relative:元素的位置相对于浏览器窗口是固定位置。
fixed:相对定位元素的定位是相对其正常位置。
absolute:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于根元素。
sticky:基于用户的滚动位置来定位。
总结
以上就是我对于HTML和CSS的简单总结,只描述了一些常用的功能。学习完后,只是对web前端设计有了初步了解,要想自己完整地编写一个好的页面还比较困难。