HTML & CSS 学习总结

HTML：

一.HTML 简介

1. 网页

网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。
HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。HTML 不是一种编程语言，而是一种标记语言 (markup language)。标记语言是一套标记标签 (markup tag)。

网页是图片、链接、文字、声音、视频等元素组成, 其实就是一个html文件(后缀名为html)
网页生成制作: 有前端人员书写 HTML 文件, 然后浏览器打开,就能看到了网页.
HTML: 超文本标记语言, 用来制作网页的一门语言. 有标签组成的. 比如 图片标签 链接标签 视频标签等。

2.浏览器

浏览器是网页显示、运行的平台。

3.web标准

Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

二.HTML 标签

1. HTML 语法规范

HTML 标签是由尖括号包围的关键词。

HTML 标签通常是成对出现的，例如 和 ，我们称为**双标签。**标签对中的第一个标签是

开始标签，第二个标签是结束标签。有些特殊的标签必须是单个标签。

2. HTML 基本结构标签

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写，HTML页面也称为 HTML 文档。

HTML 文档的的后缀名必须是 .html 或 .htm ，浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。

此时，用浏览器打开这个网页，我们就可以预览我们写的第一个 HTML 文件了。

3. 网页开发工具

4. HTML 常用标签

4.1 标签语义

学习标签是有技巧的，重点是记住每个标签的语义。简单理解就是指标签的含义，即这个标签是用来干嘛的。根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

4.2标题标签

为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML 提供了6 个等级的网页标题。

4.3 段落和换行标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。

在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签 <br />。

4.4 文本格式化标签

在网页中，有时需要为文字设置粗体、斜体 或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。

标签语义: 突出重要性, 比普通文字更重要。

4.5 <div> 和<span>标签

4.6 图像标签和路径

4.7 超链接标签

5. HTML 中的注释和特殊字符

5.1 注释

如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。
HTML中的注释以“<!--”开头，以“ -->”结束。

5.2 特殊字符

在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用其他的字符来替代。

6.表格标签

6.1.表格的主要作用

1.表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理

2.表格不是用来布局页面的,而是用来展示数据的。

6.2 表格的基本语法

6.3 表头单元格标签

6.4 表格属性

表格标签这部分属性我们实际开发我们不常用，后面通过 CSS 来设置.

目的有2个:

\1. 记住这些英语单词,后面 CSS 会使用.

\2. 直观感受表格的外观形态

6.5 表格结构标签

使用场景:因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成 表格头部和表格主体两大部分.
在表格标签中，分别用：<thead>标签 表格的头部区域、<tbody>标签 表格的主体区域. 这样可以更好的分清表格结构。

CSS：

一、什么是CSS

CSS全称Cascading Style Sheets，叫做级联样式表，是用来美化之前用html构建的网页的显示内容；如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。

二、CSS语法

1、格式构成

一条css样式规则由两部分构成，选择器和{}内包含的声明（一条或多条）。

2、选择器

选择器用于在页面中找到/选择需要应用这个样式的对象，选择器有前面举例用到的的元素选择器还有id和class选择器；其中class选择器比较常用。

3、如何生效

要使css生效我们总共有三个方法：外部样式表，内部样式表，内联样式。

4、颜色、尺寸 与对齐

在网页中颜色的显示，使用color属性，其中跟在color后面的值就是我们现在要讨论的地方，值可以直接输入颜色的英文名或者颜色RGB16进制值。

5、盒子模型

盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的。

6、边框与边距

边框

在class选择器内定义的css样式规则中，其中border属性作用是显示一个四边的框把文字框起来，然后在其值里面可以更改丰富他的显示样式，此外还有其他几种属性形式可以改变样式。

边距

7、定位

用于定位的属性为position，该属性有以下值：
static 静态 relative 相对 fixed 固定 absolute 绝对。

static（静态）

是position的默认值，元素按照正常方式显示。
position: static

relative（相对）

relative作用是使元素相对与其在静态时的位置按照设定参数进行偏移。

fixd（固定）

position: fixd
将元素固定在屏幕的某个位置上，滑动滑轮元素也依旧不改变元素在屏幕上的位置
此时元素固定的位置仍由top, bottom, left, right属性确定，但相对的是视口（viewport，就是浏览器的屏幕可见区域）。

absolute（绝对）

设置为绝对定位position: absolute;，将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。
如果该元素的所有父元素都没有设置定位属性，那么就相对于这个父元素。所以绝对定位也是相对于父元素进行的位置固定。

8、溢出

9、浮动

浮动的属性float，会使水平方向上的某元素向左或右进行移动，其左右的元素也会重新排列；这种样式可以使图像和文本形成合理的布局。

10、不透明度

不透明度的属性opacity，对任何元素（不过常用于图片）设置不透明度。值在[0.0～1.0]之间，值越低，透明度越高。

11、组合选择器

12、伪类与伪元素

伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。

小结：通过学习HTML和CSS，我学会了网页页面的制作和设计，它们对我以后的学习帮助也是很大。