前端学习自学笔记：day01

在这里要跟大家说声抱歉,本人拖更太久啦.现在在自学前端,我每天会把自己的总结笔记发上来分享给大家,希望对大家有帮助.

在此之前先为大家显示下前端工程师的路线图:

第一天的笔记:HTML AND CSS

早上学习知识：

1.注册freeCodeCamp&GitHub

2.freeCodeCanp基本操作

3.代表一个HTML元素，h1是一级标题。

h2,3,4....代表2，3，4。。。。级标题

注释：浏览器会自动地在标题的前后添加空行。

注释：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

4.p是段落，格式为

.

注释：浏览器会自动地在段落的前后添加空行。

不能忘记结束标签。

5.注释 注释：开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。

6.lorem ipsum text 占位符

7.style 样式 (以inline style(内联样式)为例)

颜色属性 color 例：CatPhotoApp

字号属性 font-size 例：

字体属性 font-family 例：

8.元素选择器

例：

.blue-text {

color: blue;

}

元素上应用：

CatPhotoApp

中午补充的知识点：

之间的文本描述网页

之间的文本是可见的页面内容

HTML链接是通过标签进行定义的。

1.使用新窗口打开链接 target="_blank"

HTML图像是通过标签进行定义的。

例：

HTML元素语法

- HTML元素以开始标签起始

- HTML元素以结束标签终止

- 元素的内容是开始标签与结束标签之间的内容

- 某些HTML元素具有空内容

- 空元素在开始标签中进行关闭

- 大多数HTML元素可拥有属性

注意：大多数HTML元素可以嵌套（可以包含其他HTML元素）

例：

This is my first paragraph.

空的HTML元素

没有内容的HTML元素被称为空元素。空元素是在开始标签中关闭的。

例：

HTML建议使用小写标签。

HTML属性

HTML标签可以拥有属性。

属性总是以名称/值对的形式出现并且在开始标签中规定的。

例：

这是一个例子

属性例子：

对齐标题

为标题添加背景颜色

HTML建议使用小写属性值。

HTML必须为属性值添加双引号。

HTML水平线

标签在HTML页面中创建水平线。（可用于分割内容）

例：

This is a paragraph

This is a paragraph

如何查看其他网页的源代码

单击右键，然后选择“查看源文件”（IE）或“查看页面源代码”（Firefox），

其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。

HTML拆行（换行）

例：

This is

a para

graph with line breaks

注意：当显示页面时，浏览器会重新排版，会自动忽略掉多余的空格和空行，所以

多余的空行和空格会被认为是一个空格。

字体加粗：

例： www.DIVCSS5.com