HTML&CSS 学习总结

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

---

一、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前端设计有了初步了解，要想自己完整地编写一个好的页面还比较困难。